@extends('layouts.admin')

@section('title', 'Konfigurasi Sistem')
@section('page_title', 'Konfigurasi Sistem')

@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;">Konfigurasi Sistem</h1>
                <p class="ax-page-head__subtitle">Sesuaikan informasi kontak, nama brand, dan pengaturan payment gateway QRIS.</p>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div style="margin-bottom: var(--ax-space-4); padding: 12px 16px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #15803d; border-radius: var(--ax-radius-md); font-size: var(--ax-text-xs); font-weight: 600; display: flex; align-items: center; gap: 8px;">
            <i data-lucide="check-circle" style="width:16px; height:16px;"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('error'))
        <div style="margin-bottom: var(--ax-space-4); padding: 12px 16px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #b91c1c; border-radius: var(--ax-radius-md); font-size: var(--ax-text-xs); font-weight: 600; display: flex; align-items: center; gap: 8px;">
            <i data-lucide="alert-circle" style="width:16px; height:16px;"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <!-- Two-Column Grid for System Configuration -->
    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap:var(--ax-space-6); align-items:start;">
        
        <!-- COLUMN 1: Informasi Brand & Payment Gateway & AI -->
        <section class="ax-card">
        <div class="ax-card__header">
            <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Pengaturan Global</span>
                <h3 class="ax-card__title">Informasi &amp; Payment Gateway</h3>
            </div>
        </div>

        <div class="ax-card__body">
            <form action="{{ route('admin.settings.update') }}" method="POST" style="display:flex; flex-direction:column; gap:var(--ax-space-4);">
                @csrf
                <div>
                    <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Nama Brand / Situs</label>
                    <input type="text" name="site_name" value="{{ \App\Models\SystemSetting::get('site_name', 'Janoer Koening') }}" 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;">Tagline Utama</label>
                    <input type="text" name="site_tagline" value="{{ \App\Models\SystemSetting::get('site_tagline', 'Merangkai Kisah, Mengundang Bahagia.') }}" 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;">Nomor WhatsApp Customer Service (Format 62xxx)</label>
                    <input type="text" name="whatsapp_cs" value="{{ \App\Models\SystemSetting::get('whatsapp_cs', '6281234567890') }}" 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 Merchant QRIS</label>
                    <input type="text" name="qris_merchant_name" value="{{ \App\Models\SystemSetting::get('qris_merchant_name', 'JANOER KOENING DIGITAL') }}" 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>

                <!-- Payment Gateway Selector & Configuration -->
                <div style="margin-top:var(--ax-space-4); padding-top:var(--ax-space-4); border-top:1px solid var(--ax-border);">
                    <div style="margin-bottom:var(--ax-space-4);">
                        <h4 style="font-size:var(--ax-text-sm); font-weight:700; color:var(--ax-text-strong); margin:0;">Gateway Pembayaran Aktif</h4>
                        <p style="font-size:11px; color:var(--ax-text-muted); margin:2px 0 10px 0;">Pilih pintu masuk transaksi yang aktif saat klien melakukan checkout pembayaran.</p>
                        
                        @php
                            $activeGw = \App\Models\SystemSetting::get('active_payment_gateway', 'pghub');
                        @endphp
                        <div style="display:flex; flex-direction:column; gap:8px;">
                            <label style="display:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer; padding:10px 14px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); background: {{ $activeGw === 'pghub' ? 'rgba(74, 93, 70, 0.08)' : 'var(--ax-surface)' }};">
                                <input type="radio" name="active_payment_gateway" value="pghub" {{ $activeGw === 'pghub' ? 'checked' : '' }} class="accent-deepsage">
                                <div>
                                    <span style="display:block; color:var(--ax-text-strong);">Payment Gateway Hub (PG-Hub) — Terpusat</span>
                                    <span style="font-size:10px; color:var(--ax-text-muted); font-weight:400;">Routing terpusat ke gateway.exploore.id (1 single login Midtrans untuk multi-web).</span>
                                </div>
                            </label>

                            <label style="display:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer; padding:10px 14px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); background: {{ $activeGw === 'midtrans' ? 'rgba(74, 93, 70, 0.08)' : 'var(--ax-surface)' }};">
                                <input type="radio" name="active_payment_gateway" value="midtrans" {{ $activeGw === 'midtrans' ? 'checked' : '' }} class="accent-deepsage">
                                <div>
                                    <span style="display:block; color:var(--ax-text-strong);">Midtrans Langsung (Direct Snap API)</span>
                                    <span style="font-size:10px; color:var(--ax-text-muted); font-weight:400;">Koneksi langsung ke server Midtrans menggunakan Server Key &amp; Client Key akun ini.</span>
                                </div>
                            </label>

                            <label style="display:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer; padding:10px 14px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); background: {{ $activeGw === 'manual' ? 'rgba(74, 93, 70, 0.08)' : 'var(--ax-surface)' }};">
                                <input type="radio" name="active_payment_gateway" value="manual" {{ $activeGw === 'manual' ? 'checked' : '' }} class="accent-deepsage">
                                <div>
                                    <span style="display:block; color:var(--ax-text-strong);">QRIS Standalone / Simulator Demo</span>
                                    <span style="font-size:10px; color:var(--ax-text-muted); font-weight:400;">Hanya menampilkan QRIS statis dan tombol simulasi tanpa integrasi Snap popup.</span>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- 1. Kredensial Payment Gateway Hub (PG-Hub) -->
                    <div style="background:var(--ax-surface-subtle); padding:16px; border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border); margin-bottom:var(--ax-space-4);">
                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                            <div>
                                <h4 style="font-size:var(--ax-text-xs); font-weight:700; color:var(--ax-text-strong); text-transform:uppercase; letter-spacing:0.05em; margin:0;">1. Kredensial Payment Gateway Hub (PG-Hub)</h4>
                                <span style="font-size:11px; color:var(--ax-text-muted);">Terhubung ke server backend terpusat https://gateway.exploore.id</span>
                            </div>
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-emerald-100 text-emerald-800">Single Login</span>
                        </div>

                        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-3); margin-bottom:var(--ax-space-3);">
                            <div>
                                <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">PG-Hub Base URL</label>
                                <input type="text" name="pghub_base_url" value="{{ \App\Models\SystemSetting::get('pghub_base_url', 'https://gateway.exploore.id') }}" placeholder="https://gateway.exploore.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);">
                            </div>
                            <div>
                                <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Environment Midtrans PG-Hub</label>
                                <select name="pghub_environment" 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="sandbox" {{ \App\Models\SystemSetting::get('pghub_environment', 'sandbox') == 'sandbox' ? 'selected' : '' }}>Sandbox</option>
                                    <option value="production" {{ \App\Models\SystemSetting::get('pghub_environment', 'sandbox') == 'production' ? 'selected' : '' }}>Production</option>
                                </select>
                            </div>
                        </div>

                        <div style="margin-bottom:var(--ax-space-3);">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">X-Client-Id</label>
                            <input type="text" name="pghub_client_id" value="{{ \App\Models\SystemSetting::get('pghub_client_id', '') }}" placeholder="Masukkan Client ID dari PG-Hub" 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 style="margin-bottom:var(--ax-space-3);">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">X-Client-Secret (Kunci Enkripsi HMAC-SHA256)</label>
                            <input type="password" name="pghub_client_secret" value="{{ \App\Models\SystemSetting::get('pghub_client_secret', '') }}" placeholder="Masukkan Client Secret dari PG-Hub" 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 style="margin-bottom:var(--ax-space-3);">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Midtrans Client Key (Untuk Popup Snap frontend di website ini)</label>
                            <input type="text" name="pghub_snap_client_key" value="{{ \App\Models\SystemSetting::get('pghub_snap_client_key', '') }}" placeholder="SB-Mid-client-xxxxxxxx" 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 style="padding:10px 14px; background:rgba(255,255,255,0.7); border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:11px; color:var(--ax-text-muted);">
                            <strong>URL Webhook Callback PG-Hub:</strong><br>
                            <code style="font-family:var(--ax-font-mono); color:var(--ax-accent); font-weight:bold;">{{ url('/api/pghub/callback') }}</code><br>
                            <span style="font-size:10px;">*PG-Hub akan mengirimkan notifikasi ke URL di atas disertai header <code>X-PGHub-Signature</code> saat klien berhasil bayar.</span>
                        </div>
                    </div>

                    <!-- 2. Kredensial Midtrans Langsung (Direct Snap) -->
                    <div style="background:var(--ax-surface-subtle); padding:16px; border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                            <div>
                                <h4 style="font-size:var(--ax-text-xs); font-weight:700; color:var(--ax-text-strong); text-transform:uppercase; letter-spacing:0.05em; margin:0;">2. Kredensial Midtrans Langsung (Direct Snap)</h4>
                                <span style="font-size:11px; color:var(--ax-text-muted);">Dipergunakan jika Anda memilih opsi 'Midtrans Langsung'</span>
                            </div>
                            <label style="display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer;">
                                <input type="checkbox" name="midtrans_enabled" value="1" {{ \App\Models\SystemSetting::get('midtrans_enabled') == '1' ? 'checked' : '' }} class="accent-deepsage">
                                <span>Aktifkan Direct</span>
                            </label>
                        </div>

                        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-3); margin-bottom:var(--ax-space-3);">
                            <div>
                                <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Environment</label>
                                <select name="midtrans_environment" 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="sandbox" {{ \App\Models\SystemSetting::get('midtrans_environment', 'sandbox') == 'sandbox' ? 'selected' : '' }}>Sandbox (Testing)</option>
                                    <option value="production" {{ \App\Models\SystemSetting::get('midtrans_environment') == 'production' ? 'selected' : '' }}>Production (Live)</option>
                                </select>
                            </div>
                            <div>
                                <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Merchant ID</label>
                                <input type="text" name="midtrans_merchant_id" value="{{ \App\Models\SystemSetting::get('midtrans_merchant_id', '') }}" placeholder="Gxxxxxxxxx" 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>

                        <div style="margin-bottom:var(--ax-space-3);">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Midtrans Client Key</label>
                            <input type="text" name="midtrans_client_key" value="{{ \App\Models\SystemSetting::get('midtrans_client_key', '') }}" placeholder="SB-Mid-client-xxxxxxxx" 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 style="margin-bottom:var(--ax-space-3);">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Midtrans Server Key</label>
                            <input type="password" name="midtrans_server_key" value="{{ \App\Models\SystemSetting::get('midtrans_server_key', '') }}" placeholder="SB-Mid-server-xxxxxxxx" 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 style="padding:10px 14px; background:rgba(255,255,255,0.7); border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:11px; color:var(--ax-text-muted);">
                            <strong>URL Webhook Notifikasi:</strong><br>
                            <code style="font-family:var(--ax-font-mono); color:var(--ax-accent);">{{ url('/api/midtrans/notification') }}</code><br>
                            <span style="font-size:10px;">*Salin URL di atas ke menu <em>Settings &gt; Configuration &gt; Payment Notification URL</em> di Dashboard Midtrans Anda.</span>
                        </div>
                    </div>
                </div>

                <!-- 2. Asisten Virtual AI Gemini (Grounding Database) -->
                <div style="margin-top:var(--ax-space-4); padding-top:var(--ax-space-4); border-top:1px solid var(--ax-border);">
                    <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;">
                        <div>
                            <div style="display:flex; align-items:center; gap:8px;">
                                <span style="display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:#4a5d46; color:#fff;">
                                    <i data-lucide="bot" style="width:14px; height:14px;"></i>
                                </span>
                                <h4 style="font-size:var(--ax-text-sm); font-weight:700; color:var(--ax-text-strong); margin:0;">Asisten Virtual AI (Google Gemini)</h4>
                            </div>
                            <p style="font-size:11px; color:var(--ax-text-muted); margin:4px 0 0 0;">Chatbot bantuan otomatis 24/7 yang membaca data database (paket, template, kuota foto, &amp; data undangan pengantin).</p>
                        </div>
                        <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                            <input type="hidden" name="ai_chat_enabled" value="0">
                            <input type="checkbox" name="ai_chat_enabled" value="1" {{ \App\Models\SystemSetting::get('ai_chat_enabled', '1') == '1' ? 'checked' : '' }} class="accent-deepsage" style="width:16px; height:16px;">
                            <span style="font-size:12px; font-weight:600; color:var(--ax-text-strong);">Aktifkan Chatbot</span>
                        </label>
                    </div>

                    <div style="background:var(--ax-surface-subtle); padding:16px; border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border); display:flex; flex-direction:column; gap:var(--ax-space-3);">
                        <div style="display:grid; grid-template-columns: 2fr 1fr; gap:var(--ax-space-3);">
                            <div>
                                <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Gemini API Key</label>
                                <input type="password" id="gemini_api_key_input" name="gemini_api_key" value="{{ \App\Models\SystemSetting::get('gemini_api_key', '') }}" placeholder="AIzaSy..." 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);">
                                <span style="font-size:10px; color:var(--ax-text-muted);">Dapatkan API Key gratis di <a href="https://aistudio.google.com" target="_blank" style="color:var(--ax-accent); text-decoration:underline;">Google AI Studio</a>. Jika kosong, sistem otomatis memakai fallback cerdas FAQ &amp; WhatsApp CS.</span>
                            </div>
                            <div>
                                <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Model Gemini</label>
                                @php
                                    $currentModel = \App\Models\SystemSetting::get('gemini_model', 'gemini-1.5-flash');
                                @endphp
                                <select id="gemini_model_select" name="gemini_model" 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="gemini-1.5-flash" {{ $currentModel == 'gemini-1.5-flash' ? 'selected' : '' }}>Gemini 1.5 Flash (Cepat &amp; Hemat)</option>
                                    <option value="gemini-2.0-flash" {{ $currentModel == 'gemini-2.0-flash' ? 'selected' : '' }}>Gemini 2.0 Flash</option>
                                    <option value="gemini-1.5-pro" {{ $currentModel == 'gemini-1.5-pro' ? 'selected' : '' }}>Gemini 1.5 Pro</option>
                                </select>
                            </div>
                        </div>

                        <!-- Tombol Tes Koneksi API Gemini -->
                        <div style="display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:white; border-radius:var(--ax-radius-md); border:1px solid var(--ax-border);">
                            <div>
                                <span style="font-size:11px; font-weight:600; color:var(--ax-text-strong);">Uji Coba Kunci API:</span>
                                <span id="testApiStatus" style="font-size:11px; margin-left:6px; color:var(--ax-text-muted);">Klik tombol untuk memverifikasi respon Google</span>
                            </div>
                            <button type="button" id="btnTestGemini" onclick="testGeminiConnection()" class="ax-btn ax-btn--secondary ax-btn--xs" style="display:inline-flex; align-items:center; gap:4px;">
                                <i data-lucide="zap" style="width:12px; height:12px;"></i>
                                <span>Tes Koneksi API</span>
                            </button>
                        </div>

                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Nama Asisten Bot</label>
                            <input type="text" name="ai_bot_name" value="{{ \App\Models\SystemSetting::get('ai_bot_name', 'Janoer Assistant') }}" placeholder="Janoer Assistant" 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;">Pesan Pembuka (Greeting Default)</label>
                            <input type="text" name="ai_welcome_message" value="{{ \App\Models\SystemSetting::get('ai_welcome_message', '') }}" placeholder="Kosongkan untuk menggunakan ucapan otomatis personal nama klien" 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;">Instruksi Khusus / Tambahan (System Prompt)</label>
                            <textarea name="ai_system_instructions" rows="3" placeholder="Instruksi tambahan bagi bot saat menjawab pertanyaan klien (opsional)..." 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); resize:vertical;">{{ \App\Models\SystemSetting::get('ai_system_instructions', '') }}</textarea>
                        </div>
                    </div>
                </div>

                <div style="padding-top:var(--ax-space-2); border-top:1px solid var(--ax-border); display:flex; justify-content:flex-end;">
                    <button type="submit" class="ax-btn ax-btn--primary">
                        <i data-lucide="check" style="width:14px;height:14px;"></i>
                        <span class="ax-btn__label">Simpan Pengaturan</span>
                    </button>
                </div>
            </form>
        </div>
    </section>

    <!-- COLUMN 2: Konfigurasi Server Email (SMTP), Verifikasi Akun & Template Notifikasi -->
    <div style="display:flex; flex-direction:column; gap:var(--ax-space-6);">
        
        <!-- Card 2A: Pengaturan Server SMTP & Verifikasi Email -->
        <section class="ax-card">
            <div class="ax-card__header">
                <div class="ax-card__titles">
                    <span class="ax-card__eyebrow">Pengiriman Email</span>
                    <h3 class="ax-card__title">Server SMTP &amp; Verifikasi Akun</h3>
                </div>
            </div>

            <div class="ax-card__body">
                <form action="{{ route('admin.settings.update') }}" method="POST" style="display:flex; flex-direction:column; gap:var(--ax-space-4);">
                    @csrf
                    
                    <!-- Toggle Wajibkan Verifikasi Email -->
                    <div style="background:rgba(83, 107, 91, 0.08); padding:14px; border-radius:var(--ax-radius-lg); border:1px solid rgba(83, 107, 91, 0.25);">
                        <div style="display:flex; align-items:flex-start; gap:12px;">
                            <input type="hidden" name="require_email_verification" value="0">
                            <input type="checkbox" name="require_email_verification" value="1" id="chk_req_verif"
                                {{ \App\Models\SystemSetting::get('require_email_verification', '0') == '1' ? 'checked' : '' }}
                                class="accent-deepsage" style="width:18px; height:18px; margin-top:2px; cursor:pointer;">
                            <label for="chk_req_verif" style="cursor:pointer;">
                                <strong style="display:block; font-size:var(--ax-text-xs); color:var(--ax-text-strong);">Wajibkan Verifikasi Email saat Registrasi Klien</strong>
                                <span style="display:block; font-size:11px; color:var(--ax-text-muted); margin-top:2px;">
                                    Jika diaktifkan, klien baru akan menerima email konfirmasi bertanda tangan kriptografis dan fitur checkout pembayaran akan dikunci sebelum email diverifikasi.
                                </span>
                            </label>
                        </div>
                    </div>

                    <!-- Mail Driver -->
                    <div>
                        <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Mail Driver / Mailer</label>
                        @php
                            $currentMailer = \App\Models\SystemSetting::get('mail_mailer', env('MAIL_MAILER', 'log'));
                        @endphp
                        <select name="mail_mailer" 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="smtp" {{ $currentMailer === 'smtp' ? 'selected' : '' }}>SMTP (Koneksi Server Email Nyata / Direkomendasikan)</option>
                            <option value="log" {{ $currentMailer === 'log' ? 'selected' : '' }}>Log (Simulasi Lokal ke storage/logs/laravel.log)</option>
                            <option value="sendmail" {{ $currentMailer === 'sendmail' ? 'selected' : '' }}>Sendmail (Server Bawaan)</option>
                        </select>
                    </div>

                    <div style="display:grid; grid-template-columns: 2fr 1fr; gap:var(--ax-space-3);">
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">SMTP Host</label>
                            <input type="text" name="mail_host" value="{{ \App\Models\SystemSetting::get('mail_host', env('MAIL_HOST', 'smtp.gmail.com')) }}" placeholder="contoh: smtp.gmail.com" 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;">SMTP Port</label>
                            <input type="number" name="mail_port" value="{{ \App\Models\SystemSetting::get('mail_port', env('MAIL_PORT', 587)) }}" placeholder="587 / 465" 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>

                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-3);">
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Enkripsi Email</label>
                            @php
                                $currentEnc = \App\Models\SystemSetting::get('mail_encryption', env('MAIL_SCHEME', 'tls'));
                            @endphp
                            <select name="mail_encryption" 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="tls" {{ $currentEnc === 'tls' ? 'selected' : '' }}>TLS (Port 587)</option>
                                <option value="ssl" {{ $currentEnc === 'ssl' ? 'selected' : '' }}>SSL (Port 465)</option>
                                <option value="none" {{ $currentEnc === 'none' || empty($currentEnc) ? 'selected' : '' }}>Tanpa Enkripsi (None)</option>
                            </select>
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">SMTP Username</label>
                            <input type="text" name="mail_username" value="{{ \App\Models\SystemSetting::get('mail_username', env('MAIL_USERNAME', '')) }}" placeholder="email@domain.com" 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>

                    <div>
                        <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">SMTP Password / App Password</label>
                        <input type="password" name="mail_password" value="{{ \App\Models\SystemSetting::get('mail_password', env('MAIL_PASSWORD', '')) }}" placeholder="••••••••••••" 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);">
                        <span style="font-size:10px; color:var(--ax-text-muted);">Untuk Gmail, gunakan 'App Password' 16 digit dari akun Google Anda.</span>
                    </div>

                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-3);">
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Email Pengirim (From Address)</label>
                            <input type="email" name="mail_from_address" value="{{ \App\Models\SystemSetting::get('mail_from_address', env('MAIL_FROM_ADDRESS', 'halo@janoer.com')) }}" placeholder="halo@janoer.com" 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 Pengirim (From Name)</label>
                            <input type="text" name="mail_from_name" value="{{ \App\Models\SystemSetting::get('mail_from_name', env('MAIL_FROM_NAME', 'Janoer Koening')) }}" placeholder="Janoer Koening" 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>

                    <!-- Template Notifikasi Email -->
                    <div style="margin-top:var(--ax-space-3); padding-top:var(--ax-space-3); border-top:1px solid var(--ax-border);">
                        <h4 style="font-size:var(--ax-text-xs); font-weight:700; color:var(--ax-text-strong); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 10px 0;">Template Pesan Email</h4>
                        
                        <!-- 1. Reset Password Template -->
                        <div style="margin-bottom:12px;">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Subjek Email Reset Password</label>
                            <input type="text" name="email_tpl_reset_password_subject" value="{{ \App\Models\SystemSetting::get('email_tpl_reset_password_subject', 'Permintaan Reset Kata Sandi Akun - Janoer Koening') }}" 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="margin-bottom:14px;">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Isi Email Reset Password (HTML/Teks)</label>
                            <textarea name="email_tpl_reset_password_body" rows="3" 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); resize:vertical;">{{ \App\Models\SystemSetting::get('email_tpl_reset_password_body', "<p>Halo <strong>{nama_klien}</strong>,</p><p>Kami menerima permintaan untuk mereset kata sandi akun Janoer Koening Anda ({email_klien}).</p><p>Silakan klik tombol di bawah ini untuk membuat kata sandi baru. Tautan ini hanya berlaku selama <strong>60 menit</strong>:</p>") }}</textarea>
                            <span style="font-size:10px; color:var(--ax-text-muted);">Placeholder: <code>{nama_klien}</code>, <code>{email_klien}</code>, <code>{link_reset}</code>, <code>{tahun}</code></span>
                        </div>

                        <!-- 2. Verification Template -->
                        <div style="margin-bottom:12px;">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Subjek Email Verifikasi Akun</label>
                            <input type="text" name="email_tpl_verify_subject" value="{{ \App\Models\SystemSetting::get('email_tpl_verify_subject', 'Verifikasi Alamat Email Anda - Janoer Koening') }}" 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;">Isi Email Verifikasi Akun (HTML/Teks)</label>
                            <textarea name="email_tpl_verify_body" rows="3" 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); resize:vertical;">{{ \App\Models\SystemSetting::get('email_tpl_verify_body', "<p>Halo <strong>{nama_klien}</strong>,</p><p>Terima kasih telah mendaftar di <strong>Janoer Koening</strong>! Untuk memastikan keamanan akun dan mengaktifkan fitur publikasi undangan digital Anda, silakan verifikasi alamat email Anda ({email_klien}).</p><p>Cukup klik tombol di bawah ini untuk mengonfirmasi email Anda:</p>") }}</textarea>
                            <span style="font-size:10px; color:var(--ax-text-muted);">Placeholder: <code>{nama_klien}</code>, <code>{email_klien}</code>, <code>{link_verifikasi}</code>, <code>{tahun}</code></span>
                        </div>
                    </div>

                    <div style="padding-top:var(--ax-space-2); border-top:1px solid var(--ax-border); display:flex; justify-content:flex-end;">
                        <button type="submit" class="ax-btn ax-btn--primary">
                            <i data-lucide="check" style="width:14px;height:14px;"></i>
                            <span class="ax-btn__label">Simpan Pengaturan Email</span>
                        </button>
                    </div>
                </form>
            </div>
        </section>

        <!-- Card 2B: Tes Koneksi & Kirim Email Percobaan -->
        <section class="ax-card">
            <div class="ax-card__header">
                <div class="ax-card__titles">
                    <span class="ax-card__eyebrow">Diagnostik</span>
                    <h3 class="ax-card__title">Tes Koneksi Pengiriman Email</h3>
                </div>
            </div>
            <div class="ax-card__body">
                <p style="font-size:var(--ax-text-xs); color:var(--ax-text-muted); margin-top:0; margin-bottom:12px;">
                    Kirimkan email uji coba ke alamat Anda untuk memverifikasi apakah akun SMTP dan konfigurasi port sudah berjalan dengan baik.
                </p>
                <form action="{{ route('admin.settings.test-email') }}" method="POST" style="display:flex; gap:8px;">
                    @csrf
                    <input type="email" name="test_email" value="{{ auth()->user()->email ?? '' }}" required placeholder="Masukkan email penerima tes..." style="flex:1; 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);">
                    <button type="submit" class="ax-btn ax-btn--secondary" style="white-space:nowrap;">
                        <i data-lucide="send" style="width:14px;height:14px;"></i>
                        <span class="ax-btn__label">Tes Kirim Email</span>
                    </button>
                </form>
            </div>
        </section>

        <!-- Card: Paket VIP (Call Us) & Invoice Manual -->
        @php $sv = fn($k, $d = '') => \App\Models\SystemSetting::get($k, $d); $inp = '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);'; @endphp
        <section class="ax-card">
            <div class="ax-card__header">
                <div class="ax-card__titles">
                    <span class="ax-card__eyebrow">Paket VIP &amp; Invoice</span>
                    <h3 class="ax-card__title">Tombol Call Us &amp; Rekening Invoice Manual</h3>
                </div>
            </div>
            <div class="ax-card__body">
                <form action="{{ route('admin.settings.update') }}" method="POST" style="display:flex; flex-direction:column; gap:var(--ax-space-4);">
                    @csrf
                    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--ax-space-4);">
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Label Tombol Call Us</label>
                            <input type="text" name="vip_call_label" value="{{ $sv('vip_call_label', 'Hubungi Tim Kami') }}" style="{{ $inp }}">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">No. WhatsApp Tim VIP (format 62…)</label>
                            <input type="text" name="vip_whatsapp_number" value="{{ $sv('vip_whatsapp_number', '6281234567890') }}" style="{{ $inp }}">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Telepon (opsional, tombol telp)</label>
                            <input type="text" name="vip_phone_number" value="{{ $sv('vip_phone_number') }}" style="{{ $inp }}">
                        </div>
                    </div>
                    <div>
                        <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Pesan Awal WhatsApp</label>
                        <input type="text" name="vip_whatsapp_message" value="{{ $sv('vip_whatsapp_message', 'Halo Janoer Koening, saya tertarik dengan Paket VIP (full custom).') }}" style="{{ $inp }}">
                    </div>
                    <div>
                        <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Rekening Transfer Manual (satu per baris: Bank | No. Rekening | Atas Nama)</label>
                        <textarea name="invoice_bank_accounts" rows="3" style="{{ $inp }} font-family:var(--ax-font-mono);">{{ $sv('invoice_bank_accounts', "BCA | 1234567890 | Janoer Koening") }}</textarea>
                    </div>
                    <div>
                        <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Catatan Kaki Invoice</label>
                        <textarea name="invoice_footer_note" rows="2" style="{{ $inp }}">{{ $sv('invoice_footer_note', 'Terima kasih telah mempercayakan undangan pernikahan Anda kepada Janoer Koening.') }}</textarea>
                    </div>
                    <div>
                        <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm"><span class="ax-btn__label">Simpan Pengaturan VIP</span></button>
                    </div>
                </form>
            </div>
        </section>

    </div>
