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

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

            <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">
            <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>
@endsection