@extends('layouts.admin')

@section('header', 'Upload Produk Baru')

@section('content')
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md p-6">
    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <!-- Product Details -->
        <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Detail Produk</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nama Produk</label>
                <input type="text" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Kategori (Bisa pilih lebih dari satu)</label>
                <div class="border border-gray-300 rounded-lg p-3 h-48 overflow-y-auto bg-gray-50">
                    @foreach($categories as $category)
                        <div class="flex items-center mb-2 last:mb-0">
                            <input type="checkbox" name="categories[]" value="{{ $category->id }}" id="cat_{{ $category->id }}" class="w-4 h-4 text-yellow-600 rounded border-gray-300 focus:ring-yellow-500">
                            <label for="cat_{{ $category->id }}" class="ml-2 text-sm text-gray-700 cursor-pointer select-none">{{ $category->name }}</label>
                        </div>
                    @endforeach
                </div>
                <p class="text-xs text-gray-500 mt-1">Gulir untuk melihat semua kategori. Kategori pertama yang dipilih akan menjadi kategori utama.</p>
            </div>

            


            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Harga Produk</label>
                <input type="number" name="starting_price" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
            </div>
            


            <!-- Promotion Settings -->
            <div class="md:col-span-2 border p-4 rounded-lg bg-yellow-50">
                <label class="block text-sm font-bold text-gray-700 mb-3">Pengaturan Promosi</label>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Discount %</label>
                        <div class="flex items-center">
                            <input type="number" name="discount_percentage" value="0" min="0" max="100" class="w-full px-3 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                            <span class="bg-gray-100 px-3 py-2 border border-l-0 border-gray-300 rounded-r-lg text-gray-600">%</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Akan muncul di atas harga produk</p>
                    </div>
                    
                    <div class="flex items-center h-full pt-6">
                        <label class="flex items-center space-x-3 cursor-pointer">
                            <input type="checkbox" name="is_top_seller" value="1" class="w-5 h-5 text-yellow-600 rounded border-gray-300 focus:ring-yellow-500">
                            <span class="text-sm font-medium text-gray-700">Tampilkan Badge "Top Seller"</span>
                        </label>
                    </div>
                </div>
            </div>


        </div>



        <!-- Image Upload -->
        <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Gambar Produk (Opsional jika ada Video)</h3>
        <div class="mb-6">
            <div id="image-inputs" class="space-y-3">
                <div class="p-4 border rounded-lg bg-gray-50 mb-3">
                    <div class="mb-2">
                        <label class="block text-xs font-bold text-gray-500 mb-1">Gambar 1 (Utama) - Upload</label>
                        <input type="file" name="images[0][file]" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100">
                    </div>
                    <div class="text-center text-xs text-gray-400 my-1">- ATAU -</div>
                    <div>
                        <label class="block text-xs font-bold text-gray-500 mb-1">Gambar 1 (Utama) - URL</label>
                        <input type="url" name="images[0][url]" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                    </div>
                </div>
            </div>
            <button type="button" id="add-image-btn" class="mt-3 text-sm text-blue-600 hover:text-blue-800">
                <i class="fas fa-plus"></i> Tambah Gambar Lain
            </button>
        </div>

        <div class="mt-8 flex gap-4">
            <button type="submit" class="w-full bg-yellow-600 text-white font-bold py-3 rounded-xl hover:bg-yellow-700 transition shadow-lg">
                Upload Produk
            </button>
        </div>
    </form>
</div>

<script>
    // Image Input Logic
    const imageContainer = document.getElementById('image-inputs');
    const addImageBtn = document.getElementById('add-image-btn');
    let imageCount = 1;

    addImageBtn.addEventListener('click', () => {
        if (imageCount < 5) {
            imageCount++;
            const div = document.createElement('div');
            div.className = 'p-4 border rounded-lg bg-gray-50 mb-3';
            div.innerHTML = `
                <div class="mb-2">
                    <label class="block text-xs font-bold text-gray-500 mb-1">Gambar ${imageCount} (Upload)</label>
                    <input type="file" name="images[${imageCount-1}][file]" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100">
                </div>
                <div class="text-center text-xs text-gray-400 my-1">- ATAU -</div>
                <div>
                    <label class="block text-xs font-bold text-gray-500 mb-1">Gambar ${imageCount} (URL)</label>
                    <input type="url" name="images[${imageCount-1}][url]" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>
                <button type="button" class="text-red-500 hover:text-red-700 mt-2 text-sm" onclick="removeImage(this)">
                    <i class="fas fa-trash"></i> Hapus
                </button>
            `;
            imageContainer.appendChild(div);
            
            if (imageCount === 5) addImageBtn.style.display = 'none';
        }
    });

    function removeImage(btn) {
        btn.parentElement.remove();
        imageCount--;
        addImageBtn.style.display = 'block';
    }


</script>
@endsection