</div>
@endsection

@push('scripts')
<script>
function testGeminiConnection() {
    const btn = document.getElementById('btnTestGemini');
    const status = document.getElementById('testApiStatus');
    const key = document.getElementById('gemini_api_key_input').value.trim();
    const model = document.getElementById('gemini_model_select').value;

    btn.disabled = true;
    btn.innerHTML = '<span>Menguji...</span>';
    status.innerHTML = '<span style="color:var(--ax-text-muted);">Menghubungkan ke Google Gemini...</span>';

    fetch('{{ route('admin.settings.test-gemini') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ api_key: key, model: model })
    })
    .then(res => res.json())
    .then(data => {
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="zap" style="width:12px; height:12px;"></i><span>Tes Koneksi API</span>';
        if (typeof lucide !== 'undefined') lucide.createIcons();

        if (data.success) {
            status.innerHTML = `<span style="color:#16a34a; font-weight:700;">✓ Berhasil! (${data.model})</span>: ${data.message}`;
        } else {
            status.innerHTML = `<span style="color:#dc2626; font-weight:700;">✗ Gagal!</span>: ${data.message}`;
        }
    })
    .catch(err => {
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="zap" style="width:12px; height:12px;"></i><span>Tes Koneksi API</span>';
        if (typeof lucide !== 'undefined') lucide.createIcons();
        status.innerHTML = `<span style="color:#dc2626; font-weight:700;">✗ Gagal Terhubung:</span> ${err.message}`;
    });
}
</script>
@endpush