@extends('layouts.app')

@section('title', 'Pengaturan Sistem')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Pengaturan Sistem</h1>
        <p class="page-subtitle">Konfigurasi aplikasi, Fonnte WA Gateway, dan Groq AI</p>
    </div>
</div>

{{-- Tab Nav --}}
<div style="display:flex;gap:0;border-bottom:2px solid var(--gray-200);margin-bottom:1.5rem;overflow-x:auto;" id="settingTabs">
    @foreach([
        ['id'=>'general',      'label'=>'Umum',         'icon'=>'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z'],
        ['id'=>'fonnte',       'label'=>'Fonnte WA',    'icon'=>'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'],
        ['id'=>'groq',         'label'=>'Groq AI',      'icon'=>'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'],
        ['id'=>'notification', 'label'=>'Notifikasi',   'icon'=>'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'],
    ] as $tab)
    <button onclick="switchTab('{{ $tab['id'] }}')" id="tab_{{ $tab['id'] }}"
            style="display:inline-flex;align-items:center;gap:.375rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;border:none;background:none;cursor:pointer;color:var(--gray-500);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;font-family:inherit;white-space:nowrap;">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="{{ $tab['icon'] }}"/></svg>
        {{ $tab['label'] }}
    </button>
    @endforeach
</div>

{{-- ============================================================
     TAB: General
============================================================ --}}
<div id="panel_general" class="tab-panel">
    <div style="max-width:560px;">
        <div class="card">
            <div class="card-header"><span class="card-title">Pengaturan Umum Aplikasi</span></div>
            <div class="card-body">
                <form method="POST" action="{{ route('settings.general') }}">
                    @csrf @method('PUT')
                    <div class="form-group">
                        <label class="form-label">Nama Aplikasi <span class="required">*</span></label>
                        <input type="text" name="app_name" class="form-control"
                               value="{{ old('app_name', $general['app_name'] ?? 'Naramedic CRM') }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Timezone</label>
                        <select name="app_timezone" class="form-control">
                            @foreach(['Asia/Jakarta'=>'WIB (Asia/Jakarta)','Asia/Makassar'=>'WITA (Asia/Makassar)','Asia/Jayapura'=>'WIT (Asia/Jayapura)'] as $tz => $label)
                            <option value="{{ $tz }}" {{ ($general['app_timezone'] ?? 'Asia/Jakarta') === $tz ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Mata Uang</label>
                        <input type="text" name="app_currency" class="form-control" maxlength="3"
                               value="{{ old('app_currency', $general['app_currency'] ?? 'IDR') }}"
                               placeholder="IDR">
                    </div>
                    <button type="submit" class="btn btn-primary">Simpan Pengaturan Umum</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     TAB: Fonnte WA Gateway
============================================================ --}}
<div id="panel_fonnte" class="tab-panel" style="display:none;">
    <div style="display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:start;">

        <div style="display:flex;flex-direction:column;gap:1rem;">
            {{-- API Config --}}
            <div class="card">
                <div class="card-header">
                    <span class="card-title">Konfigurasi Fonnte API</span>
                    <a href="https://fonnte.com" target="_blank" class="btn btn-ghost btn-sm">fonnte.com ↗</a>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('settings.fonnte') }}">
                        @csrf @method('PUT')
                        <div class="form-group">
                            <label class="form-label">API Token <span class="required">*</span></label>
                            <div style="position:relative;">
                                <input type="password" name="fonnte_token" id="fonnteToken" class="form-control"
                                       value="{{ old('fonnte_token', $fonnte['fonnte_token'] ?? '') }}"
                                       placeholder="Token dari dashboard fonnte.com"
                                       style="padding-right:2.5rem;">
                                <button type="button" onclick="togglePwd('fonnteToken')"
                                        style="position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);">
                                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                </button>
                            </div>
                            <p class="field-hint">Salin dari menu API di dashboard Fonnte</p>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Device / Nomor WA</label>
                            <input type="text" name="fonnte_device" class="form-control"
                                   value="{{ old('fonnte_device', $fonnte['fonnte_device'] ?? '') }}"
                                   placeholder="6281234567890">
                            <p class="field-hint">Nomor WA yang terdaftar & aktif di Fonnte (format 628xxx)</p>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Webhook Secret</label>
                            <input type="text" name="fonnte_webhook_secret" class="form-control"
                                   value="{{ old('fonnte_webhook_secret', $fonnte['fonnte_webhook_secret'] ?? '') }}"
                                   placeholder="Secret key opsional untuk verifikasi">
                        </div>
                        <div style="background:var(--info-light);border:1px solid var(--info);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:1.25rem;">
                            <div style="font-size:.8125rem;font-weight:600;color:#1e40af;margin-bottom:.375rem;">📋 Setup Webhook di Fonnte</div>
                            <div style="font-size:.8125rem;color:#1e40af;">
                                Masuk ke dashboard Fonnte → Settings → Webhook URL, isi dengan:<br>
                                <code style="background:rgba(0,0,0,.08);padding:2px 6px;border-radius:3px;font-size:.8125rem;word-break:break-all;">{{ url('webhook/fonnte') }}</code>
                            </div>
                        </div>
                        <div style="margin-bottom:1.25rem;">
                            <div class="grid-2">
                                <div class="form-group">
                                    <label class="form-label">Jam Mulai Operasional</label>
                                    <input type="time" name="wa_working_hours_start" class="form-control"
                                           value="{{ old('wa_working_hours_start', $fonnte['wa_working_hours_start'] ?? '08:00') }}">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Jam Selesai Operasional</label>
                                    <input type="time" name="wa_working_hours_end" class="form-control"
                                           value="{{ old('wa_working_hours_end', $fonnte['wa_working_hours_end'] ?? '17:00') }}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Pesan Di Luar Jam Operasional</label>
                            <textarea name="wa_out_of_hours_message" class="form-control" rows="3">{{ old('wa_out_of_hours_message', $fonnte['wa_out_of_hours_message'] ?? '') }}</textarea>
                            <p class="field-hint">Dikirim otomatis saat pesan masuk di luar jam operasional</p>
                        </div>
                        <div class="form-group">
                            <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:var(--gray-700);">
                                <input type="checkbox" name="wa_bot_enabled" value="1"
                                       {{ ($fonnte['wa_bot_enabled'] ?? '1') == '1' ? 'checked' : '' }}
                                       style="accent-color:var(--primary);">
                                Aktifkan AI Chatbot untuk semua pesan masuk
                            </label>
                        </div>
                        <div style="display:flex;gap:.75rem;">
                            <button type="submit" class="btn btn-primary">Simpan Konfigurasi Fonnte</button>
                            <button type="button" class="btn btn-secondary" onclick="showTestWa()">Test Kirim WA</button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Test WA Panel --}}
            <div class="card" id="testWaPanel" style="display:none;">
                <div class="card-header"><span class="card-title">Test Kirim Pesan WA</span></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Nomor Tujuan</label>
                        <input type="text" id="testWaPhone" class="form-control" placeholder="628xxx">
                    </div>
                    <div id="testWaResult" style="display:none;margin-bottom:.75rem;"></div>
                    <button class="btn btn-success" onclick="sendTestWa()" id="testWaBtn">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                        Kirim Test
                    </button>
                </div>
            </div>
        </div>

        {{-- Right: status panel --}}
        <div style="display:flex;flex-direction:column;gap:1rem;">
            <div class="card">
                <div class="card-header"><span class="card-title">Status Koneksi</span></div>
                <div class="card-body" style="display:flex;flex-direction:column;gap:.875rem;">
                    <div>
                        <div class="text-small text-muted">Token API</div>
                        <div style="margin-top:.25rem;">
                            @if(!empty($fonnte['fonnte_token']))
                            <span style="color:var(--success);font-size:.875rem;">✓ Terkonfigurasi</span>
                            @else
                            <span style="color:var(--danger);font-size:.875rem;">⚠ Belum diset</span>
                            @endif
                        </div>
                    </div>
                    <div>
                        <div class="text-small text-muted">Webhook URL</div>
                        <code style="font-size:.75rem;background:var(--gray-100);padding:4px 8px;border-radius:4px;display:block;word-break:break-all;margin-top:.25rem;color:var(--gray-700);">{{ url('webhook/fonnte') }}</code>
                    </div>
                    <div>
                        <div class="text-small text-muted">Jam Operasional Sekarang</div>
                        @php
                        $s = $fonnte['wa_working_hours_start'] ?? '08:00';
                        $e = $fonnte['wa_working_hours_end']   ?? '17:00';
                        $n = now()->format('H:i');
                        $inHours = $n >= $s && $n <= $e;
                        @endphp
                        <span class="badge badge-{{ $inHours ? 'green' : 'gray' }}" style="margin-top:.25rem;">
                            {{ $inHours ? '🟢 Dalam Jam Operasional' : '⚫ Di Luar Jam' }}
                        </span>
                        <div style="font-size:.75rem;color:var(--gray-500);margin-top:.25rem;">Sekarang: {{ now()->format('H:i') }} WIB</div>
                    </div>
                    <div>
                        <div class="text-small text-muted">Bot Status</div>
                        <span class="badge badge-{{ ($fonnte['wa_bot_enabled'] ?? '1') == '1' ? 'green' : 'gray' }}" style="margin-top:.25rem;">
                            Bot {{ ($fonnte['wa_bot_enabled'] ?? '1') == '1' ? 'Aktif' : 'Nonaktif' }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header"><span class="card-title">Panduan Fonnte</span></div>
                <div class="card-body">
                    <ol style="font-size:.8125rem;color:var(--gray-600);line-height:1.8;padding-left:1.25rem;display:flex;flex-direction:column;gap:.25rem;">
                        <li>Daftar di <a href="https://fonnte.com" target="_blank" style="color:var(--primary);">fonnte.com</a></li>
                        <li>Sambungkan nomor WA via QR code</li>
                        <li>Salin API token dari Settings</li>
                        <li>Set webhook URL ke form ini</li>
                        <li>Test kirim pesan untuk verifikasi</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     TAB: Groq AI
============================================================ --}}
<div id="panel_groq" class="tab-panel" style="display:none;">
    <div style="display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:start;">

        <div style="display:flex;flex-direction:column;gap:1rem;">
            <div class="card">
                <div class="card-header">
                    <span class="card-title">Konfigurasi Groq AI</span>
                    <a href="https://console.groq.com" target="_blank" class="btn btn-ghost btn-sm">console.groq.com ↗</a>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('settings.groq') }}">
                        @csrf @method('PUT')
                        <div class="form-group">
                            <label class="form-label">Groq API Key <span class="required">*</span></label>
                            <div style="position:relative;">
                                <input type="password" name="groq_api_key" id="groqKey" class="form-control"
                                       value="{{ old('groq_api_key', $groq['groq_api_key'] ?? '') }}"
                                       placeholder="gsk_xxxxxxxxxxxxxx"
                                       style="padding-right:2.5rem;">
                                <button type="button" onclick="togglePwd('groqKey')"
                                        style="position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);">
                                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                </button>
                            </div>
                            <p class="field-hint">Dapatkan API key gratis di console.groq.com → API Keys</p>
                        </div>
                        <div class="grid-2">
                            <div class="form-group">
                                <label class="form-label">Model AI</label>
                                <select name="groq_model" class="form-control">
                                    @foreach([
                                        'llama3-70b-8192'     => 'LLaMA 3 70B (Rekomendasi)',
                                        'llama3-8b-8192'      => 'LLaMA 3 8B (Lebih Cepat)',
                                        'mixtral-8x7b-32768'  => 'Mixtral 8x7B',
                                        'gemma-7b-it'         => 'Gemma 7B',
                                    ] as $val => $label)
                                    <option value="{{ $val }}" {{ ($groq['groq_model'] ?? 'llama3-70b-8192') === $val ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Temperature (0–2)</label>
                                <input type="number" name="groq_temperature" class="form-control"
                                       value="{{ old('groq_temperature', $groq['groq_temperature'] ?? '0.7') }}"
                                       min="0" max="2" step="0.1">
                                <p class="field-hint">0 = pasti, 1+ = kreatif</p>
                            </div>
                        </div>
                        <div class="grid-2">
                            <div class="form-group">
                                <label class="form-label">Max Tokens Respons</label>
                                <input type="number" name="groq_max_tokens" class="form-control"
                                       value="{{ old('groq_max_tokens', $groq['groq_max_tokens'] ?? '500') }}"
                                       min="50" max="4000">
                                <p class="field-hint">Panjang maksimal jawaban AI</p>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Konteks Percakapan</label>
                                <input type="number" name="groq_max_context_messages" class="form-control"
                                       value="{{ old('groq_max_context_messages', $groq['groq_max_context_messages'] ?? '10') }}"
                                       min="1" max="50">
                                <p class="field-hint">Pesan terakhir sebagai konteks</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">System Prompt Chatbot <span class="required">*</span></label>
                            <textarea name="groq_system_prompt" class="form-control" rows="7"
                                      placeholder="Kamu adalah asisten virtual Naramedic...">{{ old('groq_system_prompt', $groq['groq_system_prompt'] ?? '') }}</textarea>
                            <p class="field-hint">Instruksi utama yang membentuk karakter chatbot. Semakin detail = semakin akurat.</p>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Kata Kunci Eskalasi ke Agent</label>
                            <input type="text" name="escalation_keywords" class="form-control"
                                   value="{{ old('escalation_keywords', implode(', ', (array)($groq['escalation_keywords'] ?? []))) }}"
                                   placeholder="harga, diskon, beli, komplain, agent, manusia">
                            <p class="field-hint">Pisahkan koma. Jika terdeteksi → handoff ke agent manusia</p>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Pesan Eskalasi ke Agent</label>
                            <textarea name="escalation_message" class="form-control" rows="2"
                                      placeholder="Baik, saya akan menghubungkan Anda ke tim kami...">{{ old('escalation_message', $groq['escalation_message'] ?? '') }}</textarea>
                        </div>
                        <div style="display:flex;gap:.75rem;">
                            <button type="submit" class="btn btn-primary">Simpan Konfigurasi AI</button>
                            <button type="button" class="btn btn-secondary" onclick="testGroqConn()" id="testGroqBtn">Test Koneksi</button>
                        </div>
                        <div id="testGroqResult" style="display:none;margin-top:.75rem;"></div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Right sidebar --}}
        <div style="display:flex;flex-direction:column;gap:1rem;">
            <div class="card">
                <div class="card-header"><span class="card-title">Status API</span></div>
                <div class="card-body" style="display:flex;flex-direction:column;gap:.875rem;">
                    <div>
                        <div class="text-small text-muted">API Key</div>
                        <div style="margin-top:.25rem;">
                            @if(!empty($groq['groq_api_key']))
                            <span style="color:var(--success);font-size:.875rem;">✓ Terkonfigurasi</span>
                            @else
                            <span style="color:var(--danger);font-size:.875rem;">⚠ Belum diset</span>
                            @endif
                        </div>
                    </div>
                    <div>
                        <div class="text-small text-muted">Model Aktif</div>
                        <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">
                            {{ $groq['groq_model'] ?? 'llama3-70b-8192' }}
                        </div>
                    </div>
                    <div>
                        <div class="text-small text-muted">Free Tier Groq</div>
                        <div style="font-size:.8125rem;color:var(--gray-600);margin-top:.25rem;line-height:1.5;">
                            ~14.400 token/menit gratis.<br>
                            Cukup untuk volume sedang tanpa biaya.
                        </div>
                    </div>
                    <a href="{{ route('chatbot.settings') }}" class="btn btn-secondary btn-sm" style="justify-content:center;">
                        Pengaturan Chatbot Lanjutan →
                    </a>
                    <a href="{{ route('chatbot.logs') }}" class="btn btn-ghost btn-sm" style="justify-content:center;">
                        Lihat Log Chatbot →
                    </a>
                </div>
            </div>
            <div class="card">
                <div class="card-header"><span class="card-title">Tips Prompt Efektif</span></div>
                <div class="card-body">
                    <div style="font-size:.8125rem;color:var(--gray-600);line-height:1.8;display:flex;flex-direction:column;gap:.375rem;">
                        <div>✅ Sebut nama & perusahaan bot</div>
                        <div>✅ Tentukan bahasa (Indonesia)</div>
                        <div>✅ Batas topik yang boleh dijawab</div>
                        <div>✅ Instruksi format respons</div>
                        <div>✅ Cara menolak dengan sopan</div>
                        <div style="margin-top:.375rem;padding-top:.375rem;border-top:1px solid var(--gray-100);color:var(--gray-500);">
                            Temperature 0.5–0.8 ideal untuk customer service
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     TAB: Notification
============================================================ --}}
<div id="panel_notification" class="tab-panel" style="display:none;">
    <div style="max-width:480px;">
        <div class="card">
            <div class="card-header"><span class="card-title">Pengaturan Notifikasi</span></div>
            <div class="card-body">
                <form method="POST" action="{{ route('settings.notification') }}">
                    @csrf @method('PUT')
                    <div style="display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem;">
                        <label style="display:flex;align-items:flex-start;gap:.875rem;cursor:pointer;padding:.875rem;border:1.5px solid var(--gray-200);border-radius:var(--radius);transition:border-color .15s;" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='var(--gray-200)'">
                            <input type="checkbox" name="notify_new_lead" value="1"
                                   {{ ($notification['notify_new_lead'] ?? '1') == '1' ? 'checked' : '' }}
                                   style="accent-color:var(--primary);margin-top:3px;flex-shrink:0;">
                            <div>
                                <div style="font-size:.875rem;font-weight:500;color:var(--gray-800);">Lead Baru dari WhatsApp</div>
                                <div style="font-size:.8125rem;color:var(--gray-500);margin-top:.25rem;">Notifikasi ke agent ketika ada kontak / lead baru masuk dari WA</div>
                            </div>
                        </label>
                        <label style="display:flex;align-items:flex-start;gap:.875rem;cursor:pointer;padding:.875rem;border:1.5px solid var(--gray-200);border-radius:var(--radius);transition:border-color .15s;" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='var(--gray-200)'">
                            <input type="checkbox" name="notify_task_due" value="1"
                                   {{ ($notification['notify_task_due'] ?? '1') == '1' ? 'checked' : '' }}
                                   style="accent-color:var(--primary);margin-top:3px;flex-shrink:0;">
                            <div>
                                <div style="font-size:.875rem;font-weight:500;color:var(--gray-800);">Tugas Jatuh Tempo</div>
                                <div style="font-size:.8125rem;color:var(--gray-500);margin-top:.25rem;">Reminder harian pukul 08.00 untuk tugas yang mendekati atau melewati deadline</div>
                            </div>
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">Simpan Pengaturan Notifikasi</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
var activeTab = '{{ request('tab', 'general') }}';

