@extends('layouts.admin')

@section('title', 'Katalog Template HTML')
@section('page_title', 'Katalog Template HTML')

@section('admin_content')
<div>
    <!-- Page Header -->
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">Katalog Template HTML</h1>
                <p class="ax-page-head__subtitle">Daftarkan file template HTML baru, atur dukungan Drag &amp; Drop Section, dan perbarui thumbnail.</p>
            </div>
            <div class="ax-page-head__actions">
                <button type="button" onclick="document.getElementById('newTemplateModal').classList.toggle('is-hidden')" class="ax-btn ax-btn--primary ax-btn--sm">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Tambah Template Baru</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Template Baru -->
    <div id="newTemplateModal" class="is-hidden" style="margin-bottom:var(--ax-space-6);">
        <section class="ax-card">
            <div class="ax-card__header">
                <div class="ax-card__titles">
                    <span class="ax-card__eyebrow">Form Desain Baru</span>
                    <h3 class="ax-card__title">Daftarkan Template Baru</h3>
                </div>
            </div>
            <div class="ax-card__body">
                <form action="{{ route('admin.templates.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:var(--ax-space-4); margin-bottom:var(--ax-space-4);">
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Kode Template</label>
                            <input type="text" name="code" required placeholder="misal: JK - 006" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Nama Template</label>
                            <input type="text" name="name" required placeholder="misal: Royal Blossom" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Kategori Master</label>
                            <select name="category_id" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                                <option value="">-- Pilih Kategori Master --</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Kategori Paket (Tier)</label>
                            <select id="modal_package_tier" name="package_tier" onchange="autoFillViewPath()" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                                <option value="all">Semua Paket (All)</option>
                                @foreach($packages as $pkg)
                                    <option value="{{ $pkg->slug }}">Khusus {{ $pkg->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Folder Tema &amp; Layout</label>
                            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:6px;">
                                <input type="text" id="modal_theme_name" placeholder="tema: pretty" oninput="autoFillViewPath()" style="width:100%; padding:8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                                <input type="text" id="modal_layout_name" placeholder="layout: layout-1" oninput="autoFillViewPath()" style="width:100%; padding:8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                            </div>
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Lokasi File Blade View</label>
                            <input type="text" id="modal_view_file" name="view_file" value="templates.premium.pretty.layout-1" required style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); font-family:var(--ax-font-mono); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Upload File Thumbnail</label>
                            <input type="file" name="thumbnail_file" accept="image/*" style="width:100%; padding:6px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Atau Thumbnail URL/Path</label>
                            <input type="text" id="modal_thumb_url" name="thumbnail_url" placeholder="/templates/premium/pretty/assets/images/slider/slide-1.jpg" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div style="grid-column: 1 / -1;">
                            <label style="display:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); cursor:pointer;">
                                <input type="checkbox" name="supports_drag_drop" value="1" checked class="accent-deepsage">
                                <span>Aktifkan Fitur Drag &amp; Drop Reordering untuk Template Ini</span>
                            </label>
                        </div>
                    </div>
                    <div style="display:flex; justify-content:flex-end; gap:var(--ax-space-2);">
                        <button type="button" onclick="document.getElementById('newTemplateModal').classList.add('is-hidden')" class="ax-btn ax-btn--secondary ax-btn--sm">Batal</button>
                        <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">Daftarkan Template</button>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <!-- Filter & Search Toolbar Admin -->
    <div class="ax-card" style="margin-bottom:var(--ax-space-6); padding:var(--ax-space-4);">
        <div style="display:flex; flex-wrap:wrap; gap:var(--ax-space-3); align-items:center; justify-content:space-between;">
            <!-- Left: Search & Dropdowns -->
            <div style="display:flex; flex-wrap:wrap; gap:var(--ax-space-3); align-items:center; flex:1; min-width:300px;">
                <!-- Search Input -->
                <div style="position:relative; min-width:220px; flex:1;">
                    <i data-lucide="search" style="position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ax-text-muted);"></i>
                    <input type="text" id="adminSearchTemplate" oninput="applyAdminTemplateFilters()" placeholder="Cari kode atau nama template..." style="width:100%; padding:7px 12px 7px 32px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                </div>

                <!-- Category Filter -->
                <div style="min-width:160px;">
                    <select id="adminCategoryFilter" onchange="applyAdminTemplateFilters()" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        <option value="all">Semua Kategori ({{ $categories->count() }})</option>
                        @foreach($categories as $cat)
                            <option value="{{ strtolower($cat->name) }}">{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Tier Filter -->
                <div style="min-width:140px;">
                    <select id="adminTierFilter" onchange="applyAdminTemplateFilters()" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        <option value="all">Semua Paket Tier</option>
                        <option value="simple">Khusus Simple</option>
                        <option value="elegant">Khusus Elegant</option>
                        <option value="premium">Khusus Premium</option>
                    </select>
                </div>

                <!-- Status Filter -->
                <div style="min-width:120px;">
                    <select id="adminStatusFilter" onchange="applyAdminTemplateFilters()" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        <option value="all">Semua Status</option>
                        <option value="active">Aktif</option>
                        <option value="inactive">Nonaktif</option>
                    </select>
                </div>
            </div>

            <!-- Right: Counter & Reset -->
            <div style="display:flex; align-items:center; gap:var(--ax-space-3);">
                <span id="adminTemplateCount" class="ax-badge ax-badge--neutral ax-badge--pill font-bold" style="font-size:11px;">
                    Menampilkan {{ $templates->count() }} Template
                </span>
                <button type="button" onclick="resetAdminTemplateFilters()" class="ax-btn ax-btn--secondary ax-btn--sm" title="Reset Filter">
                    <i data-lucide="rotate-ccw" style="width:12px;height:12px;"></i>
                    <span class="ax-btn__label">Reset</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Template Grid -->
    <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:var(--ax-space-6);">
        @foreach($templates as $tmpl)
            <section class="ax-card admin-template-card {{ $tmpl->is_active ? '' : 'opacity-70' }}"
                     data-code="{{ strtolower($tmpl->code) }}"
                     data-name="{{ strtolower($tmpl->name) }}"
                     data-category="{{ strtolower($tmpl->categoryRel->name ?? $tmpl->category ?? '') }}"
                     data-tier="{{ strtolower($tmpl->package_tier) }}"
                     data-status="{{ $tmpl->is_active ? 'active' : 'inactive' }}"
                     style="overflow:hidden;">
                <!-- Thumbnail (Portrait Mobile Preview) -->
                <div style="height:250px; background:var(--ax-surface-subtle); position:relative; overflow:hidden;">
                    <img src="{{ $tmpl->thumbnail_url }}" alt="{{ $tmpl->name }}" style="width:100%; height:100%; object-fit:cover; object-position:top;">
                    <span class="ax-badge ax-badge--accent" style="position:absolute; top:12px; left:12px; font-weight:bold;">
                        {{ $tmpl->code }}
                    </span>
                    @php
                        $matchedPkg = $packages->firstWhere('slug', $tmpl->package_tier);
                        $badgeLabel = $matchedPkg ? $matchedPkg->name : ($tmpl->package_tier === 'all' ? 'SEMUA PAKET' : strtoupper($tmpl->package_tier));
                    @endphp
                    <span class="ax-badge {{ $tmpl->package_tier === 'premium' ? 'ax-badge--solid ax-badge--accent' : ($tmpl->package_tier === 'elegant' ? 'ax-badge--solid ax-badge--warning' : 'ax-badge--solid') }}" style="position:absolute; bottom:12px; right:12px;">
                        {{ $badgeLabel }}
                    </span>
                </div>

                <form action="{{ route('admin.templates.update', $tmpl->id) }}" method="POST" enctype="multipart/form-data" style="margin:0;">
                    @csrf
                    @method('PUT')
                    <div class="ax-card__body" style="padding:var(--ax-space-4);">
                        <div style="display:flex; gap:8px; align-items:center; margin-bottom:var(--ax-space-2);">
                            <input type="text" name="code" value="{{ $tmpl->code }}" placeholder="Kode" title="Kode Template" style="width:80px; padding:4px 6px; font-family:var(--ax-font-mono); font-size:11px; font-weight:700; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                            <input type="text" name="name" value="{{ $tmpl->name }}" class="font-heading" placeholder="Nama Template" style="font-size:1.15rem; font-weight:700; border:none; border-bottom:1px dashed var(--ax-border); background:transparent; color:var(--ax-text-strong); flex:1;">
                        </div>

                        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-2); margin-bottom:var(--ax-space-3);">
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Kategori Master</label>
                                <select name="category_id" style="width:100%; padding:4px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                                    <option value="">-- Kategori --</option>
                                    @foreach($categories as $cat)
                                        <option value="{{ $cat->id }}" {{ ($tmpl->category_id == $cat->id || $tmpl->category == $cat->name) ? 'selected' : '' }}>
                                            {{ $cat->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Tier Paket</label>
                                <select name="package_tier" style="width:100%; padding:4px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                                    <option value="all" {{ $tmpl->package_tier == 'all' ? 'selected' : '' }}>All</option>
                                    @foreach($packages as $pkg)
                                        <option value="{{ $pkg->slug }}" {{ $tmpl->package_tier == $pkg->slug ? 'selected' : '' }}>
                                            {{ $pkg->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div style="margin-bottom:var(--ax-space-2);">
                            <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Ganti File Thumbnail</label>
                            <input type="file" name="thumbnail_file" accept="image/*" style="width:100%; padding:4px; font-size:10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                        </div>

                        <div style="margin-bottom:var(--ax-space-3);">
                            <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">File Blade View</label>
                            <input type="text" name="view_file" value="{{ $tmpl->view_file }}" style="width:100%; padding:4px 8px; font-size:11px; font-family:var(--ax-font-mono); border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                        </div>

                        <div style="display:flex; justify-content:space-between; align-items:center; font-size:11px; padding-top:var(--ax-space-2); border-top:1px solid var(--ax-border);">
                            <label style="display:flex; align-items:center; gap:4px; cursor:pointer;">
                                <input type="checkbox" name="supports_drag_drop" value="1" {{ $tmpl->supports_drag_drop ? 'checked' : '' }} class="accent-deepsage">
                                <span>Drag &amp; Drop</span>
                            </label>
                            <label style="display:flex; align-items:center; gap:4px; cursor:pointer;">
                                <input type="checkbox" name="is_active" value="1" {{ $tmpl->is_active ? 'checked' : '' }} class="accent-deepsage">
                                <span>Aktif</span>
                            </label>
                        </div>
                    </div>

                    <div class="ax-card__footer" style="padding:var(--ax-space-3) var(--ax-space-4); display:flex; justify-content:space-between; align-items:center;">
                        <button type="button" 
                                onclick='openDemoDataModal(@json($tmpl->id), @json($tmpl->name), @json($tmpl->demo_data ?? (object)[]))' 
                                class="ax-btn ax-btn--secondary ax-btn--sm"
                                style="font-size:11px; display:inline-flex; align-items:center; gap:4px;"
                                title="Atur data preview mempelai default untuk template ini">
                            <i data-lucide="sparkles" style="width:13px; height:13px; color:#C7A96B;"></i>
                            Data Demo
                        </button>
                        <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">
                            Simpan Update
                        </button>
                    </div>
                </form>
            </section>
        @endforeach
    </div>
</div>

<!-- Modal Atur Data Demo Template -->
<div id="demoDataModal" class="is-hidden" style="position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);">
    <div style="background:var(--ax-surface); border-radius:var(--ax-radius-xl); width:95%; max-width:760px; max-height:90vh; overflow-y:auto; box-shadow:0 25px 50px -12px rgba(0,0,0,0.3); border:1px solid var(--ax-border);">
        <div style="padding:var(--ax-space-4) var(--ax-space-6); border-bottom:1px solid var(--ax-border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--ax-surface); z-index:10;">
            <div>
                <h3 style="margin:0; font-size:1.15rem; font-weight:700; color:var(--ax-text-strong); display:flex; align-items:center; gap:8px;">
                    <i data-lucide="sparkles" style="width:18px; height:18px; color:#C7A96B;"></i>
                    Atur Custom Data Demo: <span id="modalDemoTemplateName" style="color:#536B5B;"></span>
                </h3>
                <p style="margin:2px 0 0 0; font-size:12px; color:var(--ax-text-muted);">
                    Jika dikosongkan, template otomatis menggunakan Blueprint Master default. Isi field jika ingin kustom khusus template ini.
                </p>
            </div>
            <button type="button" onclick="closeDemoDataModal()" style="border:none; background:transparent; font-size:20px; cursor:pointer; color:var(--ax-text-muted);">&times;</button>
        </div>

        <form id="demoDataForm" method="POST" style="margin:0; padding:var(--ax-space-6);">
            @csrf
            @method('PUT')

            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-4);">
                <!-- Mempelai Pria -->
                <div style="background:var(--ax-surface-subtle); padding:var(--ax-space-4); border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                    <h4 style="margin:0 0 var(--ax-space-3) 0; font-size:13px; font-weight:700; color:#536B5B;">Data Pengantin Pria (Groom)</h4>
                    <div style="display:flex; flex-direction:column; gap:8px;">
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Nama Lengkap &amp; Gelar</label>
                            <input type="text" name="groom_name" id="demo_groom_name" placeholder="Raditya Arya Pratama, S.T" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Nama Panggilan</label>
                            <input type="text" name="groom_nickname" id="demo_groom_nickname" placeholder="Radit" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Nama Ayah</label>
                            <input type="text" name="groom_father" id="demo_groom_father" placeholder="Bpk. Ir. H. Bambang Sudiro" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Nama Ibu</label>
                            <input type="text" name="groom_mother" id="demo_groom_mother" placeholder="Ibu Hj. Endang Sulistiyowati" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Instagram (Username)</label>
                            <input type="text" name="groom_instagram" id="demo_groom_instagram" placeholder="raditya.arya" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">URL Foto Pria</label>
                            <input type="text" name="groom_photo" id="demo_groom_photo" placeholder="https://..." style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                    </div>
                </div>

                <!-- Mempelai Wanita -->
                <div style="background:var(--ax-surface-subtle); padding:var(--ax-space-4); border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                    <h4 style="margin:0 0 var(--ax-space-3) 0; font-size:13px; font-weight:700; color:#536B5B;">Data Pengantin Wanita (Bride)</h4>
                    <div style="display:flex; flex-direction:column; gap:8px;">
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Nama Lengkap &amp; Gelar</label>
                            <input type="text" name="bride_name" id="demo_bride_name" placeholder="Anindya Kirana Larasati, S.E" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Nama Panggilan</label>
                            <input type="text" name="bride_nickname" id="demo_bride_nickname" placeholder="Anin" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Nama Ayah</label>
                            <input type="text" name="bride_father" id="demo_bride_father" placeholder="Bpk. Dr. H. Gunawan Wibisono" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Nama Ibu</label>
                            <input type="text" name="bride_mother" id="demo_bride_mother" placeholder="Ibu Dra. Hj. Ratna Juwita" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Instagram (Username)</label>
                            <input type="text" name="bride_instagram" id="demo_bride_instagram" placeholder="anindya.kirana" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">URL Foto Wanita</label>
                            <input type="text" name="bride_photo" id="demo_bride_photo" placeholder="https://..." style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                    </div>
                </div>

                <!-- Kutipan / Quote & Hero Cover -->
                <div style="grid-column: 1 / -1; background:var(--ax-surface-subtle); padding:var(--ax-space-4); border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                    <h4 style="margin:0 0 var(--ax-space-3) 0; font-size:13px; font-weight:700; color:#536B5B;">Kutipan &amp; Cover Hero</h4>
                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-3);">
                        <div style="grid-column: 1 / -1;">
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">URL Foto Cover Hero</label>
                            <input type="text" name="hero_photo" id="demo_hero_photo" placeholder="https://images.unsplash.com/..." style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Teks Kutipan / Doa</label>
                            <textarea name="quote" id="demo_quote" rows="2" placeholder="Dan di antara tanda-tanda-Nya..." style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);"></textarea>
                        </div>
                        <div>
                            <label style="font-size:11px; font-weight:600; display:block; margin-bottom:2px;">Sumber / Ayat Kutipan</label>
                            <input type="text" name="quote_author" id="demo_quote_author" placeholder="QS. Ar-Rum : 21" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        </div>
                    </div>
                </div>

                <!-- Acara 1 & 2 -->
                <div style="background:var(--ax-surface-subtle); padding:var(--ax-space-4); border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                    <h4 style="margin:0 0 var(--ax-space-3) 0; font-size:13px; font-weight:700; color:#536B5B;">Acara 1 (Akad / Pemberkatan)</h4>
                    <div style="display:flex; flex-direction:column; gap:8px;">
                        <input type="text" name="event_title_1" id="demo_event_title_1" placeholder="Judul Acara: Akad Nikah" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        <input type="text" name="event_venue_1" id="demo_event_venue_1" placeholder="Nama Tempat / Gedung" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        <input type="text" name="event_address_1" id="demo_event_address_1" placeholder="Alamat Lengkap" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                    </div>
                </div>

                <div style="background:var(--ax-surface-subtle); padding:var(--ax-space-4); border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                    <h4 style="margin:0 0 var(--ax-space-3) 0; font-size:13px; font-weight:700; color:#536B5B;">Acara 2 (Resepsi)</h4>
                    <div style="display:flex; flex-direction:column; gap:8px;">
                        <input type="text" name="event_title_2" id="demo_event_title_2" placeholder="Judul Acara: Resepsi Pernikahan" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        <input type="text" name="event_venue_2" id="demo_event_venue_2" placeholder="Nama Tempat / Gedung" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                        <input type="text" name="event_address_2" id="demo_event_address_2" placeholder="Alamat Lengkap" style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                    </div>
                </div>

                <!-- Streaming Link -->
                <div style="grid-column: 1 / -1; background:var(--ax-surface-subtle); padding:var(--ax-space-4); border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                    <h4 style="margin:0 0 var(--ax-space-2) 0; font-size:13px; font-weight:700; color:#536B5B;">Link Live Streaming Demo</h4>
                    <input type="url" name="streaming_url" id="demo_streaming_url" placeholder="https://www.youtube.com/watch?v=..." style="width:100%; padding:6px 10px; font-size:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); background:var(--ax-surface);">
                </div>
            </div>

            <div style="display:flex; justify-content:flex-end; gap:var(--ax-space-2); margin-top:var(--ax-space-4);">
                <button type="button" onclick="closeDemoDataModal()" class="ax-btn ax-btn--secondary ax-btn--sm">Tutup</button>
                <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">Simpan Data Demo</button>
            </div>
        </form>
    </div>
</div>

<script>
function autoFillViewPath() {
    var tier = document.getElementById('modal_package_tier').value;
    var theme = document.getElementById('modal_theme_name').value.trim();
    var layout = document.getElementById('modal_layout_name').value.trim();
    var viewInput = document.getElementById('modal_view_file');
    var thumbInput = document.getElementById('modal_thumb_url');

    if (tier && theme && layout) {
        viewInput.value = 'templates.' + tier + '.' + theme + '.' + layout;
        if (!thumbInput.value || thumbInput.value.startsWith('/templates/')) {
            thumbInput.value = '/templates/' + tier + '/' + theme + '/assets/images/slider/slide-1.jpg';
        }
    }
}

function applyAdminTemplateFilters() {
    var search = (document.getElementById('adminSearchTemplate')?.value || '').toLowerCase().trim();
    var cat = (document.getElementById('adminCategoryFilter')?.value || 'all').toLowerCase();
    var tier = (document.getElementById('adminTierFilter')?.value || 'all').toLowerCase();
    var status = (document.getElementById('adminStatusFilter')?.value || 'all').toLowerCase();

    var cards = document.querySelectorAll('.admin-template-card');
    var count = 0;

    cards.forEach(function(card) {
        var cCode = (card.getAttribute('data-code') || '').toLowerCase();
        var cName = (card.getAttribute('data-name') || '').toLowerCase();
        var cCat = (card.getAttribute('data-category') || '').toLowerCase();
        var cTier = (card.getAttribute('data-tier') || '').toLowerCase();
        var cStatus = (card.getAttribute('data-status') || '').toLowerCase();

        var matchSearch = (!search || cCode.includes(search) || cName.includes(search));
        var matchCat = (cat === 'all' || cCat.includes(cat));
        var matchTier = (tier === 'all' || cTier === tier || cTier === 'all');
        var matchStatus = (status === 'all' || cStatus === status);

        if (matchSearch && matchCat && matchTier && matchStatus) {
            card.style.display = '';
            count++;
        } else {
            card.style.display = 'none';
        }
    });

    var badge = document.getElementById('adminTemplateCount');
    if (badge) {
        badge.innerText = 'Menampilkan ' + count + ' Template';
    }
}

function resetAdminTemplateFilters() {
    var searchEl = document.getElementById('adminSearchTemplate');
    var catEl = document.getElementById('adminCategoryFilter');
    var tierEl = document.getElementById('adminTierFilter');
    var statusEl = document.getElementById('adminStatusFilter');

    if (searchEl) searchEl.value = '';
    if (catEl) catEl.value = 'all';
    if (tierEl) tierEl.value = 'all';
    if (statusEl) statusEl.value = 'all';
    applyAdminTemplateFilters();
}

function openDemoDataModal(templateId, templateName, demoData) {
    var modal = document.getElementById('demoDataModal');
    var form = document.getElementById('demoDataForm');
    var nameSpan = document.getElementById('modalDemoTemplateName');

    if (!modal || !form) return;

    form.action = '/admin/templates/' + templateId + '/demo-data';
    if (nameSpan) nameSpan.innerText = templateName || ('ID #' + templateId);

    demoData = demoData || {};

    var fields = [
        'groom_name', 'groom_nickname', 'groom_father', 'groom_mother', 'groom_instagram', 'groom_photo',
        'bride_name', 'bride_nickname', 'bride_father', 'bride_mother', 'bride_instagram', 'bride_photo',
        'hero_photo', 'quote', 'quote_author',
        'event_title_1', 'event_venue_1', 'event_address_1',
        'event_title_2', 'event_venue_2', 'event_address_2',
        'streaming_url'
    ];

    fields.forEach(function(field) {
        var input = document.getElementById('demo_' + field);
        if (input) {
            input.value = demoData[field] !== undefined ? demoData[field] : '';
        }
    });

    modal.classList.remove('is-hidden');
}

function closeDemoDataModal() {
    var modal = document.getElementById('demoDataModal');
    if (modal) modal.classList.add('is-hidden');
}
</script>
@endsection