@extends('admin.layout.index')
@section('title', 'Ürün Ekle')
@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">
            </div>
            <div class="form-item">
                <label for="fee">Satış Fiyatı ({{ CURRENCY }})</label>
                <input type="text" id="fee" name="fee">
            </div>
            <div class="form-item">
                <label for="sale_fee">İndirimli Fiyat ({{ CURRENCY }})</label>
                <input type="text" id="sale_fee" name="sale_fee">
            </div>
            <div class="flex items-center gap-4 mt-2">
                <input type="checkbox" id="is_fee_show" name="is_fee_show" checked>
                <label for="is_fee_show">Fiyat Görünsün mü?</label>
            </div>

            <h3 class="text-black text-xl font-semibold mt-5">Medya</h3>
            <div class="form-item">
                <label for="">Ürün Görselleri</label>
                <label class="relative bg-gray-50 border-dashed border border-gray-300 text-gray-900 text-sm rounded-lg w-full p-2.5 py-10 flex flex-col items-center justify-center select-none"
                       data-file="">
                    <input type="file" name="images[]" multiple class="opacity-0 absolute top-0 left-0 w-full h-full cursor-pointer">
                    <div class="flex items-center justify-center flex-col" data-role="prev-container">
                        <i class="icon-image-01 text-xl mb-3"></i>
                        <h3 class="mb-3">JPG, PNG, WEBP, JPEG (maks. 4MB)</h3>
                        <h3 class="mb-3 flex items-center gap-1"><i class="icon-plus-circle"></i> Medya Ekle</h3>
                    </div>
                    <div class="grid grid-cols-12 gap-2" data-role="next-container"></div>
                </label>
            </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 }}">{{ $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 }}">{{ $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 }}]">{{ $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"></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"></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">
            </div>
            <div class="form-item">
                <label for="stock_barcode">Barkod</label>
                <input type="text" id="stock_barcode" name="stock_barcode">
            </div>
            <div class="form-item">
                <label for="stock_qty">Stok Adedi</label>
                <input type="text" id="stock_qty" name="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">
            </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">
                <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</label>
                <input type="range" id="best-seller-rank" name="best_seller_rank" min="0" max="200" step="1">
            </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>
    <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 + ']';
        })
    </script>
@endsection