@extends('layouts.admin')
@section('title', 'Pengaturan')
@section('page-title', 'Pengaturan Aplikasi')

@section('content')
@php
// Map nilai saat ini
$map = [];
foreach ($settings as $g => $items) foreach ($items as $s) $map[$s->key] = $s->value;
$v = fn ($k, $d = '') => $map[$k] ?? $d;
$has = fn (...$keys) => collect($keys)->contains(fn ($k) => filled($map[$k] ?? null));

// Skema seksi + field
$sections = [
    ['key' => 'brand', 'title' => 'Brand & Info', 'icon' => 'palette', 'desc' => 'Identitas aplikasi: nama, tagline, warna, logo.', 'badge' => null, 'fields' => [
        ['k' => 'brand.app_name', 'l' => 'Nama Aplikasi', 't' => 'text'],
        ['k' => 'brand.tagline', 'l' => 'Tagline', 't' => 'text'],
        ['k' => 'brand.accent_color', 'l' => 'Warna Aksen', 't' => 'color'],
        ['k' => 'brand.logo', 'l' => 'URL Logo', 't' => 'text', 'h' => 'Kosongkan untuk pakai logo bawaan.'],
        ['k' => 'brand.description', 'l' => 'Deskripsi', 't' => 'textarea', 'col' => 'full'],
    ]],
    ['key' => 'general', 'title' => 'Jadwal Sholat', 'icon' => 'mosque', 'desc' => 'Kota default jadwal sholat (pengunjung bisa mengganti sendiri).', 'badge' => null, 'fields' => [
        ['k' => 'general.prayer_city', 'l' => 'Kota Default', 't' => 'text'],
        ['k' => 'general.prayer_country', 'l' => 'Negara', 't' => 'text'],
    ]],
    ['key' => 'social', 'title' => 'Media Sosial', 'icon' => 'share', 'desc' => 'Tautan akun & embed feed Instagram.', 'badge' => $has('social.facebook_url','social.instagram_url'), 'fields' => [
        ['k' => 'social.facebook_url', 'l' => 'URL Facebook', 't' => 'text'],
        ['k' => 'social.instagram_url', 'l' => 'URL Instagram', 't' => 'text'],
        ['k' => 'social.youtube_url', 'l' => 'URL YouTube', 't' => 'text'],
        ['k' => 'social.tiktok_url', 'l' => 'URL TikTok', 't' => 'text'],
        ['k' => 'social.instagram_embed', 'l' => 'Embed Feed Instagram', 't' => 'textarea', 'col' => 'full', 'h' => 'Tempel kode embed dari LightWidget / SnapWidget (gratis, tanpa token).'],
    ]],
    ['key' => 'payment', 'title' => 'Pembayaran', 'icon' => 'cash', 'desc' => 'Pilih gateway aktif lalu isi kredensialnya.', 'badge' => $has('payment.moota_api_key','payment.xendit_secret_key'), 'fields' => 'payment'],
    ['key' => 'notification', 'title' => 'Notifikasi', 'icon' => 'bell', 'desc' => 'Email/WA otomatis untuk pendaftar event & member.', 'badge' => null, 'fields' => [
        ['k' => 'notification.auto_send_join', 'l' => 'Auto-kirim link akses ke pendaftar', 't' => 'toggle'],
        ['k' => 'notification.send_welcome', 'l' => 'Email welcome member', 't' => 'toggle'],
        ['k' => 'notification.send_payment_confirmation', 'l' => 'Email konfirmasi pembayaran', 't' => 'toggle'],
        ['k' => 'notification.channel_email', 'l' => 'Kirim via Email', 't' => 'toggle'],
        ['k' => 'notification.channel_wa', 'l' => 'Kirim via WhatsApp', 't' => 'toggle', 'h' => 'Lewat Qiscus (masih stub/pratinjau — pesan dicatat ke log, belum terkirim ke nomor).'],
        ['k' => 'auth.require_email_verification', 'l' => 'Wajib verifikasi email saat daftar', 't' => 'toggle', 'h' => 'Aktifkan HANYA setelah SMTP terisi & teruji (tombol "Kirim Email Tes" berhasil). Member baru harus klik tautan verifikasi di email sebelum bisa mengakses area member. Default: nonaktif.'],
        ['k' => 'notification.join_template', 'l' => 'Template Pesan', 't' => 'textarea', 'col' => 'full', 'h' => 'Variabel: {name} {event} {date} {time} {access} {platform} {link} {location}'],
    ]],
    ['key' => 'mail', 'title' => 'Email / SMTP', 'icon' => 'mail', 'desc' => 'Server pengirim email. Contoh Gmail: smtp.gmail.com:587 (tls), pakai App Password.', 'badge' => $has('mail.host'), 'fields' => 'mail'],
    ['key' => 'integration', 'title' => 'Integrasi', 'icon' => 'cog', 'desc' => '⚠️ Mode pratinjau (stub): kredensial tersimpan, tapi pengiriman WhatsApp Qiscus baru dicatat ke log & sinkronisasi Shopee belum menarik data nyata — sampai integrasi diaktifkan oleh developer.', 'badge' => $has('integration.qiscus_app_id','integration.shopee_partner_id'), 'fields' => [
        ['k' => 'integration.qiscus_app_id', 'l' => 'Qiscus App ID', 't' => 'text', 'h' => 'Qiscus Omnichannel dashboard. (Stub: belum mengirim WA nyata.)'],
        ['k' => 'integration.qiscus_secret', 'l' => 'Qiscus Secret', 't' => 'password'],
        ['k' => 'integration.shopee_partner_id', 'l' => 'Shopee Partner ID', 't' => 'text', 'h' => 'Open Platform Shopee. (Stub: sync katalog belum aktif.)'],
        ['k' => 'integration.shopee_shop_id', 'l' => 'Shopee Shop ID', 't' => 'text'],
    ]],
    ['key' => 'meta', 'title' => 'Meta Pixel', 'icon' => 'sparkles', 'desc' => 'Tracking iklan Meta (Facebook/Instagram).', 'badge' => $has('meta.pixel_id'), 'fields' => [
        ['k' => 'meta.pixel_id', 'l' => 'Meta Pixel ID', 't' => 'text', 'h' => 'Meta Events Manager → Data Sources → Pixel ID.'],
    ]],
    ['key' => 'seo', 'title' => 'SEO', 'icon' => 'search', 'desc' => 'Meta judul, deskripsi, keywords, verifikasi.', 'badge' => null, 'fields' => [
        ['k' => 'seo.title_template', 'l' => 'Template Judul', 't' => 'text', 'h' => 'Gunakan {title} dan {site}. Contoh: {title} — {site}'],
        ['k' => 'seo.default_description', 'l' => 'Deskripsi Default', 't' => 'textarea', 'col' => 'full'],
        ['k' => 'seo.keywords', 'l' => 'Keywords', 't' => 'text', 'col' => 'full'],
        ['k' => 'seo.default_og_image', 'l' => 'OG Image Default (URL)', 't' => 'text', 'col' => 'full'],
        ['k' => 'seo.gsc_verification', 'l' => 'Google Search Console', 't' => 'text', 'h' => 'Isi kode verifikasi meta-tag (atribut content).'],
        ['k' => 'seo.twitter_handle', 'l' => 'Twitter/X Handle', 't' => 'text'],
    ]],
];
@endphp

