@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">
                <label for="fee">Satış Fiyatı ({{ CURRENCY }})</label>
                <input type="text" id="fee" name="fee" value="{{ $data->fee }}">
            </div>
            <div class="form-item">
                <label for="sale_fee">İndirimli Fiyat ({{ CURRENCY }})</label>
                <input type="text" id="sale_fee" name="sale_fee" value="{{ $data->sale_fee }}">
            </div>
            <div class="flex items-center gap-4 mt-2">
                <input type="checkbox" id="is_fee_show" name="is_fee_show" {{ $data->is_fee_show == 1 ? "checked" : ""}}>
                <label for="is_fee_show">Fiyat Görünsün mü?</label>
            </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>

            <h3 class="text-black text-xl font-semibold mt-5">Envanter</h3>
            <div class="form-item">
                <label for="stock_code">SKU</label>
                <input type="text" id="stock_code" name="stock_code" value="{{ $data->stock_code }}">
            </div>
            <div class="form-item">
                <label for="stock_barcode">Barkod</label>
                <input type="text" id="stock_barcode" name="stock_barcode" value="{{ $data->stock_barcode }}">
            </div>
            <div class="form-item">
                <label for="stock_qty">Stok Adedi</label>
                <input type="text" id="stock_qty" name="stock_qty" value="{{ $data->stock_qty }}">
            </div>


            <h3 class="text-black text-xl font-semibold mt-5">Kargo</h3>
            <div class="form-item">
                <label for="stock_desi">Desi</label>
                <input type="number" id="stock_desi" name="stock_desi" min="0" max="20000" value="{{ $data->stock_desi }}">
            </div>

            <h3 class="text-black text-xl font-semibold mt-5"> Anasayfa Düzeninde </h3>
            <div class="flex items-center gap-4">
                <input type="checkbox" id="best-seller-is-view" name="best_seller_is_view" {{ $data->best_seller_is_view == 1 ? "checked" : ""}}>
                <label for="best-seller-is-view">En Çok Satanlarda Görünsün mü?</label>
            </div>
            <div class="form-item">
                <label for="best-seller-rank">En Çok Satanlarda Hangi Sırada Görünsün [{{ $data->best_seller_rank }}]</label>
                <input type="range" id="best-seller-rank" name="best_seller_rank" min="0" max="3000" step="1" value="{{ $data->best_seller_rank }}">
            </div>


            <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>

        document.querySelector('input[type="range"]').addEventListener('input', event => {
            document.querySelector('label[for="best-seller-rank"]').innerHTML = 'En Çok Satanlarda Hangi Sırada Görünsün [' + event.target.value + ']';
        })

        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