@extends('layouts.app')

@section('title', 'Dashboard Mempelai - Janoer Koening')

@push('styles')
<style>
    .drag-handle {
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }
    .drag-handle:active {
        cursor: grabbing;
    }
    .drag-handle svg, .drag-handle i {
        pointer-events: none;
    }
    .sortable-fallback {
        opacity: 0.85 !important;
        background: #ffffff !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
        border-radius: 1.5rem !important;
    }
    /* Mobile Responsive Optimizations */
    @media (max-width: 640px) {
        .accordion-content {
            padding: 1rem !important;
        }
        .unified-section-card {
            border-radius: 1.25rem !important;
        }
    }
    .scrollbar-none::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-none {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>
@endpush

@section('content')
<div class="py-10 bg-[#FAF7F0]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Welcome Header & Status Pill -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-8 mb-8 border-b border-[#A8BBA6]/20 gap-4">
            <div>
                <span class="text-xs font-semibold text-deepsage uppercase tracking-widest">Dashboard Mempelai</span>
                <h1 class="font-heading text-3xl sm:text-4xl font-bold text-charcoal">Halo, {{ $user->name }}!</h1>
                <p class="text-xs sm:text-sm text-charcoal/70 mt-1">Kelola detail undangan pernikahan, pilih tema dengan filter paket, dan atur urutan section.</p>
            </div>
            @if($activeInvitation)
                <div class="flex flex-wrap items-center gap-2.5 sm:gap-3">
                    <!-- 1. Demo Versi Mobile (Popup Phone Frame Modal) -->
                    <button type="button" onclick="openMobilePreviewModal()" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-[#A8BBA6]/40 text-charcoal text-xs font-bold rounded-full shadow-xs hover:bg-[#FAF7F0] hover:border-deepsage transition active:scale-95 cursor-pointer">
                        <i data-lucide="smartphone" class="w-4 h-4 text-deepsage"></i>
                        <span>Demo Versi Mobile</span>
                    </button>

                    <!-- 2. Demo Versi Desktop (Tab Baru Fullscreen - Hanya Desktop) -->
                    <a href="{{ route('invitation.public', $activeInvitation->slug) }}?preview=1" target="_blank" rel="noopener noreferrer" class="hidden md:inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-[#A8BBA6]/40 text-charcoal text-xs font-bold rounded-full shadow-xs hover:bg-[#FAF7F0] hover:border-deepsage transition active:scale-95 cursor-pointer">
                        <i data-lucide="monitor" class="w-4 h-4 text-deepsage"></i>
                        <span>Demo Versi Desktop</span>
                    </a>

                    @if($activeInvitation->isManaged())
                        <!-- Tombol Hubungi Tim Kami (VIP Managed) -->
                        <a href="{{ \App\Support\VipContact::whatsappUrl('ID Undangan: #' . $activeInvitation->id . ' (' . $activeInvitation->title . ')') }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-6 py-2.5 bg-brandgold text-charcoal font-bold text-xs uppercase tracking-wider rounded-full shadow-lg hover:bg-opacity-90 transition">
                            <i data-lucide="phone-call" class="w-4 h-4"></i>
                            <span>{{ \App\Support\VipContact::label() }}</span>
                        </a>

                        @if($activeInvitation->subdomain)
                            <a href="{{ $activeInvitation->public_url }}" target="_blank" class="inline-flex items-center gap-1.5 px-4 py-2 bg-amber-100 text-amber-900 text-xs font-bold rounded-full font-mono shadow-xs hover:bg-amber-200 transition">
                                <i data-lucide="crown" class="w-3.5 h-3.5 text-amber-700"></i>
                                <span>{{ $activeInvitation->subdomain }}.{{ config('app.vip_domain', 'janoerkoening.com') }}</span>
                            </a>
                        @endif
                    @elseif(!$activeInvitation->is_paid)
                        <a href="{{ route('checkout.index', ['invitation' => $activeInvitation->id]) }}" class="inline-flex items-center gap-2 px-6 py-2.5 bg-deepsage text-ivory text-xs font-semibold uppercase tracking-wider rounded-full shadow-lg hover:bg-opacity-90 transition">
                            <i data-lucide="sparkles" class="w-4 h-4 text-brandgold"></i>
                            Aktifkan & Publish Undangan
                        </a>
                    @else
                        <span class="px-4 py-2 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full bg-emerald-600"></span>
                            PUBLISHED (Masa Aktif s/d {{ $activeInvitation->expires_at ? $activeInvitation->expires_at->format('d M Y') : '1 Tahun' }})
                        </span>
                    @endif
                </div>
            @endif
        </div>

        @if(session('success'))
            <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-2xl text-xs sm:text-sm flex items-center gap-2">
                <i data-lucide="check-circle" class="w-5 h-5 text-emerald-600 shrink-0"></i>
                <span>{{ session('success') }}</span>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-800 rounded-2xl text-xs sm:text-sm flex items-center gap-2">
                <i data-lucide="alert-circle" class="w-5 h-5 text-red-600 shrink-0"></i>
                <span>{{ session('error') }}</span>
            </div>
        @endif

        @if(session('info'))
            <div class="mb-6 p-4 bg-blue-50 border border-blue-200 text-blue-800 rounded-2xl text-xs sm:text-sm flex items-center gap-2">
                <i data-lucide="info" class="w-5 h-5 text-blue-600 shrink-0"></i>
                <span>{{ session('info') }}</span>
            </div>
        @endif

        @if($activeInvitation && $activeInvitation->isManaged())
            <!-- VIP Full Service Banner -->
            <div class="mb-8 p-6 bg-gradient-to-r from-amber-50 via-[#FAF7F0] to-amber-50/60 border-2 border-amber-300/80 rounded-3xl shadow-sm">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="flex items-start gap-3.5">
                        <div class="w-10 h-10 rounded-2xl bg-amber-500 text-white flex items-center justify-center shrink-0 shadow-md">
                            <i data-lucide="crown" class="w-5 h-5"></i>
                        </div>
                        <div>
                            <div class="flex items-center gap-2 flex-wrap">
                                <h3 class="font-heading text-lg font-bold text-amber-950">Layanan Eksklusif Paket VIP (Full-Service Custom)</h3>
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase bg-amber-200 text-amber-900">
                                    {{ \App\Models\Invitation::MANAGED_STATUS_LABELS[$activeInvitation->managed_status] ?? 'Sedang Diproses Tim' }}
                                </span>
                            </div>
                            <p class="text-xs text-amber-900/80 mt-1 max-w-2xl leading-relaxed">
                                Undangan Anda ditangani langsung oleh tim desainer profesional Janoer Koening. Anda tidak perlu mengedit sendiri template ini. Segala permintaan custom layout, musik, dan konten cukup komunikasikan dengan tim kami.
                            </p>
                            @if($activeInvitation->subdomain)
                                <div class="mt-2.5 flex items-center gap-2 text-xs">
                                    <span class="text-amber-900/70 font-medium">Subdomain Eksklusif:</span>
                                    <a href="{{ $activeInvitation->public_url }}" target="_blank" class="font-mono font-bold text-amber-900 underline hover:text-amber-700">
                                        {{ $activeInvitation->subdomain }}.{{ config('app.vip_domain', 'janoerkoening.com') }} &rarr;
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-3 shrink-0">
                        <a href="{{ \App\Support\VipContact::whatsappUrl('ID Undangan: #' . $activeInvitation->id . ' (' . $activeInvitation->title . ')') }}" target="_blank" rel="noopener noreferrer" class="px-5 py-2.5 bg-brandgold hover:bg-[#d4b970] text-charcoal text-xs font-bold uppercase tracking-wider rounded-full shadow-md flex items-center gap-2 transition active:scale-95">
                            <i data-lucide="phone-call" class="w-4 h-4"></i>
                            <span>{{ \App\Support\VipContact::label() }}</span>
                        </a>
                    </div>
                </div>
            </div>
        @endif

        @if(!$user->hasVerifiedEmail())
            <div class="mb-6 p-4 bg-amber-50/90 border border-amber-200/80 rounded-2xl flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs sm:text-sm text-amber-900 shadow-2xs">
                <div class="flex items-center gap-2.5">
                    <span class="w-2.5 h-2.5 rounded-full bg-amber-500 animate-ping shrink-0"></span>
                    <div>
                        <strong class="font-semibold">Alamat email Anda ({{ $user->email }}) belum diverifikasi.</strong>
                        <span class="block sm:inline text-amber-800/80 text-[11px] sm:text-xs">Silakan periksa inbox / spam email Anda agar dapat mempublikasikan undangan dan melakukan pembayaran.</span>
                    </div>
                </div>
                <form action="{{ route('verification.send') }}" method="POST" class="shrink-0">
                    @csrf
                    <button type="submit" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white text-xs font-bold rounded-full transition shadow-xs flex items-center gap-1.5 cursor-pointer active:scale-95">
                        <i data-lucide="mail" class="w-3.5 h-3.5"></i>
                        <span>Kirim Ulang Email</span>
                    </button>
                </form>
            </div>
        @endif

        <!-- SUB-NAV TABS CLIENT -->
        <div class="flex items-center gap-2 mb-6 sm:mb-8 border-b border-[#A8BBA6]/20 pb-3 sm:pb-4 overflow-x-auto whitespace-nowrap -mx-4 px-4 sm:mx-0 sm:px-0 scrollbar-none">
            <a href="{{ route('client.dashboard') }}" class="shrink-0 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full text-xs font-bold transition flex items-center gap-2 bg-deepsage text-ivory shadow">
                <i data-lucide="palette" class="w-4 h-4"></i>
                Desain &amp; Isi Undangan
            </a>
            <a href="{{ route('client.guests') }}" class="shrink-0 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full text-xs font-bold transition flex items-center gap-2 bg-white text-charcoal/70 hover:text-charcoal border border-[#A8BBA6]/20 shadow-sm">
                <i data-lucide="users" class="w-4 h-4 text-deepsage"></i>
                Buku Tamu &amp; WhatsApp ({{ $activeInvitation ? $activeInvitation->guests->count() : 0 }})
            </a>
            <a href="{{ route('client.wishes') }}" class="shrink-0 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full text-xs font-bold transition flex items-center gap-2 bg-white text-charcoal/70 hover:text-charcoal border border-[#A8BBA6]/20 shadow-sm">
                <i data-lucide="heart" class="w-4 h-4 text-deepsage"></i>
                Doa &amp; Restu Masuk ({{ $activeInvitation ? $activeInvitation->wishes->count() : 0 }})
            </a>
        </div>

        @if(!$activeInvitation)
            <div class="bg-white p-6 sm:p-8 rounded-3xl border border-[#A8BBA6]/20 text-center py-12">
                <i data-lucide="mail-open" class="w-12 h-12 text-deepsage mx-auto mb-3"></i>
                <h3 class="font-heading text-2xl font-bold text-charcoal">Belum Ada Undangan</h3>
                <p class="text-sm text-charcoal/70 max-w-md mx-auto mt-2">Buat draf undangan pernikahan gratis pertamamu sekarang.</p>
                <div class="mt-6">
                    <a href="{{ route('onboarding.create') }}" class="px-6 py-3 bg-deepsage text-ivory text-xs font-semibold uppercase tracking-wider rounded-full shadow hover:bg-opacity-90 transition">
                        + Buat Undangan Gratis
                    </a>
                </div>
            </div>
        @else

        <!-- 4 KPI Summary Cards using Template Admin Component Tokens -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-2.5 sm:gap-4 mb-6 sm:mb-8">
            <!-- Card 1: Status Undangan -->
            <div class="ax-card">
                <div class="ax-card__body p-3.5 sm:p-5">
                    <div class="ax-kpi">
                        <div class="ax-kpi__top flex-wrap gap-1">
                            <span class="ax-kpi__icon ax-kpi__icon--c1">
                                <i data-lucide="{{ $activeInvitation->is_paid ? 'globe' : 'file-edit' }}" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                            </span>
                            <span class="ax-kpi__label text-[11px] sm:text-xs">Status</span>
                            <span class="ax-badge {{ $activeInvitation->is_paid ? 'ax-badge--success' : 'ax-badge--warning' }} ax-badge--pill text-[9px] sm:text-[10px]">
                                {{ $activeInvitation->is_paid ? 'Published' : 'Draft' }}
                            </span>
                        </div>
                        <div class="ax-kpi__value font-heading text-lg sm:text-2xl font-bold text-charcoal truncate">
                            {{ $activeInvitation->is_paid ? 'Online Aktif' : 'Belum Publish' }}
                        </div>
                        <div class="ax-kpi__caption text-[10px] sm:text-xs truncate">
                            {{ $activeInvitation->is_paid ? 'Dapat diakses seluruh tamu' : 'Selesaikan pembayaran' }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2: Paket & Template -->
            <div class="ax-card">
                <div class="ax-card__body p-3.5 sm:p-5">
                    <div class="ax-kpi">
                        <div class="ax-kpi__top flex-wrap gap-1">
                            <span class="ax-kpi__icon ax-kpi__icon--c2">
                                <i data-lucide="sparkles" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                            </span>
                            <span class="ax-kpi__label text-[11px] sm:text-xs">Desain</span>
                            <span class="ax-badge ax-badge--accent ax-badge--pill text-[9px] sm:text-[10px]">
                                {{ ucfirst($activeInvitation->template->package_tier ?? 'Simple') }}
                            </span>
                        </div>
                        <div class="ax-kpi__value font-heading text-lg sm:text-2xl font-bold text-deepsage truncate">
                            {{ $activeInvitation->template->name ?? 'Default' }}
                        </div>
                        <div class="ax-kpi__caption text-[10px] sm:text-xs truncate">
                            {{ count($activeInvitation->active_sections) }} Section tersusun
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3: Tamu Undangan -->
            <div class="ax-card">
                <div class="ax-card__body p-3.5 sm:p-5">
                    <div class="ax-kpi">
                        <div class="ax-kpi__top flex-wrap gap-1">
                            <span class="ax-kpi__icon ax-kpi__icon--c3">
                                <i data-lucide="users" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                            </span>
                            <span class="ax-kpi__label text-[11px] sm:text-xs">Tamu</span>
                            <span class="ax-badge ax-badge--neutral ax-badge--pill text-[9px] sm:text-[10px]">WA Siap</span>
                        </div>
                        <div class="ax-kpi__value font-heading text-lg sm:text-2xl font-bold text-charcoal">
                            {{ $activeInvitation->guests->count() }} <span class="text-xs font-normal text-charcoal/50">Tamu</span>
                        </div>
                        <div class="ax-kpi__caption text-[10px] sm:text-xs truncate">
                            Link personal WhatsApp otomatis
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 4: Buku Tamu & Doa Restu -->
            <div class="ax-card">
                <div class="ax-card__body p-3.5 sm:p-5">
                    <div class="ax-kpi">
                        <div class="ax-kpi__top flex-wrap gap-1">
                            <span class="ax-kpi__icon ax-kpi__icon--c4">
                                <i data-lucide="heart" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                            </span>
                            <span class="ax-kpi__label text-[11px] sm:text-xs">Doa</span>
                            <span class="ax-badge ax-badge--success ax-badge--pill text-[9px] sm:text-[10px]">Masuk</span>
                        </div>
                        <div class="ax-kpi__value font-heading text-lg sm:text-2xl font-bold text-charcoal">
                            {{ $activeInvitation->wishes->count() }} <span class="text-xs font-normal text-charcoal/50">Pesan</span>
                        </div>
                        <div class="ax-kpi__caption text-[10px] sm:text-xs truncate">
                            Dari sahabat &amp; sanak keluarga
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-5xl mx-auto">
            <!-- FORM EDIT DETAIL PERNIKAHAN -->
            <form id="invitationForm" action="{{ route('client.invitation.update', $activeInvitation->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                        @csrf

                        <!-- 1. Pilihan Template Visual dengan Filter Pencarian, Kategori, & Paket -->
                        <div class="bg-white p-6 sm:p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-sm space-y-6">
                            <div class="space-y-4">
                                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                                    <div>
                                        <h3 class="font-heading text-2xl font-bold text-charcoal flex items-center gap-2">
                                            <span class="w-7 h-7 rounded-full bg-deepsage text-ivory text-xs flex items-center justify-center font-sans">1</span>
                                            Pilih Desain Template
                                        </h3>
                                        <p class="text-xs text-charcoal/60 mt-0.5">Tentukan tema visual undanganmu. Gunakan filter paket, kategori, atau cari nama tema:</p>
                                        @if($activeInvitation && $activeInvitation->is_paid)
                                            <div class="mt-2.5 inline-flex items-center gap-2 px-3 py-1 rounded-xl bg-emerald-50 border border-emerald-200/80 text-emerald-800 text-xs font-semibold shadow-2xs">
                                                <i data-lucide="shield-check" class="w-3.5 h-3.5 text-emerald-600 flex-shrink-0"></i>
                                                <span>Paket Aktif: <strong class="font-bold text-emerald-900">{{ ucfirst($purchasedPackage?->name ?? $activeInvitation->getPurchasedTier()) }}</strong></span>
                                                <span class="text-emerald-700 text-[11px] font-normal">({{ $activeInvitation->getPurchasedTier() === 'simple' ? 'Bebas pilih 97 template Simple' : ($activeInvitation->getPurchasedTier() === 'elegant' ? 'Bebas pilih 112 template Simple & Elegant' : 'Seluruh template terbuka') }})</span>
                                            </div>
                                        @endif
                                    </div>
                                    <span id="templateCountBadge" class="text-xs px-3.5 py-1.5 rounded-full bg-deepsage/10 text-deepsage font-bold self-start sm:self-auto border border-deepsage/20">
                                        Menampilkan {{ $templates->count() }} Template
                                    </span>
                                </div>

                                <!-- Filter Controls Toolbar -->
                                <div class="grid grid-cols-1 sm:grid-cols-12 gap-3 p-3.5 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/25">
                                    <!-- Search Input (5 Cols) -->
                                    <div class="sm:col-span-5 relative">
                                        <i data-lucide="search" class="w-4 h-4 text-charcoal/40 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"></i>
                                        <input type="text" id="templateSearchInput" oninput="debouncedApplyTemplateFilters()" placeholder="Cari nama atau kode template..." class="w-full pl-9 pr-3 py-2 text-xs rounded-xl border border-[#A8BBA6]/30 bg-white focus:outline-none focus:border-deepsage text-charcoal">
                                    </div>

                                    <!-- Category Filter (4 Cols) -->
                                    <div class="sm:col-span-4">
                                        @php
                                            $allCategories = $templates->pluck('category')->filter()->unique()->sort()->values();
                                        @endphp
                                        <select id="templateCategorySelect" onchange="applyTemplateFilters()" class="w-full px-3 py-2 text-xs rounded-xl border border-[#A8BBA6]/30 bg-white focus:outline-none focus:border-deepsage text-charcoal font-medium">
                                            <option value="all">Semua Kategori ({{ $allCategories->count() }})</option>
                                            @foreach($allCategories as $cat)
                                                <option value="{{ strtolower($cat) }}">{{ $cat }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Tier Tabs Filter (3 Cols) -->
                                    <div class="sm:col-span-3">
                                        <select id="templateTierSelect" onchange="applyTemplateFilters()" class="w-full px-3 py-2 text-xs rounded-xl border border-[#A8BBA6]/30 bg-white focus:outline-none focus:border-deepsage text-charcoal font-semibold">
                                            <option value="all">Semua Paket</option>
                                            <option value="simple">Paket Simple</option>
                                            <option value="elegant">Paket Elegant</option>
                                            <option value="premium">Paket Premium</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Template Cards Visual Grid -->
                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-4" id="template-container">
                                @foreach($templates as $tmpl)
                                    @php
                                        $canSelect = $activeInvitation ? $activeInvitation->canSelectTemplate($tmpl) : true;
                                        $isLocked = ($activeInvitation && $activeInvitation->is_paid && !$canSelect);
                                        $tmplTier = strtolower($tmpl->package_tier ?? 'simple');
                                        $targetPackage = $packages->firstWhere('slug', $tmplTier) ?? $packages->firstWhere('slug', 'elegant');
                                        $targetPackageId = $targetPackage?->id ?? '';
                                        $targetPackagePrice = $targetPackage ? 'Rp ' . number_format($targetPackage->price, 0, ',', '.') : '';
                                        $isSelected = ($activeInvitation->template_id == $tmpl->id);
                                    @endphp
                                    <label class="template-card group relative border-2 rounded-2xl overflow-hidden cursor-pointer transition flex flex-col justify-between {{ $isSelected ? 'border-deepsage ring-2 ring-deepsage/20 bg-sage/5' : ($isLocked ? 'border-amber-200/80 bg-amber-50/20 hover:border-amber-400' : 'border-[#A8BBA6]/30 bg-white hover:border-deepsage') }}"
                                           data-tier="{{ $tmplTier }}"
                                           data-category="{{ strtolower($tmpl->category ?? '') }}"
                                           data-name="{{ strtolower($tmpl->name) }}"
                                           data-code="{{ strtolower($tmpl->code) }}"
                                           data-locked="{{ $isLocked ? 'true' : 'false' }}"
                                           data-template-name="{{ $tmpl->name }}"
                                           data-tier-name="{{ ucfirst($tmplTier) }}"
                                           data-thumb="{{ $tmpl->thumbnail_url }}"
                                           data-price="{{ $targetPackagePrice }}"
                                           data-package-id="{{ $targetPackageId }}"
                                           onclick="handleTemplateCardClick(event, this)">
                                        <div class="relative aspect-[3/4] sm:aspect-[4/5] w-full overflow-hidden bg-gray-100">
                                            <img src="{{ $tmpl->thumbnail_url }}" alt="{{ $tmpl->name }}" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300 {{ $isLocked ? 'grayscale-[20%] group-hover:grayscale-0' : '' }}">
                                            <span class="absolute top-2 left-2 px-2 py-0.5 bg-deepsage/90 text-ivory text-[9px] font-bold rounded-md uppercase tracking-wider shadow-xs backdrop-blur-xs">
                                                {{ $tmpl->code }}
                                            </span>
                                            @if($isLocked)
                                                <span class="absolute bottom-2 right-2 px-2 py-0.5 bg-amber-500 text-white text-[9px] font-extrabold rounded-md uppercase shadow-sm flex items-center gap-1 z-10">
                                                    <i data-lucide="lock" class="w-2.5 h-2.5"></i>
                                                    <span>Butuh {{ ucfirst($tmpl->package_tier) }}</span>
                                                </span>
                                                <!-- Overlay hover prompt -->
                                                <div class="absolute inset-0 bg-charcoal/30 backdrop-blur-[1px] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity p-2 z-20">
                                                    <span class="px-2.5 py-1 bg-charcoal/90 text-ivory text-[11px] font-bold rounded-lg shadow-lg flex items-center gap-1.5 border border-amber-400/40 text-center">
                                                        <i data-lucide="sparkles" class="w-3.5 h-3.5 text-amber-400"></i>
                                                        <span>Klik untuk Upgrade</span>
                                                    </span>
                                                </div>
                                            @elseif($tmpl->package_tier !== 'all')
                                                <span class="absolute bottom-2 right-2 px-2 py-0.5 bg-brandgold text-charcoal text-[9px] font-bold rounded uppercase shadow-xs">
                                                    Tier {{ ucfirst($tmpl->package_tier) }}
                                                </span>
                                            @endif
                                        </div>
                                        <div class="p-3 bg-white flex items-center justify-between border-t border-[#A8BBA6]/15">
                                            <div>
                                                <span class="text-xs font-bold text-charcoal block">{{ $tmpl->name }}</span>
                                                <span class="text-[10px] text-brandgold font-medium">{{ $tmpl->category }}</span>
                                            </div>
                                            @if($isLocked)
                                                <div class="flex items-center gap-1 text-amber-600" title="Perlu Upgrade Paket">
                                                    <input type="radio" name="template_id_locked" disabled class="accent-amber-500 opacity-60 cursor-not-allowed">
                                                    <i data-lucide="lock" class="w-3.5 h-3.5"></i>
                                                </div>
                                            @else
                                                <input type="radio" name="template_id" value="{{ $tmpl->id }}" onchange="handleTemplateChange('{{ $tmpl->package_tier }}')" class="accent-deepsage" {{ $isSelected ? 'checked' : '' }} required>
                                            @endif
                                        </div>
                                        <div class="px-3 py-1.5 bg-[#FAF7F0] border-t border-[#A8BBA6]/20 flex items-center justify-between gap-1 text-[10px]" onclick="event.stopPropagation()">
                                            <span class="text-charcoal/60 font-semibold text-[10px]">Demo:</span>
                                            <div class="flex items-center gap-1.5">
                                                <button type="button" 
                                                        onclick="event.stopPropagation(); event.preventDefault(); openMobilePreviewModal('{{ route('template.demo', $tmpl->slug) }}')" 
                                                        title="Demo Versi Mobile (Popup Frame)"
                                                        class="px-2 py-0.5 bg-white hover:bg-stone-100 border border-[#A8BBA6]/40 text-charcoal rounded-md font-bold flex items-center gap-1 transition active:scale-95 shadow-2xs cursor-pointer">
                                                    <i data-lucide="smartphone" class="w-3 h-3 text-deepsage"></i>
                                                    <span>HP</span>
                                                </button>
                                                <a href="{{ route('template.demo', $tmpl->slug) }}" 
                                                   target="_blank" 
                                                   rel="noopener noreferrer"
                                                   onclick="event.stopPropagation()"
                                                   title="Demo Versi Desktop (Tab Baru)"
                                                   class="px-2 py-0.5 bg-white hover:bg-stone-100 border border-[#A8BBA6]/40 text-charcoal rounded-md font-bold flex items-center gap-1 transition active:scale-95 shadow-2xs cursor-pointer">
                                                    <i data-lucide="monitor" class="w-3 h-3 text-deepsage"></i>
                                                    <span>PC</span>
                                                </a>
                                            </div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>

                            <!-- Template Pagination Controls (Mobile-Friendly) -->
                            <div id="templatePaginationControls" class="flex flex-col sm:flex-row items-center justify-between gap-3 pt-3 border-t border-[#A8BBA6]/20 text-xs">
                                <div class="text-[11px] text-charcoal/60" id="templatePageSummary">
                                    Memuat template...
                                </div>
                                <div class="flex items-center gap-2">
                                    <button type="button" onclick="prevTemplatePage()" id="prevTmplBtn" class="px-3.5 py-1.5 rounded-xl border border-[#A8BBA6]/30 bg-white hover:bg-gray-50 text-charcoal font-semibold disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1 transition active:scale-95 shadow-2xs">
                                        <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> <span>Sebelumnya</span>
                                    </button>
                                    <span id="templatePageIndicator" class="px-3.5 py-1.5 rounded-xl bg-deepsage/10 text-deepsage font-bold text-xs border border-deepsage/20">
                                        Halaman 1 / 1
                                    </span>
                                    <button type="button" onclick="nextTemplatePage()" id="nextTmplBtn" class="px-3.5 py-1.5 rounded-xl border border-[#A8BBA6]/30 bg-white hover:bg-gray-50 text-charcoal font-semibold disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1 transition active:scale-95 shadow-2xs">
                                        <span>Selanjutnya</span> <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                                    </button>
                                </div>
                            </div>

                        <!-- Slug URL -->
                        <div class="pt-4 border-t border-[#A8BBA6]/20">
                            <label class="block text-xs font-semibold text-charcoal/80 mb-1">Custom Link / Slug URL Undangan</label>
                            <div class="flex items-center">
                                <span class="px-2.5 sm:px-3 py-2.5 bg-gray-100 border border-r-0 border-charcoal/20 rounded-l-xl text-[11px] sm:text-xs text-charcoal/60 whitespace-nowrap shrink-0 font-mono">
                                    <span class="hidden sm:inline">{{ url('/u') }}/</span>
                                    <span class="sm:hidden">.../u/</span>
                                </span>
                                <input type="text" id="slug_input" name="slug" value="{{ $activeInvitation->slug }}" required oninput="debounceCheckSlug(this.value)" class="min-w-0 flex-grow px-3 sm:px-4 py-2.5 rounded-r-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none font-mono">
                            </div>
                            <div id="slug_check_status" class="hidden"></div>
                            @if(!$activeInvitation->is_paid)
                                <div class="mt-2.5 p-3 bg-amber-50 rounded-xl border border-amber-200/80 text-[11px] text-amber-900 flex items-start gap-2">
                                    <i data-lucide="info" class="w-4 h-4 text-amber-700 shrink-0 mt-0.5"></i>
                                    <div>
                                        <strong class="font-bold">Status Tautan Sementara (Masa Uji Coba):</strong>
                                        <p class="mt-0.5 leading-relaxed text-amber-800/90">
                                            Anda bebas mencoba tautan di atas selama masa trial. Namun statusnya masih reservasi sementara. Selesaikan pembayaran untuk mengunci kepemilikan tautan Anda secara permanen agar tidak dapat diambil pengantin lain.
                                        </p>
                                    </div>
                                </div>
                            @else
                                <div class="mt-2 text-[11px] text-emerald-700 flex items-center gap-1.5 font-medium">
                                    <i data-lucide="shield-check" class="w-3.5 h-3.5 text-emerald-600"></i>
                                    <span>Tautan resmi terkunci permanen untuk pernikahan Anda.</span>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- UNIFIED DRAGGABLE COLLAPSIBLE ACCORDION SECTIONS -->
                    <div class="space-y-4">
                        <input type="hidden" name="section_order" id="input_section_order" value="">

                        <!-- Toolbar: Header & Collapse/Expand All -->
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 bg-white rounded-3xl border border-[#A8BBA6]/20 shadow-xs">
                            <div>
                                <h3 class="font-heading text-xl font-bold text-charcoal flex items-center gap-2">
                                    <i data-lucide="layers" class="w-5 h-5 text-deepsage"></i>
                                    Susun Bagian &amp; Edit Konten Undangan
                                </h3>
                                <p class="text-xs text-charcoal/60 mt-0.5">
                                    Geser ikon <span class="font-mono text-deepsage font-bold">⋮⋮</span> untuk ubah urutan. Klik kartu untuk buka/tutup isian form.
                                </p>
                            </div>
                            <div class="flex items-center gap-2 self-start sm:self-auto flex-wrap">
                                <button type="button" onclick="expandAllAccordions()" class="px-3 py-1.5 text-xs font-semibold rounded-xl bg-gray-100 hover:bg-gray-200 text-charcoal transition active:scale-95">
                                    Buka Semua
                                </button>
                                <button type="button" onclick="collapseAllAccordions()" class="px-3 py-1.5 text-xs font-semibold rounded-xl bg-gray-100 hover:bg-gray-200 text-charcoal transition active:scale-95">
                                    Tutup Semua
                                </button>
                                <button type="button" onclick="saveUnifiedSectionsOrder(true)" id="btnSaveUnifiedSections" class="px-3.5 py-1.5 bg-deepsage text-ivory text-xs font-bold rounded-xl hover:bg-opacity-90 shadow-xs flex items-center gap-1.5 transition active:scale-95">
                                    <i data-lucide="check" class="w-3.5 h-3.5"></i>
                                    <span id="btnSaveUnifiedSectionsText">Simpan Urutan</span>
                                </button>
                            </div>
                        </div>

                        <!-- Draggable Container -->
                        <div id="unified-sections-container" class="space-y-3">
                            
                            <!-- 1. COUPLE (Informasi Kedua Mempelai) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="couple" data-name="Section: Informasi Pengantin">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-couple')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('couple', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('couple', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="users" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Informasi Kedua Mempelai
                                                <span class="text-[10px] px-2 py-0.5 rounded-full bg-deepsage/10 text-deepsage font-semibold">Wajib</span>
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Nama pengantin, orang tua, &amp; foto profil</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                            <span class="hidden sm:inline">Aktif</span>
                                            <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                            <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                        </label>
                                        <button type="button" onclick="toggleAccordion('sec-card-couple')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-couple" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-couple" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-6">
                                    <!-- Mempelai Pria -->
                                    <div>
                                        <h5 class="text-xs font-bold text-deepsage uppercase tracking-wider mb-3">Mempelai Pria</h5>
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Nama Lengkap &amp; Gelar</label>
                                                <input type="text" name="groom_name" value="{{ $activeInvitation->groom_name }}" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Nama Panggilan</label>
                                                <input type="text" name="groom_nickname" value="{{ $activeInvitation->groom_nickname }}" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div class="sm:col-span-2">
                                                <label class="block text-xs text-charcoal/80 mb-1">Keterangan Orang Tua (Bapak &amp; Ibu)</label>
                                                <input type="text" name="groom_parents" value="{{ $activeInvitation->groom_parents }}" placeholder="Putra dari Bpk. ... &amp; Ibu ..." class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Instagram (@username)</label>
                                                <input type="text" name="groom_instagram" value="{{ $activeInvitation->groom_instagram }}" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div>
                                                <div class="flex items-center justify-between mb-1">
                                                    <label class="block text-xs text-charcoal/80 font-medium">Foto Profil Pria (Maks 5MB)</label>
                                                    <div id="groom_loading" class="hidden text-[11px] text-deepsage font-semibold flex items-center gap-1">
                                                        <i data-lucide="loader" class="w-3.5 h-3.5 animate-spin"></i>
                                                        <span>Mengunggah...</span>
                                                    </div>
                                                </div>
                                                <input type="file" id="groom_file_input" accept="image/*" class="hidden" onchange="uploadSinglePhotoAjax('groom', event)">
                                                <div id="groom_preview_container">
                                                    @if($activeInvitation->groom_photo)
                                                        <div class="flex items-center gap-3 p-2 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/30">
                                                            <img src="{{ $activeInvitation->groom_photo }}" class="w-12 h-12 rounded-xl object-cover border shadow-xs" alt="Foto Pria">
                                                            <div class="flex-1 min-w-0">
                                                                <span class="text-xs font-bold text-charcoal block truncate">Foto Pria Tersimpan</span>
                                                                <span class="text-[10px] text-charcoal/50">Tampil di profil pria</span>
                                                            </div>
                                                            <div class="flex items-center gap-1">
                                                                <button type="button" onclick="document.getElementById('groom_file_input').click()" class="px-2.5 py-1 text-xs font-semibold bg-white border border-[#A8BBA6]/40 rounded-lg hover:bg-gray-50 transition" title="Ganti foto">Ganti</button>
                                                                <button type="button" onclick="deleteSinglePhotoAjax('groom')" class="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition" title="Hapus foto"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="p-2.5 bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-between">
                                                            <span class="text-[11px] text-charcoal/50">Belum ada foto profil pria.</span>
                                                            <button type="button" onclick="document.getElementById('groom_file_input').click()" class="px-3 py-1.5 bg-deepsage text-white text-xs font-semibold rounded-xl hover:bg-opacity-90 transition flex items-center gap-1.5">
                                                                <i data-lucide="upload" class="w-3.5 h-3.5"></i>
                                                                <span>Upload Foto</span>
                                                            </button>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Mempelai Wanita -->
                                    <div class="border-t border-[#A8BBA6]/20 pt-4">
                                        <h5 class="text-xs font-bold text-deepsage uppercase tracking-wider mb-3">Mempelai Wanita</h5>
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Nama Lengkap &amp; Gelar</label>
                                                <input type="text" name="bride_name" value="{{ $activeInvitation->bride_name }}" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Nama Panggilan</label>
                                                <input type="text" name="bride_nickname" value="{{ $activeInvitation->bride_nickname }}" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div class="sm:col-span-2">
                                                <label class="block text-xs text-charcoal/80 mb-1">Keterangan Orang Tua (Bapak &amp; Ibu)</label>
                                                <input type="text" name="bride_parents" value="{{ $activeInvitation->bride_parents }}" placeholder="Putri dari Bpk. ... &amp; Ibu ..." class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Instagram (@username)</label>
                                                <input type="text" name="bride_instagram" value="{{ $activeInvitation->bride_instagram }}" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div>
                                                <div class="flex items-center justify-between mb-1">
                                                    <label class="block text-xs text-charcoal/80 font-medium">Foto Profil Wanita (Maks 5MB)</label>
                                                    <div id="bride_loading" class="hidden text-[11px] text-deepsage font-semibold flex items-center gap-1">
                                                        <i data-lucide="loader" class="w-3.5 h-3.5 animate-spin"></i>
                                                        <span>Mengunggah...</span>
                                                    </div>
                                                </div>
                                                <input type="file" id="bride_file_input" accept="image/*" class="hidden" onchange="uploadSinglePhotoAjax('bride', event)">
                                                <div id="bride_preview_container">
                                                    @if($activeInvitation->bride_photo)
                                                        <div class="flex items-center gap-3 p-2 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/30">
                                                            <img src="{{ $activeInvitation->bride_photo }}" class="w-12 h-12 rounded-xl object-cover border shadow-xs" alt="Foto Wanita">
                                                            <div class="flex-1 min-w-0">
                                                                <span class="text-xs font-bold text-charcoal block truncate">Foto Wanita Tersimpan</span>
                                                                <span class="text-[10px] text-charcoal/50">Tampil di profil wanita</span>
                                                            </div>
                                                            <div class="flex items-center gap-1">
                                                                <button type="button" onclick="document.getElementById('bride_file_input').click()" class="px-2.5 py-1 text-xs font-semibold bg-white border border-[#A8BBA6]/40 rounded-lg hover:bg-gray-50 transition" title="Ganti foto">Ganti</button>
                                                                <button type="button" onclick="deleteSinglePhotoAjax('bride')" class="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition" title="Hapus foto"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="p-2.5 bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-between">
                                                            <span class="text-[11px] text-charcoal/50">Belum ada foto profil wanita.</span>
                                                            <button type="button" onclick="document.getElementById('bride_file_input').click()" class="px-3 py-1.5 bg-deepsage text-white text-xs font-semibold rounded-xl hover:bg-opacity-90 transition flex items-center gap-1.5">
                                                                <i data-lucide="upload" class="w-3.5 h-3.5"></i>
                                                                <span>Upload Foto</span>
                                                            </button>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Foto Bersama / Cover Depan Undangan -->
                                    <div class="border-t border-[#A8BBA6]/20 pt-4">
                                        <div class="flex items-center justify-between mb-2">
                                            <div>
                                                <h5 class="text-xs font-bold text-deepsage uppercase tracking-wider">Foto Berdua / Cover Depan Undangan</h5>
                                                <p class="text-[11px] text-charcoal/60 mt-0.5">Foto ini akan tampil sebagai foto sampul pembuka dan background sinematik saat tamu mengakses undangan.</p>
                                            </div>
                                            <div class="flex items-center gap-2">
                                                <div id="hero_loading" class="hidden text-[11px] text-deepsage font-semibold flex items-center gap-1">
                                                    <i data-lucide="loader" class="w-3.5 h-3.5 animate-spin"></i>
                                                    <span>Mengunggah...</span>
                                                </div>
                                                <span class="text-[10px] px-2 py-0.5 rounded-full bg-brandgold/20 text-brandgold font-bold">Rekomendasi</span>
                                            </div>
                                        </div>
                                        <input type="file" id="hero_file_input" accept="image/*" class="hidden" onchange="uploadSinglePhotoAjax('hero', event)">
                                        <div id="hero_preview_container">
                                            @if($activeInvitation->hero_photo)
                                                <div class="flex items-center gap-3 p-3 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/30 shadow-2xs">
                                                    <img src="{{ $activeInvitation->hero_photo }}" class="w-16 h-16 rounded-xl object-cover border shadow-xs" alt="Foto Bersama">
                                                    <div class="flex-1 min-w-0">
                                                        <span class="text-xs font-bold text-charcoal block">Foto Bersama Tersimpan</span>
                                                        <span class="text-[10px] text-charcoal/50">Tampil sebagai background &amp; cover sampul pembuka</span>
                                                    </div>
                                                    <div class="flex items-center gap-1.5">
                                                        <button type="button" onclick="document.getElementById('hero_file_input').click()" class="px-3 py-1.5 text-xs font-semibold bg-white border border-[#A8BBA6]/40 rounded-xl hover:bg-gray-50 transition" title="Ganti foto">Ganti</button>
                                                        <button type="button" onclick="deleteSinglePhotoAjax('hero')" class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-xl transition" title="Hapus foto"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="p-3 bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-between">
                                                    <span class="text-[11px] text-charcoal/50">Belum ada foto berdua khusus. *Bila dikosongkan, sampul memakai foto profil mempelai / ornamen tema.</span>
                                                    <button type="button" onclick="document.getElementById('hero_file_input').click()" class="px-3.5 py-1.5 bg-deepsage text-white text-xs font-semibold rounded-xl hover:bg-opacity-90 transition flex items-center gap-1.5 shrink-0 ml-3">
                                                        <i data-lucide="upload" class="w-3.5 h-3.5"></i>
                                                        <span>Upload Foto Berdua</span>
                                                    </button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 2. EVENT (Jadwal & Lokasi Acara) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="event" data-name="Section: Jadwal &amp; Lokasi Acara">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-event')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('event', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('event', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="calendar" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Jadwal &amp; Lokasi Acara
                                                <span class="text-[10px] px-2 py-0.5 rounded-full bg-deepsage/10 text-deepsage font-semibold">Akad &amp; Resepsi</span>
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Waktu, nama gedung, alamat &amp; Google Maps</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                            <span class="hidden sm:inline">Aktif</span>
                                            <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                            <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                        </label>
                                        <button type="button" onclick="toggleAccordion('sec-card-event')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-event" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-event" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-6">
                                    <!-- Sesi 1: Akad Nikah / Pemberkatan -->
                                    <div>
                                        <h5 class="text-xs font-bold text-deepsage uppercase tracking-wider mb-3">Sesi 1 (Akad Nikah / Pemberkatan)</h5>
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Judul Sesi</label>
                                                <input type="text" name="event_title_1" value="{{ $activeInvitation->event_title_1 }}" placeholder="Akad Nikah / Pemberkatan" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Waktu &amp; Tanggal</label>
                                                <input type="datetime-local" name="event_datetime_1" value="{{ $activeInvitation->event_datetime_1 ? $activeInvitation->event_datetime_1->format('Y-m-d\TH:i') : '' }}" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div class="sm:col-span-2">
                                                <label class="block text-xs text-charcoal/80 mb-1">Nama Tempat / Gedung</label>
                                                <input type="text" name="event_venue_1" value="{{ $activeInvitation->event_venue_1 }}" placeholder="Masjid Raya / Gereja / Hotel" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div class="sm:col-span-2">
                                                <label class="block text-xs text-charcoal/80 mb-1">Alamat Lengkap</label>
                                                <textarea name="event_address_1" rows="2" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">{{ $activeInvitation->event_address_1 }}</textarea>
                                            </div>
                                            <div class="sm:col-span-2">
                                                <label class="block text-xs text-charcoal/80 mb-1">Link Google Maps</label>
                                                <input type="url" name="event_maps_url_1" value="{{ $activeInvitation->event_maps_url_1 }}" placeholder="https://maps.google.com/..." class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none font-mono">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Sesi 2: Resepsi Pernikahan -->
                                    <div class="border-t border-[#A8BBA6]/20 pt-4">
                                        <h5 class="text-xs font-bold text-deepsage uppercase tracking-wider mb-3">Sesi 2 (Resepsi Pernikahan)</h5>
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Judul Sesi</label>
                                                <input type="text" name="event_title_2" value="{{ $activeInvitation->event_title_2 }}" placeholder="Resepsi Pernikahan" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-charcoal/80 mb-1">Waktu &amp; Tanggal</label>
                                                <input type="datetime-local" name="event_datetime_2" value="{{ $activeInvitation->event_datetime_2 ? $activeInvitation->event_datetime_2->format('Y-m-d\TH:i') : '' }}" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div class="sm:col-span-2">
                                                <label class="block text-xs text-charcoal/80 mb-1">Nama Tempat / Gedung</label>
                                                <input type="text" name="event_venue_2" value="{{ $activeInvitation->event_venue_2 }}" placeholder="Ballroom Gedung / Rumah Mempelai" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                                            </div>
                                            <div class="sm:col-span-2">
                                                <label class="block text-xs text-charcoal/80 mb-1">Alamat Lengkap</label>
                                                <textarea name="event_address_2" rows="2" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">{{ $activeInvitation->event_address_2 }}</textarea>
                                            </div>
                                            <div class="sm:col-span-2">
                                                <label class="block text-xs text-charcoal/80 mb-1">Link Google Maps</label>
                                                <input type="url" name="event_maps_url_2" value="{{ $activeInvitation->event_maps_url_2 }}" placeholder="https://maps.google.com/..." class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none font-mono">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 3. COUNTDOWN (Hitung Mundur) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="countdown" data-name="Section: Hitung Mundur">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-countdown')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('countdown', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('countdown', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="clock" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Section: Hitung Mundur Acara
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Menghitung hari, jam &amp; menit menuju hari H</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                            <span class="hidden sm:inline">Aktif</span>
                                            <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                            <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                        </label>
                                        <button type="button" onclick="toggleAccordion('sec-card-countdown')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-countdown" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-countdown" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-3">
                                    <div class="p-3 bg-[#FAF7F0] rounded-xl border border-[#A8BBA6]/20 text-xs text-charcoal/70 flex items-center gap-2">
                                        <i data-lucide="info" class="w-4 h-4 text-deepsage shrink-0"></i>
                                        <span>Target hitung mundur otomatis sinkron dengan tanggal &amp; waktu Sesi 1 (Akad Nikah / Pemberkatan) yang Anda atur pada jadwal acara di atas.</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 4. QUOTE (Quotes & Ayat Suci) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="quote" data-name="Section: Quotes / Ayat Suci">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-quote')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('quote', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('quote', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="quote" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Quotes &amp; Ayat Suci
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Pesan sakral, kutipan mutiara, atau ayat suci</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                            <span class="hidden sm:inline">Aktif</span>
                                            <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                            <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                        </label>
                                        <button type="button" onclick="toggleAccordion('sec-card-quote')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-quote" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-quote" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-4">
                                    <!-- Quick Sample Template Pills -->
                                    <div>
                                        <label class="block text-[11px] font-semibold text-charcoal/70 mb-1.5">Pilihan Contoh Teks Cepat (Klik untuk mengisi otomatis):</label>
                                        <div class="flex flex-wrap gap-1.5">
                                            <button type="button" onclick="setQuickQuote('rum')" class="px-2.5 py-1 rounded-lg bg-[#FAF7F0] hover:bg-deepsage hover:text-white border border-[#A8BBA6]/30 text-[11px] font-semibold text-charcoal/80 transition active:scale-95">
                                                🕌 QS. Ar-Rum: 21 (Islami)
                                            </button>
                                            <button type="button" onclick="setQuickQuote('korintus')" class="px-2.5 py-1 rounded-lg bg-[#FAF7F0] hover:bg-deepsage hover:text-white border border-[#A8BBA6]/30 text-[11px] font-semibold text-charcoal/80 transition active:scale-95">
                                                ✝️ 1 Korintus 13:4-8 (Nasrani)
                                            </button>
                                            <button type="button" onclick="setQuickQuote('bali')" class="px-2.5 py-1 rounded-lg bg-[#FAF7F0] hover:bg-deepsage hover:text-white border border-[#A8BBA6]/30 text-[11px] font-semibold text-charcoal/80 transition active:scale-95">
                                                🪷 Manawa Dharmasastra (Adat/Hindu)
                                            </button>
                                            <button type="button" onclick="setQuickQuote('romantis')" class="px-2.5 py-1 rounded-lg bg-[#FAF7F0] hover:bg-deepsage hover:text-white border border-[#A8BBA6]/30 text-[11px] font-semibold text-charcoal/80 transition active:scale-95">
                                                ❤️ Mutiara Romantis (Universal)
                                            </button>
                                        </div>
                                    </div>

                                    @php
                                        $defaultQuoteSample = "Dan di antara tanda-tanda (kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari jenismu sendiri, agar kamu cenderung dan merasa tenteram kepadanya, dan Dia menjadikan di antaramu rasa kasih dan sayang. Sungguh, pada yang demikian itu benar-benar terdapat tanda-tanda bagi kaum yang berpikir.";
                                        $defaultAuthorSample = "QS. Ar-Rum: 21";
                                    @endphp

                                    <div>
                                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Isi Kutipan / Terjemahan Ayat</label>
                                        <textarea id="quote_input" name="quote" rows="3" placeholder="Tuliskan ayat suci atau kata mutiara pernikahan..." class="w-full px-3 py-2.5 rounded-xl border border-charcoal/20 text-xs leading-relaxed focus:border-deepsage outline-none">{{ old('quote', $activeInvitation->quote ?: $defaultQuoteSample) }}</textarea>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Sumber Kutipan / Nama Surat / Tokoh</label>
                                        <input type="text" id="quote_author_input" name="quote_author" value="{{ old('quote_author', $activeInvitation->quote_author ?: $defaultAuthorSample) }}" placeholder="QS. Ar-Rum: 21 / 1 Korintus 13:4-7 / Kahlil Gibran" class="w-full px-3 py-2.5 rounded-xl border border-charcoal/20 text-xs focus:border-deepsage outline-none">
                                    </div>
                                </div>
                            </div>

                            <!-- 5. GALLERY (Galeri Foto Prewedding - INSTANT AJAX UPLOAD & KUOTA PAKET) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="gallery" data-name="Section: Galeri Foto Prewedding">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-gallery')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('gallery', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('gallery', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="image" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Galeri Foto Prewedding
                                                @if(!$activeInvitation->is_paid)
                                                    <span class="text-[10px] px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-200 font-bold inline-flex items-center gap-1">
                                                        <i data-lucide="lock" class="w-3 h-3"></i>
                                                        <span>Terkunci (Mode Trial)</span>
                                                    </span>
                                                @else
                                                    <span id="galleryQuotaBadge" class="text-[10px] px-2.5 py-0.5 rounded-full bg-brandgold text-charcoal font-bold">
                                                        {{ count($activeInvitation->gallery_photos ?? []) }} Foto Terunggah
                                                    </span>
                                                @endif
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Upload instan tanpa perlu simpan form dahulu</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                            <span class="hidden sm:inline">Aktif</span>
                                            <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                            <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                        </label>
                                        <button type="button" onclick="toggleAccordion('sec-card-gallery')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-gallery" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-gallery" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-4">
                                    @if(!$activeInvitation->is_paid)
                                        <!-- Locked Gallery Banner for Unpaid / Trial -->
                                        <div class="p-4 bg-amber-50/80 rounded-2xl border border-amber-200 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-left">
                                            <div class="flex items-start gap-3">
                                                <span class="p-2 rounded-xl bg-amber-100 text-amber-800 shrink-0 mt-0.5">
                                                    <i data-lucide="lock" class="w-4 h-4"></i>
                                                </span>
                                                <div>
                                                    <strong class="text-xs font-bold text-amber-950 flex items-center gap-1.5">
                                                        <span>Unggah Foto Galeri Prewedding Terkunci</span>
                                                        <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-200 text-amber-900">Masa Trial / Belum Lunas</span>
                                                    </strong>
                                                    <p class="text-[11px] text-amber-800/85 mt-1 leading-relaxed">
                                                        Pada masa uji coba (trial), galeri di undangan Anda secara otomatis menampilkan foto contoh estetik. Selesaikan pembayaran untuk dapat mengunggah koleksi foto prewedding Anda sendiri.
                                                    </p>
                                                </div>
                                            </div>
                                            <a href="{{ route('checkout.index') }}" class="px-4 py-2 bg-brandgold text-charcoal text-xs font-bold rounded-xl hover:bg-opacity-90 transition shrink-0 shadow-xs flex items-center justify-center gap-1.5 cursor-pointer">
                                                <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
                                                <span>Selesaikan Pembayaran</span>
                                            </a>
                                        </div>

                                        <!-- Preview of Demo Photos -->
                                        <div>
                                            <span class="text-xs font-semibold text-charcoal/70 block mb-2.5">Foto Contoh Estetik (Tampil Selama Masa Trial):</span>
                                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                                                @foreach(\App\Models\Invitation::getDefaultDemoGalleryPhotos() as $demoPhoto)
                                                    <div class="relative aspect-square rounded-2xl overflow-hidden border border-[#A8BBA6]/30 bg-gray-100 group shadow-2xs">
                                                        <img src="{{ $demoPhoto }}" class="w-full h-full object-cover" alt="Demo Gallery">
                                                        <span class="absolute bottom-1.5 left-1.5 px-2 py-0.5 rounded-md bg-black/60 text-white text-[9px] font-medium backdrop-blur-xs">Demo</span>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @else
                                        <!-- Instant Upload Bar & Quota Status -->
                                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/20">
                                            <div>
                                                <span class="text-xs font-bold text-charcoal block">Batas Kuota Paket:</span>
                                                <p id="galleryQuotaInfoText" class="text-[11px] text-charcoal/65 mt-0.5">
                                                    Paket Simple: Maksimal 4 foto prewedding (Maks. 5MB per file). Foto otomatis disimpan langsung ke server saat dipilih!
                                                </p>
                                            </div>
                                            <div class="flex items-center gap-2 self-start sm:self-auto">
                                                <label id="uploadTriggerLabel" class="px-4 py-2 rounded-xl bg-deepsage text-ivory text-xs font-bold flex items-center gap-1.5 cursor-pointer hover:bg-opacity-90 shadow-xs transition active:scale-95">
                                                    <i data-lucide="upload" class="w-3.5 h-3.5"></i>
                                                    <span>+ Pilih &amp; Upload Foto</span>
                                                    <input type="file" id="instantGalleryInput" accept="image/*" class="sr-only" onchange="handleInstantGalleryUpload(event)">
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Loading Spinner Indicator -->
                                        <div id="galleryUploadLoading" class="hidden p-3 bg-deepsage/10 rounded-xl border border-deepsage/20 items-center justify-center gap-2 text-xs text-deepsage font-semibold">
                                            <div class="w-4 h-4 border-2 border-deepsage border-t-transparent rounded-full animate-spin"></div>
                                            <span>Sedang mengunggah foto ke galeri...</span>
                                        </div>

                                        <!-- Quota Full Banner -->
                                        <div id="galleryQuotaWarning" class="hidden p-3 bg-amber-50 text-amber-800 rounded-xl border border-amber-200 text-xs font-medium flex items-center gap-2">
                                            <i data-lucide="alert-triangle" class="w-4 h-4 text-amber-600 shrink-0"></i>
                                            <span>Kuota foto sudah penuh untuk paket ini. Anda dapat menghapus salah satu foto di bawah jika ingin mengganti dengan yang baru.</span>
                                        </div>

                                        <!-- Live Gallery Photo Grid -->
                                        <div>
                                            <span class="text-xs font-semibold text-charcoal/70 block mb-2.5">Foto Prewedding Anda:</span>
                                            <div id="galleryPhotoGrid" class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-3">
                                                <!-- Dynamically populated via renderGalleryGrid() -->
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- 6. GIFT (Amplop Digital & QRIS Hadiah) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="gift" data-name="Section: Amplop Digital &amp; Hadiah">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-gift')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('gift', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('gift', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="gift" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Amplop Digital &amp; QRIS Hadiah
                                                @if(!$activeInvitation->is_paid)
                                                    <span class="text-[10px] px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-200 font-bold inline-flex items-center gap-1">
                                                        <i data-lucide="lock" class="w-3 h-3"></i>
                                                        <span>Terkunci (Mode Trial)</span>
                                                    </span>
                                                @endif
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Nomor rekening transfer &amp; gambar QRIS statis</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                            <span class="hidden sm:inline">Aktif</span>
                                            <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                            <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                        </label>
                                        <button type="button" onclick="toggleAccordion('sec-card-gift')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-gift" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-gift" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-4">
                                    @if(!$activeInvitation->is_paid)
                                        <div class="p-4 bg-amber-50/80 rounded-2xl border border-amber-200 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-left">
                                            <div class="flex items-start gap-3">
                                                <span class="p-2 rounded-xl bg-amber-100 text-amber-800 shrink-0 mt-0.5">
                                                    <i data-lucide="lock" class="w-4 h-4"></i>
                                                </span>
                                                <div>
                                                    <strong class="text-xs font-bold text-amber-950 flex items-center gap-1.5">
                                                        <span>Fitur Amplop Digital &amp; QRIS Hadiah Terkunci</span>
                                                        <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-200 text-amber-900">Masa Trial / Belum Lunas</span>
                                                    </strong>
                                                    <p class="text-[11px] text-amber-800/85 mt-1 leading-relaxed">
                                                        Fitur penambahan nomor rekening bank dan barcode QRIS untuk penerimaan tanda kasih tamu undangan akan aktif secara otomatis setelah pembayaran undangan diselesaikan.
                                                    </p>
                                                </div>
                                            </div>
                                            <a href="{{ route('checkout.index') }}" class="px-4 py-2 bg-brandgold text-charcoal text-xs font-bold rounded-xl hover:bg-opacity-90 transition shrink-0 shadow-xs flex items-center justify-center gap-1.5 cursor-pointer">
                                                <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
                                                <span>Selesaikan Pembayaran</span>
                                            </a>
                                        </div>
                                    @else
                                        <!-- Rekening Bank (Maksimal 2 Rekening) -->
                                        <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <label class="block text-xs font-bold text-deepsage uppercase tracking-wider">Nomor Rekening Bank (Maksimal 2)</label>
                                            <span class="text-[11px] text-charcoal/50">Otomatis muncul di amplop digital</span>
                                        </div>

                                        <!-- Rekening 1 -->
                                        <div class="p-3 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/25">
                                            <div class="flex items-center justify-between mb-2">
                                                <span class="text-[11px] font-bold text-charcoal flex items-center gap-1.5">
                                                    <span class="w-4 h-4 rounded-full bg-deepsage text-white text-[10px] flex items-center justify-center font-bold">1</span>
                                                    Rekening Utama
                                                </span>
                                            </div>
                                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
                                                <input type="text" name="bank_accounts[0][bank]" value="{{ $activeInvitation->bank_accounts[0]['bank'] ?? 'BCA' }}" placeholder="Nama Bank (BCA/Mandiri/BRI)" class="px-3 py-2 border rounded-xl text-xs bg-white focus:border-deepsage outline-none">
                                                <input type="text" name="bank_accounts[0][number]" value="{{ $activeInvitation->bank_accounts[0]['number'] ?? '' }}" placeholder="Nomor Rekening" class="px-3 py-2 border rounded-xl text-xs font-mono bg-white focus:border-deepsage outline-none">
                                                <input type="text" name="bank_accounts[0][name]" value="{{ $activeInvitation->bank_accounts[0]['name'] ?? '' }}" placeholder="Atas Nama Pemilik Rekening" class="px-3 py-2 border rounded-xl text-xs bg-white focus:border-deepsage outline-none">
                                            </div>
                                        </div>

                                        <!-- Rekening 2 (Opsional) -->
                                        <div class="p-3 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/25">
                                            <div class="flex items-center justify-between mb-2">
                                                <span class="text-[11px] font-bold text-charcoal flex items-center gap-1.5">
                                                    <span class="w-4 h-4 rounded-full bg-charcoal/40 text-white text-[10px] flex items-center justify-center font-bold">2</span>
                                                    Rekening Tambahan (Opsional)
                                                </span>
                                                <span class="text-[10px] text-charcoal/50">Kosongkan jika hanya 1 rekening</span>
                                            </div>
                                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
                                                <input type="text" name="bank_accounts[1][bank]" value="{{ $activeInvitation->bank_accounts[1]['bank'] ?? '' }}" placeholder="Nama Bank Kedua (cth: Mandiri/BSI)" class="px-3 py-2 border rounded-xl text-xs bg-white focus:border-deepsage outline-none">
                                                <input type="text" name="bank_accounts[1][number]" value="{{ $activeInvitation->bank_accounts[1]['number'] ?? '' }}" placeholder="Nomor Rekening Kedua" class="px-3 py-2 border rounded-xl text-xs font-mono bg-white focus:border-deepsage outline-none">
                                                <input type="text" name="bank_accounts[1][name]" value="{{ $activeInvitation->bank_accounts[1]['name'] ?? '' }}" placeholder="Atas Nama Rekening Kedua" class="px-3 py-2 border rounded-xl text-xs bg-white focus:border-deepsage outline-none">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- QRIS Image Upload (Instant AJAX) -->
                                    <div id="qris_upload_container" class="pt-4 border-t border-[#A8BBA6]/20">
                                        @if(!$allowsQris)
                                            <!-- Locked for Simple Tier -->
                                            <div class="p-4 bg-amber-50/70 rounded-2xl border border-amber-200/80 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-left">
                                                <div class="flex items-start gap-3">
                                                    <span class="p-1.5 rounded-xl bg-amber-100 text-amber-800 shrink-0 mt-0.5">
                                                        <i data-lucide="lock" class="w-4 h-4"></i>
                                                    </span>
                                                    <div>
                                                        <strong class="text-xs font-bold text-amber-950 flex items-center gap-1.5">
                                                            <span>Upload Barcode QRIS Hadiah</span>
                                                            <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-200 text-amber-900">Eksklusif Elegant &amp; VIP</span>
                                                        </strong>
                                                        <p class="text-[11px] text-amber-800/80 mt-0.5 leading-relaxed">
                                                            Fitur upload gambar barcode QRIS tersedia untuk Paket Elegant dan VIP. Untuk Paket Simple, tamu undangan dapat mengirimkan tanda kasih melalui nomor rekening bank yang Anda cantumkan di atas.
                                                        </p>
                                                    </div>
                                                </div>
                                                <button type="button" onclick="openUpgradeTierDirect('elegant')" class="px-3.5 py-1.5 bg-brandgold text-charcoal text-[11px] font-bold rounded-lg hover:bg-opacity-90 transition shrink-0 cursor-pointer">
                                                    Upgrade ke Elegant
                                                </button>
                                            </div>
                                        @else
                                            <div class="flex items-center justify-between mb-2">
                                                <div>
                                                    <label class="block text-xs font-bold text-deepsage uppercase tracking-wider">Upload Gambar QRIS Hadiah</label>
                                                    <span class="text-[11px] text-charcoal/50">Format gambar barcode QRIS (JPG, PNG, WebP)</span>
                                                </div>
                                                <div id="qris_loading" class="hidden text-[11px] text-deepsage font-semibold flex items-center gap-1">
                                                    <i data-lucide="loader" class="w-3.5 h-3.5 animate-spin"></i>
                                                    <span>Mengunggah...</span>
                                                </div>
                                            </div>
                                            <input type="file" id="qris_file_input" accept="image/*" class="hidden" onchange="uploadSinglePhotoAjax('qris', event)">
                                            <div id="qris_preview_container">
                                                @if($activeInvitation->qris_image)
                                                    <div class="flex items-center gap-3 p-2.5 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/30">
                                                        <img src="{{ $activeInvitation->qris_image }}" class="w-14 h-14 object-contain rounded-xl border p-1 bg-white shadow-xs" alt="QRIS">
                                                        <div class="flex-1 min-w-0">
                                                            <span class="text-xs font-bold text-charcoal block truncate">QRIS Aktif Tersimpan</span>
                                                            <span class="text-[10px] text-charcoal/50">Tampil saat tamu klik tombol tanda kasih</span>
                                                        </div>
                                                        <div class="flex items-center gap-1.5">
                                                            <button type="button" onclick="document.getElementById('qris_file_input').click()" class="px-2.5 py-1 text-xs font-semibold bg-white border border-[#A8BBA6]/40 rounded-lg hover:bg-gray-50 transition" title="Ganti QRIS">Ganti</button>
                                                            <button type="button" onclick="deleteSinglePhotoAjax('qris')" class="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition" title="Hapus QRIS"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="p-3 bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-between">
                                                        <span class="text-[11px] text-charcoal/50">Belum ada gambar QRIS. (Opsional)</span>
                                                        <button type="button" onclick="document.getElementById('qris_file_input').click()" class="px-3.5 py-1.5 bg-deepsage text-white text-xs font-semibold rounded-xl hover:bg-opacity-90 transition flex items-center gap-1.5 cursor-pointer">
                                                            <i data-lucide="upload" class="w-3.5 h-3.5"></i>
                                                            <span>Upload QRIS</span>
                                                        </button>
                                                    </div>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                    @endif
                                </div>
                            </div>

                            <!-- 7. STORY (Kisah Cinta / Love Story Timeline) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="story" data-name="Section: Kisah Cinta (Love Story)">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-story')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('story', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('story', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="heart" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Kisah Cinta (Love Story)
                                                @if(!$activeInvitation->is_paid)
                                                    <span class="text-[10px] px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-200 font-bold inline-flex items-center gap-1">
                                                        <i data-lucide="lock" class="w-3 h-3"></i>
                                                        <span>Terkunci (Mode Trial)</span>
                                                    </span>
                                                @endif
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Perjalanan kisah cinta &amp; momen kenangan</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                            <span class="hidden sm:inline">Aktif</span>
                                            <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                            <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                        </label>
                                        <button type="button" onclick="toggleAccordion('sec-card-story')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-story" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-story" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-4">
                                    @if(!$activeInvitation->is_paid)
                                        <div class="p-4 bg-amber-50/80 rounded-2xl border border-amber-200 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-left">
                                            <div class="flex items-start gap-3">
                                                <span class="p-2 rounded-xl bg-amber-100 text-amber-800 shrink-0 mt-0.5">
                                                    <i data-lucide="lock" class="w-4 h-4"></i>
                                                </span>
                                                <div>
                                                    <strong class="text-xs font-bold text-amber-950 flex items-center gap-1.5">
                                                        <span>Fitur Kisah Cinta (Love Story) Terkunci</span>
                                                        <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-200 text-amber-900">Masa Trial / Belum Lunas</span>
                                                    </strong>
                                                    <p class="text-[11px] text-amber-800/85 mt-1 leading-relaxed">
                                                        Fitur penambahan babak cerita cinta (Love Story timeline &amp; foto momen) dapat diisi dan ditampilkan setelah Anda menyelesaikan pembayaran undangan.
                                                    </p>
                                                </div>
                                            </div>
                                            <a href="{{ route('checkout.index') }}" class="px-4 py-2 bg-brandgold text-charcoal text-xs font-bold rounded-xl hover:bg-opacity-90 transition shrink-0 shadow-xs flex items-center justify-center gap-1.5 cursor-pointer">
                                                <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
                                                <span>Selesaikan Pembayaran</span>
                                            </a>
                                        </div>
                                    @else
                                        <div class="flex items-center justify-between pb-2 border-b border-gray-100">
                                            <span class="text-xs text-charcoal/70">Momen perjalanan cinta kalian secara runtut:</span>
                                            <button type="button" id="btnAddStoryRow" onclick="addStoryRow()" class="px-3 py-1.5 bg-deepsage text-ivory text-xs font-semibold rounded-xl hover:bg-opacity-90 shadow-xs flex items-center gap-1">
                                                <i data-lucide="plus" class="w-3.5 h-3.5"></i> Tambah Babak
                                            </button>
                                        </div>

                                    <div id="story_repeater_container" class="space-y-4 pt-1">
                                        @php
                                            $storiesList = $activeInvitation->stories;
                                            if (empty($storiesList)) {
                                                if ($activeInvitation->love_story) {
                                                    $storiesList = [
                                                        ['year' => 'Awal Cerita', 'title' => 'Pertama Bertemu', 'content' => $activeInvitation->love_story, 'photo' => null]
                                                    ];
                                                } else {
                                                    $storiesList = [
                                                        ['year' => '', 'title' => '', 'content' => '', 'photo' => null]
                                                    ];
                                                }
                                            }
                                        @endphp

                                        @foreach($storiesList as $idx => $st)
                                            <div class="story-item-row p-4 sm:p-5 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/25 space-y-3 relative group" data-index="{{ $idx }}">
                                                <div class="flex items-center justify-between pb-2 border-b border-[#A8BBA6]/15">
                                                    <div class="flex items-center gap-2">
                                                        <span class="w-5 h-5 rounded-full bg-deepsage text-ivory text-[10px] font-bold flex items-center justify-center story-number">
                                                            {{ $idx + 1 }}
                                                        </span>
                                                        <span class="text-xs font-bold text-charcoal">Babak / Momen Kisah</span>
                                                    </div>
                                                    <button type="button" onclick="removeStoryRow(this)" class="btn-remove-story text-red-500 hover:text-red-700 text-xs font-semibold flex items-center gap-1">
                                                        <i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Hapus
                                                    </button>
                                                </div>

                                                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                                    <div>
                                                        <label class="block text-[11px] font-semibold text-charcoal/80 mb-1">Tahun / Waktu</label>
                                                        <input type="text" name="stories[{{ $idx }}][year]" value="{{ $st['year'] ?? '' }}" placeholder="misal: 2019 / Januari 2022" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-xs bg-white">
                                                    </div>
                                                    <div class="sm:col-span-2">
                                                        <label class="block text-[11px] font-semibold text-charcoal/80 mb-1">Judul Momen*</label>
                                                        <input type="text" name="stories[{{ $idx }}][title]" value="{{ $st['title'] ?? '' }}" placeholder="misal: Awal Mula Bertemu / Hari Lamaran" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-xs bg-white">
                                                    </div>
                                                </div>

                                                <div>
                                                    <label class="block text-[11px] font-semibold text-charcoal/80 mb-1">Uraian Cerita Singkat</label>
                                                    <textarea name="stories[{{ $idx }}][content]" rows="2" placeholder="Ceritakan bagaimana momen manis ini berlangsung..." class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-xs leading-relaxed bg-white">{{ $st['content'] ?? '' }}</textarea>
                                                </div>

                                                <div>
                                                    <label class="block text-[11px] font-semibold text-charcoal/80 mb-1">Foto Momen (Opsional)</label>
                                                    <input type="file" name="story_photo_files[{{ $idx }}]" accept="image/*" class="w-full text-xs text-charcoal/70 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[11px] file:font-semibold file:bg-deepsage file:text-ivory hover:file:bg-opacity-90">
                                                    @if(isset($st['photo']) && $st['photo'])
                                                        <input type="hidden" name="stories[{{ $idx }}][photo]" value="{{ $st['photo'] }}">
                                                        <div class="mt-2 flex items-center gap-2">
                                                            <img src="{{ $st['photo'] }}" class="w-12 h-12 object-cover rounded-lg border shadow-xs" alt="Foto Momen">
                                                            <span class="text-[10px] text-charcoal/60">Foto tersimpan</span>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    @endif
                                </div>
                            </div>

                            <!-- 8. WISHES (Buku Tamu & Ucapan Doa) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="wishes" data-name="Section: Buku Tamu / Ucapan">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-wishes')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('wishes', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('wishes', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="message-square" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Buku Tamu &amp; RSVP
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Form ucapan doa restu &amp; konfirmasi kehadiran</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                            <span class="hidden sm:inline">Aktif</span>
                                            <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                            <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                        </label>
                                        <button type="button" onclick="toggleAccordion('sec-card-wishes')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-wishes" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-wishes" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-3">
                                    <div class="p-3.5 bg-[#FAF7F0] rounded-xl border border-[#A8BBA6]/20 text-xs text-charcoal/75 leading-relaxed">
                                        Tamu undangan dapat menuliskan ucapan selamat dan mengonfirmasi kehadiran mereka langsung melalui form di halaman undangan. Pesan yang masuk dapat Anda kelola di Tab <strong>Buku Tamu</strong> pada menu atas.
                                    </div>
                                </div>
                            </div>

                            <!-- 9. AUDIO (Musik Latar Belakang) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200" data-id="audio" data-name="Musik Latar Belakang">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-audio')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('audio', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('audio', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="music" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Musik Latar Belakang (Audio MP3)
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Musik romantis pemanis suasana undangan</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        <button type="button" onclick="toggleAccordion('sec-card-audio')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-audio" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-audio" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-5">
                                    <!-- Hidden input to ensure traditional form submit persists selected audio -->
                                    <input type="hidden" name="audio_url" id="activeAudioUrlInput" value="{{ $activeInvitation->audio_url }}">

                                    <!-- 1. ACTIVE SELECTED MUSIC BANNER -->
                                    @php
                                        $currentAudioUrl = $activeInvitation->audio_url;
                                        $matchedPreset = $availableMusics->firstWhere('audio_url', $currentAudioUrl);
                                        $isSimpleTier = ($activeInvitation->template->package_tier ?? 'simple') === 'simple';
                                    @endphp

                                    <div id="activeMusicStatusCard" class="p-4 rounded-2xl border transition-all duration-300 {{ !empty($currentAudioUrl) ? 'bg-deepsage/10 border-deepsage/30' : 'bg-gray-50 border-gray-200' }}">
                                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                                            <div class="flex items-center gap-3">
                                                <span class="w-10 h-10 rounded-full flex items-center justify-center shrink-0 {{ !empty($currentAudioUrl) ? 'bg-deepsage text-white shadow-sm' : 'bg-gray-200 text-gray-500' }}">
                                                    <i data-lucide="{{ !empty($currentAudioUrl) ? 'disc-3' : 'volume-x' }}" class="w-5 h-5 {{ !empty($currentAudioUrl) ? 'animate-spin' : '' }}" style="animation-duration: 4s;"></i>
                                                </span>
                                                <div>
                                                    <span class="text-[10px] font-bold uppercase tracking-wider text-charcoal/50 block">Musik Undangan Terpilih</span>
                                                    <h5 id="activeMusicTitleText" class="text-sm font-bold text-charcoal">
                                                        {{ $matchedPreset ? $matchedPreset->title : (!empty($currentAudioUrl) ? 'Musik Kustom Pengantin' : 'Tanpa Musik Latar (Hening)') }}
                                                    </h5>
                                                    <p id="activeMusicSubText" class="text-[11px] text-charcoal/60">
                                                        @if($matchedPreset && $matchedPreset->artist)
                                                            {{ $matchedPreset->artist }} &bull; {{ $matchedPreset->category }}
                                                        @elseif(!empty($currentAudioUrl))
                                                            Link URL MP3 Mandiri
                                                        @else
                                                            Tamu akan membuka undangan dalam suasana hening tanpa audio otomatis.
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="flex items-center gap-2 shrink-0">
                                                <button type="button" id="btnPlayActiveMusic" onclick="playClientAudioPreview('{{ $currentAudioUrl }}', this)" class="px-3.5 py-1.5 rounded-full text-xs font-semibold bg-white text-deepsage border border-deepsage/40 shadow-xs hover:bg-deepsage/10 transition inline-flex items-center gap-1.5 {{ empty($currentAudioUrl) ? 'hidden' : '' }}">
                                                    <i data-lucide="play" class="w-3.5 h-3.5"></i>
                                                    <span>Dengarkan</span>
                                                </button>
                                                <button type="button" id="btnClearActiveMusic" onclick="clearSelectedMusic()" class="px-3 py-1.5 rounded-full text-xs font-semibold text-rose-600 hover:bg-rose-50 border border-rose-200 transition inline-flex items-center gap-1 {{ empty($currentAudioUrl) ? 'hidden' : '' }}">
                                                    <i data-lucide="x" class="w-3.5 h-3.5"></i>
                                                    <span>Hening</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 2. FILTER & CARI PUSTAKA MUSIK -->
                                    <div class="space-y-3 pt-1">
                                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                                            <div>
                                                <h5 class="text-xs font-bold uppercase tracking-wider text-charcoal/80 flex items-center gap-1.5">
                                                    <i data-lucide="library" class="w-3.5 h-3.5 text-deepsage"></i>
                                                    Pustaka Musik Rekomendasi Admin
                                                </h5>
                                                <p class="text-[11px] text-charcoal/50">Disediakan khusus &amp; disaring otomatis untuk Paket {{ ucfirst($activeInvitation->template->package_tier ?? 'Simple') }}</p>
                                            </div>
                                            <!-- Search Input -->
                                            <div class="relative w-full sm:w-64">
                                                <input type="text" id="clientMusicSearchInput" oninput="debouncedFilterClientMusics()" placeholder="Cari judul / penyanyi..." class="w-full pl-8 pr-3 py-1.5 rounded-xl border border-charcoal/20 text-xs focus:border-deepsage outline-none bg-white">
                                                <i data-lucide="search" class="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-charcoal/40"></i>
                                            </div>
                                        </div>

                                        <!-- Category Pills Filter -->
                                        <div class="flex items-center gap-1.5 overflow-x-auto pb-1 text-xs no-scrollbar" id="clientMusicCategoryPills">
                                            <button type="button" onclick="selectMusicCategoryFilter('', this)" class="category-pill active px-3 py-1 rounded-full text-[11px] font-semibold border transition shrink-0 bg-deepsage text-white border-deepsage">
                                                Semua ({{ $availableMusics->count() }})
                                            </button>
                                            @foreach($musicCategories as $mCat)
                                                @php $catCount = $availableMusics->where('category', $mCat)->count(); @endphp
                                                @if($catCount > 0)
                                                    <button type="button" onclick="selectMusicCategoryFilter('{{ $mCat }}', this)" class="category-pill px-3 py-1 rounded-full text-[11px] font-semibold border border-charcoal/15 text-charcoal/70 hover:bg-gray-100 transition shrink-0 bg-white">
                                                        {{ $mCat }} ({{ $catCount }})
                                                    </button>
                                                @endif
                                            @endforeach
                                        </div>

                                        <!-- Music Presets Grid -->
                                        <div id="client-music-preset-grid" class="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-80 overflow-y-auto pr-1">
                                            @forelse($availableMusics as $m)
                                                @php $isSelected = ($activeInvitation->audio_url === $m->audio_url); @endphp
                                                <div class="music-preset-card p-3 rounded-2xl border transition-all duration-200 flex items-center justify-between gap-3 bg-white hover:border-deepsage/50 {{ $isSelected ? 'border-deepsage ring-2 ring-deepsage/20 bg-deepsage/5' : 'border-charcoal/15' }}"
                                                     data-id="{{ $m->id }}"
                                                     data-title="{{ strtolower($m->title) }}"
                                                     data-artist="{{ strtolower($m->artist ?? '') }}"
                                                     data-category="{{ $m->category }}"
                                                     data-url="{{ $m->audio_url }}">
                                                    <div class="flex items-center gap-2.5 min-w-0">
                                                        <!-- Play Preview Button -->
                                                        <button type="button" onclick="playClientAudioPreview('{{ $m->audio_url }}', this)" class="btn-client-audio-preview w-8 h-8 rounded-full border border-charcoal/20 bg-white text-deepsage flex items-center justify-center shrink-0 hover:bg-deepsage hover:text-white transition shadow-xs" title="Putar Cuplikan Lagu">
                                                            <i data-lucide="play" class="w-3.5 h-3.5 ml-0.5"></i>
                                                        </button>
                                                        <div class="min-w-0">
                                                            <h6 class="text-xs font-bold text-charcoal truncate">{{ $m->title }}</h6>
                                                            <div class="flex items-center gap-1.5 text-[10px] text-charcoal/60 truncate mt-0.5">
                                                                @if($m->artist) <span>{{ $m->artist }}</span> &bull; @endif
                                                                <span class="px-1.5 py-0.2 rounded bg-gray-100 text-charcoal/70">{{ $m->category }}</span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Action Button -->
                                                    <button type="button" onclick="selectPresetMusic({{ $m->id }}, '{{ $m->audio_url }}', '{{ addslashes($m->title) }}', '{{ addslashes($m->artist ?? '') }}')"
                                                            class="btn-select-preset px-3 py-1.5 rounded-full text-[11px] font-bold transition shrink-0 inline-flex items-center gap-1 {{ $isSelected ? 'bg-deepsage text-white shadow-xs' : 'bg-gray-100 text-charcoal/70 hover:bg-deepsage/10 hover:text-deepsage' }}">
                                                        @if($isSelected)
                                                            <i data-lucide="check" class="w-3 h-3"></i>
                                                            <span>Terpilih</span>
                                                        @else
                                                            <span>Pilih Lagu</span>
                                                        @endif
                                                    </button>
                                                </div>
                                            @empty
                                                <div class="col-span-full p-6 text-center text-charcoal/50 text-xs">
                                                    Belum ada musik latar yang tersedia untuk tier paket ini.
                                                </div>
                                            @endforelse
                                        </div>
                                        <p id="no-music-found-msg" class="hidden text-center text-xs text-charcoal/50 py-4">Tidak ada musik yang cocok dengan pencarian kata kunci tersebut.</p>
                                    </div>

                                    <!-- 3. CUSTOM AUDIO LINK (LOCKED ON SIMPLE, UNLOCKED ON ELEGANT & VIP) -->
                                    <div class="pt-3 border-t border-charcoal/10">
                                        @if($isSimpleTier)
                                            <!-- Locked for Simple Tier -->
                                            <div class="p-3.5 rounded-2xl bg-amber-50/70 border border-amber-200/80 flex items-start gap-3">
                                                <span class="p-1.5 rounded-xl bg-amber-100 text-amber-800 shrink-0 mt-0.5">
                                                    <i data-lucide="lock" class="w-4 h-4"></i>
                                                </span>
                                                <div class="text-xs">
                                                    <div class="flex items-center gap-2">
                                                        <strong class="text-amber-900 font-bold">Input Musik Kustom Sendiri</strong>
                                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-200 text-amber-900">Eksklusif Elegant &amp; VIP</span>
                                                    </div>
                                                    <p class="text-amber-800/80 text-[11px] mt-0.5">
                                                        Fitur memasukkan link musik kustom sendiri tidak tersedia untuk paket Simple. Pengguna paket Simple dapat memilih lagu-lagu romantis dari katalog rekomendasi di atas. Upgrade ke paket Elegant atau VIP untuk bebas menyematkan link audio MP3 pilihan Anda sendiri.
                                                    </p>
                                                </div>
                                            </div>
                                        @else
                                            <!-- Unlocked for Elegant & Premium -->
                                            <div class="p-4 rounded-2xl bg-white border border-charcoal/15 space-y-2">
                                                <label class="block text-xs font-bold text-charcoal flex items-center justify-between">
                                                    <span>Atau Gunakan Link URL MP3 Kustom Sendiri (Opsional)</span>
                                                    <span class="text-[10px] text-deepsage font-semibold">Tersedia di Paket Anda ✓</span>
                                                </label>
                                                <div class="flex gap-2">
                                                    <input type="url" id="customAudioUrlInput" value="{{ $matchedPreset ? '' : $activeInvitation->audio_url }}" placeholder="https://domain.com/music.mp3" class="flex-1 px-3 py-2 rounded-xl border border-charcoal/20 text-xs font-mono focus:border-deepsage outline-none">
                                                    <button type="button" onclick="saveCustomMusicUrl()" class="px-4 py-2 bg-charcoal text-white rounded-xl text-xs font-bold hover:bg-black transition shrink-0">
                                                        Gunakan Link Ini
                                                    </button>
                                                </div>
                                                <span class="text-[10px] text-charcoal/50 block">Pastikan tautan dapat diakses publik via HTTPS dan berformat file direct MP3.</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                            </div>

                            <!-- 10. STREAMING & FITUR PREMIUM (Khusus Paket Elegant & Premium) -->
                            <div class="unified-section-card bg-white rounded-3xl border border-[#A8BBA6]/25 shadow-xs overflow-hidden transition-all duration-200 {{ !$allowsStreaming ? 'border-amber-200/70 bg-white/95' : '' }}" data-id="streaming" data-name="Live Streaming &amp; Fitur Premium">
                                <div class="flex items-center justify-between p-4 sm:p-5 cursor-pointer select-none bg-white hover:bg-[#FAF7F0]/40 transition" onclick="toggleAccordion('sec-card-streaming')">
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center gap-0.5" onclick="event.stopPropagation()">
                                            <div class="drag-handle p-1.5 text-charcoal/40 hover:text-charcoal cursor-grab active:cursor-grabbing rounded-lg hover:bg-gray-100 transition" title="Geser untuk ubah urutan">
                                                <i data-lucide="grip-vertical" class="w-4 h-4"></i>
                                            </div>
                                            <div class="flex flex-col -space-y-0.5">
                                                <button type="button" onclick="moveSectionCard('streaming', 'up')" title="Pindah ke Atas" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-up" class="w-3 h-3"></i>
                                                </button>
                                                <button type="button" onclick="moveSectionCard('streaming', 'down')" title="Pindah ke Bawah" class="p-0.5 text-charcoal/30 hover:text-deepsage hover:bg-gray-100 rounded transition leading-none">
                                                    <i data-lucide="chevron-down" class="w-3 h-3"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <span class="w-9 h-9 rounded-2xl bg-deepsage/10 text-deepsage flex items-center justify-center shrink-0">
                                            <i data-lucide="video" class="w-4 h-4"></i>
                                        </span>
                                        <div>
                                            <h4 class="text-sm font-bold text-charcoal flex items-center gap-2">
                                                Live Streaming &amp; Fitur Premium
                                                @if(!$allowsStreaming)
                                                    <span class="text-[10px] px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-200 font-bold inline-flex items-center gap-1">
                                                        <i data-lucide="lock" class="w-3 h-3"></i>
                                                        <span>Eksklusif Elegant &amp; VIP</span>
                                                    </span>
                                                @else
                                                    <span class="text-[10px] px-2.5 py-0.5 rounded-full bg-emerald-100 text-emerald-800 border border-emerald-200 font-bold inline-flex items-center gap-1">
                                                        <i data-lucide="check" class="w-3 h-3"></i>
                                                        <span>Tersedia untuk {{ ucfirst($effectiveTier) }}</span>
                                                    </span>
                                                @endif
                                            </h4>
                                            <span class="text-[11px] text-charcoal/50 block">Siaran langsung YouTube/IG/TikTok &amp; kustomisasi khusus</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3 shrink-0" onclick="event.stopPropagation()">
                                        @if($allowsStreaming)
                                            <label class="flex items-center gap-1.5 cursor-pointer text-[11px] font-semibold text-charcoal/70" title="Tampilkan section">
                                                <span class="hidden sm:inline">Aktif</span>
                                                <input type="checkbox" class="sec-visible sr-only peer" checked onchange="saveUnifiedSectionsOrder()">
                                                <div class="w-8 h-4.5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-deepsage"></div>
                                            </label>
                                        @else
                                            <span class="text-[10px] font-bold text-amber-800 bg-amber-100/80 px-2 py-0.5 rounded-md border border-amber-200/60 inline-flex items-center gap-1">
                                                <i data-lucide="lock" class="w-3 h-3"></i>
                                                <span>Terkunci</span>
                                            </span>
                                        @endif
                                        <button type="button" onclick="toggleAccordion('sec-card-streaming')" class="p-1.5 rounded-lg text-charcoal/50 hover:text-charcoal hover:bg-gray-100 transition">
                                            <i data-lucide="chevron-down" id="chevron-sec-card-streaming" class="accordion-chevron w-4 h-4 transition-transform duration-200"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="sec-card-streaming" class="accordion-content p-6 border-t border-[#A8BBA6]/20 space-y-5">
                                    <!-- 1. LIVE STREAMING EMBED URL -->
                                    @if(!$allowsStreaming)
                                        <!-- Locked Live Streaming Box -->
                                        <div class="p-4 bg-amber-50/80 rounded-2xl border border-amber-200 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-left">
                                            <div class="flex items-start gap-3">
                                                <span class="p-2 rounded-xl bg-amber-100 text-amber-800 shrink-0 mt-0.5">
                                                    <i data-lucide="lock" class="w-4 h-4"></i>
                                                </span>
                                                <div>
                                                    <div class="flex items-center gap-2">
                                                        <strong class="text-xs font-bold text-amber-950">Fitur Live Streaming Terkunci</strong>
                                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-200 text-amber-900">Eksklusif Elegant &amp; VIP</span>
                                                    </div>
                                                    <p class="text-[11px] text-amber-800/85 mt-1 leading-relaxed">
                                                        Penyematan link siaran langsung (YouTube, Instagram Live, Zoom) hanya tersedia untuk Paket <strong>Elegant</strong> dan <strong>VIP</strong>. Upgrade paket Anda untuk menyematkan link video siaran langsung.
                                                    </p>
                                                </div>
                                            </div>
                                            <button type="button" onclick="openUpgradeTierDirect('elegant')" class="px-4 py-2 bg-brandgold text-charcoal text-xs font-bold rounded-xl hover:bg-opacity-90 transition shrink-0 shadow-xs flex items-center justify-center gap-1.5 cursor-pointer">
                                                <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
                                                <span>Upgrade ke Elegant</span>
                                            </button>
                                        </div>
                                        <div class="p-3.5 bg-gray-50 rounded-2xl border border-gray-200 opacity-60">
                                            <label class="block text-xs font-bold text-gray-500 mb-1 flex items-center gap-1.5">
                                                <i data-lucide="lock" class="w-3.5 h-3.5"></i>
                                                <span>Link / URL Live Streaming (Dinonaktifkan)</span>
                                            </label>
                                            <input type="url" id="streaming_url_input" disabled readonly placeholder="Terkunci - Hanya tersedia untuk Paket Elegant &amp; VIP" class="w-full px-3 py-2 border rounded-xl text-xs font-mono bg-gray-100 text-gray-400 cursor-not-allowed outline-none">
                                        </div>
                                    @else
                                        <!-- Unlocked Live Streaming Box -->
                                        <div id="streaming_box" class="p-4 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/30">
                                            <label class="block text-xs font-bold text-charcoal flex items-center gap-1.5 mb-1.5">
                                                <span class="w-2.5 h-2.5 rounded-full bg-red-600 animate-pulse"></span>
                                                Link / URL Live Streaming (YouTube / Instagram Video)
                                            </label>
                                            <input type="url" id="streaming_url_input" name="streaming_url" value="{{ $activeInvitation->streaming_url }}" placeholder="https://www.youtube.com/watch?v=..." class="w-full px-3 py-2 border rounded-xl text-xs font-mono bg-white focus:border-deepsage outline-none">
                                            <span class="text-[10px] text-charcoal/50 block mt-1">Dukung tautan live stream YouTube, IG Live, Zoom, atau platform video lainnya.</span>
                                        </div>
                                    @endif

                                    <!-- 2. HERO SLIDER PHOTOS (VIP ONLY) -->
                                    <div class="pt-2 border-t border-[#A8BBA6]/20">
                                        @if(!$allowsSliderPhotos)
                                            <div class="p-4 bg-amber-50/60 rounded-2xl border border-amber-200/70 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-left">
                                                <div class="flex items-start gap-3">
                                                    <span class="p-1.5 rounded-xl bg-amber-100 text-amber-800 shrink-0 mt-0.5">
                                                        <i data-lucide="lock" class="w-3.5 h-3.5"></i>
                                                    </span>
                                                    <div>
                                                        <strong class="text-xs font-bold text-amber-950 flex items-center gap-1.5">
                                                            <span>Foto Hero Slider (Banner Bergulir)</span>
                                                            <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-200 text-amber-900">Eksklusif VIP</span>
                                                        </strong>
                                                        <p class="text-[11px] text-amber-800/80 mt-0.5 leading-relaxed">
                                                            Fitur banner bergulir multi-foto eksklusif untuk Paket VIP. Pada paket Simple dan Elegant, cover undangan menggunakan 1 Foto Hero Statis.
                                                        </p>
                                                    </div>
                                                </div>
                                                <button type="button" onclick="openUpgradeTierDirect('premium')" class="px-3.5 py-1.5 bg-brandgold text-charcoal text-[11px] font-bold rounded-lg hover:bg-opacity-90 transition shrink-0 cursor-pointer">
                                                    Upgrade VIP
                                                </button>
                                            </div>
                                        @else
                                            <div id="hero_slider_box" class="p-4 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/30 space-y-2">
                                                <label class="block text-xs font-bold text-charcoal flex items-center gap-1.5">
                                                    <i data-lucide="images" class="w-4 h-4 text-deepsage"></i>
                                                    Foto Hero Slider (Banner Pengantin Bergulir)
                                                </label>
                                                <input type="file" id="slider_files_input" name="slider_files[]" multiple accept="image/*" class="w-full text-xs text-charcoal/70 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[11px] file:font-semibold file:bg-deepsage file:text-ivory hover:file:bg-opacity-90">
                                            </div>
                                        @endif
                                    </div>

                                    <!-- 3. THEME COLOR SWATCHES (VIP ONLY) -->
                                    <div class="pt-2 border-t border-[#A8BBA6]/20">
                                        @if(!$allowsCustomTheme)
                                            <div class="p-4 bg-amber-50/60 rounded-2xl border border-amber-200/70 space-y-2 text-left">
                                                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                                                    <div class="flex items-start gap-3">
                                                        <span class="p-1.5 rounded-xl bg-amber-100 text-amber-800 shrink-0 mt-0.5">
                                                            <i data-lucide="lock" class="w-3.5 h-3.5"></i>
                                                        </span>
                                                        <div>
                                                            <strong class="text-xs font-bold text-amber-950 flex items-center gap-1.5">
                                                                <span>Kustomisasi Palet Warna Tema</span>
                                                                <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-200 text-amber-900">Eksklusif VIP</span>
                                                            </strong>
                                                            <p class="text-[11px] text-amber-800/80 mt-0.5 leading-relaxed">
                                                                Kustomisasi palet warna bebas tersedia khusus untuk Paket VIP. Undangan Anda saat ini menggunakan warna default bawaan tema template.
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <button type="button" onclick="openUpgradeTierDirect('premium')" class="px-3.5 py-1.5 bg-brandgold text-charcoal text-[11px] font-bold rounded-lg hover:bg-opacity-90 transition shrink-0 cursor-pointer">
                                                        Upgrade VIP
                                                    </button>
                                                </div>
                                            </div>
                                        @else
                                            <div id="theme_color_box" class="pt-2">
                                                <label class="block text-xs font-semibold text-charcoal/80 mb-2">Pilihan Warna Tema Undangan</label>
                                                <div class="grid grid-cols-3 sm:grid-cols-6 gap-2" id="theme_color_container">
                                                    @php
                                                        $colors = [
                                                            'sage' => ['name' => 'Sage Green', 'hex' => '#536B5B'],
                                                            'ivory' => ['name' => 'Warm Ivory', 'hex' => '#7A6B53'],
                                                            'gold' => ['name' => 'Royal Gold', 'hex' => '#8C6D23'],
                                                            'terracotta' => ['name' => 'Terracotta', 'hex' => '#A0522D'],
                                                            'navy' => ['name' => 'Classic Navy', 'hex' => '#1E3A5F'],
                                                            'dustyrose' => ['name' => 'Dusty Rose', 'hex' => '#8B4C5B'],
                                                        ];
                                                    @endphp
                                                    @foreach($colors as $key => $col)
                                                        <label class="color-swatch-label border-2 rounded-xl p-2.5 flex flex-col items-center gap-1.5 cursor-pointer hover:border-deepsage transition {{ ($activeInvitation->theme_color === $key || (!$activeInvitation->theme_color && $key === 'sage')) ? 'border-deepsage bg-sage/10' : 'border-gray-200' }}">
                                                            <span class="w-5 h-5 rounded-full" style="background-color: {{ $col['hex'] }}"></span>
                                                            <span class="text-[10px] font-bold text-charcoal">{{ $col['name'] }}</span>
                                                            <input type="radio" name="theme_color" value="{{ $key }}" class="theme-color-radio accent-deepsage" {{ ($activeInvitation->theme_color === $key || (!$activeInvitation->theme_color && $key === 'sage')) ? 'checked' : '' }}>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Bottom Informative Note & Spacing (Aksi disimpan melalui Floating Action Dock melayang) -->
                    <div class="pt-6 pb-28 text-center sm:text-left text-xs text-charcoal/60 border-t border-[#A8BBA6]/20">
                        <div class="flex items-center justify-center sm:justify-start gap-2">
                            <i data-lucide="info" class="w-4 h-4 text-deepsage shrink-0"></i>
                            <span>*Pastikan memeriksa kembali data mempelai &amp; jadwal sebelum membagikan link. Gunakan tombol melayang di bawah untuk pratinjau dan menyimpan perubahan.</span>
                        </div>
                    </div>
                </form>
            </div>

    <!-- MOBILE MODAL DRAWER PREVIEW -->
    <div id="mobilePreviewModal"
         style="display: none;"
         onclick="if(event.target === this) closeMobilePreviewModal()"
         class="fixed inset-0 z-[9999] bg-black/80 backdrop-blur-sm hidden flex-col items-center justify-center p-3 sm:p-4 transition-all duration-300">
        
        <!-- Top Action Bar for Easy Mobile Dismiss -->
        <div class="w-full max-w-sm flex items-center justify-between mb-2 px-1 text-white z-50">
            <span class="text-xs font-semibold tracking-wide flex items-center gap-1.5 opacity-90">
                <i data-lucide="smartphone" class="w-3.5 h-3.5 text-brandgold"></i>
                Pratinjau Mobile
            </span>
            <button type="button" onclick="closeMobilePreviewModal()" class="px-3.5 py-1.5 rounded-full bg-white/20 hover:bg-white/30 text-white text-xs font-bold transition flex items-center gap-1.5 shadow cursor-pointer active:scale-95">
                <span>Tutup</span>
                <i data-lucide="x" class="w-3.5 h-3.5"></i>
            </button>
        </div>

        <div class="relative w-full max-w-sm h-[88vh] sm:h-[86vh] bg-stone-900 rounded-2xl sm:rounded-[44px] p-1.5 sm:p-2.5 shadow-2xl flex flex-col border border-white/10" onclick="event.stopPropagation()">
            <!-- Modal Floating Close Button (Inside Frame Corner) -->
            <button type="button" onclick="closeMobilePreviewModal()" aria-label="Tutup Pratinjau" class="absolute top-3 sm:top-4 right-3 sm:right-4 z-50 w-9 h-9 rounded-full bg-black/85 text-white hover:bg-black shadow-xl flex items-center justify-center transition border border-white/20 cursor-pointer active:scale-95">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>

            <!-- Screen Container -->
            <div class="relative w-full h-full bg-black rounded-xl sm:rounded-[36px] overflow-hidden flex flex-col">
                <iframe id="mobileModalIframe"
                        src="{{ route('invitation.public', $activeInvitation->slug) }}?preview=1"
                        class="w-full h-full border-0 bg-white"></iframe>
                <div class="absolute bottom-1 left-1/2 -translate-x-1/2 w-24 h-1 bg-white/40 rounded-full pointer-events-none"></div>
            </div>
        </div>

        <!-- Bottom Close Button (Extra Mobile Convenience) -->
        <button type="button" onclick="closeMobilePreviewModal()" class="mt-2.5 text-white/80 hover:text-white text-xs font-medium underline transition cursor-pointer active:scale-95 py-1 px-3">
            Kembali ke Dashboard
        </button>
    </div>

    <!-- Upgrade Tier Modal -->
    <div id="upgradeTierModal"
         style="display: none;"
         onclick="if(event.target === this) closeUpgradeModal()"
         class="fixed inset-0 z-[9999] bg-black/75 backdrop-blur-sm hidden items-center justify-center p-4 transition-all duration-300">
        <div class="relative w-full max-w-md bg-white rounded-3xl p-6 sm:p-7 shadow-2xl border border-brandgold/40 flex flex-col space-y-5 animate-in fade-in zoom-in-95 duration-200" onclick="event.stopPropagation()">
            <!-- Close Button -->
            <button type="button" onclick="closeUpgradeModal()" class="absolute top-4 right-4 w-8 h-8 rounded-full bg-stone-100 hover:bg-stone-200 text-charcoal/70 flex items-center justify-center transition active:scale-95 cursor-pointer">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>

            <!-- Header with Lock Badge & Icon -->
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-2xl bg-brandgold/15 border border-brandgold/30 flex items-center justify-center text-brandgold flex-shrink-0">
                    <i data-lucide="crown" class="w-6 h-6"></i>
                </div>
                <div>
                    <span class="text-[10px] uppercase tracking-wider font-extrabold text-amber-700 bg-amber-100 px-2.5 py-0.5 rounded-md border border-amber-300 inline-block mb-1">
                        Template Eksklusif
                    </span>
                    <h3 class="text-lg font-bold text-charcoal leading-tight">
                        Upgrade ke <span id="upgradeModalTierName" class="text-deepsage">Paket Elegant</span>
                    </h3>
                </div>
            </div>

            <!-- Template Preview Thumbnail snippet -->
            <div class="flex items-center gap-3.5 p-3.5 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/25">
                <img id="upgradeModalThumb" src="" alt="Thumbnail" class="w-16 h-20 object-cover rounded-xl border border-[#A8BBA6]/30 shadow-xs flex-shrink-0 bg-stone-200">
                <div class="flex-1 min-w-0">
                    <p class="text-xs font-bold text-charcoal truncate" id="upgradeModalTemplateName">Nama Template</p>
                    <p class="text-[11px] text-charcoal/70 mt-1 leading-relaxed">
                        Template ini membutuhkan <strong id="upgradeModalReqTier" class="text-deepsage">Paket Elegant</strong> untuk dapat diaktifkan pada undangan pernikahan Anda.
                    </p>
                </div>
            </div>

            <!-- Benefits Highlights based on Tier -->
            <div class="space-y-2 text-xs">
                <p class="font-bold text-charcoal/70 text-[11px] uppercase tracking-wider">Keunggulan Paket yang Anda Dapatkan:</p>
                <ul class="space-y-1.5" id="upgradeModalBenefits">
                    <!-- Populated dynamically via JS -->
                </ul>
            </div>

            <!-- Action CTAs -->
            <div class="pt-2 flex flex-col sm:flex-row gap-2.5">
                <a id="upgradeModalCheckoutBtn" 
                   href="{{ route('checkout.index') }}" 
                   class="flex-1 py-3 px-4 bg-deepsage hover:bg-[#3D533D] text-ivory text-xs font-bold rounded-2xl shadow-md flex items-center justify-center gap-2 transition active:scale-95 text-center">
                    <i data-lucide="sparkles" class="w-4 h-4 text-brandgold"></i>
                    <span>Upgrade Sekarang</span>
                </a>
                <a id="upgradeModalWaBtn"
                   href="https://wa.me/{{ $whatsappCs ?? '6281234567890' }}"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="py-3 px-4 bg-[#25D366] hover:bg-[#20ba59] text-white text-xs font-bold rounded-2xl shadow-sm flex items-center justify-center gap-1.5 transition active:scale-95 text-center">
                    <i data-lucide="message-circle" class="w-4 h-4"></i>
                    <span>Tanya Admin</span>
                </a>
            </div>

            <!-- Secondary Dismiss -->
            <button type="button" onclick="filterToCurrentTier()" class="text-center text-xs text-charcoal/60 hover:text-charcoal font-medium transition cursor-pointer">
                Lihat template yang tersedia untuk paket saya saat ini &rarr;
            </button>
        </div>
    </div>

    @endif

    </div>
</div>

@if($activeInvitation && !$activeInvitation->isManaged())
<!-- Floating Action Dock (Desktop 3-button dock & Mobile compact thumb bar) -->
<div id="floatingSaveDock" class="fixed bottom-3 sm:bottom-5 left-1/2 -translate-x-1/2 z-40 w-[calc(100%-2rem)] max-w-xs sm:max-w-sm md:w-auto md:max-w-2xl transition-all duration-300">
    
    <!-- DESKTOP DOCK (md:flex) -->
    <div class="hidden md:flex items-center justify-between gap-3 bg-[#FAF7F0]/95 backdrop-blur-md border border-[#A8BBA6]/50 shadow-2xl rounded-full px-5 py-2.5">
        <!-- Status Indicator -->
        <div class="flex items-center gap-2 pr-3 border-r border-[#A8BBA6]/30">
            <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse shrink-0"></span>
            <span class="text-xs font-semibold text-charcoal/80 whitespace-nowrap" id="floatingStatusTextDesktop">
                Pengaturan Undangan
            </span>
        </div>

        <!-- 3 Action Buttons -->
        <div class="flex items-center gap-2 shrink-0">
            <!-- 1. Demo Mobile Modal -->
            <button type="button" onclick="openMobilePreviewModal()" class="px-4 py-2 bg-white hover:bg-stone-50 border border-[#A8BBA6]/50 text-charcoal text-xs font-semibold rounded-full shadow-2xs hover:shadow-sm transition flex items-center gap-1.5 active:scale-95 cursor-pointer">
                <i data-lucide="smartphone" class="w-4 h-4 text-deepsage"></i>
                <span>Demo Mobile</span>
            </button>

            <!-- 2. Demo Desktop / New Tab -->
            <a href="{{ route('invitation.public', $activeInvitation->slug) }}?preview=1" target="_blank" rel="noopener noreferrer" class="px-4 py-2 bg-white hover:bg-stone-50 border border-[#A8BBA6]/50 text-charcoal text-xs font-semibold rounded-full shadow-2xs hover:shadow-sm transition flex items-center gap-1.5 active:scale-95 cursor-pointer">
                <i data-lucide="monitor" class="w-4 h-4 text-deepsage"></i>
                <span>Demo Desktop</span>
            </a>

            <!-- 3. Simpan Perubahan -->
            <button type="button" onclick="triggerFloatingSave()" id="btnFloatingSaveDesktop" class="px-5 py-2 bg-deepsage hover:bg-[#435749] text-ivory text-xs font-bold tracking-wide uppercase rounded-full shadow-md hover:shadow-lg transition flex items-center gap-2 active:scale-95 cursor-pointer">
                <i data-lucide="check" class="w-4 h-4" id="floatingSaveIconDesktop"></i>
                <span id="btnFloatingSaveTextDesktop">Simpan Perubahan</span>
            </button>
        </div>
    </div>

    <!-- MOBILE PHONE DOCK (flex md:hidden) -->
    <div class="flex md:hidden items-center gap-2 bg-[#FAF7F0]/98 backdrop-blur-md border border-[#A8BBA6]/60 shadow-2xl rounded-2xl p-1.5 sm:p-2 w-full max-w-sm mx-auto">
        <!-- 1. Demo Mobile Modal Button -->
        <button type="button" onclick="openMobilePreviewModal()" class="flex-1 py-2.5 px-3 bg-white hover:bg-stone-50 border border-[#A8BBA6]/50 text-charcoal text-xs font-bold rounded-xl shadow-2xs flex items-center justify-center gap-1.5 active:scale-95 transition cursor-pointer">
            <i data-lucide="smartphone" class="w-4 h-4 text-deepsage shrink-0"></i>
            <span class="whitespace-nowrap">Pratinjau</span>
        </button>

        <!-- 2. Simpan Button -->
        <button type="button" onclick="triggerFloatingSave()" id="btnFloatingSaveMobile" class="flex-[1.4] py-2.5 px-3 bg-deepsage hover:bg-[#435749] text-ivory text-xs font-bold tracking-wider uppercase rounded-xl shadow-md flex items-center justify-center gap-1.5 active:scale-95 transition cursor-pointer">
            <i data-lucide="check" class="w-4 h-4 shrink-0" id="floatingSaveIconMobile"></i>
            <span id="btnFloatingSaveTextMobile" class="whitespace-nowrap">Simpan</span>
        </button>
    </div>

</div>
@endif

<!-- Floating Live Chat Assistant (Gemini AI) -->
<x-ai-chat-widget :invitation-id="$activeInvitation ? $activeInvitation->id : null" />

@push('scripts')
<!-- SortableJS (Local First with CDN Fallback) -->
<script src="{{ asset('assets/js/sortable.min.js') }}"></script>
<script>
    if (typeof Sortable === 'undefined') {
        const cdnScript = document.createElement('script');
        cdnScript.src = "https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js";
        document.head.appendChild(cdnScript);
    }
</script>
<script>
    // State Data & Endpoints
    const isPaid = {{ $activeInvitation && $activeInvitation->is_paid ? 'true' : 'false' }};
    const activeInvitationId = {{ $activeInvitation ? $activeInvitation->id : 'null' }};
    const slugCheckUrl = "{{ route('client.slug.check') }}";
    let galleryPhotos = @json($activeInvitation ? ($activeInvitation->gallery_photos ?? []) : []);
    let currentGalleryLimit = {{ $activeInvitation ? $activeInvitation->max_gallery_photos : 4 }};
    const tierGalleryLimits = {
        'simple': 4,
        'elegant': 10,
        'premium': 20
    };
    const initialSectionOrder = @json($activeInvitation ? ($activeInvitation->section_order ?? []) : []);
    const galleryUploadUrl = "{{ $activeInvitation ? route('client.gallery.upload', $activeInvitation->id) : '#' }}";
    const galleryDeleteUrl = "{{ $activeInvitation ? route('client.gallery.delete', $activeInvitation->id) : '#' }}";
    const sectionsUpdateUrl = "{{ $activeInvitation ? route('client.sections.update', $activeInvitation->id) : '#' }}";
    const csrfToken = "{{ csrf_token() }}";

    // Live AJAX Availability Checker for Slug
    let slugCheckTimer = null;
    function debounceCheckSlug(val) {
        clearTimeout(slugCheckTimer);
        const statusEl = document.getElementById('slug_check_status');
        if (!statusEl) return;

        const cleanVal = (val || '').trim().toLowerCase();
        if (!cleanVal) {
            statusEl.className = 'mt-1.5 text-xs text-red-500 flex items-center gap-1.5';
            statusEl.innerHTML = '<i data-lucide="alert-circle" class="w-3.5 h-3.5"></i> <span>Tautan tidak boleh kosong</span>';
            statusEl.classList.remove('hidden');
            if (window.lucide) lucide.createIcons();
            return;
        }

        statusEl.className = 'mt-1.5 text-xs text-charcoal/50 flex items-center gap-1.5';
        statusEl.innerHTML = '<div class="w-3 h-3 border-2 border-deepsage border-t-transparent rounded-full animate-spin"></div> <span>Memeriksa ketersediaan tautan...</span>';
        statusEl.classList.remove('hidden');

        slugCheckTimer = setTimeout(() => {
            fetch(`${slugCheckUrl}?slug=${encodeURIComponent(cleanVal)}&invitation_id=${activeInvitationId || ''}`)
                .then(res => res.json())
                .then(data => {
                    if (data.is_available) {
                        statusEl.className = 'mt-1.5 text-xs text-emerald-600 font-medium flex items-center gap-1.5';
                        statusEl.innerHTML = `<i data-lucide="check-circle" class="w-3.5 h-3.5"></i> <span>${data.message || 'Tautan tersedia!'}</span>`;
                    } else {
                        let suggestionHtml = '';
                        if (data.suggestions && data.suggestions.length > 0) {
                            suggestionHtml = `<div class="mt-1 flex items-center gap-1.5 flex-wrap"><span class="text-[10px] text-charcoal/60">Saran:</span> ${data.suggestions.map(s => `<button type="button" onclick="applySuggestedSlug('${s}')" class="px-2 py-0.5 rounded-md bg-gray-100 hover:bg-deepsage/10 text-charcoal hover:text-deepsage text-[10px] font-mono border border-gray-200 transition cursor-pointer">${s}</button>`).join('')}</div>`;
                        }
                        statusEl.className = 'mt-1.5 text-xs text-red-600 font-medium';
                        statusEl.innerHTML = `<div class="flex items-center gap-1.5"><i data-lucide="x-circle" class="w-3.5 h-3.5"></i> <span>${data.message || 'Tautan tidak tersedia.'}</span></div>${suggestionHtml}`;
                    }
                    if (window.lucide) lucide.createIcons();
                })
                .catch(() => {
                    statusEl.classList.add('hidden');
                });
        }, 350);
    }

    function applySuggestedSlug(suggested) {
        const input = document.getElementById('slug_input');
        if (input) {
            input.value = suggested;
            debounceCheckSlug(suggested);
        }
    }

    // ==========================================
    // 1. UNIFIED ACCORDIONS (COLLAPSE & EXPAND)
    // ==========================================
    function toggleAccordion(contentId) {
        const content = document.getElementById(contentId);
        if (!content) return;
        const chevron = document.getElementById('chevron-' + contentId);
        const isHidden = content.classList.contains('hidden');
        if (isHidden) {
            content.classList.remove('hidden');
            if (chevron) chevron.classList.add('rotate-180');
        } else {
            content.classList.add('hidden');
            if (chevron) chevron.classList.remove('rotate-180');
        }
    }

    function expandAllAccordions() {
        document.querySelectorAll('.accordion-content').forEach(el => el.classList.remove('hidden'));
        document.querySelectorAll('.accordion-chevron').forEach(el => el.classList.add('rotate-180'));
    }

    function collapseAllAccordions() {
        document.querySelectorAll('.accordion-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('.accordion-chevron').forEach(el => el.classList.remove('rotate-180'));
    }

    // ==========================================
    // 2. UNIFIED DRAGGABLE SECTIONS & ORDER SYNC
    // ==========================================
    let unifiedSortableInstance = null;

    function initUnifiedSortable() {
        const container = document.getElementById('unified-sections-container');
        if (container && typeof Sortable !== 'undefined') {
            if (unifiedSortableInstance) {
                unifiedSortableInstance.destroy();
            }
            unifiedSortableInstance = new Sortable(container, {
                animation: 250,
                handle: '.drag-handle',
                draggable: '.unified-section-card',
                ghostClass: 'bg-sage/10',
                chosenClass: 'ring-2 ring-deepsage/30',
                dragClass: 'opacity-50',
                forceFallback: true,
                fallbackClass: 'sortable-fallback',
                fallbackOnBody: true,
                swapThreshold: 0.65,
                touchStartThreshold: 3,
                onEnd: function() {
                    saveUnifiedSectionsOrder(false);
                }
            });
        }
    }

    function moveSectionCard(sectionId, direction) {
        const container = document.getElementById('unified-sections-container');
        if (!container) return;
        const card = container.querySelector(`.unified-section-card[data-id="${sectionId}"]`);
        if (!card) return;

        if (direction === 'up') {
            const prev = card.previousElementSibling;
            if (prev && prev.classList.contains('unified-section-card')) {
                container.insertBefore(card, prev);
                saveUnifiedSectionsOrder(true);
            }
        } else if (direction === 'down') {
            const next = card.nextElementSibling;
            if (next && next.classList.contains('unified-section-card')) {
                container.insertBefore(next, card);
                saveUnifiedSectionsOrder(true);
            }
        }
    }

    function triggerFloatingSave() {
        const btns = [document.getElementById('btnFloatingSaveDesktop'), document.getElementById('btnFloatingSaveMobile'), document.getElementById('btnFloatingSave')];
        const btnTexts = [document.getElementById('btnFloatingSaveTextDesktop'), document.getElementById('btnFloatingSaveTextMobile'), document.getElementById('btnFloatingSaveText')];
        const statusTexts = [document.getElementById('floatingStatusTextDesktop'), document.getElementById('floatingStatusText')];
        
        btnTexts.forEach(el => { if (el) el.innerText = 'Menyimpan...'; });
        statusTexts.forEach(el => { if (el) el.innerText = 'Sedang menyimpan...'; });
        btns.forEach(el => { if (el) el.disabled = true; });

        saveUnifiedSectionsOrder(false);

        const form = document.getElementById('invitationForm');
        if (form) {
            if (typeof form.requestSubmit === 'function') {
                form.requestSubmit();
            } else {
                form.submit();
            }
        }
    }

    function syncSectionOrderInput() {
        const container = document.getElementById('unified-sections-container');
        if (!container) return [];
        const cards = container.querySelectorAll('.unified-section-card');
        const sectionsData = [];

        cards.forEach(card => {
            const id = card.getAttribute('data-id');
            const name = card.getAttribute('data-name') || id;
            const visibleCheck = card.querySelector('.sec-visible');
            const visible = visibleCheck ? visibleCheck.checked : true;
            sectionsData.push({ id, name, visible });
        });

        const hiddenInput = document.getElementById('input_section_order');
        if (hiddenInput) {
            hiddenInput.value = JSON.stringify(sectionsData);
        }
        return sectionsData;
    }

    function saveUnifiedSectionsOrder(showFeedback = false) {
        const sectionsData = syncSectionOrderInput();
        if (!sectionsData || sectionsData.length === 0) return;

        const btnText = document.getElementById('btnSaveUnifiedSectionsText');
        if (showFeedback && btnText) {
            btnText.innerText = 'Menyimpan...';
        }

        if (sectionsUpdateUrl !== '#') {
            fetch(sectionsUpdateUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ sections: sectionsData })
            })
            .then(res => res.json())
            .then(data => {
                if (showFeedback && btnText) {
                    btnText.innerText = 'Tersimpan ✓';
                    setTimeout(() => { btnText.innerText = 'Simpan Urutan'; }, 2000);
                }
                reloadPreviewFrame(500);
            })
            .catch(err => {
                console.error('Gagal menyimpan urutan:', err);
                if (showFeedback && btnText) {
                    btnText.innerText = 'Simpan Urutan';
                }
            });
        }
    }

    function applyInitialSectionOrder() {
        const container = document.getElementById('unified-sections-container');
        if (!container || !Array.isArray(initialSectionOrder) || initialSectionOrder.length === 0) {
            syncSectionOrderInput();
            return;
        }

        const cardMap = {};
        container.querySelectorAll('.unified-section-card').forEach(card => {
            const id = card.getAttribute('data-id');
            if (id) cardMap[id] = card;
        });

        initialSectionOrder.forEach(sec => {
            if (sec && sec.id && cardMap[sec.id]) {
                const card = cardMap[sec.id];
                const checkbox = card.querySelector('.sec-visible');
                if (checkbox && typeof sec.visible !== 'undefined') {
                    checkbox.checked = !!sec.visible;
                }
                container.appendChild(card);
                delete cardMap[sec.id];
            }
        });

        // Tambahkan section yang belum ada di saved order (misal audio / streaming baru)
        Object.values(cardMap).forEach(card => {
            container.appendChild(card);
        });

        syncSectionOrderInput();
    }

    // ==========================================
    // 3. INSTANT AJAX GALLERY UPLOAD & DELETE
    // ==========================================
    function renderGalleryGrid() {
        const grid = document.getElementById('galleryPhotoGrid');
        if (!grid) return;
        grid.innerHTML = '';

        if (!galleryPhotos || galleryPhotos.length === 0) {
            grid.innerHTML = `
                <div class="col-span-full py-8 text-center text-xs text-charcoal/45 bg-[#FAF7F0] rounded-2xl border border-dashed border-[#A8BBA6]/30">
                    <i data-lucide="image" class="w-6 h-6 mx-auto mb-1 text-charcoal/30"></i>
                    Belum ada foto galeri diunggah.<br>Klik tombol <strong>+ Pilih &amp; Upload Foto</strong> di atas untuk menambahkan.
                </div>
            `;
        } else {
            galleryPhotos.forEach((url, idx) => {
                const item = document.createElement('div');
                item.className = 'relative group aspect-square rounded-2xl overflow-hidden border border-[#A8BBA6]/30 bg-gray-100 shadow-2xs transition hover:shadow-md';
                item.innerHTML = `
                    <img src="${url}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300" alt="Galeri ${idx + 1}">
                    <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition hidden sm:flex items-center justify-center gap-1.5 p-1">
                        <button type="button" onclick="deleteGalleryPhotoAjax(${idx})" class="p-2 rounded-xl bg-red-600 text-white hover:bg-red-700 transition shadow active:scale-95" title="Hapus Foto">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                    </div>
                    <span class="absolute top-1.5 left-1.5 px-2 py-0.5 rounded-md bg-black/60 text-white text-[9px] font-bold">#${idx + 1}</span>
                    <button type="button" onclick="deleteGalleryPhotoAjax(${idx})" class="sm:hidden absolute top-1.5 right-1.5 w-6 h-6 rounded-full bg-red-600 text-white flex items-center justify-center shadow active:scale-95" title="Hapus Foto">
                        <i data-lucide="trash-2" class="w-3 h-3"></i>
                    </button>
                `;
                grid.appendChild(item);
            });
        }

        // Update Badge & Limit Info
        const badge = document.getElementById('galleryQuotaBadge');
        if (badge) {
            badge.innerText = `${galleryPhotos.length} / ${currentGalleryLimit} Foto Terunggah`;
            if (galleryPhotos.length >= currentGalleryLimit) {
                badge.className = 'text-[10px] px-2.5 py-0.5 rounded-full bg-amber-500 text-white font-bold';
            } else {
                badge.className = 'text-[10px] px-2.5 py-0.5 rounded-full bg-brandgold text-charcoal font-bold';
            }
        }

        const warning = document.getElementById('galleryQuotaWarning');
        const uploadBtn = document.getElementById('uploadTriggerLabel');
        const fileInput = document.getElementById('instantGalleryInput');

        if (galleryPhotos.length >= currentGalleryLimit) {
            if (warning) warning.classList.remove('hidden');
            if (uploadBtn) {
                uploadBtn.classList.add('opacity-50', 'cursor-not-allowed');
                uploadBtn.classList.remove('hover:bg-opacity-90', 'active:scale-95');
            }
            if (fileInput) fileInput.disabled = true;
        } else {
            if (warning) warning.classList.add('hidden');
            if (uploadBtn) {
                uploadBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                uploadBtn.classList.add('hover:bg-opacity-90', 'active:scale-95');
            }
            if (fileInput) fileInput.disabled = false;
        }

        if (window.lucide) { lucide.createIcons(); }
    }

    function handleInstantGalleryUpload(event) {
        const file = event.target.files[0];
        if (!file) return;

        if (!isPaid) {
            alert('Unggah foto galeri prewedding tersedia setelah menyelesaikan pembayaran. Pada masa trial/pratinjau, galeri menampilkan foto contoh estetik.');
            event.target.value = '';
            return;
        }

        // Validasi kuota di sisi client
        if (galleryPhotos.length >= currentGalleryLimit) {
            alert(`Batas kuota foto galeri untuk paket ini (${currentGalleryLimit} foto) sudah tercapai.`);
            event.target.value = '';
            return;
        }

        // Validasi ukuran (Maksimal 5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('Ukuran file foto maksimal adalah 5MB.');
            event.target.value = '';
            return;
        }

        if (!file.type.startsWith('image/')) {
            alert('File yang diunggah harus berupa gambar (JPG, PNG, WebP).');
            event.target.value = '';
            return;
        }

        const loadingIndicator = document.getElementById('galleryUploadLoading');
        if (loadingIndicator) loadingIndicator.classList.remove('hidden');

        const formData = new FormData();
        formData.append('photo', file);

        fetch(galleryUploadUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            body: formData
        })
        .then(async res => {
            const data = await res.json();
            if (!res.ok) {
                throw new Error(data.message || 'Gagal mengunggah foto.');
            }
            return data;
        })
        .then(data => {
            if (data.status === 'success') {
                galleryPhotos = data.photos;
                if (data.max) currentGalleryLimit = data.max;
                renderGalleryGrid();
                reloadPreviewFrame();
            } else {
                alert(data.message || 'Gagal mengunggah foto.');
            }
        })
        .catch(err => {
            console.error(err);
            alert(err.message || 'Terjadi kesalahan saat mengunggah foto.');
        })
        .finally(() => {
            if (loadingIndicator) loadingIndicator.classList.add('hidden');
            event.target.value = '';
        });
    }

    function deleteGalleryPhotoAjax(index) {
        if (!confirm('Apakah Anda yakin ingin menghapus foto ini dari galeri?')) {
            return;
        }

        fetch(galleryDeleteUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ 
                photo_index: index,
                index: index,
                photo_url: galleryPhotos[index] || null 
            })
        })
        .then(async res => {
            const data = await res.json();
            if (!res.ok) {
                throw new Error(data.message || 'Gagal menghapus foto.');
            }
            return data;
        })
        .then(data => {
            if (data.status === 'success') {
                galleryPhotos = data.photos;
                renderGalleryGrid();
                reloadPreviewFrame();
            } else {
                alert(data.message || 'Gagal menghapus foto.');
            }
        })
        .catch(err => {
            console.error(err);
            alert(err.message || 'Terjadi kesalahan saat menghapus foto.');
        });
    }

    // ==========================================
    // 3.5. SINGLE PHOTO AJAX UPLOAD & DELETE (Groom, Bride, Hero, QRIS)
    // ==========================================
    const singlePhotoUploadUrl = "{{ $activeInvitation ? route('client.photo.upload', $activeInvitation->id) : '#' }}";
    const singlePhotoDeleteUrl = "{{ $activeInvitation ? route('client.photo.delete', $activeInvitation->id) : '#' }}";

    window.uploadSinglePhotoAjax = function(type, event) {
        const file = event.target.files[0];
        if (!file) return;

        if (file.size > 5 * 1024 * 1024) {
            alert('Ukuran file foto maksimal 5MB.');
            event.target.value = '';
            return;
        }

        const loading = document.getElementById(`${type}_loading`);
        if (loading) loading.classList.remove('hidden');

        const formData = new FormData();
        formData.append('type', type);
        formData.append('photo', file);

        fetch(singlePhotoUploadUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(async res => {
            const data = await res.json();
            if (!res.ok) throw new Error(data.message || 'Gagal mengunggah foto.');
            return data;
        })
        .then(data => {
            if (data.status === 'success') {
                updateSinglePhotoUI(type, data.photo_url);
                reloadPreviewFrame();
            } else {
                alert(data.message || 'Gagal mengunggah foto.');
            }
        })
        .catch(err => {
            console.error(err);
            alert(err.message || 'Terjadi kesalahan saat mengunggah foto.');
        })
        .finally(() => {
            if (loading) loading.classList.add('hidden');
            event.target.value = '';
        });
    };

    window.deleteSinglePhotoAjax = function(type) {
        if (!confirm('Apakah Anda yakin ingin menghapus foto ini?')) return;

        fetch(singlePhotoDeleteUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ type: type })
        })
        .then(async res => {
            const data = await res.json();
            if (!res.ok) throw new Error(data.message || 'Gagal menghapus foto.');
            return data;
        })
        .then(data => {
            if (data.status === 'success') {
                updateSinglePhotoUI(type, null);
                reloadPreviewFrame();
            } else {
                alert(data.message || 'Gagal menghapus foto.');
            }
        })
        .catch(err => {
            console.error(err);
            alert(err.message || 'Terjadi kesalahan saat menghapus foto.');
        });
    };

    function updateSinglePhotoUI(type, photoUrl) {
        const previewEl = document.getElementById(`${type}_preview_container`);
        if (!previewEl) return;

        const labels = {
            groom: 'Foto Pria Tersimpan',
            bride: 'Foto Wanita Tersimpan',
            hero:  'Foto Bersama Tersimpan',
            qris:  'QRIS Aktif Tersimpan'
        };

        const subLabels = {
            groom: 'Tampil di profil pria',
            bride: 'Tampil di profil wanita',
            hero:  'Tampil sebagai background & cover sampul pembuka',
            qris:  'Tampil saat tamu klik tombol tanda kasih'
        };

        const emptyLabels = {
            groom: 'Belum ada foto profil pria.',
            bride: 'Belum ada foto profil wanita.',
            hero:  'Belum ada foto berdua khusus. *Bila dikosongkan, sampul memakai profil / ornamen tema.',
            qris:  'Belum ada gambar QRIS. (Opsional)'
        };

        const btnLabels = {
            groom: 'Upload Foto',
            bride: 'Upload Foto',
            hero:  'Upload Foto Berdua',
            qris:  'Upload QRIS'
        };

        if (photoUrl) {
            previewEl.innerHTML = `
                <div class="flex items-center gap-3 p-2.5 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/30">
                    <img src="${photoUrl}" class="w-12 h-12 rounded-xl object-cover border shadow-xs" alt="Preview">
                    <div class="flex-1 min-w-0">
                        <span class="text-xs font-bold text-charcoal block truncate">${labels[type] || 'Foto Tersimpan'}</span>
                        <span class="text-[10px] text-charcoal/50">${subLabels[type] || ''}</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <button type="button" onclick="document.getElementById('${type}_file_input').click()" class="px-2.5 py-1 text-xs font-semibold bg-white border border-[#A8BBA6]/40 rounded-lg hover:bg-gray-50 transition" title="Ganti foto">Ganti</button>
                        <button type="button" onclick="deleteSinglePhotoAjax('${type}')" class="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition" title="Hapus foto">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
            `;
        } else {
            previewEl.innerHTML = `
                <div class="p-2.5 bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-between">
                    <span class="text-[11px] text-charcoal/50">${emptyLabels[type] || 'Belum ada foto.'}</span>
                    <button type="button" onclick="document.getElementById('${type}_file_input').click()" class="px-3 py-1.5 bg-deepsage text-white text-xs font-semibold rounded-xl hover:bg-opacity-90 transition flex items-center gap-1.5 shrink-0 ml-2">
                        <i data-lucide="upload" class="w-3.5 h-3.5"></i>
                        <span>${btnLabels[type] || 'Upload Foto'}</span>
                    </button>
                </div>
            `;
        }

        if (window.lucide) {
            lucide.createIcons();
        }
    }

    // ==========================================
    // 4. MOBILE-FRIENDLY TEMPLATE PAGINATION
    // ==========================================
    let currentTemplatePage = 1;
    let matchedTemplates = [];
    let cachedTemplateCards = null;
    let templateSearchDebounce = null;

    function debouncedApplyTemplateFilters() {
        clearTimeout(templateSearchDebounce);
        templateSearchDebounce = setTimeout(() => {
            applyTemplateFilters(true);
        }, 150);
    }

    function getTemplateCards() {
        if (!cachedTemplateCards || cachedTemplateCards.length === 0) {
            cachedTemplateCards = Array.from(document.querySelectorAll('.template-card')).map(card => ({
                element: card,
                tier: (card.getAttribute('data-tier') || 'all').toLowerCase(),
                category: (card.getAttribute('data-category') || '').toLowerCase(),
                name: (card.getAttribute('data-name') || '').toLowerCase(),
                code: (card.getAttribute('data-code') || '').toLowerCase()
            }));
        }
        return cachedTemplateCards;
    }

    function getTemplatesPerPage() {
        return window.innerWidth < 640 ? 6 : 9;
    }

    function applyTemplateFilters(resetPage = true) {
        const query = (document.getElementById('templateSearchInput')?.value || '').toLowerCase().trim();
        const cat = (document.getElementById('templateCategorySelect')?.value || 'all').toLowerCase();
        const tier = (document.getElementById('templateTierSelect')?.value || 'all').toLowerCase();

        const allItems = getTemplateCards();
        matchedTemplates = [];

        allItems.forEach(item => {
            const matchTier = (tier === 'all' || item.tier === tier || item.tier === 'all');
            const matchCat = (cat === 'all' || item.category.includes(cat));
            const matchQuery = (!query || item.name.includes(query) || item.code.includes(query) || item.category.includes(query));

            if (matchTier && matchCat && matchQuery) {
                matchedTemplates.push(item.element);
            } else {
                item.element.style.display = 'none';
            }
        });

        const perPage = getTemplatesPerPage();
        const totalPages = Math.max(1, Math.ceil(matchedTemplates.length / perPage));

        if (resetPage) {
            currentTemplatePage = 1;
        } else if (currentTemplatePage > totalPages) {
            currentTemplatePage = totalPages;
        }

        renderTemplatePagination(totalPages, perPage);
    }

    function renderTemplatePagination(totalPages, perPage) {
        if (!perPage) perPage = getTemplatesPerPage();
        if (!totalPages) totalPages = Math.max(1, Math.ceil(matchedTemplates.length / perPage));

        const startIndex = (currentTemplatePage - 1) * perPage;
        const endIndex = startIndex + perPage;

        matchedTemplates.forEach((card, index) => {
            if (index >= startIndex && index < endIndex) {
                card.style.display = 'flex';
            } else {
                card.style.display = 'none';
            }
        });

        // Update count badge
        const badge = document.getElementById('templateCountBadge');
        if (badge) {
            badge.innerText = `Menampilkan ${matchedTemplates.length} Template`;
        }

        // Update pagination summary
        const summary = document.getElementById('templatePageSummary');
        if (summary) {
            if (matchedTemplates.length === 0) {
                summary.innerText = 'Tidak ada template yang sesuai filter.';
            } else {
                const currentCountEnd = Math.min(endIndex, matchedTemplates.length);
                summary.innerText = `Menampilkan ${startIndex + 1} - ${currentCountEnd} dari ${matchedTemplates.length} Template`;
            }
        }

        const indicator = document.getElementById('templatePageIndicator');
        if (indicator) {
            indicator.innerText = `Halaman ${currentTemplatePage} / ${totalPages}`;
        }

        const prevBtn = document.getElementById('prevTmplBtn');
        if (prevBtn) {
            prevBtn.disabled = (currentTemplatePage <= 1);
        }

        const nextBtn = document.getElementById('nextTmplBtn');
        if (nextBtn) {
            nextBtn.disabled = (currentTemplatePage >= totalPages || matchedTemplates.length === 0);
        }

        const tmplContainer = document.getElementById('template-container');
        if (window.lucide && tmplContainer) {
            lucide.createIcons({ root: tmplContainer });
        }
    }

    function prevTemplatePage() {
        if (currentTemplatePage > 1) {
            currentTemplatePage--;
            renderTemplatePagination();
            document.getElementById('template-container')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
    }

    function nextTemplatePage() {
        const perPage = getTemplatesPerPage();
        const totalPages = Math.max(1, Math.ceil(matchedTemplates.length / perPage));
        if (currentTemplatePage < totalPages) {
            currentTemplatePage++;
            renderTemplatePagination(totalPages, perPage);
            document.getElementById('template-container')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
    }

    // ==========================================
    // 5. TEMPLATE SELECTION & TIER ADAPTATION
    // ==========================================
    function handleTemplateChange(tier) {
        @if($activeInvitation->is_paid)
            // Klien berbayar memiliki tier permanen sesuai paket yang dibeli
            tier = '{{ $activeInvitation->getPurchasedTier() }}';
        @else
            tier = (tier || 'simple').toLowerCase();
        @endif
        currentGalleryLimit = tierGalleryLimits[tier] || 4;

        // 1. Update Gallery Description & Limit
        const galleryQuotaInfoText = document.getElementById('galleryQuotaInfoText');
        if (galleryQuotaInfoText) {
            if (tier === 'simple') {
                galleryQuotaInfoText.innerText = 'Paket Simple: Maksimal 4 foto prewedding (Maks. 5MB per file). Foto otomatis disimpan langsung ke server saat dipilih!';
            } else if (tier === 'elegant') {
                galleryQuotaInfoText.innerText = 'Paket Elegant: Maksimal 10 foto prewedding (Maks. 5MB per file). Foto otomatis disimpan langsung ke server saat dipilih!';
            } else {
                galleryQuotaInfoText.innerText = 'Paket Premium: Maksimal 20 foto prewedding resolusi tinggi (Maks. 5MB per file).';
            }
        }
        renderGalleryGrid();

        // 2. Update Streaming Card Visual
        const streamingCard = document.querySelector('.unified-section-card[data-id="streaming"]');
        if (streamingCard) {
            if (tier === 'simple') {
                streamingCard.classList.add('border-amber-200/70', 'bg-white/95');
            } else {
                streamingCard.classList.remove('border-amber-200/70', 'bg-white/95');
            }
        }

        // 3. Update Story Babak Limit
        updateStoryAddButtonState(tier);

        // 4. Update Border Highlight on Cards
        document.querySelectorAll('.template-card').forEach(card => {
            const radio = card.querySelector('input[type="radio"]');
            if (radio && radio.checked) {
                card.classList.add('border-deepsage', 'ring-2', 'ring-deepsage/20', 'bg-sage/5');
                card.classList.remove('border-[#A8BBA6]/30', 'bg-white');
            } else {
                card.classList.remove('border-deepsage', 'ring-2', 'ring-deepsage/20', 'bg-sage/5');
                card.classList.add('border-[#A8BBA6]/30', 'bg-white');
            }
        });
    }

    function openUpgradeTierDirect(targetTier) {
        targetTier = (targetTier || 'elegant').toLowerCase();
        const pkgId = (targetTier === 'premium' || targetTier === 'vip') ? 3 : 2;
        const tierTitle = (targetTier === 'premium' || targetTier === 'vip') ? 'VIP' : 'Elegant';
        openUpgradeModal('Fitur Eksklusif ' + tierTitle, tierTitle, '', '', pkgId);
    }

    // Story Repeater Helpers
    function getCurrentTier() {
        @if($activeInvitation->is_paid)
            return '{{ $activeInvitation->getPurchasedTier() }}';
        @else
            const activeRadio = document.querySelector('input[name="template_id"]:checked');
            if (!activeRadio) return 'simple';
            const card = activeRadio.closest('.template-card');
            return card ? (card.getAttribute('data-tier') || 'simple') : 'simple';
        @endif
    }

    function updateStoryAddButtonState(tier) {
        if (!tier) tier = getCurrentTier();
        const container = document.getElementById('story_repeater_container');
        const addBtn = document.getElementById('btnAddStoryRow');
        if (!container || !addBtn) return;

        const count = container.querySelectorAll('.story-item-row').length;
        const maxAllowed = (tier === 'simple') ? 3 : (tier === 'elegant' ? 6 : 99);

        if (count >= maxAllowed) {
            addBtn.style.display = 'none';
        } else {
            addBtn.style.display = '';
        }

        container.querySelectorAll('.story-item-row').forEach((row, i) => {
            const num = row.querySelector('.story-number');
            if (num) num.innerText = i + 1;
        });
    }

    function addStoryRow() {
        const container = document.getElementById('story_repeater_container');
        const tier = getCurrentTier();
        const maxAllowed = (tier === 'simple') ? 3 : (tier === 'elegant' ? 6 : 99);
        const count = container.querySelectorAll('.story-item-row').length;

        if (count >= maxAllowed) {
            alert(`Paket ${tier.toUpperCase()} hanya mendukung maksimal ${maxAllowed} babak cerita.`);
            return;
        }

        const newIndex = Date.now();
        const div = document.createElement('div');
        div.className = 'story-item-row p-4 sm:p-5 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/25 space-y-3 relative group';
        div.setAttribute('data-index', newIndex);
        div.innerHTML = `
            <div class="flex items-center justify-between pb-2 border-b border-[#A8BBA6]/15">
                <div class="flex items-center gap-2">
                    <span class="w-5 h-5 rounded-full bg-deepsage text-ivory text-[10px] font-bold flex items-center justify-center story-number">
                        ${count + 1}
                    </span>
                    <span class="text-xs font-bold text-charcoal">Babak / Momen Kisah</span>
                </div>
                <button type="button" onclick="removeStoryRow(this)" class="btn-remove-story text-red-500 hover:text-red-700 text-xs font-semibold flex items-center gap-1">
                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Hapus
                </button>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                    <label class="block text-[11px] font-semibold text-charcoal/80 mb-1">Tahun / Waktu</label>
                    <input type="text" name="stories[${newIndex}][year]" placeholder="misal: 2021" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-xs bg-white">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-[11px] font-semibold text-charcoal/80 mb-1">Judul Momen*</label>
                    <input type="text" name="stories[${newIndex}][title]" placeholder="misal: Momen Kencan Pertama" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-xs bg-white">
                </div>
            </div>

            <div>
                <label class="block text-[11px] font-semibold text-charcoal/80 mb-1">Uraian Cerita Singkat</label>
                <textarea name="stories[${newIndex}][content]" rows="2" placeholder="Ceritakan bagaimana momen manis ini berlangsung..." class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-xs leading-relaxed bg-white"></textarea>
            </div>

            <div>
                <label class="block text-[11px] font-semibold text-charcoal/80 mb-1">Foto Momen / Kenangan (Opsional)</label>
                <input type="file" name="story_photo_files[${newIndex}]" accept="image/*" class="w-full text-xs text-charcoal/70 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[11px] file:font-semibold file:bg-deepsage file:text-ivory hover:file:bg-opacity-90">
            </div>
        `;
        container.appendChild(div);

        if (window.lucide) { lucide.createIcons(); }
        updateStoryAddButtonState(tier);
    }

    function removeStoryRow(btn) {
        const row = btn.closest('.story-item-row');
        const container = document.getElementById('story_repeater_container');
        if (container.querySelectorAll('.story-item-row').length <= 1) {
            row.querySelectorAll('input[type="text"], textarea').forEach(el => el.value = '');
            return;
        }
        row.remove();
        updateStoryAddButtonState();
    }

    function resetWaTemplate() {
        const defaultText = "Kepada Yth. Bapak/Ibu/Sahabat {nama_tamu},\n\nAssalamu’alaikum Warahmatullahi Wabarakatuh / Salam Sejahtera,\n\nTanpa mengurangi rasa hormat, perkenankan kami mengundang Bapak/Ibu/Sahabat untuk menghadiri hari bahagia pernikahan kami:\n\n{link_undangan}\n\nMerupakan suatu kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Sahabat berkenan hadir dan memberikan doa restu kepada kami berdua.\n\nAtas kehadiran dan doa restunya, kami ucapkan terima kasih yang sebesar-besarnya.\n\nHormat kami,\n{nama_mempelai}";
        document.getElementById('wa_template_input').value = defaultText;
    }

    function setQuickQuote(type) {
        const quoteInput = document.getElementById('quote_input');
        const authorInput = document.getElementById('quote_author_input');
        if (!quoteInput || !authorInput) return;

        if (type === 'rum') {
            quoteInput.value = "Dan di antara tanda-tanda (kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari jenismu sendiri, agar kamu cenderung dan merasa tenteram kepadanya, dan Dia menjadikan di antaramu rasa kasih dan sayang. Sungguh, pada yang demikian itu benar-benar terdapat tanda-tanda bagi kaum yang berpikir.";
            authorInput.value = "QS. Ar-Rum: 21";
        } else if (type === 'korintus') {
            quoteInput.value = "Kasih itu sabar; kasih itu murah hati; ia tidak cemburu. Ia tidak memegahkan diri dan tidak sombong. Ia tidak melakukan yang tidak sopan dan tidak mencari keuntungan diri sendiri. Kasih tidak berkesudahan.";
            authorInput.value = "1 Korintus 13:4-8";
        } else if (type === 'bali') {
            quoteInput.value = "Grahastashrama inggih punika tatwa suci sane nyujur kasukertan kalawan kulawarga satya sujati ring sajeroning swadharma.";
            authorInput.value = "Manawa Dharmasastra";
        } else if (type === 'romantis') {
            quoteInput.value = "Mencintai bukan berarti saling memandang satu sama lain, melainkan bersama-sama melihat ke satu arah yang sama dalam ikatan suci pernikahan.";
            authorInput.value = "Antoine de Saint-Exupéry";
        }
    }

    // ==========================================
    // 6. LIVE PREVIEW WITH CACHE-BUSTING
    // ==========================================
    let previewReloadTimeout = null;
    function reloadPreviewFrame(delay = 350) {
        clearTimeout(previewReloadTimeout);
        previewReloadTimeout = setTimeout(() => {
            const timestamp = Date.now();
            const modal = document.getElementById('mobilePreviewModal');
            const modalFrame = document.getElementById('mobileModalIframe');
            if (modal && !modal.classList.contains('hidden') && modalFrame && modalFrame.src) {
                try {
                    const url = new URL(modalFrame.src, window.location.origin);
                    url.searchParams.set('preview', '1');
                    url.searchParams.set('t', timestamp);
                    modalFrame.src = url.toString();
                } catch (e) {
                    modalFrame.src = modalFrame.src.split('?')[0] + '?preview=1&t=' + timestamp;
                }
            }
        }, delay);
    }

    const activeInvitationPreviewUrl = "{{ $activeInvitation ? route('invitation.public', $activeInvitation->slug) . '?preview=1' : '' }}";

    function openMobilePreviewModal(customUrl = null) {
        const modal = document.getElementById('mobilePreviewModal');
        const modalFrame = document.getElementById('mobileModalIframe');
        if (modal) {
            modal.style.display = 'flex';
            modal.classList.remove('hidden', 'is-hidden');
            modal.classList.add('flex');
            if (modalFrame) {
                if (customUrl) {
                    modalFrame.src = customUrl;
                } else {
                    if (!modalFrame.src || modalFrame.src === 'about:blank' || !modalFrame.src.includes('preview=1')) {
                        modalFrame.src = activeInvitationPreviewUrl;
                    }
                    reloadPreviewFrame(0);
                }
            }
            if (window.lucide) { lucide.createIcons(); }
        }
    }

    function closeMobilePreviewModal() {
        const modal = document.getElementById('mobilePreviewModal');
        if (modal) {
            modal.style.display = 'none';
            modal.classList.remove('flex');
            modal.classList.add('hidden', 'is-hidden');
        }
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' || e.key === 'Esc') {
            closeMobilePreviewModal();
            closeUpgradeModal();
        }
    });

    // ==========================================
    // TIER UPGRADE MODAL & LOCKED TEMPLATE INTERACTION
    // ==========================================
    function handleTemplateCardClick(event, card) {
        if (card.getAttribute('data-locked') === 'true') {
            event.preventDefault();
            event.stopPropagation();
            const tName = card.getAttribute('data-template-name') || 'Template';
            const tTier = card.getAttribute('data-tier-name') || 'Elegant';
            const tThumb = card.getAttribute('data-thumb') || '';
            const tPrice = card.getAttribute('data-price') || '';
            const tPkgId = card.getAttribute('data-package-id') || '';
            openUpgradeModal(tName, tTier, tThumb, tPrice, tPkgId);
            return false;
        }
    }

    function openUpgradeModal(templateName, tier, thumbUrl, price, packageId) {
        const modal = document.getElementById('upgradeTierModal');
        if (!modal) return;

        const tierNameEl = document.getElementById('upgradeModalTierName');
        if (tierNameEl) tierNameEl.innerText = 'Paket ' + tier;

        const reqTierEl = document.getElementById('upgradeModalReqTier');
        if (reqTierEl) reqTierEl.innerText = 'Paket ' + tier;

        const tmplNameEl = document.getElementById('upgradeModalTemplateName');
        if (tmplNameEl) tmplNameEl.innerText = templateName;

        const thumbImg = document.getElementById('upgradeModalThumb');
        if (thumbImg) thumbImg.src = thumbUrl || '';

        // Update benefits list
        const benefitsContainer = document.getElementById('upgradeModalBenefits');
        if (benefitsContainer) {
            if (tier.toLowerCase() === 'elegant') {
                benefitsContainer.innerHTML = `
                    <li class="flex items-center gap-2 text-charcoal"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i> <span>Akses <strong>15 Desain Elegan</strong> + 97 Desain Simple</span></li>
                    <li class="flex items-center gap-2 text-charcoal"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i> <span>Hingga <strong>10 Foto Galeri Prewedding</strong></span></li>
                    <li class="flex items-center gap-2 text-charcoal"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i> <span>Hingga <strong>6 Babak Kisah Cinta</strong> (Love Story)</span></li>
                    <li class="flex items-center gap-2 text-charcoal"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i> <span>Dukungan Musik Latar Belakang Eksklusif</span></li>
                `;
            } else {
                benefitsContainer.innerHTML = `
                    <li class="flex items-center gap-2 text-charcoal"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i> <span>Akses <strong>Seluruh Desain VIP</strong> & Desain Kustom Tim</span></li>
                    <li class="flex items-center gap-2 text-charcoal"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i> <span>Hingga <strong>20 Foto Galeri HD</strong> & Kisah Cinta Tanpa Batas</span></li>
                    <li class="flex items-center gap-2 text-charcoal"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i> <span>Fitur Live Streaming YouTube / Zoom</span></li>
                    <li class="flex items-center gap-2 text-charcoal"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i> <span>Subdomain Eksklusif & Dikelola Penuh Tim</span></li>
                `;
            }
            if (window.lucide) { window.lucide.createIcons(); }
        }

        // Update Checkout Button
        const checkoutBtn = document.getElementById('upgradeModalCheckoutBtn');
        if (checkoutBtn) {
            const baseUrl = "{{ route('checkout.index') }}";
            checkoutBtn.href = packageId ? `${baseUrl}?package_id=${packageId}` : baseUrl;
        }

        // Update WhatsApp Button
        const waBtn = document.getElementById('upgradeModalWaBtn');
        if (waBtn) {
            const waNum = "{{ $whatsappCs ?? '6281234567890' }}";
            const msg = encodeURIComponent(`Halo Admin Janoer, saya ingin upgrade paket undangan pernikahan saya ke Paket ${tier} untuk menggunakan template "${templateName}". Mohon informasi selengkapnya.`);
            waBtn.href = `https://wa.me/${waNum}?text=${msg}`;
        }

        modal.style.display = 'flex';
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeUpgradeModal() {
        const modal = document.getElementById('upgradeTierModal');
        if (!modal) return;
        modal.style.display = 'none';
        modal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    function filterToCurrentTier() {
        closeUpgradeModal();
        const tierSelect = document.getElementById('templateTierSelect');
        if (tierSelect) {
            const currentTier = "{{ $activeInvitation ? $activeInvitation->getPurchasedTier() : 'simple' }}";
            tierSelect.value = currentTier;
            applyTemplateFilters(true);
        }
    }

    // ==========================================
    // CLIENT BACKGROUND MUSIC PLAYER & SELECTOR
    // ==========================================
    let clientGlobalAudio = null;
    let currentClientPlayingBtn = null;
    let activeClientMusicCategory = '';

    function playClientAudioPreview(url, btnElement) {
        if (!url) return;

        if (!clientGlobalAudio) {
            clientGlobalAudio = new Audio();
            clientGlobalAudio.onended = function() {
                if (currentClientPlayingBtn) {
                    currentClientPlayingBtn.innerHTML = '<i data-lucide="play" class="w-3.5 h-3.5 ml-0.5"></i>';
                    currentClientPlayingBtn.classList.remove('bg-deepsage', 'text-white');
                    lucide.createIcons();
                    currentClientPlayingBtn = null;
                }
            };
        }

        if (currentClientPlayingBtn === btnElement && !clientGlobalAudio.paused) {
            clientGlobalAudio.pause();
            btnElement.innerHTML = '<i data-lucide="play" class="w-3.5 h-3.5 ml-0.5"></i>';
            btnElement.classList.remove('bg-deepsage', 'text-white');
            lucide.createIcons();
            currentClientPlayingBtn = null;
            return;
        }

        if (currentClientPlayingBtn) {
            currentClientPlayingBtn.innerHTML = '<i data-lucide="play" class="w-3.5 h-3.5 ml-0.5"></i>';
            currentClientPlayingBtn.classList.remove('bg-deepsage', 'text-white');
        }

        clientGlobalAudio.src = url;
        clientGlobalAudio.play().then(() => {
            currentClientPlayingBtn = btnElement;
            btnElement.innerHTML = '<i data-lucide="pause" class="w-3.5 h-3.5"></i>';
            btnElement.classList.add('bg-deepsage', 'text-white');
            lucide.createIcons();
        }).catch(err => {
            alert('Tidak dapat memutar lagu: ' + err.message);
            btnElement.innerHTML = '<i data-lucide="play" class="w-3.5 h-3.5 ml-0.5"></i>';
            lucide.createIcons();
        });
    }

    function selectPresetMusic(musicId, audioUrl, title, artist) {
        const invitationId = {{ $activeInvitation ? $activeInvitation->id : 'null' }};
        if (!invitationId) {
            alert('Tidak ada undangan aktif yang ditemukan.');
            return;
        }
        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        fetch(`/dashboard/invitation/${invitationId}/music/select`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token || '',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ music_id: musicId })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                // Update hidden input
                document.getElementById('activeAudioUrlInput').value = data.audio_url;

                // Update UI Status Card
                updateMusicStatusCard(data.music_title, data.music_artist, data.audio_url);

                // Update preset cards UI buttons
                document.querySelectorAll('.music-preset-card').forEach(card => {
                    const btn = card.querySelector('.btn-select-preset');
                    const cId = card.getAttribute('data-id');
                    if (parseInt(cId) === parseInt(musicId)) {
                        card.classList.add('border-deepsage', 'ring-2', 'ring-deepsage/20', 'bg-deepsage/5');
                        card.classList.remove('border-charcoal/15');
                        btn.className = 'btn-select-preset px-3 py-1.5 rounded-full text-[11px] font-bold transition shrink-0 inline-flex items-center gap-1 bg-deepsage text-white shadow-xs';
                        btn.innerHTML = '<i data-lucide="check" class="w-3 h-3"></i><span>Terpilih</span>';
                    } else {
                        card.classList.remove('border-deepsage', 'ring-2', 'ring-deepsage/20', 'bg-deepsage/5');
                        card.classList.add('border-charcoal/15');
                        btn.className = 'btn-select-preset px-3 py-1.5 rounded-full text-[11px] font-bold transition shrink-0 inline-flex items-center gap-1 bg-gray-100 text-charcoal/70 hover:bg-deepsage/10 hover:text-deepsage';
                        btn.innerHTML = '<span>Pilih Lagu</span>';
                    }
                });

                lucide.createIcons();
                reloadPreviewFrame();
            } else {
                alert(data.message || 'Gagal memilih musik.');
            }
        })
        .catch(err => {
            console.error('Error selecting preset:', err);
            alert('Terjadi kesalahan koneksi.');
        });
    }

    function saveCustomMusicUrl() {
        const input = document.getElementById('customAudioUrlInput');
        if (!input || !input.value.trim()) {
            alert('Silakan masukkan link URL MP3 terlebih dahulu.');
            return;
        }

        const invitationId = {{ $activeInvitation ? $activeInvitation->id : 'null' }};
        if (!invitationId) {
            alert('Tidak ada undangan aktif yang ditemukan.');
            return;
        }
        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        fetch(`/dashboard/invitation/${invitationId}/music/select`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token || '',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ audio_url: input.value.trim() })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                document.getElementById('activeAudioUrlInput').value = data.audio_url;
                updateMusicStatusCard(data.music_title, 'Link URL Mandiri', data.audio_url);

                // Reset preset cards checkmark
                document.querySelectorAll('.music-preset-card').forEach(card => {
                    card.classList.remove('border-deepsage', 'ring-2', 'ring-deepsage/20', 'bg-deepsage/5');
                    card.classList.add('border-charcoal/15');
                    const btn = card.querySelector('.btn-select-preset');
                    btn.className = 'btn-select-preset px-3 py-1.5 rounded-full text-[11px] font-bold transition shrink-0 inline-flex items-center gap-1 bg-gray-100 text-charcoal/70 hover:bg-deepsage/10 hover:text-deepsage';
                    btn.innerHTML = '<span>Pilih Lagu</span>';
                });

                lucide.createIcons();
                reloadPreviewFrame();
            } else {
                alert(data.message || 'Gagal menyimpan link musik kustom.');
            }
        })
        .catch(err => alert('Gagal menyimpan musik kustom: ' + err.message));
    }

    function clearSelectedMusic() {
        if (!confirm('Apakah Anda ingin menonaktifkan musik latar (undangan hening)?')) return;

        const invitationId = {{ $activeInvitation ? $activeInvitation->id : 'null' }};
        if (!invitationId) {
            alert('Tidak ada undangan aktif yang ditemukan.');
            return;
        }
        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        fetch(`/dashboard/invitation/${invitationId}/music/clear`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token || '',
                'Accept': 'application/json',
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                if (clientGlobalAudio && !clientGlobalAudio.paused) {
                    clientGlobalAudio.pause();
                }
                document.getElementById('activeAudioUrlInput').value = '';
                updateMusicStatusCard('Tanpa Musik Latar (Hening)', 'Tamu akan membuka undangan dalam suasana hening tanpa audio otomatis.', '');

                // Reset preset cards
                document.querySelectorAll('.music-preset-card').forEach(card => {
                    card.classList.remove('border-deepsage', 'ring-2', 'ring-deepsage/20', 'bg-deepsage/5');
                    card.classList.add('border-charcoal/15');
                    const btn = card.querySelector('.btn-select-preset');
                    btn.className = 'btn-select-preset px-3 py-1.5 rounded-full text-[11px] font-bold transition shrink-0 inline-flex items-center gap-1 bg-gray-100 text-charcoal/70 hover:bg-deepsage/10 hover:text-deepsage';
                    btn.innerHTML = '<span>Pilih Lagu</span>';
                });

                const customInput = document.getElementById('customAudioUrlInput');
                if (customInput) customInput.value = '';

                lucide.createIcons();
                reloadPreviewFrame();
            }
        })
        .catch(err => alert('Gagal menonaktifkan musik.'));
    }

    function updateMusicStatusCard(title, subtitle, url) {
        const card = document.getElementById('activeMusicStatusCard');
        const titleEl = document.getElementById('activeMusicTitleText');
        const subEl = document.getElementById('activeMusicSubText');
        const btnPlay = document.getElementById('btnPlayActiveMusic');
        const btnClear = document.getElementById('btnClearActiveMusic');

        if (titleEl) titleEl.textContent = title;
        if (subEl) subEl.textContent = subtitle || '';

        if (url) {
            card.className = 'p-4 rounded-2xl border transition-all duration-300 bg-deepsage/10 border-deepsage/30';
            if (btnPlay) {
                btnPlay.classList.remove('hidden');
                btnPlay.setAttribute('onclick', `playClientAudioPreview('${url}', this)`);
            }
            if (btnClear) btnClear.classList.remove('hidden');
        } else {
            card.className = 'p-4 rounded-2xl border transition-all duration-300 bg-gray-50 border-gray-200';
            if (btnPlay) btnPlay.classList.add('hidden');
            if (btnClear) btnClear.classList.add('hidden');
        }
    }

    let musicSearchDebounce = null;
    function debouncedFilterClientMusics() {
        clearTimeout(musicSearchDebounce);
        musicSearchDebounce = setTimeout(() => {
            filterClientMusics();
        }, 150);
    }

    function filterClientMusics() {
        const query = (document.getElementById('clientMusicSearchInput')?.value || '').toLowerCase().trim();
        const cards = document.querySelectorAll('.music-preset-card');
        let visibleCount = 0;

        cards.forEach(card => {
            const title = card.getAttribute('data-title') || '';
            const artist = card.getAttribute('data-artist') || '';
            const cat = card.getAttribute('data-category') || '';

            const matchQuery = !query || title.includes(query) || artist.includes(query);
            const matchCat = !activeClientMusicCategory || cat === activeClientMusicCategory;

            if (matchQuery && matchCat) {
                card.style.display = 'flex';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });

        const noMsg = document.getElementById('no-music-found-msg');
        if (noMsg) {
            noMsg.classList.toggle('hidden', visibleCount > 0);
        }
    }

    function selectMusicCategoryFilter(cat, pillBtn) {
        activeClientMusicCategory = cat;

        // Update active class on pills
        document.querySelectorAll('#clientMusicCategoryPills .category-pill').forEach(pill => {
            pill.className = 'category-pill px-3 py-1 rounded-full text-[11px] font-semibold border border-charcoal/15 text-charcoal/70 hover:bg-gray-100 transition shrink-0 bg-white';
        });

        pillBtn.className = 'category-pill active px-3 py-1 rounded-full text-[11px] font-semibold border transition shrink-0 bg-deepsage text-white border-deepsage';

        filterClientMusics();
    }

    // ==========================================
    // 7. INITIALIZATION ON DOM READY
    // ==========================================
    document.addEventListener('DOMContentLoaded', function() {
        // 1. Tata letak accordion awal:
        // Di mobile (< 768px), tutup semua kecuali Informasi Pengantin untuk pengalaman UX ringkas
        if (window.innerWidth < 768) {
            collapseAllAccordions();
            const coupleContent = document.getElementById('sec-card-couple');
            const coupleChevron = document.getElementById('chevron-sec-card-couple');
            if (coupleContent) {
                coupleContent.classList.remove('hidden');
                if (coupleChevron) coupleChevron.classList.add('rotate-180');
            }
        }

        // 2. Susun urutan awal kartu section & aktifkan Sortable
        applyInitialSectionOrder();
        initUnifiedSortable();

        // 3. Render foto galeri
        renderGalleryGrid();

        // 4. Inisialisasi template & pagination
        const activeRadio = document.querySelector('input[name="template_id"]:checked');
        if (activeRadio) {
            const card = activeRadio.closest('.template-card');
            const tier = card ? (card.getAttribute('data-tier') || 'simple') : 'simple';
            handleTemplateChange(tier);
        }

        // Terapkan filter awal dan buka halaman template aktif
        applyTemplateFilters(false);
        const perPage = getTemplatesPerPage();
        const activeIndex = matchedTemplates.findIndex(card => {
            const radio = card.querySelector('input[type="radio"]');
            return radio && radio.checked;
        });
        if (activeIndex !== -1) {
            currentTemplatePage = Math.floor(activeIndex / perPage) + 1;
            renderTemplatePagination();
        }

        // 5. Form change listeners & floating save dock status
        const invForm = document.getElementById('invitationForm');
        if (invForm) {
            invForm.addEventListener('input', function() {
                const statusDesktop = document.getElementById('floatingStatusTextDesktop');
                const statusMobile = document.getElementById('floatingStatusText');
                if (statusDesktop) statusDesktop.textContent = 'Perubahan belum disimpan';
                if (statusMobile) statusMobile.textContent = 'Perubahan belum disimpan';
            });
            invForm.addEventListener('submit', function() {
                saveUnifiedSectionsOrder(false);
                const btns = [document.getElementById('btnFloatingSaveDesktop'), document.getElementById('btnFloatingSaveMobile'), document.getElementById('btnFloatingSave')];
                const btnTexts = [document.getElementById('btnFloatingSaveTextDesktop'), document.getElementById('btnFloatingSaveTextMobile'), document.getElementById('btnFloatingSaveText')];
                btnTexts.forEach(el => { if (el) el.innerText = 'Menyimpan...'; });
                btns.forEach(el => { if (el) el.disabled = true; });
            });
        }

        // 6. Responsive resize listener
        let resizeTimeout;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() {
                applyTemplateFilters(false);
            }, 250);
        });

        if (window.lucide) { lucide.createIcons(); }
    });
</script>
@endpush
@endsection