<div x-data="{ tab: 'brand', gw: @js($v('payment.active_gateway', 'moota')) }">
<form method="POST" action="{{ route('admin.settings.update') }}" class="lg:grid lg:grid-cols-[230px_minmax(0,1fr)] lg:gap-6 pb-24">
    @csrf

    {{-- Sidebar / tab --}}
    <aside class="lg:sticky lg:top-20 lg:self-start mb-5 lg:mb-0">
        <nav class="flex lg:flex-col gap-1 overflow-x-auto scrollbar-hide -mx-1 px-1">
            @foreach($sections as $s)
            <button type="button" @click="tab='{{ $s['key'] }}'"
                :class="tab==='{{ $s['key'] }}' ? 'bg-primary/10 text-primary' : 'text-muted hover:bg-ink/5 hover:text-ink'"
                class="flex shrink-0 items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-semibold transition-colors">
                <x-icon name="{{ $s['icon'] }}" class="w-5 h-5"/>
                <span>{{ $s['title'] }}</span>
                @if(!is_null($s['badge']))
                    <span class="ml-auto h-2 w-2 shrink-0 rounded-full {{ $s['badge'] ? 'bg-secondary' : 'bg-outline' }}" title="{{ $s['badge'] ? 'Terkonfigurasi' : 'Belum diisi' }}"></span>
                @endif
            </button>
            @endforeach
        </nav>
    </aside>

    {{-- Panel --}}
    <div>
        @foreach($sections as $s)
        <section x-show="tab==='{{ $s['key'] }}'" x-cloak class="card p-6">
            <div class="mb-1 flex items-center gap-2">
                <x-icon name="{{ $s['icon'] }}" class="w-5 h-5 text-primary"/>
                <h2 class="text-h3">{{ $s['title'] }}</h2>
            </div>
            <p class="text-small text-muted mb-5">{{ $s['desc'] }}</p>

            @if($s['fields'] === 'payment')
                {{-- Pembayaran (kondisional) --}}
                <div class="mb-5">
                    <label class="label">Gateway Aktif</label>
                    <select name="settings[payment.active_gateway]" x-model="gw" class="field md:max-w-sm">
                        <option value="moota">Moota — transfer + angka unik</option>
                        <option value="xendit">Xendit — invoice / VA / e-wallet</option>
                    </select>
                </div>

                {{-- Moota: rekening manual + kredensial (hanya tampil saat Moota aktif) --}}
                <div x-show="gw==='moota'" x-cloak>
                    <h3 class="text-label text-muted mt-6 mb-3">Rekening Tujuan Transfer</h3>
                    <div class="grid gap-4 md:grid-cols-3">
                        @include('admin.settings._field', ['f' => ['k'=>'payment.bank_name','l'=>'Nama Bank','t'=>'text'], 'v'=>$v])
                        @include('admin.settings._field', ['f' => ['k'=>'payment.account_number','l'=>'No. Rekening','t'=>'text'], 'v'=>$v])
                        @include('admin.settings._field', ['f' => ['k'=>'payment.account_holder','l'=>'Atas Nama','t'=>'text'], 'v'=>$v])
                    </div>

                    <h3 class="text-label text-muted mt-6 mb-3">Kredensial Moota</h3>
                    <div class="grid gap-4 md:grid-cols-2">
                        @include('admin.settings._field', ['f' => ['k'=>'payment.moota_api_key','l'=>'Moota API Key','t'=>'password','h'=>'Dashboard Moota → Pengaturan API (app.moota.co).'], 'v'=>$v])
                        @include('admin.settings._field', ['f' => ['k'=>'payment.moota_secret','l'=>'Moota Secret (Webhook)','t'=>'password','h'=>'Secret Token webhook Moota untuk verifikasi signature. WAJIB diisi di produksi. URL webhook: '.url('/webhooks/moota')], 'v'=>$v])
                    </div>
                </div>
                <div x-show="gw==='xendit'" x-cloak>
                    <h3 class="text-label text-muted mt-6 mb-3">Kredensial Xendit</h3>
                    <div class="grid gap-4 md:grid-cols-2">
                        @include('admin.settings._field', ['f' => ['k'=>'payment.xendit_secret_key','l'=>'Xendit Secret Key','t'=>'password','h'=>'Dashboard Xendit → Settings → API Keys (dashboard.xendit.co).'], 'v'=>$v])
                        @include('admin.settings._field', ['f' => ['k'=>'payment.xendit_webhook_token','l'=>'Xendit Webhook Token','t'=>'password','h'=>'Settings → Webhooks → Verification token. URL webhook: '.url('/webhooks/xendit')], 'v'=>$v])
                    </div>
                </div>

            @elseif($s['fields'] === 'mail')
                <div class="grid gap-4 md:grid-cols-2">
                    @include('admin.settings._field', ['f' => ['k'=>'mail.host','l'=>'SMTP Host','t'=>'text'], 'v'=>$v])
                    @include('admin.settings._field', ['f' => ['k'=>'mail.port','l'=>'SMTP Port','t'=>'text'], 'v'=>$v])
                    @include('admin.settings._field', ['f' => ['k'=>'mail.encryption','l'=>'Enkripsi','t'=>'select','o'=>['tls'=>'TLS','ssl'=>'SSL','none'=>'Tanpa enkripsi']], 'v'=>$v])
                    @include('admin.settings._field', ['f' => ['k'=>'mail.username','l'=>'SMTP Username','t'=>'text'], 'v'=>$v])
                    @include('admin.settings._field', ['f' => ['k'=>'mail.password','l'=>'SMTP Password','t'=>'password'], 'v'=>$v])
                    @include('admin.settings._field', ['f' => ['k'=>'mail.from_address','l'=>'Email Pengirim','t'=>'text'], 'v'=>$v])
                    @include('admin.settings._field', ['f' => ['k'=>'mail.from_name','l'=>'Nama Pengirim','t'=>'text'], 'v'=>$v])
                </div>
                <div class="mt-5 flex items-center gap-3 rounded-xl bg-surface-2 p-4">
                    <x-icon name="mail" class="w-5 h-5 text-primary"/>
                    <p class="flex-1 text-small text-muted">Uji konfigurasi dengan mengirim email tes ke akun admin Anda.</p>
                    <button type="submit" formaction="{{ route('admin.settings.test-email') }}" class="btn-outline !py-2 shrink-0">Kirim Email Tes</button>
                </div>

            @else
                <div class="grid gap-4 md:grid-cols-2">
                    @foreach($s['fields'] as $f)
                        @include('admin.settings._field', ['f' => $f, 'v' => $v])
                    @endforeach
                </div>
            @endif
        </section>
        @endforeach
    </div>

    {{-- Sticky save bar --}}
    <div class="fixed inset-x-0 bottom-0 z-30 border-t border-outline bg-surface/95 backdrop-blur lg:left-64">
        <div class="flex items-center justify-between gap-3 px-5 py-3">
            <p class="text-small text-muted hidden sm:block">Perubahan disimpan untuk semua seksi sekaligus.</p>
            <button class="btn-filled" formaction="{{ route('admin.settings.update') }}">Simpan Pengaturan</button>
        </div>
    </div>
</form>
</div>
@endsection