{% extends "base.html" %}
{% block title %}Landing Page CMS{% endblock %}

{% block content %}
<div x-data="landingCMS()" x-init="init()" class="space-y-5">

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="/admin/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div class="flex items-center gap-2">
                <svg class="w-6 h-6 text-koin-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"/>
                </svg>
                <h1 class="text-2xl font-bold text-white">Landing Page CMS</h1>
            </div>
        </div>
        <a href="/" target="_blank" class="px-3 py-1.5 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg border border-gray-700 transition flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
            Preview
        </a>
    </div>

    <!-- Tabs -->
    <div class="flex flex-wrap border-b border-gray-800 gap-1">
        <template x-for="t in tabs" :key="t.key">
            <button @click="tab = t.key" class="px-4 py-2.5 text-xs font-semibold transition rounded-t-lg whitespace-nowrap"
                    :class="tab === t.key ? 'text-koin-400 border-b-2 border-koin-400 bg-gray-900' : 'text-gray-500 hover:text-gray-300'">
                <span x-text="t.label"></span>
            </button>
        </template>
    </div>

    <!-- Toast -->
    <div x-show="toast" x-cloak x-transition class="fixed top-4 right-4 z-50 px-4 py-2.5 rounded-lg text-sm font-medium shadow-lg"
         :class="toastType === 'ok' ? 'bg-emerald-900/80 text-emerald-300 border border-emerald-700' : 'bg-red-900/80 text-red-300 border border-red-700'">
        <span x-text="toastMsg"></span>
    </div>

    <!-- ═══ BRAND ═══ -->
    <div x-show="tab === 'brand'" class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <h3 class="text-lg font-bold text-white">Brand Info</h3>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">Nama Brand</label>
                    <input type="text" x-model="data.landing_brand.name" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">Tagline</label>
                    <input type="text" x-model="data.landing_brand.tagline" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
            </div>
            <div>
                <label class="text-xs text-gray-500 mb-1 block">Deskripsi</label>
                <textarea x-model="data.landing_brand.description" rows="2" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none"></textarea>
            </div>

            <h4 class="text-sm font-semibold text-gray-300 mt-4">Sub Produk</h4>
            <template x-for="(sp, idx) in data.landing_brand.sub_products" :key="idx">
                <div class="grid grid-cols-3 gap-3">
                    <input type="text" x-model="sp.name" placeholder="Nama" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                    <input type="text" x-model="sp.label" placeholder="Label" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                    <input type="text" x-model="sp.desc" placeholder="Deskripsi" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
            </template>
            <div class="flex justify-end gap-2 pt-2">
                <button @click="resetSection('brand')" class="px-4 py-2 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg border border-gray-700 transition">Reset Default</button>
                <button @click="saveSection('brand')" class="px-4 py-2 text-xs font-semibold bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition">Simpan</button>
            </div>
        </div>
    </div>

    <!-- ═══ HERO ═══ -->
    <div x-show="tab === 'hero'" class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <h3 class="text-lg font-bold text-white">Hero Section</h3>
            <div>
                <label class="text-xs text-gray-500 mb-1 block">Badge Text <span class="text-gray-600">(gunakan {total_features} untuk jumlah fitur)</span></label>
                <input type="text" x-model="data.landing_hero.badge" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
            </div>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">Headline Baris 1</label>
                    <input type="text" x-model="data.landing_hero.headline_1" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">Headline Baris 2 <span class="text-gray-600">(gradient)</span></label>
                    <input type="text" x-model="data.landing_hero.headline_2" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
            </div>
            <div>
                <label class="text-xs text-gray-500 mb-1 block">Sub-headline</label>
                <textarea x-model="data.landing_hero.subheadline" rows="2" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none"></textarea>
            </div>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">CTA Utama — Text</label>
                    <input type="text" x-model="data.landing_hero.cta_primary_text" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">CTA Utama — URL</label>
                    <input type="text" x-model="data.landing_hero.cta_primary_url" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
            </div>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">CTA Sekunder — Text</label>
                    <input type="text" x-model="data.landing_hero.cta_secondary_text" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">CTA Sekunder — URL</label>
                    <input type="text" x-model="data.landing_hero.cta_secondary_url" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
            </div>
            <div class="flex justify-end gap-2 pt-2">
                <button @click="resetSection('hero')" class="px-4 py-2 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg border border-gray-700 transition">Reset Default</button>
                <button @click="saveSection('hero')" class="px-4 py-2 text-xs font-semibold bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition">Simpan</button>
            </div>
        </div>
    </div>

    <!-- ═══ STATS ═══ -->
    <div x-show="tab === 'stats'" class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <h3 class="text-lg font-bold text-white">Stats Bar</h3>
            <p class="text-xs text-gray-500">4 statistik yang ditampilkan di bawah hero. Gunakan <code class="text-gray-400">{total_features}</code> untuk jumlah fitur otomatis.</p>
            <template x-for="(st, idx) in data.landing_stats" :key="idx">
                <div class="grid grid-cols-2 gap-3">
                    <input type="text" x-model="st.value" placeholder="Nilai (misal: 157+)" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                    <input type="text" x-model="st.label" placeholder="Label" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
            </template>
            <div class="flex justify-end gap-2 pt-2">
                <button @click="resetSection('stats')" class="px-4 py-2 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg border border-gray-700 transition">Reset Default</button>
                <button @click="saveSection('stats')" class="px-4 py-2 text-xs font-semibold bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition">Simpan</button>
            </div>
        </div>
    </div>

    <!-- ═══ FEATURES ═══ -->
    <div x-show="tab === 'features'" class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-white">Fitur Showcase</h3>
                <button @click="data.landing_features.push({icon:'search',color:'sky',title:'',desc:''})" class="px-3 py-1.5 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg border border-gray-700 transition">+ Tambah</button>
            </div>

            <template x-for="(feat, idx) in data.landing_features" :key="idx">
                <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-4 space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500 font-mono">#<span x-text="idx+1"></span></span>
                        <button @click="data.landing_features.splice(idx, 1)" class="text-red-500 hover:text-red-400 text-xs">Hapus</button>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                        <div>
                            <label class="text-xs text-gray-500 mb-1 block">Icon</label>
                            <select x-model="feat.icon" class="w-full px-2 py-2 bg-gray-900 border border-gray-700 rounded-lg text-xs text-white">
                                <option value="search">Search</option>
                                <option value="wallet">Wallet</option>
                                <option value="sparkles">Sparkles</option>
                                <option value="bell">Bell</option>
                                <option value="chart">Chart</option>
                                <option value="globe">Globe</option>
                                <option value="shield">Shield</option>
                                <option value="bolt">Bolt</option>
                                <option value="cpu">CPU</option>
                                <option value="puzzle">Puzzle</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-xs text-gray-500 mb-1 block">Warna</label>
                            <select x-model="feat.color" class="w-full px-2 py-2 bg-gray-900 border border-gray-700 rounded-lg text-xs text-white">
                                <option value="sky">Sky</option>
                                <option value="emerald">Emerald</option>
                                <option value="violet">Violet</option>
                                <option value="amber">Amber</option>
                                <option value="rose">Rose</option>
                                <option value="teal">Teal</option>
                                <option value="indigo">Indigo</option>
                                <option value="red">Red</option>
                            </select>
                        </div>
                        <div class="col-span-2">
                            <label class="text-xs text-gray-500 mb-1 block">Judul</label>
                            <input type="text" x-model="feat.title" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">Deskripsi</label>
                        <textarea x-model="feat.desc" rows="2" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none"></textarea>
                    </div>
                </div>
            </template>
            <div class="flex justify-end gap-2 pt-2">
                <button @click="resetSection('features')" class="px-4 py-2 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg border border-gray-700 transition">Reset Default</button>
                <button @click="saveSection('features')" class="px-4 py-2 text-xs font-semibold bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition">Simpan</button>
            </div>
        </div>
    </div>

    <!-- ═══ HOW TO ═══ -->
    <div x-show="tab === 'howto'" class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-white">Cara Kerja (How It Works)</h3>
                <button @click="data.landing_howto.push({step:String(data.landing_howto.length+1),color:'sky',title:'',desc:''})" class="px-3 py-1.5 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg border border-gray-700 transition">+ Tambah</button>
            </div>

            <template x-for="(step, idx) in data.landing_howto" :key="idx">
                <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-4 space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">Step <span x-text="idx+1"></span></span>
                        <button @click="data.landing_howto.splice(idx, 1)" class="text-red-500 hover:text-red-400 text-xs">Hapus</button>
                    </div>
                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <label class="text-xs text-gray-500 mb-1 block">Nomor</label>
                            <input type="text" x-model="step.step" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                        </div>
                        <div>
                            <label class="text-xs text-gray-500 mb-1 block">Warna</label>
                            <select x-model="step.color" class="w-full px-2 py-2 bg-gray-900 border border-gray-700 rounded-lg text-xs text-white">
                                <option value="koin">Koin (Sky)</option>
                                <option value="violet">Violet</option>
                                <option value="emerald">Emerald</option>
                                <option value="amber">Amber</option>
                                <option value="rose">Rose</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-xs text-gray-500 mb-1 block">Judul</label>
                            <input type="text" x-model="step.title" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">Deskripsi</label>
                        <textarea x-model="step.desc" rows="2" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none"></textarea>
                    </div>
                </div>
            </template>
            <div class="flex justify-end gap-2 pt-2">
                <button @click="resetSection('howto')" class="px-4 py-2 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg border border-gray-700 transition">Reset Default</button>
                <button @click="saveSection('howto')" class="px-4 py-2 text-xs font-semibold bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition">Simpan</button>
            </div>
        </div>
    </div>

    <!-- ═══ FAQ ═══ -->
    <div x-show="tab === 'faq'" class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-white">FAQ</h3>
                <button @click="data.landing_faq.push({q:'',a:''})" class="px-3 py-1.5 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg border border-gray-700 transition">+ Tambah</button>
            </div>

            <template x-for="(faq, idx) in data.landing_faq" :key="idx">
                <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-4 space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">FAQ #<span x-text="idx+1"></span></span>
                        <button @click="data.landing_faq.splice(idx, 1)" class="text-red-500 hover:text-red-400 text-xs">Hapus</button>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">Pertanyaan</label>
                        <input type="text" x-model="faq.q" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">Jawaban</label>
                        <textarea x-model="faq.a" rows="3" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none"></textarea>
                    </div>
                </div>
            </template>
            <div class="flex justify-end gap-2 pt-2">
                <button @click="resetSection('faq')" class="px-4 py-2 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg border border-gray-700 transition">Reset Default</button>
                <button @click="saveSection('faq')" class="px-4 py-2 text-xs font-semibold bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition">Simpan</button>
            </div>
        </div>
    </div>

    <!-- ═══ CTA ═══ -->
    <div x-show="tab === 'cta'" class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <h3 class="text-lg font-bold text-white">Final Call-to-Action</h3>
            <div>
                <label class="text-xs text-gray-500 mb-1 block">Headline</label>
                <input type="text" x-model="data.landing_cta.headline" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
            </div>
            <div>
                <label class="text-xs text-gray-500 mb-1 block">Sub-headline <span class="text-gray-600">({total_features} tersedia)</span></label>
                <textarea x-model="data.landing_cta.subheadline" rows="2" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none"></textarea>
            </div>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">CTA Button Text</label>
                    <input type="text" x-model="data.landing_cta.cta_text" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">CTA URL</label>
                    <input type="text" x-model="data.landing_cta.cta_url" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
            </div>
            <div class="flex justify-end gap-2 pt-2">
                <button @click="resetSection('cta')" class="px-4 py-2 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg border border-gray-700 transition">Reset Default</button>
                <button @click="saveSection('cta')" class="px-4 py-2 text-xs font-semibold bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition">Simpan</button>
            </div>
        </div>
    </div>

    <!-- ═══ FOOTER ═══ -->
    <div x-show="tab === 'footer'" class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <h3 class="text-lg font-bold text-white">Footer</h3>
            <div>
                <label class="text-xs text-gray-500 mb-1 block">Copyright</label>
                <input type="text" x-model="data.landing_footer.copyright" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
            </div>
            <div>
                <label class="text-xs text-gray-500 mb-1 block">Disclaimer</label>
                <textarea x-model="data.landing_footer.disclaimer" rows="2" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none"></textarea>
            </div>

            <h4 class="text-sm font-semibold text-gray-300 mt-4">Produk di Footer</h4>
            <template x-for="(prod, idx) in data.landing_footer.products" :key="idx">
                <div class="grid grid-cols-2 gap-3">
                    <input type="text" x-model="prod.name" placeholder="Nama produk" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                    <input type="text" x-model="prod.desc" placeholder="Deskripsi singkat" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white focus:border-koin-500 focus:outline-none">
                </div>
            </template>
            <div class="flex justify-end gap-2 pt-2">
                <button @click="resetSection('footer')" class="px-4 py-2 text-xs font-semibold bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg border border-gray-700 transition">Reset Default</button>
                <button @click="saveSection('footer')" class="px-4 py-2 text-xs font-semibold bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition">Simpan</button>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function landingCMS() {
    return {
        tab: 'brand',
        toast: false, toastMsg: '', toastType: 'ok',
        tabs: [
            {key: 'brand',    label: 'Brand'},
            {key: 'hero',     label: 'Hero'},
            {key: 'stats',    label: 'Stats'},
            {key: 'features', label: 'Fitur'},
            {key: 'howto',    label: 'Cara Kerja'},
            {key: 'faq',      label: 'FAQ'},
            {key: 'cta',      label: 'CTA'},
            {key: 'footer',   label: 'Footer'},
        ],
        data: {{ landing | tojson }},

        init() {},

        showToast(msg, type) {
            this.toastMsg = msg;
            this.toastType = type;
            this.toast = true;
            setTimeout(() => this.toast = false, 2500);
        },

        async saveSection(section) {
            try {
                const key = 'landing_' + section;
                const body = this.data[key];
                const res = await fetch(`/api/v1/admin/landing/${section}`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(body),
                });
                const json = await res.json();
                if (res.ok) {
                    this.showToast(`${section} berhasil disimpan`, 'ok');
                } else {
                    this.showToast(json.error || 'Gagal menyimpan', 'err');
                }
            } catch (e) {
                this.showToast('Network error', 'err');
            }
        },

        async resetSection(section) {
            if (!confirm(`Reset ${section} ke default?`)) return;
            try {
                const res = await fetch(`/api/v1/admin/landing/reset/${section}`, {method: 'POST'});
                const json = await res.json();
                if (res.ok && json.data) {
                    this.data['landing_' + section] = json.data;
                    this.showToast(`${section} di-reset ke default`, 'ok');
                } else {
                    this.showToast(json.error || 'Gagal reset', 'err');
                }
            } catch (e) {
                this.showToast('Network error', 'err');
            }
        },
    };
}
</script>
{% endblock %}