@php
    $isJson = false;
    $variationList = [];
    if (!empty($product->variations)) {
        $decoded = json_decode($product->variations, true);
        if (is_array($decoded)) {
            $isJson = true;
            $variationList = $decoded;
        } else {
            $variationList = array_map('trim', explode(',', $product->variations));
        }
    }
@endphp
@extends('layouts.admin')

@section('title', 'Edit Produk')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-8 flex items-center justify-between">
        <a href="{{ route('admin.products.index', ['category' => $product->category_id]) }}" class="text-xs font-bold text-slate-400 hover:text-amber-600 transition-base flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>
            Kembali ke Daftar
        </a>
        <div class="text-[10px] uppercase tracking-widest font-bold text-slate-300">
            Edit Produk
        </div>
    </div>

    @if ($errors->any())
        <div class="mb-8 p-6 bg-red-50 border border-red-100 rounded-[30px] flex items-center space-x-4">
            <div class="w-12 h-12 bg-red-500 rounded-2xl flex items-center justify-center text-white flex-shrink-0">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div>
                <p class="text-xs font-bold text-red-800 uppercase tracking-widest mb-1 font-heading">Terjadi Kesalahan Validasi</p>
                <ul class="list-disc list-inside text-xs text-red-600 space-y-0.5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <form action="{{ route('admin.products.update', $product->id) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf
        <div class="glass-card pro-shadow rounded-[40px] overflow-hidden">
            <div class="px-10 py-8 border-b border-slate-50 bg-slate-50/30">
                <h3 class="font-heading text-xl font-bold text-slate-800">Informasi Dasar</h3>
            </div>
            <div class="p-10 grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="md:col-span-2">
                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3">Nama Produk</label>
                    <input type="text" name="name" value="{{ old('name', $product->name) }}" required 
                        placeholder="Contoh: Gelang Monel Ukir Karakter Premium"
                        class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-sm focus:ring-2 focus:ring-amber-500 outline-none transition-base text-slate-800">
                </div>

                <div>
                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3">Kategori</label>
                    <select name="category_id" required 
                        class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-sm focus:ring-2 focus:ring-amber-500 outline-none transition-base text-slate-800">
                        <option value="">Pilih Kategori</option>
                        @foreach ($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3">Status Ketersediaan</label>
                    <select name="availability" required 
                        class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-sm focus:ring-2 focus:ring-amber-500 outline-none transition-base text-slate-800">
                        <option value="Ready Stock" {{ old('availability', $product->availability) == 'Ready Stock' ? 'selected' : '' }}>Ready Stock (Tersedia)</option>
                        <option value="Pre-Order" {{ old('availability', $product->availability) == 'Pre-Order' ? 'selected' : '' }}>Pre-Order (PO)</option>
                    </select>
                </div>

                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3">Harga Produk (Rp)</label>
                        <input type="number" name="price" value="{{ old('price', (int)$product->price) }}" required placeholder="Contoh: 150000"
                            class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-sm focus:ring-2 focus:ring-amber-500 outline-none transition-base text-slate-800">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3">Bahan / Material</label>
                        <input type="text" name="material" value="{{ old('material', $product->material) }}" placeholder="Baja Monel Premium"
                            class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-sm focus:ring-2 focus:ring-amber-500 outline-none transition-base text-slate-800">
                    </div>
                    <div>
                        <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3">Berat Produk (gram)</label>
                        <input type="number" name="weight" value="{{ old('weight', $product->weight) }}" required placeholder="100"
                            class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-sm focus:ring-2 focus:ring-amber-500 outline-none transition-base text-slate-800">
                    </div>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3">Model Pengaturan Variasi</label>
                    <div class="flex gap-6 mb-6">
                        <label class="inline-flex items-center cursor-pointer">
                            <input type="radio" name="variation_mode" value="normal" {{ !$isJson ? 'checked' : '' }} class="text-amber-500 focus:ring-amber-500 border-slate-200" onchange="toggleVariationMode('normal')">
                            <span class="ml-2 text-xs font-bold text-slate-600">Variasi Satu Harga (Normal)</span>
                        </label>
                        <label class="inline-flex items-center cursor-pointer">
                            <input type="radio" name="variation_mode" value="custom" {{ $isJson ? 'checked' : '' }} class="text-amber-500 focus:ring-amber-500 border-slate-200" onchange="toggleVariationMode('custom')">
                            <span class="ml-2 text-xs font-bold text-slate-600">Variasi Harga Berbeda</span>
                        </label>
                    </div>

                    <!-- Mode Normal: Comma Separated Input -->
                    <div id="variation_normal_container" class="{{ $isJson ? 'hidden' : '' }}">
                        <input type="text" id="variations_normal_input" value="{{ old('variations', !$isJson ? $product->variations : '') }}" 
                            placeholder="Contoh: Standar, Gold, Silver, Ukuran 16, Kustom"
                            class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-sm focus:ring-2 focus:ring-amber-500 outline-none transition-base text-slate-800">
                        <p class="text-[10px] text-slate-400 mt-2">Daftarkan variasi ukuran, warna, atau spesifikasi lainnya yang dapat dipilih pembeli, pisahkan dengan tanda koma ( , ). Semua variasi menggunakan harga dasar produk.</p>
                    </div>

                    <!-- Mode Custom: Interactive 2-Level Shopee Variation Builder -->
                    <div id="variation_custom_container" class="{{ $isJson ? '' : 'hidden' }} space-y-6">
                        <div class="glass-card p-6 border border-slate-100 rounded-2xl bg-white space-y-6">
                            <!-- Level 1 Variation -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-2">Nama Variasi 1 (Contoh: Warna)</label>
                                    <input type="text" id="var1_name" value="Warna" placeholder="Contoh: Warna" oninput="regenerateCombinations()"
                                        class="w-full px-4 py-3 bg-slate-50 border border-slate-100 focus:ring-2 focus:ring-amber-500 rounded-xl text-xs outline-none transition-base text-slate-700">
                                </div>
                                <div>
                                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-2">Pilihan Variasi 1 (Pisahkan dengan koma)</label>
                                    <input type="text" id="var1_choices" value="Gold, Silver" placeholder="Contoh: Gold, Silver, Rose Gold" oninput="regenerateCombinations()"
                                        class="w-full px-4 py-3 bg-slate-50 border border-slate-100 focus:ring-2 focus:ring-amber-500 rounded-xl text-xs outline-none transition-base text-slate-700">
                                </div>
                            </div>

                            <!-- Level 2 Toggle -->
                            <div class="flex items-center">
                                <label class="inline-flex items-center cursor-pointer">
                                    <input type="checkbox" id="enable_var2" class="text-amber-500 focus:ring-amber-500 border-slate-200" onchange="toggleVar2Section(this.checked)">
                                    <span class="ml-2 text-xs font-bold text-slate-600">Aktifkan Variasi Tingkat 2 (Contoh: Ukuran)</span>
                                </label>
                            </div>

                            <!-- Level 2 Variation (Initially Hidden) -->
                            <div id="var2_section" class="hidden grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-slate-100">
                                <div>
                                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-2">Nama Variasi 2 (Contoh: Ukuran)</label>
                                    <input type="text" id="var2_name" value="Ukuran" placeholder="Contoh: Ukuran" oninput="regenerateCombinations()"
                                        class="w-full px-4 py-3 bg-slate-50 border border-slate-100 focus:ring-2 focus:ring-amber-500 rounded-xl text-xs outline-none transition-base text-slate-700">
                                </div>
                                <div>
                                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-2">Pilihan Variasi 2 (Pisahkan dengan koma)</label>
                                    <input type="text" id="var2_choices" value="16, 17, 18" placeholder="Contoh: 16, 17, 18" oninput="regenerateCombinations()"
                                        class="w-full px-4 py-3 bg-slate-50 border border-slate-100 focus:ring-2 focus:ring-amber-500 rounded-xl text-xs outline-none transition-base text-slate-700">
                                </div>
                            </div>
                        </div>

                        <!-- Bulk Apply Box -->
                        <div class="p-5 bg-slate-50 border border-slate-100 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                            <div class="text-xs text-slate-500">
                                <span class="font-bold text-slate-700 block mb-0.5">Terapkan Harga Massal</span>
                                Mengisi harga seluruh turunan variasi secara cepat untuk menghemat waktu.
                            </div>
                            <div class="flex gap-2 w-full sm:w-auto">
                                <input type="number" id="bulk_price" placeholder="Harga Rp (Contoh: 150000)" class="w-full sm:w-48 px-4 py-2 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:border-amber-500 text-slate-700">
                                <button type="button" onclick="applyBulkPrice()" class="px-6 py-2 bg-slate-900 hover:bg-black text-white text-xs font-bold rounded-xl transition-base cursor-pointer">Terapkan</button>
                            </div>
                        </div>

                        <!-- Generated Combinations Table -->
                        <div class="overflow-hidden border border-slate-100 rounded-2xl bg-slate-50/50">
                            <table class="w-full border-collapse text-left text-xs">
                                <thead class="bg-slate-100 text-slate-500 uppercase tracking-wider font-bold">
                                    <tr id="combination_table_header">
                                        <!-- Header columns will be inserted here dynamically -->
                                    </tr>
                                </thead>
                                <tbody id="combination_table_body">
                                    <!-- Combinations rows will be inserted here dynamically -->
                                </tbody>
                            </table>
                        </div>
                        <p class="text-[10px] text-slate-400 mt-2">Daftar turunan variasi di atas dihasilkan secara otomatis berdasarkan pilihan Anda. Masukkan harga khusus untuk setiap kombinasi jika harganya berbeda dengan harga dasar produk.</p>
                    </div>

                    <!-- Hidden Input field that actually submits values to server -->
                    <input type="hidden" name="variations" id="hidden_variations_input">
                </div>

                <!-- Slug URL input removed, handled automatically by name slugification -->

                <div class="md:col-span-2">
                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3">Deskripsi Produk</label>
                    <textarea name="description" rows="6" required placeholder="Tuliskan deskripsi lengkap produk perhiasan monel Anda..."
                        class="w-full px-6 py-4 bg-slate-50 border-none rounded-3xl text-sm focus:ring-2 focus:ring-amber-500 outline-none transition-base text-slate-800">{{ old('description', $product->description) }}</textarea>
                </div>
            </div>
        </div>

        <!-- Media Upload Section -->
        <div class="glass-card pro-shadow rounded-[40px] overflow-hidden" id="gallery-section">
            <div class="px-10 py-8 border-b border-slate-50 bg-slate-50/30">
                <h3 class="font-heading text-xl font-bold text-slate-800">Media Galeri</h3>
            </div>
            <div class="p-10 space-y-8">
                <!-- Main Image Upload -->
                <div>
                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-4">Gambar Utama</label>
                    <div class="flex flex-col md:flex-row items-center gap-8">
                        <div class="w-48 h-48 bg-slate-50 border-2 border-dashed border-slate-200 rounded-3xl overflow-hidden flex items-center justify-center relative group pro-shadow">
                            @if ($product->main_image)
                                <img id="mainImagePreview" src="{{ asset('uploads/' . $product->main_image) }}" class="w-full h-full object-cover">
                                <div id="mainImagePlaceholder" class="flex flex-col items-center text-slate-300 hidden">
                                    <i class="fas fa-image text-4xl mb-2"></i>
                                    <span class="text-[9px] font-bold uppercase tracking-wider">Preview Gambar</span>
                                </div>
                            @else
                                <img id="mainImagePreview" class="w-full h-full object-cover hidden">
                                <div id="mainImagePlaceholder" class="flex flex-col items-center text-slate-300">
                                    <i class="fas fa-image text-4xl mb-2"></i>
                                    <span class="text-[9px] font-bold uppercase tracking-wider">Preview Gambar</span>
                                </div>
                            @endif
                        </div>
                        <div class="flex-1">
                            <input type="file" id="mainImageInput" name="main_image" accept="image/*" class="hidden">
                            <label for="mainImageInput" class="inline-flex items-center px-8 py-3 bg-amber-500 hover:bg-amber-600 text-white rounded-full text-xs font-bold transition-base cursor-pointer shadow-lg shadow-amber-500/20">
                                <i class="fas fa-upload mr-2"></i> Ganti Gambar Utama
                            </label>
                            <p class="text-[10px] text-slate-400 mt-3">Kosongkan jika tidak ingin mengganti. Maks format JPG/PNG/WebP 2MB.</p>
                        </div>
                    </div>
                </div>

                <hr class="border-slate-100">

                <!-- Additional Gallery Uploads -->
                <div>
                    <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-4">Gambar Pendukung Saat Ini (Maksimal 6 Foto)</label>
                    
                    @if ($product->galleries->isNotEmpty())
                        <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6">
                            @foreach ($product->galleries as $gallery)
                                <div class="w-full aspect-square bg-slate-50 border border-slate-100 rounded-2xl overflow-hidden relative shadow-sm group">
                                    <img src="{{ asset('uploads/' . $gallery->image_path) }}" class="w-full h-full object-cover">
                                    <div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all">
                                        <a href="?delete_gallery={{ $gallery->id }}" onclick="deleteGallery(event, this.href)" class="w-10 h-10 bg-red-500 text-white rounded-xl flex items-center justify-center hover:bg-red-600 transition-base" title="Hapus Gambar">
                                            <i class="fas fa-trash-alt text-xs"></i>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-xs text-slate-400 italic mb-6">Belum ada gambar galeri tambahan.</p>
                    @endif

                    @php
                        $slotsRemaining = 6 - $product->galleries->count();
                    @endphp

                    @if ($slotsRemaining > 0)
                        <label class="block text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-4">Tambah Foto Galeri Baru (Sisa Slot: {{ $slotsRemaining }})</label>
                        <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6" id="galleryPreviewContainer">
                            <!-- Placeholder previews will be dynamically appended here -->
                        </div>
                        <div>
                            <input type="file" id="galleryInput" name="gallery[]" accept="image/*" multiple class="hidden">
                            <label for="galleryInput" class="inline-flex items-center px-8 py-3 bg-slate-900 hover:bg-black text-white rounded-full text-xs font-bold transition-base cursor-pointer shadow-lg shadow-slate-950/20">
                                <i class="fas fa-images mr-2"></i> Tambah Foto Baru
                            </label>
                            <p class="text-[10px] text-slate-400 mt-3">Unggah hingga {{ $slotsRemaining }} gambar tambahan untuk memperlihatkan produk dari berbagai sudut.</p>
                        </div>
                    @else
                        <div class="p-4 bg-amber-50 border border-amber-100 rounded-2xl text-xs text-amber-600 flex items-center">
                            <i class="fas fa-info-circle mr-2"></i> Batas maksimal gambar galeri (6) telah tercapai. Hapus gambar lama terlebih dahulu untuk menambahkan gambar baru.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-4">
            <a href="{{ route('admin.products.index', ['category' => $product->category_id]) }}" class="px-8 py-4 bg-slate-200 hover:bg-slate-300 text-slate-600 rounded-full text-xs font-bold transition-base">Batal</a>
            <button type="submit" class="px-10 py-4 bg-amber-500 hover:bg-amber-600 text-white rounded-full text-xs font-bold transition-base shadow-xl shadow-amber-500/30">
                Simpan Perubahan
            </button>
        </div>
    </form>
</div>

<!-- Javascript for Upload Live Previews -->
<script>
    // 1. Main Image Live Preview
    const mainImageInput = document.getElementById('mainImageInput');
    const mainImagePreview = document.getElementById('mainImagePreview');
    const mainImagePlaceholder = document.getElementById('mainImagePlaceholder');

    if (mainImageInput) {
        mainImageInput.onchange = function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    mainImagePreview.src = e.target.result;
                    mainImagePreview.classList.remove('hidden');
                    if (mainImagePlaceholder) {
                        mainImagePlaceholder.classList.add('hidden');
                    }
                }
                reader.readAsDataURL(file);
            }
        };
    }

    // 2. Gallery Multiple Images Previews
    const galleryInput = document.getElementById('galleryInput');
    const galleryPreviewContainer = document.getElementById('galleryPreviewContainer');

    if (galleryInput) {
        galleryInput.onchange = function() {
            galleryPreviewContainer.innerHTML = ''; // Reset preview container
            
            const maxSlots = {{ $slotsRemaining }};
            const files = Array.from(this.files).slice(0, maxSlots); // Limit to remaining slots
            if (files.length > 0) {
                files.forEach((file, index) => {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const card = document.createElement('div');
                        card.className = 'w-full aspect-square bg-slate-50 border border-slate-100 rounded-2xl overflow-hidden relative shadow-sm animate-fadeIn';
                        card.innerHTML = `
                            <img src="${e.target.result}" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 hover:opacity-100 transition-all text-white text-xs font-bold">
                                Foto Baru ${index + 1}
                            </div>
                        `;
                        galleryPreviewContainer.appendChild(card);
                    }
                    reader.readAsDataURL(file);
                });
            }
        };
    }

    // 3. Shopee-style 2-Level Variations Manager Functions
    function toggleVariationMode(mode) {
        const normalContainer = document.getElementById('variation_normal_container');
        const customContainer = document.getElementById('variation_custom_container');
        
        if (mode === 'normal') {
            normalContainer.classList.remove('hidden');
            customContainer.classList.add('hidden');
        } else {
            normalContainer.classList.add('hidden');
            customContainer.classList.remove('hidden');
            
            // Generate combinations on first load
            regenerateCombinations();
        }
    }

    function toggleVar2Section(enabled) {
        const section = document.getElementById('var2_section');
        if (enabled) {
            section.classList.remove('hidden');
        } else {
            section.classList.add('hidden');
        }
        regenerateCombinations();
    }

    // Keep track of entered price values
    let priceCache = {};

    function savePricesToCache() {
        const rows = document.querySelectorAll('#combination_table_body tr');
        rows.forEach(row => {
            const key = row.getAttribute('data-combo-key');
            const priceInput = row.querySelector('.var-price-input');
            if (key && priceInput) {
                priceCache[key] = priceInput.value;
            }
        });
    }

    function applyBulkPrice() {
        const bulkPrice = document.getElementById('bulk_price').value;
        if (bulkPrice) {
            const inputs = document.querySelectorAll('.var-price-input');
            inputs.forEach(input => {
                input.value = bulkPrice;
            });
            // Update cache
            savePricesToCache();
        }
    }

    function regenerateCombinations() {
        savePricesToCache();
        
        const var1Name = document.getElementById('var1_name').value.trim() || 'Variasi 1';
        const var1ChoicesInput = document.getElementById('var1_choices').value;
        const var1Choices = var1ChoicesInput.split(',').map(c => c.trim()).filter(c => c !== '');

        const enableVar2 = document.getElementById('enable_var2').checked;
        const var2Name = document.getElementById('var2_name').value.trim() || 'Variasi 2';
        const var2ChoicesInput = document.getElementById('var2_choices').value;
        const var2Choices = enableVar2 ? var2ChoicesInput.split(',').map(c => c.trim()).filter(c => c !== '') : [];

        const header = document.getElementById('combination_table_header');
        const tbody = document.getElementById('combination_table_body');

        // Render Table Header
        if (enableVar2) {
            header.innerHTML = `
                <th class="px-6 py-3">${var1Name}</th>
                <th class="px-6 py-3">${var2Name}</th>
                <th class="px-6 py-3">Harga Turunan Variasi (Rp)</th>
            `;
        } else {
            header.innerHTML = `
                <th class="px-6 py-3">${var1Name}</th>
                <th class="px-6 py-3">Harga Turunan Variasi (Rp)</th>
            `;
        }

        tbody.innerHTML = '';

        if (var1Choices.length === 0) {
            const tr = document.createElement('tr');
            tr.innerHTML = `<td colspan="${enableVar2 ? 3 : 2}" class="px-6 py-8 text-center text-slate-400 italic">Silakan masukkan pilihan variasi terlebih dahulu.</td>`;
            tbody.appendChild(tr);
            return;
        }

        // Generate combinations rows
        if (enableVar2) {
            if (var2Choices.length === 0) {
                var1Choices.forEach(c1 => {
                    const comboName = c1;
                    const cachedPrice = priceCache[comboName] || '';
                    const tr = document.createElement('tr');
                    tr.className = 'border-b border-slate-100 hover:bg-white/60 transition-base';
                    tr.setAttribute('data-combo-key', comboName);
                    tr.innerHTML = `
                        <td class="px-6 py-4 font-semibold text-slate-700">${c1}</td>
                        <td class="px-6 py-4 text-slate-300 italic">-</td>
                        <td class="px-6 py-3">
                            <input type="number" class="var-price-input w-full px-4 py-2 border border-slate-200 focus:border-amber-500 rounded-xl outline-none transition-base text-slate-700 bg-white" placeholder="Harga dasar produk" value="${cachedPrice}" oninput="savePricesToCache()">
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
            } else {
                var1Choices.forEach(c1 => {
                    var2Choices.forEach(c2 => {
                        const comboName = `${c1} - ${c2}`;
                        const cachedPrice = priceCache[comboName] || '';
                        const tr = document.createElement('tr');
                        tr.className = 'border-b border-slate-100 hover:bg-white/60 transition-base';
                        tr.setAttribute('data-combo-key', comboName);
                        tr.innerHTML = `
                            <td class="px-6 py-4 font-semibold text-slate-700">${c1}</td>
                            <td class="px-6 py-4 font-semibold text-slate-700">${c2}</td>
                            <td class="px-6 py-3">
                                <input type="number" class="var-price-input w-full px-4 py-2 border border-slate-200 focus:border-amber-500 rounded-xl outline-none transition-base text-slate-700 bg-white" placeholder="Harga dasar produk" value="${cachedPrice}" oninput="savePricesToCache()">
                            </td>
                        `;
                        tbody.appendChild(tr);
                    });
                });
            }
        } else {
            var1Choices.forEach(c1 => {
                const comboName = c1;
                const cachedPrice = priceCache[comboName] || '';
                const tr = document.createElement('tr');
                tr.className = 'border-b border-slate-100 hover:bg-white/60 transition-base';
                tr.setAttribute('data-combo-key', comboName);
                tr.innerHTML = `
                    <td class="px-6 py-4 font-semibold text-slate-700">${c1}</td>
                    <td class="px-6 py-3">
                        <input type="number" class="var-price-input w-full px-4 py-2 border border-slate-200 focus:border-amber-500 rounded-xl outline-none transition-base text-slate-700 bg-white" placeholder="Harga dasar produk" value="${cachedPrice}" oninput="savePricesToCache()">
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }
    }

    // Initialize variations on page load
    document.addEventListener('DOMContentLoaded', function() {
        const isJson = {{ $isJson ? 'true' : 'false' }};
        if (isJson) {
            const payload = @json($decodedVariations ?? null);
            if (payload && payload.attributes && Array.isArray(payload.attributes)) {
                // Structured two-level JSON format
                const attr1 = payload.attributes[0];
                if (attr1) {
                    document.getElementById('var1_name').value = attr1.name;
                    document.getElementById('var1_choices').value = attr1.choices.join(', ');
                }

                const attr2 = payload.attributes[1];
                if (attr2) {
                    document.getElementById('enable_var2').checked = true;
                    toggleVar2Section(true);
                    document.getElementById('var2_name').value = attr2.name;
                    document.getElementById('var2_choices').value = attr2.choices.join(', ');
                }

                // Populate priceCache from existing combinations
                if (Array.isArray(payload.combinations)) {
                    payload.combinations.forEach(combo => {
                        priceCache[combo.name] = combo.price > 0 ? combo.price : '';
                    });
                }
            } else {
                // Flat JSON format (legacy custom variations list)
                const combinations = @json($variationList);
                const choices = combinations.map(c => c.name);
                document.getElementById('var1_name').value = 'Variasi';
                document.getElementById('var1_choices').value = choices.join(', ');
                
                combinations.forEach(combo => {
                    priceCache[combo.name] = combo.price > 0 ? combo.price : '';
                });
            }
            regenerateCombinations();
        }
    });

    // Hook submit form untuk serialisasi variasi sebelum dikirim
    const form = document.querySelector('form[action*="products"]');
    if (form) {
        form.addEventListener('submit', function(e) {
            const mode = document.querySelector('input[name="variation_mode"]:checked').value;
            const hiddenInput = document.getElementById('hidden_variations_input');
            
            if (mode === 'normal') {
                const val = document.getElementById('variations_normal_input').value.trim();
                hiddenInput.value = val;
            } else {
                const var1Name = document.getElementById('var1_name').value.trim();
                const var1ChoicesInput = document.getElementById('var1_choices').value;
                const var1Choices = var1ChoicesInput.split(',').map(c => c.trim()).filter(c => c !== '');

                const enableVar2 = document.getElementById('enable_var2').checked;
                const var2Name = enableVar2 ? document.getElementById('var2_name').value.trim() : '';
                const var2ChoicesInput = enableVar2 ? document.getElementById('var2_choices').value : '';
                const var2Choices = enableVar2 ? var2ChoicesInput.split(',').map(c => c.trim()).filter(c => c !== '') : [];

                const rows = document.querySelectorAll('#combination_table_body tr');
                const combinations = [];
                
                rows.forEach(row => {
                    const key = row.getAttribute('data-combo-key');
                    const price = parseFloat(row.querySelector('.var-price-input').value) || 0;
                    if (key) {
                        combinations.push({ name: key, price: price });
                    }
                });

                const payload = {
                    attributes: [
                        { name: var1Name, choices: var1Choices }
                    ],
                    combinations: combinations
                };

                if (enableVar2) {
                    payload.attributes.push({ name: var2Name, choices: var2Choices });
                }

                hiddenInput.value = JSON.stringify(payload);
            }
        });
    }

    function deleteGallery(event, url) {
        event.preventDefault();
        Swal.fire({
            title: 'Hapus Gambar Galeri?',
            text: 'Apakah Anda yakin ingin menghapus gambar galeri ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#111111',
            cancelButtonColor: '#B08256',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal',
            background: '#ffffff',
            customClass: {
                popup: 'rounded-2xl',
            }
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        });
    }
</script>
@endsection