function switchTab(id) {
    document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
    document.querySelectorAll('[id^="tab_"]').forEach(function(t) {
        t.style.color = 'var(--gray-500)';
        t.style.borderBottomColor = 'transparent';
    });
    document.getElementById('panel_' + id).style.display = 'block';
    var btn = document.getElementById('tab_' + id);
    btn.style.color = 'var(--primary)';
    btn.style.borderBottomColor = 'var(--primary)';
}

switchTab(activeTab);

function togglePwd(id) {
    var inp = document.getElementById(id);
    inp.type = inp.type === 'password' ? 'text' : 'password';
}

function showTestWa() {
    var p = document.getElementById('testWaPanel');
    p.style.display = p.style.display === 'none' ? 'block' : 'none';
    if (p.style.display === 'block') p.scrollIntoView({ behavior: 'smooth' });
}

function sendTestWa() {
    var phone  = document.getElementById('testWaPhone').value.trim();
    var result = document.getElementById('testWaResult');
    var btn    = document.getElementById('testWaBtn');
    if (!phone) { showResult(result, false, 'Nomor telepon wajib diisi.'); return; }

    btn.disabled = true;
    result.style.display = 'none';

    fetch('{{ route('settings.test.wa') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify({ phone: phone }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        btn.disabled = false;
        showResult(result, d.success, d.message || (d.success ? 'Pesan berhasil dikirim!' : 'Gagal.'));
    })
    .catch(function() { btn.disabled = false; showResult(result, false, 'Koneksi gagal.'); });
}

function testGroqConn() {
    var result = document.getElementById('testGroqResult');
    var btn    = document.getElementById('testGroqBtn');
    btn.disabled = true;
    showResult(result, null, 'Menguji koneksi Groq AI...');

    fetch('{{ route('settings.test.groq') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify({}),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        btn.disabled = false;
        showResult(result, d.success, d.message || (d.success ? 'Koneksi berhasil!' : 'Gagal.'));
    })
    .catch(function() { btn.disabled = false; showResult(result, false, 'Koneksi gagal.'); });
}

function showResult(el, success, msg) {
    el.style.display = 'block';
    var color = success === null ? 'var(--info-light)' : (success ? 'var(--success-light)' : 'var(--danger-light)');
    var textColor = success === null ? '#1e40af' : (success ? '#065f46' : '#991b1b');
    el.innerHTML = '<div style="padding:.625rem .875rem;border-radius:var(--radius);background:' + color + ';color:' + textColor + ';font-size:.875rem;">' + msg + '</div>';
}
</script>
@endpush