<x-app-layout>
    <style>
        body, #app, main { background-color: #FAF7F2 !important; }
        .min-h-screen { background-color: #FAF7F2 !important; }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <div class="max-w-7xl mx-auto p-6 lg:p-10 min-h-screen">
        {{-- Header Section --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10 border-b border-gray-100 pb-8">
            <div>
                <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">
                    Tambah <span class="text-[#f59e0b]">Produk Baru</span>
                </h1>
                <p class="text-gray-500 mt-1 text-sm font-medium">Kelola inventaris Anda dengan detail yang akurat.</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('products.index') }}" class="group inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white border border-gray-200 text-gray-600 hover:text-[#f59e0b] hover:border-[#f59e0b] transition-all duration-300 text-sm font-bold shadow-sm">
                    <i class="fas fa-chevron-left text-[10px] group-hover:-translate-x-1 transition-transform"></i> Kembali
                </a>
            </div>
        </div>

        <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data" id="productForm">
            @csrf

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                
                {{-- Left Column: Main Content --}}
                <div class="lg:col-span-8 space-y-8">
                    
                    {{-- Card: Informasi Dasar --}}
                    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/50">
                            <h2 class="text-sm font-bold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-file-alt text-[#f59e0b]"></i> Informasi Detail
                            </h2>
                        </div>
                        <div class="p-6 space-y-5">
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Nama Produk</label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" onkeyup="generateSlug()"
                                    placeholder="E.g. Meja Kayu Jati Minimalis"
                                    class="w-full border-gray-200 rounded-xl py-3 px-4 focus:ring-2 focus:ring-amber-500/20 focus:border-[#f59e0b] transition-all outline-none" required>
                                <input type="hidden" name="slug" id="slug">
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div>
                                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Kategori</label>
                                    <select name="category_id" class="w-full border-gray-200 rounded-xl py-3 px-4 focus:border-[#f59e0b] outline-none appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23cbd5e1%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E')] bg-[length:20px] bg-[right_1rem_center] bg-no-repeat" required>
                                        <option value="">Pilih Kategori</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Material</label>
                                    <input type="text" name="material" value="{{ old('material') }}" placeholder="E.g. Solid Wood"
                                        class="w-full border-gray-200 rounded-xl py-3 px-4 focus:border-[#f59e0b] outline-none">
                                </div>
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Deskripsi Lengkap</label>
                                <textarea name="description" rows="4" placeholder="Jelaskan spesifikasi dan keunggulan produk..."
                                    class="w-full border-gray-200 rounded-xl py-3 px-4 focus:border-[#f59e0b] outline-none resize-none">{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- Card: Varian & Stok --}}
                    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/50 flex justify-between items-center">
                            <h2 class="text-sm font-bold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-layer-group text-[#f59e0b]"></i> Varian & Foto
                            </h2>
                            <button type="button" onclick="addVariant()" class="text-[11px] font-black uppercase text-amber-600 hover:text-amber-700 flex items-center gap-1.5 transition-colors">
                                <i class="fas fa-plus-circle"></i> Tambah Varian
                            </button>
                        </div>
                        <div class="p-6">
                            <div id="variant-container" class="space-y-4">
                                {{-- Varian default --}}
                                <div class="variant-row p-5 rounded-xl border border-gray-100 bg-gray-50/30 relative group" data-index="0">
                                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
                                        <div class="md:col-span-4">
                                            <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Nama Warna</label>
                                            <input type="text" name="variants[0][color]" onchange="checkDuplicateColor(this)" placeholder="E.g. Natural Walnut" class="variant-color-input w-full border-gray-200 rounded-lg py-2.5 px-3 text-sm focus:border-[#f59e0b] outline-none bg-white" required>
                                        </div>
                                        <div class="md:col-span-2">
                                            <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Stok</label>
                                            <input type="number" name="variants[0][stock]" value="0" class="w-full border-gray-200 rounded-lg py-2.5 px-3 text-sm focus:border-[#f59e0b] outline-none bg-white" required>
                                        </div>
                                        <div class="md:col-span-6">
                                            <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Gambar Produk</label>
                                            <input type="file" name="variants[0][images][]" multiple accept="image/*" class="w-full text-[11px] text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-[10px] file:font-bold file:bg-gray-200 file:text-gray-700 hover:file:bg-gray-300 transition-all" onchange="previewVariantImages(this, 0)">
                                        </div>
                                    </div>
                                    <div id="variant-preview-0" class="flex flex-wrap gap-2 mt-4"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card: Dimensi --}}
                    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/50">
                            <h2 class="text-sm font-bold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-ruler-combined text-[#f59e0b]"></i> Ukuran & Berat
                            </h2>
                        </div>
                        <div class="p-6 grid grid-cols-2 md:grid-cols-4 gap-6">
                            @foreach(['weight' => 'Berat (gr)', 'length' => 'Panjang (cm)', 'width' => 'Lebar (cm)', 'height' => 'Tinggi (cm)'] as $key => $label)
                                <div>
                                    <label class="block text-[10px] font-bold text-gray-400 uppercase mb-2">{{ $label }}</label>
                                    <input type="number" name="{{ $key }}" value="{{ old($key, 0) }}" class="w-full border-gray-200 rounded-xl py-2.5 px-4 text-sm focus:border-[#f59e0b] outline-none">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Right Column: Actions & Settings --}}
                <div class="lg:col-span-4">
                    <div class="sticky top-10 space-y-6">
                        
                        {{-- Card: Harga --}}
                        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                            <div class="p-6">
                                <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Harga Produk</label>
                                <div class="relative">
                                    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium text-sm">Rp</span>
                                    <input type="text" name="base_price" onkeyup="formatRupiah(this)" value="{{ old('base_price') }}" 
                                        class="w-full border-gray-200 bg-gray-50 rounded-xl py-4 pl-12 pr-4 text-xl font-extrabold text-gray-900 focus:ring-2 focus:ring-amber-500/20 focus:border-[#f59e0b] transition-all outline-none" placeholder="0" required>
                                </div>
                            </div>
                        </div>

                        {{-- Card: Status --}}
                        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden p-6">
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Status Visibilitas</label>
                            <div class="space-y-3">
                                <label class="flex items-center justify-between p-3 rounded-xl border border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 rounded-full bg-green-50 flex items-center justify-center text-green-600 text-xs">
                                            <i class="fas fa-check"></i>
                                        </div>
                                        <span class="text-sm font-bold text-gray-700">Aktifkan</span>
                                    </div>
                                    <input type="radio" name="status" value="active" class="w-4 h-4 text-[#f59e0b] focus:ring-[#f59e0b]" checked>
                                </label>
                                <label class="flex items-center justify-between p-3 rounded-xl border border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
                                            <i class="fas fa-eye-slash"></i>
                                        </div>
                                        <span class="text-sm font-bold text-gray-700">Simpan Draft</span>
                                    </div>
                                    <input type="radio" name="status" value="inactive" class="w-4 h-4 text-[#f59e0b] focus:ring-[#f59e0b]">
                                </label>
                            </div>
                        </div>

                        {{-- Form Action --}}
                        <button type="submit" class="w-full bg-[#2c1a0e] text-white py-4 rounded-2xl font-bold text-sm uppercase tracking-widest hover:bg-black transition-all shadow-lg flex items-center justify-center gap-2">
                            <i class="fas fa-save"></i> Simpan Produk
                        </button>

                        @if ($errors->any())
                            <div class="p-4 bg-red-50 rounded-xl border border-red-100">
                                <div class="flex items-center gap-2 text-red-600 mb-2">
                                    <i class="fas fa-exclamation-triangle text-xs"></i>
                                    <span class="text-[11px] font-black uppercase">Perhatian</span>
                                </div>
                                <ul class="text-[10px] text-red-500 list-disc list-inside space-y-1">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script>
        let variantCounter = 1;

        function addVariant() {
            const container = document.getElementById('variant-container');
            const idx = variantCounter;
            const html = `
                <div class="variant-row p-5 rounded-xl border border-gray-100 bg-gray-50/30 relative group animate-fadeIn" data-index="${idx}">
                    <button type="button" onclick="this.closest('.variant-row').remove()" class="absolute -top-2 -right-2 w-7 h-7 bg-white border border-red-100 text-red-500 rounded-full flex items-center justify-center text-xs shadow-sm hover:bg-red-500 hover:text-white transition-all opacity-0 group-hover:opacity-100">
                        <i class="fas fa-times"></i>
                    </button>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
                        <div class="md:col-span-4">
                            <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Nama Warna</label>
                            <input type="text" name="variants[${idx}][color]" onchange="checkDuplicateColor(this)" placeholder="E.g. Matte Silver" class="variant-color-input w-full border-gray-200 rounded-lg py-2.5 px-3 text-sm focus:border-[#f59e0b] outline-none bg-white" required>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Stok</label>
                            <input type="number" name="variants[${idx}][stock]" value="0" class="w-full border-gray-200 rounded-lg py-2.5 px-3 text-sm focus:border-[#f59e0b] outline-none bg-white" required>
                        </div>
                        <div class="md:col-span-6">
                            <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Gambar Produk</label>
                            <input type="file" name="variants[${idx}][images][]" multiple accept="image/*" class="w-full text-[11px] text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-[10px] file:font-bold file:bg-gray-200 file:text-gray-700" onchange="previewVariantImages(this, ${idx})">
                        </div>
                    </div>
                    <div id="variant-preview-${idx}" class="flex flex-wrap gap-2 mt-4"></div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
            variantCounter++;
        }

        function previewVariantImages(input, idx) {
            const previewDiv = document.getElementById(`variant-preview-${idx}`);
            previewDiv.innerHTML = '';
            if (input.files) {
                Array.from(input.files).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = e => {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.className = 'w-12 h-12 object-cover rounded-lg border border-gray-200 shadow-sm';
                        previewDiv.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                });
            }
        }

        function checkDuplicateColor(input) {
            const inputs = document.querySelectorAll('.variant-color-input');
            const val = input.value.trim().toLowerCase();
            let count = 0;
            inputs.forEach(inp => { if (inp.value.trim().toLowerCase() === val && val !== '') count++; });
            if (count > 1) { 
                alert('Warna ini sudah terdaftar.'); 
                input.value = ''; 
                input.focus(); 
            }
        }

        function formatRupiah(input) {
            let val = input.value.replace(/[^,\d]/g, '');
            input.value = val.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        function generateSlug() {
            let name = document.getElementById('name').value;
            let slug = name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
            document.getElementById('slug').value = slug;
        }
    </script>

    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }
    </style>
</x-app-layout>