@extends('admin.layout')

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

@section('content')
<div>
    <form id="config-form" method="POST" action="{{ route('admin.konfigurasi.update') }}">
        @csrf
        <div class="flex justify-between items-center mb-8">
            <div>
                <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Konfigurasi</h2>
                <p class="text-sm text-on-surface-variant mt-1">Kelola pengaturan utama platform, biaya, dan rekening perusahaan.</p>
            </div>
            <button type="button" id="btn-save-config" class="flex items-center gap-2 px-6 py-2.5 bg-primary text-white rounded-xl font-semibold hover:bg-primary/90 transition-all shadow-sm">
                <span class="material-symbols-outlined text-[20px]">save</span>
                <span>Simpan Perubahan</span>
            </button>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Maintenance Settings: MITRA -->
            <section class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 p-6 flex flex-col gap-6">
                <div class="flex items-center gap-3 pb-4 border-b border-outline-variant/30">
                    <div class="p-2 bg-purple-100 text-primary rounded-lg">
                        <span class="material-symbols-outlined">badge</span>
                    </div>
                    <div>
                        <h3 class="font-headline-md text-lg font-bold text-on-surface">Kontrol Portal Mitra</h3>
                        <p class="text-xs text-on-surface-variant">Atur ketersediaan akses dan pendaftaran untuk calon mitra terapis.</p>
                    </div>
                </div>

                <!-- 1. Pendaftaran Mitra ON/OFF -->
                <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl border border-outline-variant/20">
                    <div>
                        <div class="flex items-center gap-2">
                            <h4 class="font-bold text-on-surface text-sm">Pendaftaran Mitra Terapis</h4>
                            @if(\App\Models\Setting::getValue('allow_mitra_registration', '1') == '1')
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">DIBUKA (ON)</span>
                            @else
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-700">DITUTUP (OFF)</span>
                            @endif
                        </div>
                        <p class="text-xs text-on-surface-variant mt-0.5">Aktifkan agar terapis baru dapat mendaftar melalui portal Mitra.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="allow_mitra_registration" value="1" {{ \App\Models\Setting::getValue('allow_mitra_registration', '1') == '1' ? 'checked' : '' }} class="sr-only peer">
                        <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                </div>

                <div class="flex flex-col gap-2">
                    <label class="font-bold text-on-surface text-xs">Pesan Saat Pendaftaran Mitra Ditutup <span class="text-error font-bold">*</span></label>
                    <textarea name="maintenance_message_mitra_register" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-xs focus:ring-2 focus:ring-primary/20 focus:outline-none min-h-[70px]" placeholder="Mohon maaf, pendaftaran mitra terapis baru sedang ditutup sementara..." required>{{ \App\Models\Setting::getValue('maintenance_message_mitra_register', 'Mohon maaf, pendaftaran mitra terapis baru saat ini sedang ditutup sementara oleh Manajemen.') }}</textarea>
                </div>
            </section>

            <!-- Maintenance Settings: KONSUMEN (3 Rules) -->
            <section class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 p-6 flex flex-col gap-6">
                <div class="flex items-center gap-3 pb-4 border-b border-outline-variant/30">
                    <div class="p-2 bg-emerald-100 text-emerald-700 rounded-lg">
                        <span class="material-symbols-outlined">group</span>
                    </div>
                    <div>
                        <h3 class="font-headline-md text-lg font-bold text-on-surface">Kontrol Portal Konsumen</h3>
                        <p class="text-xs text-on-surface-variant">3 aturan pemeliharaan sistem khusus untuk portal konsumen.</p>
                    </div>
                </div>

                <!-- Rule 1: Pendaftaran Konsumen ON/OFF -->
                <div class="p-4 bg-surface-container-low rounded-xl border border-outline-variant/20 space-y-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="flex items-center gap-2">
                                <h4 class="font-bold text-on-surface text-sm">1. Pendaftaran Konsumen</h4>
                                @if(\App\Models\Setting::getValue('allow_konsumen_registration', '1') == '1')
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">DIBUKA (ON)</span>
                                @else
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-700">DITUTUP (OFF)</span>
                                @endif
                            </div>
                            <p class="text-xs text-on-surface-variant mt-0.5">Izinkan pembuatan akun konsumen baru via OTP atau Google.</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="allow_konsumen_registration" value="1" {{ \App\Models\Setting::getValue('allow_konsumen_registration', '1') == '1' ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                        </label>
                    </div>
                    <div class="flex flex-col gap-1.5 pt-2 border-t border-outline-variant/10">
                        <label class="font-bold text-on-surface text-[11px] text-on-surface-variant">Pesan Saat Pendaftaran Konsumen Ditutup</label>
                        <textarea name="maintenance_message_konsumen_register" class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-2.5 text-xs focus:ring-2 focus:ring-primary/20 focus:outline-none min-h-[60px]" placeholder="Pesan penutupan pendaftaran konsumen...">{{ \App\Models\Setting::getValue('maintenance_message_konsumen_register', 'Mohon maaf, pendaftaran akun konsumen baru saat ini sedang ditutup sementara oleh Manajemen.') }}</textarea>
                    </div>
                </div>

                <!-- Rule 2: Order Layanan ON/OFF -->
                <div class="p-4 bg-surface-container-low rounded-xl border border-outline-variant/20 space-y-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="flex items-center gap-2">
                                <h4 class="font-bold text-on-surface text-sm">2. Order Layanan (Booking)</h4>
                                @if(\App\Models\Setting::getValue('allow_konsumen_order', '1') == '1')
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">AKTIF (ON)</span>
                                @else
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800">MAINTENANCE (OFF)</span>
                                @endif
                            </div>
                            <p class="text-xs text-on-surface-variant mt-0.5">Izinkan konsumen membuat pesanan dan melakukan pembayaran layanan.</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="allow_konsumen_order" value="1" {{ \App\Models\Setting::getValue('allow_konsumen_order', '1') == '1' ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                        </label>
                    </div>
                    <div class="flex flex-col gap-1.5 pt-2 border-t border-outline-variant/10">
                        <label class="font-bold text-on-surface text-[11px] text-on-surface-variant">Pesan Saat Order Layanan Dinonaktifkan</label>
                        <textarea name="maintenance_message_konsumen_order" class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-2.5 text-xs focus:ring-2 focus:ring-primary/20 focus:outline-none min-h-[60px]" placeholder="Pesan penonaktifan order layanan...">{{ \App\Models\Setting::getValue('maintenance_message_konsumen_order', 'Layanan pemesanan saat ini sedang dalam pemeliharaan sementara. Silakan coba beberapa saat lagi.') }}</textarea>
                    </div>
                </div>

                <!-- Rule 3: Maintenance Total ON/OFF -->
                <div class="p-4 bg-red-50/60 rounded-xl border border-red-200 space-y-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="flex items-center gap-2">
                                <h4 class="font-bold text-red-900 text-sm">3. Mode Pemeliharaan Total</h4>
                                @if(\App\Models\Setting::getValue('maintenance_konsumen_total', '0') == '1')
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-600 text-white animate-pulse">AKTIF (MAINTENANCE)</span>
                                @else
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-200 text-slate-700">NONAKTIF (NORMAL)</span>
                                @endif
                            </div>
                            <p class="text-xs text-red-700 mt-0.5">Tutup seluruh akses website konsumen dan tampilkan halaman pemeliharaan.</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="maintenance_konsumen_total" value="1" {{ \App\Models\Setting::getValue('maintenance_konsumen_total', '0') == '1' ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-error"></div>
                        </label>
                    </div>
                    <div class="flex flex-col gap-1.5 pt-2 border-t border-red-200">
                        <label class="font-bold text-red-900 text-[11px]">Pesan Pemeliharaan Total Konsumen</label>
                        <textarea name="maintenance_message_konsumen_total" class="w-full bg-white border border-red-200 rounded-xl p-2.5 text-xs focus:ring-2 focus:ring-error/20 focus:outline-none min-h-[60px]" placeholder="Situs web Terapisku sedang dalam pemeliharaan rutin...">{{ \App\Models\Setting::getValue('maintenance_message_konsumen_total', 'Mohon maaf atas ketidaknyamanannya. Layanan Terapisku saat ini sedang dalam peningkatan sistem berkala dan akan segera kembali.') }}</textarea>
                    </div>
                </div>
            </section>

            <!-- Jam Operasional & Pengaturan Pesanan -->
            <section class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 p-6 flex flex-col gap-6">
                <div class="flex items-center gap-3 pb-4 border-b border-outline-variant/30">
                    <div class="p-2 bg-primary/10 text-primary rounded-lg">
                        <span class="material-symbols-outlined">schedule</span>
                    </div>
                    <h3 class="font-headline-md text-lg font-bold text-on-surface">Jam Operasional Layanan</h3>
                </div>

                @php
                    $timeSlots = [];
                    for ($hour = 7; $hour <= 21; $hour++) {
                        $timeSlots[] = sprintf('%02d:00', $hour);
                    }
                    $startSelected = \App\Models\Setting::getValue('operational_start_time', '08:00');
                    $endSelected = \App\Models\Setting::getValue('operational_end_time', '21:00');
                @endphp

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">Jam Mulai Layanan <span class="text-error font-bold">*</span></label>
                        <div class="relative">
                            <select name="operational_start_time" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none cursor-pointer" required>
                                @foreach($timeSlots as $slot)
                                <option value="{{ $slot }}" {{ $startSelected == $slot ? 'selected' : '' }}>
                                    {{ $slot }} WIB
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <p class="text-xs text-on-surface-variant">Slot terapi paling awal yang dapat dipesan konsumen.</p>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">Jam Selesai Layanan <span class="text-error font-bold">*</span></label>
                        <div class="relative">
                            <select name="operational_end_time" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none cursor-pointer" required>
                                @foreach($timeSlots as $slot)
                                <option value="{{ $slot }}" {{ $endSelected == $slot ? 'selected' : '' }}>
                                    {{ $slot }} WIB
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <p class="text-xs text-on-surface-variant">Slot terapi paling akhir yang dapat dipesan konsumen.</p>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label class="font-bold text-on-surface text-sm">Minimal Jeda Pemesanan Same-Day (Jam) <span class="text-error font-bold">*</span></label>
                    <div class="relative">
                        <input type="number" min="1" max="12" name="operational_same_day_lead_hours" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 pr-14 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ \App\Models\Setting::getValue('operational_same_day_lead_hours', 3) }}" required>
                        <span class="absolute right-4 top-1/2 -translate-y-1/2 text-on-surface-variant font-bold text-xs">JAM</span>
                    </div>
                    <p class="text-xs text-on-surface-variant">Waktu jeda minimal sebelum jadwal terapi hari yang sama (misal: 3 jam sebelum waktu layanan).</p>
                </div>

                <div class="flex flex-col gap-2 pt-2 border-t border-outline-variant/30">
                    <label class="font-bold text-on-surface text-sm">Radius Pencarian Mitra (KM) <span class="text-error font-bold">*</span></label>
                    <div class="relative">
                        <input type="number" min="1" name="mitra_search_radius" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 pr-12 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ \App\Models\Setting::getValue('mitra_search_radius', 10) }}" required>
                        <span class="absolute right-4 top-1/2 -translate-y-1/2 text-on-surface-variant font-bold">KM</span>
                    </div>
                    <p class="text-xs text-on-surface-variant">Jarak maksimal untuk mencari mitra terdekat dari lokasi konsumen.</p>
                </div>
            </section>

            <!-- Financial Settings -->
            <section class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 p-6 flex flex-col gap-6 lg:col-span-2">
                <div class="flex items-center gap-3 pb-4 border-b border-outline-variant/30">
                    <div class="p-2 bg-primary/10 text-primary rounded-lg">
                        <span class="material-symbols-outlined">payments</span>
                    </div>
                    <h3 class="font-headline-md text-lg font-bold text-on-surface">Biaya & Komisi</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">Komisi Platform (%) <span class="text-error font-bold">*</span></label>
                        <div class="relative">
                            <input type="number" min="0" max="100" step="any" name="platform_commission" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 pr-8 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ \App\Models\Setting::getValue('platform_commission', 20) }}" required>
                            <span class="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant font-bold">%</span>
                        </div>
                        <p class="text-xs text-on-surface-variant">Potongan dari total pendapatan mitra untuk setiap layanan selesai.</p>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">Minimal Penarikan (Mitra) <span class="text-error font-bold">*</span></label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant font-bold">Rp</span>
                            <input type="text" name="min_withdrawal" class="format-currency w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 pl-9 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ number_format(\App\Models\Setting::getValue('min_withdrawal', 50000), 0, ',', '.') }}" required>
                        </div>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">Biaya Platform (Konsumen) <span class="text-error font-bold">*</span></label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant font-bold">Rp</span>
                            <input type="text" name="platform_fee" class="format-currency w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 pl-9 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ number_format(\App\Models\Setting::getValue('platform_fee', 2500), 0, ',', '.') }}" required>
                        </div>
                        <p class="text-xs text-on-surface-variant">Biaya admin murni yang ditambahkan pada pesanan konsumen.</p>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">Nominal Pendaftaran Mitra Default <span class="text-error font-bold">*</span></label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant font-bold">Rp</span>
                            <input type="text" name="default_mitra_registration_fee" class="format-currency w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 pl-9 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ number_format(\App\Models\Setting::getValue('default_mitra_registration_fee', 250000), 0, ',', '.') }}" required>
                        </div>
                        <p class="text-xs text-on-surface-variant">Nominal standar biaya pendaftaran pendaftaran mitra baru.</p>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">Biaya Payment Gateway (Konsumen) <span class="text-error font-bold">*</span></label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant font-bold">Rp</span>
                            <input type="text" name="payment_gateway_fee" class="format-currency w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 pl-9 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ number_format(\App\Models\Setting::getValue('payment_gateway_fee', 4000), 0, ',', '.') }}" required>
                        </div>
                        <p class="text-xs text-on-surface-variant">Biaya transaksi pihak ketiga (Misal: Midtrans/Xendit) per transaksi.</p>
                    </div>
                </div>
            </section>

            <!-- Midtrans Environment & Credentials -->
            @php
                $isProductionSetting = \App\Models\Setting::getValue('midtrans_is_production');
                $isProduction = $isProductionSetting !== null
                    ? ($isProductionSetting === '1' || $isProductionSetting === 'true')
                    : (bool) config('services.midtrans.is_production', env('MIDTRANS_IS_PRODUCTION', false));
                
                $sandboxMerchantId = \App\Models\Setting::getValue('midtrans_sandbox_merchant_id', config('services.midtrans.sandbox.merchant_id', env('MIDTRANS_SANDBOX_MERCHANT_ID', 'M436941672')));
                $sandboxClientKey = \App\Models\Setting::getValue('midtrans_sandbox_client_key', config('services.midtrans.sandbox.client_key', env('MIDTRANS_SANDBOX_CLIENT_KEY', 'Mid-client-eBftCZftAGUkst-b')));
                $sandboxServerKey = \App\Models\Setting::getValue('midtrans_sandbox_server_key', config('services.midtrans.sandbox.server_key', env('MIDTRANS_SANDBOX_SERVER_KEY', 'Mid-server-cbLC4NIt-8lk_p_o1a9MODpP')));

                $prodMerchantId = \App\Models\Setting::getValue('midtrans_production_merchant_id', config('services.midtrans.production.merchant_id', env('MIDTRANS_PRODUCTION_MERCHANT_ID', 'M436941672')));
                $prodClientKey = \App\Models\Setting::getValue('midtrans_production_client_key', config('services.midtrans.production.client_key', env('MIDTRANS_PRODUCTION_CLIENT_KEY', 'Mid-client-6EKzUJlf1zstTGYm')));
                $prodServerKey = \App\Models\Setting::getValue('midtrans_production_server_key', config('services.midtrans.production.server_key', env('MIDTRANS_PRODUCTION_SERVER_KEY', 'Mid-server-Q9aEdLZ1KOHSRz7vh7AYMrXD')));
            @endphp
            <section class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 p-6 flex flex-col gap-6 lg:col-span-2">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-outline-variant/30">
                    <div class="flex items-center gap-3">
                        <div class="p-2 bg-purple-100 text-primary rounded-lg">
                            <span class="material-symbols-outlined">api</span>
                        </div>
                        <div>
                            <div class="flex items-center gap-2">
                                <h3 class="font-headline-md text-lg font-bold text-on-surface">Kredensial & Lingkungan Midtrans</h3>
                                @if($isProduction)
                                <span id="header-mode-badge" class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-700 uppercase">Production (Live)</span>
                                @else
                                <span id="header-mode-badge" class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 uppercase">Sandbox (Testing)</span>
                                @endif
                            </div>
                            <p class="text-xs text-on-surface-variant">Kelola mode gateway dan kunci API terpisah untuk mode pengujian (Sandbox) dan mode rilis (Production).</p>
                        </div>
                    </div>
                </div>

                <!-- Mode Toggle (Sandbox vs Production) -->
                <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl border border-outline-variant/20">
                    <div>
                        <div class="flex items-center gap-2">
                            <h4 class="font-bold text-on-surface text-sm">Mode Gateway Aktif</h4>
                            @if($isProduction)
                            <span id="badge-active-mode" class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-600 text-white">LIVE / PRODUCTION</span>
                            @else
                            <span id="badge-active-mode" class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500 text-white">TESTING / SANDBOX</span>
                            @endif
                        </div>
                        <p class="text-xs text-on-surface-variant mt-0.5">
                            Centang untuk mengaktifkan <strong>Production (Uang Asli)</strong>. Jika tidak dicentang, transaksi menggunakan <strong>Sandbox (Simulasi)</strong>.
                        </p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="toggle-midtrans-production" name="midtrans_is_production" value="1" {{ $isProduction ? 'checked' : '' }} class="sr-only peer">
                        <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                    </label>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- Sandbox Card -->
                    <div id="card-midtrans-sandbox" class="p-4 rounded-xl border {{ !$isProduction ? 'border-amber-400/80 bg-amber-50/20 ring-1 ring-amber-400/30' : 'border-outline-variant/30 bg-surface-container-low opacity-80' }} space-y-3 transition-all">
                        <div class="flex items-center justify-between pb-2 border-b border-outline-variant/20">
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-amber-600 text-[18px]">science</span>
                                <h4 class="text-xs font-bold text-on-surface">Kredensial Sandbox (Testing)</h4>
                            </div>
                            <span id="badge-sandbox-status" class="text-[9px] font-bold px-2 py-0.5 bg-amber-100 text-amber-800 rounded-full {{ $isProduction ? 'hidden' : '' }}">SEDANG DIGUNAKAN</span>
                        </div>

                        <div class="space-y-2.5">
                            <div>
                                <label class="font-bold text-on-surface text-[11px] block mb-1">Merchant ID Sandbox</label>
                                <input type="text" name="midtrans_sandbox_merchant_id" class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-2.5 text-xs font-mono focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ $sandboxMerchantId }}" placeholder="M436941672">
                            </div>
                            <div>
                                <label class="font-bold text-on-surface text-[11px] block mb-1">Client Key Sandbox</label>
                                <div class="relative">
                                    <input type="password" id="input-sandbox-client-key" name="midtrans_sandbox_client_key" class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-2.5 pr-10 text-xs font-mono focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ $sandboxClientKey }}" placeholder="Mid-client-...">
                                    <button type="button" data-target="input-sandbox-client-key" class="btn-toggle-key-visibility absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-primary transition-colors">
                                        <span class="material-symbols-outlined text-[18px]">visibility</span>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="font-bold text-on-surface text-[11px] block mb-1">Server Key Sandbox</label>
                                <div class="relative">
                                    <input type="password" id="input-sandbox-server-key" name="midtrans_sandbox_server_key" class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-2.5 pr-10 text-xs font-mono focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ $sandboxServerKey }}" placeholder="Mid-server-...">
                                    <button type="button" data-target="input-sandbox-server-key" class="btn-toggle-key-visibility absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-primary transition-colors">
                                        <span class="material-symbols-outlined text-[18px]">visibility</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Production Card -->
                    <div id="card-midtrans-prod" class="p-4 rounded-xl border {{ $isProduction ? 'border-emerald-500/80 bg-emerald-50/20 ring-1 ring-emerald-500/30' : 'border-outline-variant/30 bg-surface-container-low opacity-80' }} space-y-3 transition-all">
                        <div class="flex items-center justify-between pb-2 border-b border-outline-variant/20">
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-emerald-600 text-[18px]">verified</span>
                                <h4 class="text-xs font-bold text-on-surface">Kredensial Production (Live)</h4>
                            </div>
                            <span id="badge-prod-status" class="text-[9px] font-bold px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-full {{ !$isProduction ? 'hidden' : '' }}">SEDANG DIGUNAKAN</span>
                        </div>

                        <div class="space-y-2.5">
                            <div>
                                <label class="font-bold text-on-surface text-[11px] block mb-1">Merchant ID Production</label>
                                <input type="text" name="midtrans_production_merchant_id" class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-2.5 text-xs font-mono focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ $prodMerchantId }}" placeholder="M436941672">
                            </div>
                            <div>
                                <label class="font-bold text-on-surface text-[11px] block mb-1">Client Key Production</label>
                                <div class="relative">
                                    <input type="password" id="input-prod-client-key" name="midtrans_production_client_key" class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-2.5 pr-10 text-xs font-mono focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ $prodClientKey }}" placeholder="Mid-client-...">
                                    <button type="button" data-target="input-prod-client-key" class="btn-toggle-key-visibility absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-primary transition-colors">
                                        <span class="material-symbols-outlined text-[18px]">visibility</span>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="font-bold text-on-surface text-[11px] block mb-1">Server Key Production</label>
                                <div class="relative">
                                    <input type="password" id="input-prod-server-key" name="midtrans_production_server_key" class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-2.5 pr-10 text-xs font-mono focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ $prodServerKey }}" placeholder="Mid-server-...">
                                    <button type="button" data-target="input-prod-server-key" class="btn-toggle-key-visibility absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-primary transition-colors">
                                        <span class="material-symbols-outlined text-[18px]">visibility</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>



            <!-- Company Bank Account -->
            <section class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 p-6 flex flex-col gap-6 lg:col-span-2">
                <div class="flex items-center justify-between pb-4 border-b border-outline-variant/30">
                    <div class="flex items-center gap-3">
                        <div class="p-2 bg-primary/10 text-primary rounded-lg">
                            <span class="material-symbols-outlined">account_balance</span>
                        </div>
                        <div>
                            <h3 class="font-headline-md text-lg font-bold text-on-surface">Rekening Perusahaan</h3>
                            <p class="text-xs text-on-surface-variant">Daftar rekening bank resmi untuk penampungan dana platform.</p>
                        </div>
                    </div>
                    <button type="button" id="btn-add-bank" class="flex items-center gap-1.5 px-4 py-2 bg-primary/10 text-primary rounded-xl font-bold text-sm hover:bg-primary/20 transition-all">
                        <span class="material-symbols-outlined text-[18px]">add_circle</span>
                        <span>Tambah Rekening</span>
                    </button>
                </div>

                @php
                    $companyBanks = \App\Models\Setting::getCompanyBankAccounts();
                @endphp

                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                    @forelse($companyBanks as $bank)
                    <!-- Bank Card -->
                    <div class="bg-surface-container-low border {{ !empty($bank['is_primary']) ? 'border-primary/50 shadow-sm ring-1 ring-primary/20' : 'border-outline-variant/50' }} rounded-xl p-5 relative group flex flex-col justify-between">
                        <div>
                            <div class="flex items-start justify-between mb-3">
                                <span class="px-2.5 py-1 bg-surface-container text-primary font-bold text-xs rounded-lg uppercase tracking-wider">{{ $bank['bank_name'] }}</span>
                                <div class="flex items-center gap-1 opacity-80 group-hover:opacity-100 transition-opacity">
                                    <button type="button" class="btn-edit-bank p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-lg transition-all" data-id="{{ $bank['id'] }}" data-bank="{{ $bank['bank_name'] }}" data-number="{{ $bank['account_number'] }}" data-holder="{{ $bank['account_holder'] }}" data-primary="{{ !empty($bank['is_primary']) ? '1' : '0' }}" title="Edit Rekening">
                                        <span class="material-symbols-outlined text-[18px]">edit</span>
                                    </button>
                                    <button type="button" class="btn-delete-bank p-1.5 text-on-surface-variant hover:text-error hover:bg-red-50 rounded-lg transition-all" data-id="{{ $bank['id'] }}" data-bank="{{ $bank['bank_name'] }}" data-number="{{ $bank['account_number'] }}" title="Hapus Rekening">
                                        <span class="material-symbols-outlined text-[18px]">delete</span>
                                    </button>
                                </div>
                            </div>
                            <p class="text-xl font-headline-md font-bold text-on-surface tracking-wider mb-1 font-mono">{{ $bank['account_number'] }}</p>
                            <p class="text-xs text-on-surface-variant font-medium">a.n. <span class="text-on-surface font-semibold">{{ $bank['account_holder'] }}</span></p>
                        </div>

                        <div class="mt-4 pt-3 border-t border-outline-variant/20 flex items-center justify-between">
                            @if(!empty($bank['is_primary']))
                            <span class="inline-flex items-center gap-1 bg-green-100 text-green-700 px-2.5 py-1 rounded-full text-xs font-bold">
                                <span class="material-symbols-outlined text-[14px]">check_circle</span> Rekening Utama
                            </span>
                            @else
                            <button type="button" class="btn-set-primary text-xs font-bold text-primary hover:underline flex items-center gap-1" data-id="{{ $bank['id'] }}" data-bank="{{ $bank['bank_name'] }}" data-number="{{ $bank['account_number'] }}">
                                <span class="material-symbols-outlined text-[14px]">radio_button_unchecked</span> Jadikan Utama
                            </button>
                            @endif
                        </div>
                    </div>
                    @empty
                    <div class="col-span-full py-8 text-center bg-surface-container-low rounded-xl border border-dashed border-outline-variant">
                        <span class="material-symbols-outlined text-4xl text-on-surface-variant/40 mb-2">account_balance</span>
                        <p class="text-sm font-bold text-on-surface">Belum ada rekening perusahaan</p>
                        <p class="text-xs text-on-surface-variant mt-1">Klik tombol "Tambah Rekening" di atas untuk menambahkan rekening baru.</p>
                    </div>
                    @endforelse
                </div>
            </section>

            <!-- App Contact Info -->
            <section class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 p-6 flex flex-col gap-6 lg:col-span-2">
                <div class="flex items-center gap-3 pb-4 border-b border-outline-variant/30">
                    <div class="p-2 bg-primary/10 text-primary rounded-lg">
                        <span class="material-symbols-outlined">contact_support</span>
                    </div>
                    <h3 class="font-headline-md text-lg font-bold text-on-surface">Informasi Kontak & Bantuan</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">WhatsApp CS <span class="text-error font-bold">*</span></label>
                        <input type="text" name="whatsapp_cs" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ \App\Models\Setting::getValue('whatsapp_cs', '+6281234567890') }}" required>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-on-surface text-sm">Email Support <span class="text-error font-bold">*</span></label>
                        <input type="email" name="support_email" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" value="{{ \App\Models\Setting::getValue('support_email', 'support@terapisku.com') }}" required>
                    </div>
                </div>
            </section>

            <!-- Google Contacts Integration (Anti-Blokir WhatsApp Bot) -->
            <section class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 p-6 flex flex-col gap-6 lg:col-span-2">
                <div class="flex items-center justify-between pb-4 border-b border-outline-variant/30">
                    <div class="flex items-center gap-3">
                        <div class="p-2.5 bg-blue-50 text-blue-600 rounded-xl">
                            <span class="material-symbols-outlined text-[24px]">contacts</span>
                        </div>
                        <div>
                            <div class="flex items-center gap-2">
                                <h3 class="font-headline-md text-lg font-bold text-on-surface">Sinkronisasi Google Contacts</h3>
                                @if(\App\Services\GoogleContactsService::isConnected())
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
                                        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                                        TERHUBUNG
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-amber-100 text-amber-700">
                                        <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                                        BELUM TERHUBUNG
                                    </span>
                                @endif
                            </div>
                            <p class="text-xs text-on-surface-variant mt-0.5">Otomatis menyimpan nomor konsumen & mitra ke Google Kontak agar nomor bot WhatsApp terhindar dari pemblokiran (Anti-Banned WhatsApp).</p>
                        </div>
                    </div>
                </div>

                @if(\App\Services\GoogleContactsService::isConnected())
                <div class="p-4 bg-emerald-50/70 border border-emerald-200/60 rounded-xl flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center flex-shrink-0">
                            <span class="material-symbols-outlined text-xl">account_circle</span>
                        </div>
                        <div>
                            <div class="text-xs font-bold text-emerald-900">Akun Google Terhubung</div>
                            <div class="text-sm font-semibold text-emerald-800 font-mono">{{ \App\Services\GoogleContactsService::getConnectedEmail() ?: 'Akun Google Kontak Aktif' }}</div>
                            <div class="text-[11px] text-emerald-700/80 mt-0.5">Terhubung sejak: {{ \App\Models\Setting::getValue('google_contacts_connected_at') ?: '-' }}</div>
                        </div>
                    </div>

                    <div class="flex items-center gap-2 flex-wrap">
                        <button type="button" onclick="document.getElementById('form-sync-all-contacts').submit()" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold flex items-center gap-1.5 transition-all shadow-sm">
                            <span class="material-symbols-outlined text-sm">sync</span>
                            Sinkronkan Semua Pengguna
                        </button>
                        <button type="button" onclick="document.getElementById('form-disconnect-contacts').submit()" class="px-3.5 py-2 bg-white hover:bg-rose-50 text-rose-600 border border-rose-200 rounded-xl text-xs font-bold flex items-center gap-1.5 transition-all">
                            <span class="material-symbols-outlined text-sm">link_off</span>
                            Putuskan
                        </button>
                    </div>
                </div>
                @else
                <div class="p-4 bg-amber-50/70 border border-amber-200/60 rounded-xl flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="space-y-1">
                        <div class="text-xs font-bold text-amber-900 flex items-center gap-1.5">
                            <span class="material-symbols-outlined text-sm text-amber-600">info</span>
                            Hubungkan Akun Google untuk Mulai Menyimpan Kontak
                        </div>
                        <p class="text-xs text-amber-800/80">Pastikan akun Google yang Anda hubungkan adalah akun yang tersinkronisasi dengan HP/nomor WhatsApp yang digunakan sebagai Bot.</p>
                    </div>
                    <a href="{{ route('admin.google-contacts.connect') }}" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-bold flex items-center justify-center gap-2 transition-all shadow-sm whitespace-nowrap">
                        <span class="material-symbols-outlined text-base">login</span>
                        Hubungkan Google Contacts
                    </a>
                </div>
                @endif

                <!-- Credentials Info & Configuration -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                    <div class="flex flex-col gap-1.5">
                        <label class="font-bold text-on-surface text-xs">Google Client ID</label>
                        <input type="text" name="google_contacts_client_id" value="{{ \App\Services\GoogleContactsService::getClientId() }}" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-xs font-mono focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="Client ID Google...">
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="font-bold text-on-surface text-xs">Google Client Secret</label>
                        <div class="relative">
                            <input type="password" id="input-google-contacts-client-secret" name="google_contacts_client_secret" value="{{ \App\Services\GoogleContactsService::getClientSecret() }}" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 pr-10 text-xs font-mono focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="Client Secret Google...">
                            <button type="button" data-target="input-google-contacts-client-secret" class="btn-toggle-key-visibility absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-primary transition-colors" title="Lihat / Sembunyikan Client Secret">
                                <span class="material-symbols-outlined text-[18px]">visibility</span>
                            </button>
                        </div>
                    </div>
                    <div class="md:col-span-2 flex flex-col gap-1.5 bg-surface-container-low p-3.5 rounded-xl border border-outline-variant/30">
                        <div class="flex items-center justify-between">
                            <label class="font-bold text-on-surface text-xs">OAuth Redirect URI (Wajib didaftarkan di Google Cloud Console):</label>
                            <button type="button" onclick="navigator.clipboard.writeText('{{ route('admin.google-contacts.callback') }}'); alert('Redirect URI disalin!')" class="text-[11px] font-bold text-primary hover:underline flex items-center gap-1">
                                <span class="material-symbols-outlined text-[13px]">content_copy</span> Salin
                            </button>
                        </div>
                        <div class="font-mono text-xs text-on-surface-variant bg-surface-container-lowest p-2 rounded-lg border border-outline-variant select-all">{{ route('admin.google-contacts.callback') }}</div>
                    </div>
                </div>
            </section>
        </div>
    </form>

    <!-- Hidden Action Forms for Google Contacts -->
    <form id="form-disconnect-contacts" action="{{ route('admin.google-contacts.disconnect') }}" method="POST" class="hidden">
        @csrf
    </form>
    <form id="form-sync-all-contacts" action="{{ route('admin.google-contacts.sync-all') }}" method="POST" class="hidden">
        @csrf
    </form>

    <!-- Bank Account Form Modal (Tambah / Edit) -->
    <div id="bank-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm hidden transition-all duration-200">
        <div class="bg-surface-container-lowest rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl border border-outline-variant/30 space-y-4 animate-scale-up">
            <div class="flex items-center justify-between pb-3 border-b border-outline-variant/30">
                <div class="flex items-center gap-2.5">
                    <div class="p-2 bg-primary/10 text-primary rounded-lg">
                        <span class="material-symbols-outlined text-[20px]">account_balance</span>
                    </div>
                    <h3 id="bank-modal-title" class="font-headline-md text-base font-bold text-on-surface">Tambah Rekening Perusahaan</h3>
                </div>
                <button type="button" id="btn-close-bank-modal" class="text-on-surface-variant hover:text-on-surface"><span class="material-symbols-outlined text-sm">close</span></button>
            </div>

            <form id="bank-account-form" method="POST" action="{{ route('admin.rekening-perusahaan.store') }}" class="space-y-4">
                @csrf
                <input type="hidden" name="_method" id="bank-form-method" value="POST">
                <input type="hidden" name="bank_id" id="bank-id" value="">

                <div class="flex flex-col gap-1.5">
                    <label class="font-bold text-on-surface text-xs">Nama Bank <span class="text-error font-bold">*</span></label>
                    <input type="text" name="bank_name" id="bank-name" placeholder="Misal: BCA (Bank Central Asia)" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" required>
                </div>

                <div class="flex flex-col gap-1.5">
                    <label class="font-bold text-on-surface text-xs">Nomor Rekening <span class="text-error font-bold">*</span></label>
                    <input type="text" name="account_number" id="bank-account-number" maxlength="20" placeholder="Misal: 8720-1234-5678" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none font-mono" required>
                    <p class="text-[10px] text-on-surface-variant">Hanya angka, spasi, atau tanda strip (-) (maks. 20 karakter).</p>
                </div>

                <div class="flex flex-col gap-1.5">
                    <label class="font-bold text-on-surface text-xs">Atas Nama (Pemilik Rekening) <span class="text-error font-bold">*</span></label>
                    <input type="text" name="account_holder" id="bank-account-holder" maxlength="30" placeholder="Misal: PT Terapisku Sejahtera" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-sm focus:ring-2 focus:ring-primary/20 focus:outline-none" required>
                    <p class="text-[10px] text-on-surface-variant">Maksimal 30 karakter.</p>
                </div>

                <div class="flex items-center gap-2 pt-2">
                    <input type="checkbox" name="is_primary" id="bank-is-primary" value="1" class="rounded border-outline-variant text-primary focus:ring-primary">
                    <label for="bank-is-primary" class="text-xs font-bold text-on-surface cursor-pointer">Jadikan sebagai Rekening Utama</label>
                </div>

                <div class="flex gap-3 justify-end pt-3 border-t border-outline-variant/30">
                    <button type="button" id="btn-cancel-bank-modal" class="px-4 py-2.5 bg-surface-container text-on-surface-variant rounded-xl text-xs font-bold hover:bg-surface-container-high transition-all">
                        Batal
                    </button>
                    <button type="submit" id="btn-submit-bank" class="px-5 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-[16px]">save</span>
                        <span id="bank-btn-text">Simpan Rekening</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- General Action Confirmation Modal (for Main Form, Bank Delete, Bank Set Primary) -->
    <div id="maintenance-confirm-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm hidden transition-all duration-200">
        <div class="bg-surface-container-lowest rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl border border-outline-variant/30 space-y-4 animate-scale-up">
            <div class="flex items-center gap-3">
                <div id="modal-icon-bg" class="w-12 h-12 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center flex-shrink-0">
                    <span id="modal-icon" class="material-symbols-outlined text-2xl">warning</span>
                </div>
                <div>
                    <h3 id="modal-title" class="font-headline-md text-base font-bold text-on-surface">Konfirmasi Perubahan Status</h3>
                    <p id="modal-subtitle" class="text-xs text-on-surface-variant">Pastikan Anda memahami dampak perubahan ini.</p>
                </div>
            </div>

            <div class="p-3.5 bg-surface-container-low rounded-xl border border-outline-variant/20">
                <p id="modal-desc" class="text-xs text-on-surface leading-relaxed"></p>
            </div>

            <div class="flex gap-3 justify-end pt-2">
                <button type="button" id="modal-btn-cancel" class="px-4 py-2.5 bg-surface-container text-on-surface-variant rounded-xl text-xs font-bold hover:bg-surface-container-high transition-all">
                    Batal
                </button>
                <button type="button" id="modal-btn-confirm" class="px-5 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[16px]">check</span>
                    <span>Ya, Lanjutkan</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Hidden action form for delete / set-primary bank -->
