@extends('admin.layouts.app')

@section('title', 'Tambah Package')
@section('page-title', 'Tambah Package Baru')
@section('page-subtitle', 'Isi semua informasi package perjalanan')

@section('header-actions')
    <a href="{{ route('admin.packages.index') }}" class="btn-secondary">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Kembali
    </a>
@endsection

@section('content')
<form method="POST" action="{{ route('admin.packages.store') }}" id="packageForm" enctype="multipart/form-data">
    @csrf

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        {{-- Left Column: Main Info --}}
        <div class="xl:col-span-2 space-y-6">

            {{-- Basic Info Card --}}
            <div class="bg-white rounded-xl border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                    <span class="w-5 h-5 bg-brand-100 text-brand-600 rounded flex items-center justify-center text-xs">1</span>
                    Informasi Dasar
                </h2>
                <div class="space-y-4">
                    <div>
                        <label class="form-label">Judul Package <span class="text-red-400">*</span></label>
                        <input type="text" name="title" value="{{ old('title') }}" placeholder="Contoh: Paket Wisata Bali 3D2N..." class="form-input @error('title') border-red-400 @enderror">
                        @error('title')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="form-label">Kategori</label>
                            <select name="category_id" class="form-input">
                                <option value="">— Pilih Kategori —</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Lokasi</label>
                            <input type="text" name="location" value="{{ old('location') }}" placeholder="Contoh: Bali, Indonesia" class="form-input">
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label class="form-label">Durasi (Hari)</label>
                            <input type="text" name="duration_day" value="{{ old('duration_day') }}" placeholder="3" class="form-input">
                        </div>
                        <div>
                            <label class="form-label">Durasi (Malam)</label>
                            <input type="text" name="duration_night" value="{{ old('duration_night') }}" placeholder="2" class="form-input">
                        </div>
                        <div>
                            <label class="form-label">Min. Pax</label>
                            <input type="number" name="min_pax" value="{{ old('min_pax') }}" placeholder="2" min="1" class="form-input">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="form-label">Harga Mulai Dari (Rp)</label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">Rp</span>
                                <input type="number" name="price_starting_from" value="{{ old('price_starting_from') }}" placeholder="1500000" step="1000" min="0" class="form-input pl-9">
                            </div>
                        </div>
                        <div>
                            <label class="form-label">Tag</label>
                            <select name="tag" class="form-input">
                                <option value="">— Tanpa Tag —</option>
                                <option value="popular" {{ old('tag') == 'popular' ? 'selected' : '' }}>⭐ Popular</option>
                                <option value="new"     {{ old('tag') == 'new'     ? 'selected' : '' }}>✨ New</option>
                                <option value="promo"   {{ old('tag') == 'promo'   ? 'selected' : '' }}>🔥 Promo</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="form-label">Deskripsi</label>
                        <textarea name="description" rows="4" placeholder="Jelaskan detail paket wisata ini..." class="form-input resize-none">{{ old('description') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Highlight Package Card --}}
            <div class="bg-white rounded-xl border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                    <span class="w-5 h-5 bg-brand-100 text-brand-600 rounded flex items-center justify-center text-xs">2</span>
                    Highlight Package
                </h2>
                <div class="space-y-4">
                    <div>
                        <label class="form-label">Highlight Deskripsi</label>
                        <textarea name="highlight_desc" rows="2" maxlength="500"
                            placeholder="Deskripsi singkat, misal: Liburan santai dengan sunset terbaik"
                            class="form-input resize-none @error('highlight_desc') border-red-400 @enderror">{{ old('highlight_desc') }}</textarea>
                        @error('highlight_desc')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="form-label">Highlight Item</label>
                        <p class="text-xs text-slate-400 mb-2">Poin-poin unggulan package.</p>
                        @include('admin.packages._dynamic_list', [
                            'fieldName'   => 'highlight_item',
                            'label'       => 'Highlight Item',
                            'placeholder' => 'Contoh: Private pool villa',
                            'color'       => 'brand',
                            'values'      => old('highlight_item', ['']),
                            'iconPath'    => 'M5 13l4 4L19 7',
                        ])
                    </div>

                    <div>
                        <label for="highlight_image" class="form-label">Highlight Gambar (bisa lebih dari satu)</label>
                        <input type="file" name="highlight_image[]" id="highlight_image"
                            accept="image/png, image/jpeg, image/jpg, image/webp"
                            multiple class="form-input @error('highlight_image.*') border-red-400 @enderror"
                            onchange="previewImages(event, 'highlightImagePreviewGrid')">
                        <p class="text-xs text-slate-400 mt-1">Format JPG, PNG, atau WEBP. Maks. 2MB per gambar.</p>
                        @error('highlight_image.*')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror

                        <div id="highlightImagePreviewGrid" class="grid grid-cols-3 sm:grid-cols-4 gap-3 mt-4"></div>
                    </div>
                </div>
            </div>

            {{-- Harga per Grup (Tiered Pricing) --}}
            <div class="bg-white rounded-xl border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                    <span class="w-5 h-5 bg-brand-100 text-brand-600 rounded flex items-center justify-center text-xs">3</span>
                    Harga per Grup
                </h2>
                <p class="text-xs text-slate-400 mb-4">Tambahkan tingkatan harga berdasarkan jumlah tamu, contoh: 2 Guests, 3 Guests, Family Package, dst.</p>

                <div id="list-group-price" class="space-y-2">
                    @php $groupPrices = old('group_label', ['']); @endphp
                    @foreach($groupPrices as $i => $label)
                    <div class="border border-slate-200 rounded-lg p-4 list-row" data-index="{{ $i }}">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
                            <div class="lg:col-span-2">
                                <label class="block text-xs font-medium text-slate-400 mb-1">Label</label>
                                <input type="text" name="group_label[]" value="{{ old('group_label.'.$i) }}"
                                    placeholder="Contoh: 2 Guests" class="form-input text-sm w-full">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Min Pax</label>
                                <input type="number" name="group_min_pax[]" value="{{ old('group_min_pax.'.$i) }}"
                                    placeholder="Min" min="1" class="form-input text-sm w-full">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Max Pax</label>
                                <input type="number" name="group_max_pax[]" value="{{ old('group_max_pax.'.$i) }}"
                                    placeholder="Max" min="1" class="form-input text-sm w-full">
                            </div>
                            <div class="flex items-end">
                                <button type="button" onclick="removeMultiRow(this, 'list-group-price')"
                                    class="w-full h-[42px] flex items-center justify-center gap-1.5 text-xs font-semibold text-red-400 hover:text-red-500 hover:bg-red-50 border border-slate-200 hover:border-red-200 rounded-lg transition-all" title="Hapus baris">
                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                    Hapus
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Harga IDR</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">Rp</span>
                                    <input type="number" name="group_price_idr[]" value="{{ old('group_price_idr.'.$i) }}"
                                        placeholder="2950000" min="0" step="1000" class="form-input text-sm pl-9 w-full">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Harga USD</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">$</span>
                                    <input type="number" name="group_price_usd[]" value="{{ old('group_price_usd.'.$i) }}"
                                        placeholder="164" min="0" step="0.01" class="form-input text-sm pl-7 w-full">
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <button type="button" onclick="addGroupPriceRow()" class="mt-3 text-xs font-semibold text-brand-600 hover:text-brand-700 flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Tambah Tingkatan Harga
                </button>
            </div>

            {{-- Add-on Opsional --}}
            <div class="bg-white rounded-xl border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                    <span class="w-5 h-5 bg-teal-100 text-teal-600 rounded flex items-center justify-center text-xs">4</span>
                    Add-on Opsional
                </h2>
                <p class="text-xs text-slate-400 mb-4">Contoh: English-Speaking Cultural Guide, tambahan makan siang, dll.</p>

                <div id="list-addon" class="space-y-2">
                    @php $addons = old('addon_name', ['']); @endphp
                    @foreach($addons as $i => $name)
                    <div class="border border-slate-200 rounded-lg p-4 list-row" data-index="{{ $i }}">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Nama Add-on</label>
                                <input type="text" name="addon_name[]" value="{{ old('addon_name.'.$i) }}"
                                    placeholder="Contoh: English-Speaking Guide" class="form-input text-sm w-full">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Deskripsi (opsional)</label>
                                <input type="text" name="addon_description[]" value="{{ old('addon_description.'.$i) }}"
                                    placeholder="Deskripsi singkat" class="form-input text-sm w-full">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mt-3">
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Harga IDR</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">Rp</span>
                                    <input type="number" name="addon_price_idr[]" value="{{ old('addon_price_idr.'.$i) }}"
                                        placeholder="650000" min="0" step="1000" class="form-input text-sm pl-9 w-full">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Harga USD</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">$</span>
                                    <input type="number" name="addon_price_usd[]" value="{{ old('addon_price_usd.'.$i) }}"
                                        placeholder="36" min="0" step="0.01" class="form-input text-sm pl-7 w-full">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-slate-400 mb-1">Satuan</label>
                                <input type="text" name="addon_unit[]" value="{{ old('addon_unit.'.$i) }}"
                                    placeholder="per group" class="form-input text-sm w-full">
                            </div>
                            <div class="flex items-end">
                                <button type="button" onclick="removeMultiRow(this, 'list-addon')"
                                    class="w-full h-[42px] flex items-center justify-center gap-1.5 text-xs font-semibold text-red-400 hover:text-red-500 hover:bg-red-50 border border-slate-200 hover:border-red-200 rounded-lg transition-all" title="Hapus baris">
                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                    Hapus
                                </button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <button type="button" onclick="addAddonRow()" class="mt-3 text-xs font-semibold text-teal-600 hover:text-teal-700 flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Tambah Add-on
                </button>
            </div>

            {{-- Gambar Package --}}
            <div class="bg-white rounded-xl border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                    <span class="w-5 h-5 bg-sky-100 text-sky-600 rounded flex items-center justify-center text-xs">2</span>
                    Gambar Package
                </h2>

                <label for="images" class="form-label">Upload Gambar (bisa lebih dari satu)</label>
                <input type="file" name="images[]" id="images" accept="image/png, image/jpeg, image/jpg, image/webp"
                    multiple class="form-input @error('images.*') border-red-400 @enderror"
                    onchange="previewImages(event)">
                <p class="text-xs text-slate-400 mt-1">Format JPG, PNG, atau WEBP. Maks. 2MB per gambar.</p>
                @error('images.*')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror

                <div id="imagePreviewGrid" class="grid grid-cols-3 sm:grid-cols-4 gap-3 mt-4"></div>
            </div>

            {{-- Include / Exclude --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div class="bg-white rounded-xl border border-slate-200 p-6">
                    <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                        <span class="w-5 h-5 bg-emerald-100 text-emerald-600 rounded flex items-center justify-center">
                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                        </span>
                        Include
                    </h2>
                    @include('admin.packages._dynamic_list', [
                        'fieldName'   => 'include',
                        'label'       => 'Include',
                        'placeholder' => 'Contoh: Tiket pesawat PP',
                        'color'       => 'emerald',
                        'values'      => old('include', ['']),
                        'iconPath'    => 'M12 4v16m8-8H4',
                    ])
                </div>
                <div class="bg-white rounded-xl border border-slate-200 p-6">
                    <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                        <span class="w-5 h-5 bg-red-100 text-red-500 rounded flex items-center justify-center">
                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                        </span>
                        Exclude
                    </h2>
                    @include('admin.packages._dynamic_list', [
                        'fieldName'   => 'exclude',
                        'label'       => 'Exclude',
                        'placeholder' => 'Contoh: Biaya visa',
                        'color'       => 'red',
                        'values'      => old('exclude', ['']),
                        'iconPath'    => 'M12 4v16m8-8H4',
                    ])
                </div>
            </div>

            {{-- Itinerary --}}
            <div class="bg-white rounded-xl border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                    <span class="w-5 h-5 bg-violet-100 text-violet-600 rounded flex items-center justify-center text-xs">3</span>
                    Itinerary
                </h2>
                <p class="text-xs text-slate-400 mb-4">Setiap baris mewakili satu item perjalanan, pisahkan per hari/aktivitas.</p>
                @include('admin.packages._dynamic_list', [
                    'fieldName'   => 'itinerary',
                    'label'       => 'Itinerary',
                    'placeholder' => 'Contoh: Hari 1 – Tiba di Bali, check-in hotel',
                    'color'       => 'violet',
                    'values'      => old('itinerary', ['']),
                    'iconPath'    => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
                ])
            </div>

            {{-- Notes --}}
            <div class="bg-white rounded-xl border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                    <span class="w-5 h-5 bg-amber-100 text-amber-600 rounded flex items-center justify-center text-xs">4</span>
                    Notes / Catatan
                </h2>
                <p class="text-xs text-slate-400 mb-4">Informasi tambahan atau ketentuan yang perlu diketahui tamu.</p>
                @include('admin.packages._dynamic_list', [
                    'fieldName'   => 'notes',
                    'label'       => 'Notes',
                    'placeholder' => 'Contoh: Harga dapat berubah sewaktu-waktu',
                    'color'       => 'amber',
                    'values'      => old('notes', ['']),
                    'iconPath'    => 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z',
                ])
            </div>

        </div>

        {{-- Right Column: Summary & Action --}}
        <div class="space-y-4">
            <div class="bg-white rounded-xl border border-slate-200 p-5 sticky top-4">
                <h3 class="text-sm font-bold text-slate-700 mb-4">Simpan Package</h3>
                <p class="text-xs text-slate-400 mb-5">Pastikan semua informasi sudah benar sebelum menyimpan.</p>

                <div class="space-y-2">
                    <button type="submit" class="btn-primary w-full justify-center">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
                        </svg>
                        Simpan Package
                    </button>
                    <a href="{{ route('admin.packages.index') }}" class="btn-secondary w-full justify-center">
                        Batal
                    </a>
                </div>

                <div class="mt-5 pt-5 border-t border-slate-100 space-y-2">
                    <div class="flex items-center gap-2 text-xs text-slate-400">
                        <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        Field bertanda <span class="text-red-400 font-bold">*</span> wajib diisi
                    </div>
                    <div class="flex items-center gap-2 text-xs text-slate-400">
                        <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        Include/Exclude/Itinerary/Notes disimpan per baris
                    </div>
                </div>
            </div>
        </div>

    </div>
</form>
@endsection

@push('scripts')
<script>
    function addRow(fieldName, placeholder) {
        const container = document.getElementById('list-' + fieldName);
        const rows = container.querySelectorAll('.list-row');
        const newIndex = rows.length;

        const row = document.createElement('div');
        row.className = 'flex items-center gap-2 list-row';
        row.dataset.index = newIndex;
        row.innerHTML = `
            <div class="flex items-center gap-2 flex-1 bg-white border border-slate-200 rounded-lg px-3 py-2.5 focus-within:ring-2 focus-within:ring-brand-400 focus-within:border-transparent transition-all">
                <span class="text-slate-300 text-xs font-bold w-5 text-center row-number select-none">${newIndex + 1}</span>
                <input
                    type="text"
                    name="${fieldName}[]"
                    placeholder="${placeholder}"
                    class="flex-1 text-sm text-slate-700 placeholder-slate-300 bg-transparent focus:outline-none"
                    autofocus
                />
            </div>
            <button type="button" onclick="removeRow(this)" class="p-2 text-slate-300 hover:text-red-400 hover:bg-red-50 rounded-lg transition-all flex-shrink-0" title="Hapus baris">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        `;
        container.appendChild(row);
        row.querySelector('input').focus();
        renumberRows(container);
    }

    function removeRow(btn) {
        const row = btn.closest('.list-row');
        const container = row.closest('.space-y-2');
        const allRows = container.querySelectorAll('.list-row');
        if (allRows.length <= 1) {
            // clear the input instead of removing if it's the last one
            row.querySelector('input').value = '';
            return;
        }
        row.remove();
        renumberRows(container);
    }

    function renumberRows(container) {
        container.querySelectorAll('.list-row').forEach((row, i) => {
            const num = row.querySelector('.row-number');
            if (num) num.textContent = i + 1;
        });
    }

    function previewImages(event, targetGridId = 'imagePreviewGrid') {
        const files = event.target.files;
        const grid = document.getElementById(targetGridId);
        grid.innerHTML = '';

        Array.from(files).forEach(file => {
            const reader = new FileReader();
            reader.onload = function (e) {
                const wrapper = document.createElement('div');
                wrapper.className = 'relative aspect-square rounded-lg overflow-hidden border border-slate-200';
                wrapper.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover" />`;
                grid.appendChild(wrapper);
            };
            reader.readAsDataURL(file);
        });
    }

    function addGroupPriceRow() {
        const container = document.getElementById('list-group-price');
        const row = document.createElement('div');
        row.className = 'border border-slate-200 rounded-lg p-4 list-row mb-3';
        row.innerHTML = `
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
                <div class="lg:col-span-2">
                    <label class="block text-xs font-medium text-slate-400 mb-1">Label</label>
                    <input type="text" name="group_label[]" placeholder="Contoh: 2 Guests" class="form-input text-sm w-full">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Min Pax</label>
                    <input type="number" name="group_min_pax[]" placeholder="Min" min="1" class="form-input text-sm w-full">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Max Pax</label>
                    <input type="number" name="group_max_pax[]" placeholder="Max" min="1" class="form-input text-sm w-full">
                </div>
                <div class="flex items-end">
                    <button type="button" onclick="removeMultiRow(this, 'list-group-price')"
                        class="w-full h-[42px] flex items-center justify-center gap-1.5 text-xs font-semibold text-red-400 hover:text-red-500 hover:bg-red-50 border border-slate-200 hover:border-red-200 rounded-lg transition-all" title="Hapus baris">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        Hapus
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Harga IDR</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">Rp</span>
                        <input type="number" name="group_price_idr[]" placeholder="2950000" min="0" step="1000" class="form-input text-sm pl-9 w-full">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Harga USD</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">$</span>
                        <input type="number" name="group_price_usd[]" placeholder="164" min="0" step="0.01" class="form-input text-sm pl-7 w-full">
                    </div>
                </div>
            </div>
        `;
        container.appendChild(row);
        row.querySelector('input').focus();
    }

    function addAddonRow() {
        const container = document.getElementById('list-addon');
        const row = document.createElement('div');
        row.className = 'border border-slate-200 rounded-lg p-4 list-row mb-3';
        row.innerHTML = `
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Nama Add-on</label>
                    <input type="text" name="addon_name[]" placeholder="Contoh: English-Speaking Guide" class="form-input text-sm w-full">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Deskripsi (opsional)</label>
                    <input type="text" name="addon_description[]" placeholder="Deskripsi singkat" class="form-input text-sm w-full">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mt-3">
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Harga IDR</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">Rp</span>
                        <input type="number" name="addon_price_idr[]" placeholder="650000" min="0" step="1000" class="form-input text-sm pl-9 w-full">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Harga USD</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-slate-400">$</span>
                        <input type="number" name="addon_price_usd[]" placeholder="36" min="0" step="0.01" class="form-input text-sm pl-7 w-full">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Satuan</label>
                    <input type="text" name="addon_unit[]" placeholder="per group" class="form-input text-sm w-full">
                </div>
                <div class="flex items-end">
                    <button type="button" onclick="removeMultiRow(this, 'list-addon')"
                        class="w-full h-[42px] flex items-center justify-center gap-1.5 text-xs font-semibold text-red-400 hover:text-red-500 hover:bg-red-50 border border-slate-200 hover:border-red-200 rounded-lg transition-all" title="Hapus baris">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        Hapus
                    </button>
                </div>
            </div>
        `;
        container.appendChild(row);
        row.querySelector('input').focus();
    }

    function removeMultiRow(btn, containerId) {
        const container = document.getElementById(containerId);
        const row = btn.closest('.list-row');
        const allRows = container.querySelectorAll('.list-row');
        if (allRows.length <= 1) {
            row.querySelectorAll('input').forEach(input => input.value = '');
            return;
        }
        row.remove();
    }
    
</script>
@endpush