@extends('layouts.app')

@section('title', 'Buat Undangan Gratis - Janoer Koening')

@section('content')
<div class="py-12 bg-[#FAF7F0]">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-10">
            <span class="inline-block px-3 py-1 bg-sage/20 text-deepsage text-[11px] font-semibold tracking-widest uppercase rounded-full">
                Gratis • Tanpa Kartu Kredit
            </span>
            <h1 class="font-heading text-4xl sm:text-5xl font-bold text-charcoal mt-2">Buat Undangan Pernikahanmu</h1>
            <p class="text-sm text-charcoal/70 mt-2 max-w-lg mx-auto">Pilih template, masukkan data pernikahan, dan lihat hasil pratinjau langsung secara gratis.</p>
        </div>

        <form action="{{ route('onboarding.process') }}" method="POST" class="space-y-8">
            @csrf

            <!-- 1. Pilih Template -->
            <div class="bg-white p-5 sm:p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-sm space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 pb-2 border-b border-[#A8BBA6]/15">
                    <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 font-bold">1</span>
                            Pilih Desain Template
                        </h3>
                        <p class="text-xs text-charcoal/60 mt-0.5">Pilih tema favorit Anda. Anda tetap bisa mengganti template kapan saja di dashboard nanti.</p>
                    </div>
                    <span id="templateCountBadge" class="text-xs font-semibold px-3 py-1 rounded-full bg-deepsage/10 text-deepsage self-start sm:self-auto">
                        Menampilkan {{ $templates->count() }} Template
                    </span>
                </div>

                <!-- Filter Controls Toolbar -->
                <div class="grid grid-cols-1 sm:grid-cols-12 gap-2.5 p-3 sm: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 shadow-2xs">
                    </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 shadow-2xs">
                            <option value="all">Semua Kategori ({{ $allCategories->count() }})</option>
                            @foreach($allCategories as $cat)
                                <option value="{{ strtolower($cat) }}">{{ $cat }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Tier 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 shadow-2xs">
                            <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>

                <!-- Template Cards Visual Grid -->
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4" id="template-container">
                    @foreach($templates as $tmpl)
                        @php
                            $isSelected = ($selectedTemplate && $selectedTemplate->id == $tmpl->id);
                        @endphp
                        <label class="template-card group relative border-2 rounded-2xl overflow-hidden cursor-pointer hover:border-deepsage transition-all duration-200 flex flex-col justify-between {{ $isSelected ? 'border-deepsage ring-2 ring-deepsage/20 bg-sage/5 is-selected' : 'border-[#A8BBA6]/30 bg-white' }}"
                               data-tier="{{ strtolower($tmpl->package_tier ?? 'all') }}"
                               data-category="{{ strtolower($tmpl->category ?? '') }}"
                               data-name="{{ strtolower($tmpl->name) }}"
                               data-code="{{ strtolower($tmpl->code) }}"
                               onclick="selectTemplate(this)">
                            
                            <!-- Thumbnail & Badges (Portrait Mobile Aspect Ratio) -->
                            <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">
                                
                                <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($tmpl->package_tier && $tmpl->package_tier !== 'all')
                                    <span class="absolute top-2 right-2 px-2 py-0.5 bg-brandgold text-charcoal text-[9px] font-bold rounded uppercase shadow-xs">
                                        {{ ucfirst($tmpl->package_tier) }}
                                    </span>
                                @endif

                                <!-- Selected Checkmark Icon Overlay -->
                                <div class="selected-indicator absolute inset-0 bg-deepsage/20 items-center justify-center pointer-events-none transition-opacity duration-200 {{ $isSelected ? 'flex' : 'hidden' }}">
                                    <span class="w-9 h-9 rounded-full bg-deepsage text-ivory flex items-center justify-center shadow-lg border-2 border-white">
                                        <i data-lucide="check" class="w-5 h-5 stroke-[2.5]"></i>
                                    </span>
                                </div>
                            </div>

                            <!-- Title & Radio -->
                            <div class="p-2.5 sm:p-3 bg-white flex items-center justify-between border-t border-[#A8BBA6]/15 gap-2">
                                <div class="min-w-0">
                                    <span class="text-xs font-bold text-charcoal block truncate">{{ $tmpl->name }}</span>
                                    <span class="text-[10px] text-brandgold font-medium block truncate">{{ $tmpl->category ?? 'Umum' }}</span>
                                </div>
                                <input type="radio" 
                                       name="template_id" 
                                       value="{{ $tmpl->id }}" 
                                       class="template-radio accent-deepsage w-4 h-4 shrink-0" 
                                       {{ $isSelected ? 'checked' : '' }} 
                                       required>
                            </div>

                            <!-- Demo Buttons (HP & PC) -->
                            <div class="px-2.5 sm: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>
            </div>

            <!-- 2. Data Pengantin Singkat -->
            <div class="bg-white p-6 sm:p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-sm space-y-4">
                <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">2</span>
                    Data Kedua Mempelai
                </h3>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Nama Lengkap Mempelai Pria</label>
                        <input type="text" name="groom_name" placeholder="contoh: Fajar Nugraha, S.T." required value="{{ old('groom_name') }}" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Panggilan Pria</label>
                        <input type="text" name="groom_nickname" placeholder="Fajar" required value="{{ old('groom_nickname') }}" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Nama Lengkap Mempelai Wanita</label>
                        <input type="text" name="bride_name" placeholder="contoh: Dinda Kirana Putri, S.I.Kom" required value="{{ old('bride_name') }}" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Panggilan Wanita</label>
                        <input type="text" name="bride_nickname" placeholder="Dinda" required value="{{ old('bride_nickname') }}" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                    </div>
                </div>
            </div>

            <!-- 3. Jadwal & Lokasi Acara Pokok -->
            <div class="bg-white p-6 sm:p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-sm space-y-4">
                <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">3</span>
                    Waktu & Tempat Akad / Pemberkatan
                </h3>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Tanggal & Waktu Akad</label>
                        <input type="datetime-local" name="event_datetime_1" required value="{{ old('event_datetime_1') }}" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Tempat / Gedung / Masjid</label>
                        <input type="text" name="event_venue_1" placeholder="Masjid Raya / Hotel Santika" required value="{{ old('event_venue_1') }}" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                    </div>
                </div>
            </div>

            <!-- 4. Akun Pemesan (Jika Belum Login) -->
            @guest
            <div class="bg-white p-6 sm:p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-sm space-y-4">
                <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">4</span>
                    Simpan ke Akun Saya
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Nama Pemesan</label>
                        <input type="text" name="user_name" placeholder="Nama Anda" required class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Nomor WhatsApp Aktif</label>
                        <input type="tel" name="phone" placeholder="08xxxxxxxxxx" required class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Alamat Email</label>
                        <input type="email" name="email" placeholder="email@gmail.com" required class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-charcoal/80 mb-1">Buat Password</label>
                        <input type="password" name="password" placeholder="Minimal 6 karakter" required class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm">
                    </div>
                </div>
            </div>
            @endguest

            <div class="text-center pt-4">
                <button type="submit" class="px-10 py-4 bg-deepsage text-ivory font-semibold text-sm uppercase tracking-widest rounded-full hover:bg-opacity-90 shadow-xl transition transform hover:-translate-y-0.5">
                    Buat Undangan & Buka Pratinjau &rarr;
                </button>
                <p class="text-xs text-charcoal/60 mt-3">Pratinjau gratis! Anda hanya membayar jika ingin mempublikasikan link resmi tanpa watermark.</p>
            </div>
        </form>

    </div>
</div>

<!-- Mobile Preview Modal (Popup Frame) -->
<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 -->
    <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 Template
        </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>

    <!-- Phone Frame Container -->
    <div class="relative w-full max-w-sm h-[82vh] sm:h-[86vh] bg-stone-900 rounded-[36px] sm:rounded-[44px] p-2.5 shadow-2xl flex flex-col border border-white/10" onclick="event.stopPropagation()">
        <!-- Close Button in Corner -->
        <button type="button" onclick="closeMobilePreviewModal()" aria-label="Tutup Pratinjau" class="absolute top-4 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>

        <div class="relative w-full h-full bg-black rounded-[28px] sm:rounded-[36px] overflow-hidden flex flex-col">
            <iframe id="mobileModalIframe"
                    src="about:blank"
                    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>

    <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 Formulir
    </button>
</div>

@push('scripts')
<script>
    // ==========================================
    // TEMPLATE SELECTION SYNCHRONIZATION
    // ==========================================
    function selectTemplate(selectedCard) {
        if (!selectedCard) return;

        const allCards = document.querySelectorAll('.template-card');
        allCards.forEach(card => {
            // Remove highlight classes
            card.classList.remove('border-deepsage', 'ring-2', 'ring-deepsage/20', 'bg-sage/5', 'is-selected');
            card.classList.add('border-[#A8BBA6]/30', 'bg-white');

            // Hide check overlay
            const indicator = card.querySelector('.selected-indicator');
            if (indicator) {
                indicator.classList.remove('flex');
                indicator.classList.add('hidden');
            }

            // Radio input
            const radio = card.querySelector('.template-radio');
            if (radio && card !== selectedCard) {
                radio.checked = false;
            }
        });

        // Highlight selected card
        selectedCard.classList.remove('border-[#A8BBA6]/30', 'bg-white');
        selectedCard.classList.add('border-deepsage', 'ring-2', 'ring-deepsage/20', 'bg-sage/5', 'is-selected');

        const activeIndicator = selectedCard.querySelector('.selected-indicator');
        if (activeIndicator) {
            activeIndicator.classList.remove('hidden');
            activeIndicator.classList.add('flex');
        }

        const activeRadio = selectedCard.querySelector('.template-radio');
        if (activeRadio) {
            activeRadio.checked = true;
        }

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

    // ==========================================
    // TEMPLATE FILTER & CLIENT 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';
            }
        });

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

        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' });
        }
    }

    // ==========================================
    // MOBILE PREVIEW MODAL
    // ==========================================
    function openMobilePreviewModal(demoUrl) {
        const modal = document.getElementById('mobilePreviewModal');
        const modalFrame = document.getElementById('mobileModalIframe');
        if (modal) {
            modal.style.display = 'flex';
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            if (modalFrame && demoUrl) {
                modalFrame.src = demoUrl;
            }
            if (window.lucide) { lucide.createIcons(); }
        }
    }

    function closeMobilePreviewModal() {
        const modal = document.getElementById('mobilePreviewModal');
        const modalFrame = document.getElementById('mobileModalIframe');
        if (modal) {
            modal.style.display = 'none';
            modal.classList.remove('flex');
            modal.classList.add('hidden');
            if (modalFrame) {
                modalFrame.src = 'about:blank';
            }
        }
    }

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

    // Auto initialize filters & ensure initial selected card is on visible page
    document.addEventListener('DOMContentLoaded', function() {
        applyTemplateFilters(true);

        // If a template is initially selected, jump to its page if needed
        const selectedCard = document.querySelector('.template-card.is-selected');
        if (selectedCard) {
            const idx = matchedTemplates.indexOf(selectedCard);
            if (idx !== -1) {
                const perPage = getTemplatesPerPage();
                currentTemplatePage = Math.floor(idx / perPage) + 1;
                renderTemplatePagination();
            }
        }

        // Listen for screen resize to adjust items per page
        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
                applyTemplateFilters(false);
            }, 200);
        });
    });
</script>
@endpush
@endsection