<form id="bank-action-form" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="_method" id="bank-action-method" value="POST">
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const currencyInputs = document.querySelectorAll('.format-currency');

        currencyInputs.forEach(input => {
            input.addEventListener('input', function(e) {
                let value = this.value.replace(/\D/g, '');
                if (value !== '') {
                    value = parseInt(value, 10).toLocaleString('id-ID');
                }
                this.value = value;
            });
        });

        // Toggle API Keys / Passwords Visibility
        document.querySelectorAll('.btn-toggle-key-visibility').forEach(btn => {
            btn.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const input = document.getElementById(targetId);
                if (!input) return;

                const isPassword = input.getAttribute('type') === 'password';
                input.setAttribute('type', isPassword ? 'text' : 'password');
                const icon = this.querySelector('.material-symbols-outlined');
                if (icon) icon.textContent = isPassword ? 'visibility_off' : 'visibility';
            });
        });

        // Midtrans Mode Toggle Confirmation (Sandbox <-> Production)
        const toggleMidtransProduction = document.getElementById('toggle-midtrans-production');
        if (toggleMidtransProduction) {
            toggleMidtransProduction.addEventListener('change', function(e) {
                const targetIsProduction = this.checked;
                // Temporarily revert state while modal is open
                this.checked = !targetIsProduction;

                if (targetIsProduction) {
                    Swal.fire({
                        html: `
                            <div class="text-center">
                                <div class="w-16 h-16 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center mx-auto mb-3.5 border border-emerald-200/60 shadow-md shadow-emerald-500/10">
                                    <span class="material-symbols-outlined text-[34px]">verified</span>
                                </div>
                                <h3 class="text-lg font-bold text-slate-800 mb-1">Aktifkan Mode Production (Live)?</h3>
                                <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-100/80 text-emerald-800 text-[11px] font-bold mb-3.5">
                                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Menerima Transaksi Uang Nyata
                                </div>
                                <div class="p-3.5 bg-slate-50 border border-slate-200/80 rounded-xl text-left text-xs text-slate-600 leading-relaxed space-y-2 mb-1">
                                    <div class="flex items-start gap-2">
                                        <span class="material-symbols-outlined text-emerald-600 text-[16px] mt-0.5 shrink-0">check_circle</span>
                                        <span>Konsumen akan memproses pembayaran nyata (uang asli).</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="material-symbols-outlined text-amber-600 text-[16px] mt-0.5 shrink-0">info</span>
                                        <span>Pastikan Merchant ID, Client Key, dan Server Key Production Anda sudah benar.</span>
                                    </div>
                                </div>
                            </div>
                        `,
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Aktifkan Production',
                        cancelButtonText: 'Batal',
                        buttonsStyling: false,
                        customClass: {
                            popup: 'rounded-3xl p-6 border border-slate-100 shadow-2xl max-w-md',
                            actions: 'gap-3 w-full justify-center mt-3',
                            confirmButton: 'px-5 py-2.5 rounded-xl font-bold text-xs bg-emerald-600 text-white hover:bg-emerald-700 active:scale-95 shadow-md shadow-emerald-600/20 transition-all cursor-pointer',
                            cancelButton: 'px-5 py-2.5 rounded-xl font-bold text-xs bg-slate-100 text-slate-700 hover:bg-slate-200 active:scale-95 transition-all cursor-pointer'
                        },
                        reverseButtons: true,
                        focusCancel: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            toggleMidtransProduction.checked = true;
                            updateMidtransUiState(true);
                            if (typeof Toast !== 'undefined') {
                                Toast.fire({
                                    icon: 'success',
                                    title: 'Mode diubah ke Production (Live). Jangan lupa simpan perubahan!'
                                });
                            }
                        }
                    });
                } else {
                    Swal.fire({
                        html: `
                            <div class="text-center">
                                <div class="w-16 h-16 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center mx-auto mb-3.5 border border-amber-200/60 shadow-md shadow-amber-500/10">
                                    <span class="material-symbols-outlined text-[34px]">science</span>
                                </div>
                                <h3 class="text-lg font-bold text-slate-800 mb-1">Beralih ke Mode Sandbox (Testing)?</h3>
                                <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-100/80 text-amber-800 text-[11px] font-bold mb-3.5">
                                    <span class="w-2 h-2 rounded-full bg-amber-500"></span> Simulasi Uang Virtual
                                </div>
                                <div class="p-3.5 bg-slate-50 border border-slate-200/80 rounded-xl text-left text-xs text-slate-600 leading-relaxed space-y-2 mb-1">
                                    <div class="flex items-start gap-2">
                                        <span class="material-symbols-outlined text-amber-600 text-[16px] mt-0.5 shrink-0">check_circle</span>
                                        <span>Transaksi bersifat simulasi untuk keperluan uji coba fitur.</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="material-symbols-outlined text-blue-600 text-[16px] mt-0.5 shrink-0">credit_card</span>
                                        <span>Tidak ada pemotongan saldo rekening atau kartu kredit asli pelanggan.</span>
                                    </div>
                                </div>
                            </div>
                        `,
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Beralih ke Sandbox',
                        cancelButtonText: 'Batal',
                        buttonsStyling: false,
                        customClass: {
                            popup: 'rounded-3xl p-6 border border-slate-100 shadow-2xl max-w-md',
                            actions: 'gap-3 w-full justify-center mt-3',
                            confirmButton: 'px-5 py-2.5 rounded-xl font-bold text-xs bg-amber-600 text-white hover:bg-amber-700 active:scale-95 shadow-md shadow-amber-600/20 transition-all cursor-pointer',
                            cancelButton: 'px-5 py-2.5 rounded-xl font-bold text-xs bg-slate-100 text-slate-700 hover:bg-slate-200 active:scale-95 transition-all cursor-pointer'
                        },
                        reverseButtons: true,
                        focusCancel: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            toggleMidtransProduction.checked = false;
                            updateMidtransUiState(false);
                            if (typeof Toast !== 'undefined') {
                                Toast.fire({
                                    icon: 'info',
                                    title: 'Mode diubah ke Sandbox (Testing). Jangan lupa simpan perubahan!'
                                });
                            }
                        }
                    });
                }
            });
        }

        function updateMidtransUiState(isProd) {
            const headerBadge = document.getElementById('header-mode-badge');
            const activeModeBadge = document.getElementById('badge-active-mode');
            const cardSandbox = document.getElementById('card-midtrans-sandbox');
            const cardProd = document.getElementById('card-midtrans-prod');
            const badgeSandbox = document.getElementById('badge-sandbox-status');
            const badgeProd = document.getElementById('badge-prod-status');

            if (isProd) {
                if (headerBadge) {
                    headerBadge.className = 'px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-700 uppercase';
                    headerBadge.textContent = 'Production (Live)';
                }
                if (activeModeBadge) {
                    activeModeBadge.className = 'px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-600 text-white uppercase';
                    activeModeBadge.textContent = 'LIVE / PRODUCTION';
                }
                if (cardSandbox) {
                    cardSandbox.className = 'p-4 rounded-xl border border-outline-variant/30 bg-surface-container-low opacity-75 space-y-3 transition-all';
                }
                if (cardProd) {
                    cardProd.className = 'p-4 rounded-xl border border-emerald-500/80 bg-emerald-50/20 ring-1 ring-emerald-500/30 space-y-3 transition-all';
                }
                if (badgeSandbox) badgeSandbox.classList.add('hidden');
                if (badgeProd) badgeProd.classList.remove('hidden');
            } else {
                if (headerBadge) {
                    headerBadge.className = 'px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 uppercase';
                    headerBadge.textContent = 'Sandbox (Testing)';
                }
                if (activeModeBadge) {
                    activeModeBadge.className = 'px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500 text-white uppercase';
                    activeModeBadge.textContent = 'TESTING / SANDBOX';
                }
                if (cardSandbox) {
                    cardSandbox.className = 'p-4 rounded-xl border border-amber-400/80 bg-amber-50/20 ring-1 ring-amber-400/30 space-y-3 transition-all';
                }
                if (cardProd) {
                    cardProd.className = 'p-4 rounded-xl border border-outline-variant/30 bg-surface-container-low opacity-75 space-y-3 transition-all';
                }
                if (badgeSandbox) badgeSandbox.classList.remove('hidden');
                if (badgeProd) badgeProd.classList.add('hidden');
            }
        }



        // Modals & Elements
        const modal = document.getElementById('maintenance-confirm-modal');
        const modalTitle = document.getElementById('modal-title');
        const modalSubtitle = document.getElementById('modal-subtitle');
        const modalDesc = document.getElementById('modal-desc');
        const modalIconBg = document.getElementById('modal-icon-bg');
        const modalIcon = document.getElementById('modal-icon');
        const btnCancel = document.getElementById('modal-btn-cancel');
        const btnConfirm = document.getElementById('modal-btn-confirm');
        
        const configForm = document.getElementById('config-form');
        const btnSaveConfig = document.getElementById('btn-save-config');

        const bankModal = document.getElementById('bank-modal');
        const bankModalTitle = document.getElementById('bank-modal-title');
        const bankAccountForm = document.getElementById('bank-account-form');
        const bankFormMethod = document.getElementById('bank-form-method');
        const bankIdInput = document.getElementById('bank-id');
        const bankNameInput = document.getElementById('bank-name');
        const bankNumberInput = document.getElementById('bank-account-number');
        const bankHolderInput = document.getElementById('bank-account-holder');
        const bankPrimaryCheckbox = document.getElementById('bank-is-primary');
        const bankBtnText = document.getElementById('bank-btn-text');
        const btnAddBank = document.getElementById('btn-add-bank');
        const btnCloseBankModal = document.getElementById('btn-close-bank-modal');
        const btnCancelBankModal = document.getElementById('btn-cancel-bank-modal');
        const bankActionForm = document.getElementById('bank-action-form');
        const bankActionMethod = document.getElementById('bank-action-method');

        let currentActionType = null; // 'toggle', 'save', 'bank_delete', 'bank_primary'
        let pendingCheckbox = null;
        let intendedChecked = false;
        let pendingBankActionUrl = null;
        let pendingBankActionMethod = null;

        // ----------------------------------------------------
        // Bank Account Modal (Add / Edit)
        // ----------------------------------------------------
        function openBankModal(isEdit = false, data = {}) {
            if (isEdit) {
                bankModalTitle.textContent = 'Edit Rekening Perusahaan';
                bankAccountForm.action = '{{ url("admin/rekening-perusahaan") }}/' + data.id;
                bankFormMethod.value = 'PUT';
                bankIdInput.value = data.id || '';
                bankNameInput.value = data.bank || '';
                bankNumberInput.value = data.number || '';
                bankHolderInput.value = data.holder || '';
                bankPrimaryCheckbox.checked = data.isPrimary == '1';
                bankBtnText.textContent = 'Perbarui Rekening';
            } else {
                bankModalTitle.textContent = 'Tambah Rekening Perusahaan';
                bankAccountForm.action = '{{ route("admin.rekening-perusahaan.store") }}';
                bankFormMethod.value = 'POST';
                bankIdInput.value = '';
                bankNameInput.value = '';
                bankNumberInput.value = '';
                bankHolderInput.value = '';
                bankPrimaryCheckbox.checked = false;
                bankBtnText.textContent = 'Simpan Rekening';
            }
            bankModal.classList.remove('hidden');
        }

        function closeBankModal() {
            bankModal.classList.add('hidden');
        }

        if (bankNumberInput) {
            bankNumberInput.addEventListener('input', function(e) {
                this.value = this.value.replace(/[^0-9\s-]/g, '').slice(0, 20);
            });
        }

        if (bankHolderInput) {
            bankHolderInput.addEventListener('input', function(e) {
                if (this.value.length > 30) {
                    this.value = this.value.slice(0, 30);
                }
            });
        }

        if (btnAddBank) {
            btnAddBank.addEventListener('click', () => openBankModal(false));
        }
        if (btnCloseBankModal) {
            btnCloseBankModal.addEventListener('click', closeBankModal);
        }
        if (btnCancelBankModal) {
            btnCancelBankModal.addEventListener('click', closeBankModal);
        }

        // Edit Bank Buttons
        document.querySelectorAll('.btn-edit-bank').forEach(btn => {
            btn.addEventListener('click', function() {
                openBankModal(true, {
                    id: this.dataset.id,
                    bank: this.dataset.bank,
                    number: this.dataset.number,
                    holder: this.dataset.holder,
                    isPrimary: this.dataset.primary,
                });
            });
        });

        // Delete Bank Buttons (with confirmation popup)
        document.querySelectorAll('.btn-delete-bank').forEach(btn => {
            btn.addEventListener('click', function() {
                const bankId = this.dataset.id;
                const bankName = this.dataset.bank;
                const bankNumber = this.dataset.number;

                currentActionType = 'bank_delete';
                pendingBankActionUrl = '{{ url("admin/rekening-perusahaan") }}/' + bankId;
                pendingBankActionMethod = 'DELETE';

                modalTitle.textContent = 'Konfirmasi Hapus Rekening';
                modalSubtitle.textContent = `${bankName} - ${bankNumber}`;
                modalIconBg.className = 'w-12 h-12 rounded-xl bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0';
                modalIcon.textContent = 'delete';
                modalDesc.textContent = `Apakah Anda yakin ingin menghapus rekening ${bankName} (${bankNumber}) dari daftar rekening perusahaan? Tindakan ini tidak dapat dibatalkan.`;
                btnConfirm.className = 'px-5 py-2.5 bg-error text-white rounded-xl text-xs font-bold hover:opacity-90 transition-all shadow-sm flex items-center gap-1.5';
                btnConfirm.innerHTML = '<span class="material-symbols-outlined text-[16px]">delete</span><span>Ya, Hapus Rekening</span>';
                btnConfirm.disabled = false;
                modal.classList.remove('hidden');
            });
        });

        // Set Primary Bank Buttons (with confirmation popup)
        document.querySelectorAll('.btn-set-primary').forEach(btn => {
            btn.addEventListener('click', function() {
                const bankId = this.dataset.id;
                const bankName = this.dataset.bank;
                const bankNumber = this.dataset.number;

                currentActionType = 'bank_primary';
                pendingBankActionUrl = '{{ url("admin/rekening-perusahaan") }}/' + bankId + '/set-primary';
                pendingBankActionMethod = 'POST';

                modalTitle.textContent = 'Jadikan Rekening Utama';
                modalSubtitle.textContent = `${bankName} - ${bankNumber}`;
                modalIconBg.className = 'w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center flex-shrink-0';
                modalIcon.textContent = 'verified';
                modalDesc.textContent = `Apakah Anda yakin ingin menetapkan rekening ${bankName} (${bankNumber}) sebagai rekening utama perusahaan? Rekening ini akan diprioritaskan untuk seluruh operasional platform.`;
                btnConfirm.className = 'px-5 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5';
                btnConfirm.innerHTML = '<span class="material-symbols-outlined text-[16px]">check</span><span>Ya, Jadikan Utama</span>';
                btnConfirm.disabled = false;
                modal.classList.remove('hidden');
            });
        });

        // ----------------------------------------------------
        // Maintenance Toggles Confirmation
        // ----------------------------------------------------
        const maintenanceConfig = {
            'allow_mitra_registration': {
                name: 'Pendaftaran Mitra Terapis',
                onText: 'Apakah Anda yakin ingin MEMBUKA kembali pendaftaran mitra terapis baru? Calon mitra terapis akan dapat mendaftar.',
                offText: 'Apakah Anda yakin ingin MENUTUP pendaftaran mitra terapis baru? Calon mitra terapis tidak akan dapat mendaftar sementara waktu.',
            },
            'allow_konsumen_registration': {
                name: 'Pendaftaran Konsumen',
                onText: 'Apakah Anda yakin ingin MEMBUKA kembali pendaftaran akun konsumen baru? Calon konsumen dapat mendaftar akun.',
                offText: 'Apakah Anda yakin ingin MENUTUP pendaftaran akun konsumen baru? Calon konsumen tidak akan dapat membuat akun baru.',
            },
            'allow_konsumen_order': {
                name: 'Order Layanan Konsumen (Booking)',
                onText: 'Apakah Anda yakin ingin MENGAKTIFKAN kembali pemesanan layanan untuk konsumen?',
                offText: 'Apakah Anda yakin ingin MENONAKTIFKAN pemesanan layanan? Konsumen tidak akan dapat melakukan booking dan pembayaran pesanan baru.',
            },
            'maintenance_konsumen_total': {
                name: 'Mode Pemeliharaan Total Konsumen',
                onText: '⚠️ PERINGATAN KRUSIAL: Mengaktifkan Mode Pemeliharaan Total akan MENUTUP seluruh akses website portal konsumen dan menampilkan halaman Maintenance. Anda yakin ingin melanjutkan?',
                offText: 'Apakah Anda yakin ingin MENONAKTIFKAN Mode Pemeliharaan Total dan membuka kembali website konsumen untuk publik?',
            }
        };

        const maintenanceCheckboxes = document.querySelectorAll('input[name="allow_mitra_registration"], input[name="allow_konsumen_registration"], input[name="allow_konsumen_order"], input[name="maintenance_konsumen_total"]');

        maintenanceCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function(e) {
                const fieldName = this.getAttribute('name');
                const willBeChecked = this.checked;
                const config = maintenanceConfig[fieldName];

                if (!config) return;

                currentActionType = 'toggle';
                pendingCheckbox = this;
                intendedChecked = willBeChecked;

                modalTitle.textContent = 'Konfirmasi Perubahan Status';
                modalSubtitle.textContent = config.name;

                const isWarning = (fieldName === 'maintenance_konsumen_total' && willBeChecked) || 
                                  (fieldName === 'allow_konsumen_order' && !willBeChecked);

                if (isWarning) {
                    modalIconBg.className = 'w-12 h-12 rounded-xl bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0';
                    modalIcon.textContent = 'report_problem';
                    btnConfirm.className = 'px-5 py-2.5 bg-error text-white rounded-xl text-xs font-bold hover:opacity-90 transition-all shadow-sm flex items-center gap-1.5';
                } else {
                    modalIconBg.className = 'w-12 h-12 rounded-xl bg-purple-100 text-primary flex items-center justify-center flex-shrink-0';
                    modalIcon.textContent = willBeChecked ? 'toggle_on' : 'toggle_off';
                    btnConfirm.className = 'px-5 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5';
                }

                modalDesc.textContent = willBeChecked ? config.onText : config.offText;
                btnConfirm.innerHTML = '<span class="material-symbols-outlined text-[16px]">check</span><span>Ya, Lanjutkan</span>';
                btnConfirm.disabled = false;
                modal.classList.remove('hidden');
            });
        });

        // ----------------------------------------------------
        // "Simpan Perubahan" button click handler
        // ----------------------------------------------------
        if (btnSaveConfig) {
            btnSaveConfig.addEventListener('click', function(e) {
                e.preventDefault();

                // Validate form first
                if (configForm && !configForm.reportValidity()) {
                    return;
                }

                currentActionType = 'save';
                modalTitle.textContent = 'Konfirmasi Simpan Konfigurasi';
                modalSubtitle.textContent = 'Simpan Perubahan Sistem';
                modalIconBg.className = 'w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center flex-shrink-0';
                modalIcon.textContent = 'save';
                modalDesc.textContent = 'Apakah Anda yakin ingin menyimpan seluruh pengaturan konfigurasi, biaya & komisi, kontak, dan pesan pemeliharaan ini?';
                btnConfirm.className = 'px-5 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5';
                btnConfirm.innerHTML = '<span class="material-symbols-outlined text-[16px]">check</span><span>Ya, Simpan Perubahan</span>';
                btnConfirm.disabled = false;
                modal.classList.remove('hidden');
            });
        }

        function closeModal() {
            modal.classList.add('hidden');
        }

        btnCancel.addEventListener('click', function() {
            if (currentActionType === 'toggle' && pendingCheckbox) {
                pendingCheckbox.checked = !intendedChecked;
                updateBadge(pendingCheckbox);
            }
            closeModal();
        });

        btnConfirm.addEventListener('click', function() {
            if (currentActionType === 'toggle') {
                if (pendingCheckbox) {
                    pendingCheckbox.checked = intendedChecked;
                    updateBadge(pendingCheckbox);
                }
                closeModal();
            } else if (currentActionType === 'save') {
                btnConfirm.disabled = true;
                btnConfirm.innerHTML = '<span class="material-symbols-outlined text-[16px] animate-spin">progress_activity</span> Menyimpan...';
                if (configForm) {
                    configForm.submit();
                }
            } else if (currentActionType === 'bank_delete' || currentActionType === 'bank_primary') {
                btnConfirm.disabled = true;
                btnConfirm.innerHTML = '<span class="material-symbols-outlined text-[16px] animate-spin">progress_activity</span> Memproses...';
                if (bankActionForm && pendingBankActionUrl) {
                    bankActionForm.action = pendingBankActionUrl;
                    bankActionMethod.value = pendingBankActionMethod || 'POST';
                    bankActionForm.submit();
                }
            }
        });

        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                if (currentActionType === 'toggle' && pendingCheckbox) {
                    pendingCheckbox.checked = !intendedChecked;
                    updateBadge(pendingCheckbox);
                }
                closeModal();
            }
        });

        function updateBadge(checkbox) {
            const parentCard = checkbox.closest('.p-4') || checkbox.closest('div');
            if (!parentCard) return;

            const badge = parentCard.querySelector('.rounded-full.text-\\[10px\\]');
            if (!badge) return;

            const fieldName = checkbox.getAttribute('name');
            const isChecked = checkbox.checked;

            if (fieldName === 'allow_mitra_registration' || fieldName === 'allow_konsumen_registration') {
                if (isChecked) {
                    badge.className = 'px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700';
                    badge.textContent = 'DIBUKA (ON)';
                } else {
                    badge.className = 'px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-700';
                    badge.textContent = 'DITUTUP (OFF)';
                }
            } else if (fieldName === 'allow_konsumen_order') {
                if (isChecked) {
                    badge.className = 'px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700';
                    badge.textContent = 'AKTIF (ON)';
                } else {
                    badge.className = 'px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800';
                    badge.textContent = 'MAINTENANCE (OFF)';
                }
            } else if (fieldName === 'maintenance_konsumen_total') {
                if (isChecked) {
                    badge.className = 'px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-600 text-white animate-pulse';
                    badge.textContent = 'AKTIF (MAINTENANCE)';
                } else {
                    badge.className = 'px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-200 text-slate-700';
                    badge.textContent = 'NONAKTIF (NORMAL)';
                }
            }
        }
    });
</script>
@endsection