@extends('admin.layout.index')
@section('title', 'Ürün Düzenle')
@section('content')
    <section class="content-body">
        <form action="" class="form-container" enctype="multipart/form-data" method="POST">
            @csrf
            <h3 class="text-black text-xl font-semibold">Temel Bilgiler</h3>
            <div class="form-item">
                <label for="name">Ürün Adı</label>
                <input type="text" id="name" name="name" value="{{ $data->name }}">
            </div>


            <div class="form-item mt-5 flex items-center justify-between">
                <h3 class="text-black text-xl font-semibold">Medya</h3>
                <button class="border border-green-300 bg-green-50 hover:bg-green-200 px-3 py-1 rounded-md" type="button" id="addNewImage">Görsel Ekle</button>
            </div>
            <div id="imagesContainer">
                @foreach(json_decode($data->images) as $key => $image)
                    <div class="grid grid-cols-12 gap-4" id="image_container">
                        <div class="form-item col-span-11 flex flex-col gap-4">
                            <div>
                                <label for="{{ md5(explode('.', $image)[0]) }}"> Görsel </label>
                                <input type="hidden" name="images_old[{{ explode('.', $image)[0] }}]" value="{{ $image }}">
                                <input type="file" id="{{md5(explode('.', $image)[0])}}" name="images[{{ explode('.', $image)[0] }}]">
                            </div>
                            <div>
                                <button class="border border-rose-300 bg-rose-50 hover:bg-rose-200 px-3 py-1 rounded-md" type="button"> Sil</button>
                            </div>
                        </div>
                        <div class="col-span-1">
                            <img src="{{ site('public/upload/products/' . $image ) }}" class="mt-[32px] max-w-[100px] rounded-lg" alt="">
                        </div>
                        @if(count(json_decode($data->images)) !== $key+1)
                            <div class="divider col-span-12"></div>
                        @endif
                    </div>
                @endforeach
            </div>

            <h3 class="text-black text-xl font-semibold mt-5">Ürün Detayı</h3>
            <div class="form-item">
                <label for="brand"> Marka </label>
                <select id="brand" name="brand" data-select="">
                    @foreach($brands as $brand)
                        <option value="{{ $brand->id }}"{{ $data->brand == $brand->id ? ' selected' : '' }}>{{ $brand->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-item">
                <label for="category"> Kategori </label>
                <select id="category" name="category[]" data-select="" multiple>
                    @foreach($categories as $category)
                        <option value="{{$category['data']->id}}"{{ in_array($category['data']->id, json_decode($data->categories, false)) ? ' selected' : '' }}>{{$category['name']}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-item">
                <label for="filters"> Filtreler </label>
                <select name="filters[]" id="filters" data-select multiple>
                    @foreach($filters as $filter)
                        @foreach(json_decode($filter->fields) as $key => $field)
                            <option value="[{{ $filter->id }}, {{ $key }}]"{{ in_array("[$filter->id, $key]", json_decode($data->filters, false)) ? ' selected' : '' }}>{{ $filter->name }} → {{ $field }}</option>
                        @endforeach
                    @endforeach
                </select>
            </div>

            <div class="form-item">
                <label for="description"> Açıklama </label>
                <textarea name="description"
                          id="description"
                          cols="30"
                          rows="10">{!! $data->description !!}</textarea>
            </div>

            <div class="form-item">
                <label for="short_description"> Kısa Açıklama </label>
                <textarea name="short_description"
                          id="short_description"
                          cols="30"
                          rows="10">{!! $data->short_description !!}</textarea>
            </div>

            <div class="flex items-center justify-between mt-6 mb-2">
                <h3 class="text-black text-xl font-semibold">Varyant</h3>
                <button class="border border-green-300 bg-green-50 hover:bg-green-200 px-4 py-2 rounded-md" type="button" id="new-variant">
                    Varyant Ekle
                </button>
            </div>

            <div class="mb-2 hidden" data-role="all-variants-list">
                <ul class="flex flex-col border border-gray-300 rounded-lg">

                </ul>
            </div>

            <input type="hidden" data-role="variant-hidden-input" name="variant" value="{{$data->variant}}">
            <table class="w-full text-sm text-left text-gray-500 rounded-lg overflow-hidden" id="variants_table">
                <thead class="text-xs text-gray-700 uppercase bg-gray-200/20">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        <input type="checkbox" id="check_all_table">
                    </th>
                    <th scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            İSİM
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            SATIŞ FİYATI
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            İNDİRİMLİ FİYAT
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            STOK KODU
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            STOK DESİ
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            BARKOD
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            STOK ADEDİ
                        </div>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td colspan="8">
                        <h3 class="text-center py-10 flex gap-1 justify-center items-center"> <i class="icon-info-circle"></i>Henüz bir varyant eklemediniz. </h3>
                    </td>
                </tr>
                </tbody>
            </table>

            <div class="flex items-center justify-end gap-2">
                <button class="border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md" type="reset"> Sıfırla</button>
                <button class="border border-green-300 bg-green-50 hover:bg-green-200 px-4 py-2 rounded-md"> Kaydet</button>
            </div>
        </form>
    </section>
@endsection
@section('scripts')
    <script src="{{assets('js/admin/new-variant.js')}}"></script>
    <script>
        const generateRandomString = (length) => {
            const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
            let result = '';
            const charLength = chars.length;
            for (let i = 0; i < length; i++) {
                result += chars.charAt(Math.floor(Math.random() * charLength));
            }
            return 'e' + result;
        };

        const removeElement = (element) => {
            element.remove();
        };

        const addNewImage = document.querySelector('#addNewImage');
        const imagesContainer = document.querySelector('#imagesContainer');

        const createImageContainer = (uniq) => {
            const divContainer = document.createElement('div');
            divContainer.className = 'grid grid-cols-12 gap-4 my-4';
            divContainer.id = 'image_container';

            const innerDiv = document.createElement('div');
            innerDiv.className = 'form-item col-span-12 flex flex-col gap-4';

            const createFirstInnerDiv = (uniq) => {
                const firstInnerDiv = document.createElement('div');
                const label = document.createElement('label');
                label.setAttribute('for', uniq);
                label.textContent = 'Görsel';
                const hiddenInput1 = document.createElement('input');
                hiddenInput1.setAttribute('type', 'hidden');
                hiddenInput1.setAttribute('name', `images_old[${uniq}]`);
                hiddenInput1.setAttribute('value', '');
                const input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('id', uniq);
                input.setAttribute('name', `images[${uniq}]`);

                firstInnerDiv.appendChild(label);
                firstInnerDiv.appendChild(hiddenInput1);
                firstInnerDiv.appendChild(input);

                return firstInnerDiv;
            };

            const createSecondInnerDiv = (divContainer) => {
                const secondInnerDiv = document.createElement('div');
                const button = document.createElement('button');
                button.className = 'border border-rose-300 bg-rose-50 hover:bg-rose-200 px-3 py-1 rounded-md';
                button.setAttribute('type', 'button');
                button.textContent = 'Sil';

                button.addEventListener('click', (event) => {
                    removeElement(divContainer);
                });

                secondInnerDiv.appendChild(button);

                return secondInnerDiv;
            };

            innerDiv.appendChild(createFirstInnerDiv(uniq));
            innerDiv.appendChild(createSecondInnerDiv(divContainer));

            divContainer.appendChild(innerDiv);

            imagesContainer.appendChild(divContainer);
        };

        const handleButtonClick = (element) => {
            element.querySelector('button[type="button"]').addEventListener('click', (event) => {
                removeElement(element);
            });
        };

        document.querySelectorAll('#image_container').forEach((element) => handleButtonClick(element));

        addNewImage.addEventListener('click', (event) => {
            const uniq = generateRandomString(31);
            console.log(uniq);
            createImageContainer(uniq);
        });
    </script>
@endsection