<?php
// public/index.php - Complete Router


$userRole = strtolower($user['role'] ?? 'rt');
$isSuperAdmin = ($userRole === 'super_admin');

// ------------------------------------------------------------------
// FITUR: Filter Rekonsiliasi Bulanan Periode Tanggal
// ------------------------------------------------------------------
$tglAwal  = $_GET['tgl_awal'] ?? date('Y-m-01');
$tglAkhir = $_GET['tgl_akhir'] ?? date('Y-m-t');

// Extract Format "YYYY-MM" dari tgl_awal untuk mencocokkan teks [Periode: YYYY-MM]
$periodeTarget = date('Y-m', strtotime($tglAwal));
$periodeWildcard = "%[Periode: {$periodeTarget}%";

// ------------------------------------------------------------------
// AUTO-SYNC: Masukkan seluruh user (Warga + Admin) ke tabel kewajiban_warga
// ------------------------------------------------------------------
try {
    // 1. Sync Iuran IPL
    $stmtSyncIPL = $db->prepare("
        INSERT IGNORE INTO kewajiban_warga (user_id, jenis_iuran, periode, status_pembayaran, updated_at)
        SELECT u.id, 'IPL', :periode1, 'belum_bayar', NOW()
        FROM users u
        WHERE NOT EXISTS (
            SELECT 1 FROM kewajiban_warga kw 
            WHERE kw.user_id = u.id AND kw.jenis_iuran = 'IPL' AND kw.periode = :periode2
        )
    ");
    $stmtSyncIPL->execute([':periode1' => $periodeTarget, ':periode2' => $periodeTarget]);

    // 2. Sync Iuran Kas Bulanan
    $stmtSyncKas = $db->prepare("
        INSERT IGNORE INTO kewajiban_warga (user_id, jenis_iuran, periode, status_pembayaran, updated_at)
        SELECT u.id, 'Kas Bulanan', :periode1, 'belum_bayar', NOW()
        FROM users u
        WHERE NOT EXISTS (
            SELECT 1 FROM kewajiban_warga kw 
            WHERE kw.user_id = u.id AND kw.jenis_iuran = 'Kas Bulanan' AND kw.periode = :periode2
        )
    ");
    $stmtSyncKas->execute([':periode1' => $periodeTarget, ':periode2' => $periodeTarget]);
} catch (\PDOException $e) {
    // Pengamanan jika tabel kewajiban_warga belum memiliki UNIQUE Constraint
}

// Ambil statistik & pending task dari database
$laporanPending  = $db->query("SELECT COUNT(*) FROM reports WHERE status = 'pending'")->fetchColumn() ?: 0;
$suratPending    = $db->query("SELECT COUNT(*) FROM letters WHERE status = 'pengajuan'")->fetchColumn() ?: 0;
$iuranPending    = $db->query("SELECT COUNT(*) FROM kas_book WHERE status_verifikasi = 'pending'")->fetchColumn() ?: 0;

// Query semua data warga untuk tabel utama
$daftarWarga = $db->query("SELECT * FROM users ORDER BY id ASC")->fetchAll() ?: [];

// ------------------------------------------------------------------
// QUERY RINCIAN REKONSILIASI PER USER
// ------------------------------------------------------------------
$queryKewajiban = "
    SELECT 
        u.id, u.nama, u.nik, u.rt, u.rw, u.no_hp, u.role,
        COALESCE(SUM(CASE WHEN k.tipe_transaksi = 'masuk' AND k.status_verifikasi = 'disetujui' AND k.kategori LIKE '%IPL%' THEN k.jumlah ELSE 0 END), 0) AS total_ipl,
        COALESCE(SUM(CASE WHEN k.tipe_transaksi = 'masuk' AND k.status_verifikasi = 'disetujui' AND (k.kategori LIKE '%Kas Bulanan%' OR k.kategori LIKE '%Iuran Kas%') THEN k.jumlah ELSE 0 END), 0) AS total_kas,
        COALESCE(SUM(CASE WHEN k.tipe_transaksi = 'masuk' AND k.status_verifikasi = 'disetujui' AND k.kategori LIKE '%Sukarela%' THEN k.jumlah ELSE 0 END), 0) AS total_sukarela,
        COALESCE(SUM(CASE WHEN k.tipe_transaksi = 'masuk' AND k.status_verifikasi = 'disetujui' THEN k.jumlah ELSE 0 END), 0) AS total_transaksi
    FROM users u
    LEFT JOIN kas_book k ON k.user_id = u.id AND (
        (k.keterangan LIKE :periode_str)
        OR (DATE(k.created_at) BETWEEN :tgl_awal AND :tgl_akhir AND (k.keterangan NOT LIKE '%[Periode:%' OR k.keterangan IS NULL))
    )
    GROUP BY u.id, u.nama, u.nik, u.rt, u.rw, u.no_hp, u.role
    ORDER BY u.nama ASC
";
$stmtKewajiban = $db->prepare($queryKewajiban);
$stmtKewajiban->execute([
    ':periode_str' => $periodeWildcard,
    ':tgl_awal'    => $tglAwal, 
    ':tgl_akhir'   => $tglAkhir
]);
$daftarKewajibanWarga = $stmtKewajiban->fetchAll() ?: [];

$totalWarga = count($daftarKewajibanWarga);

// METRIK KEWAJIBAN & SUKARELA
$nominalIPL        = 100000;
$nominalKasBulanan = 50000; 
$totalTargetWajib  = $nominalIPL + $nominalKasBulanan;

$targetTotalWajibLingkungan = (int)$totalWarga * $totalTargetWajib;

// REKONSILIASI PERIODE TRANSAKSI
$stmtTotalWajib = $db->prepare("
    SELECT SUM(jumlah) FROM kas_book 
    WHERE tipe_transaksi = 'masuk' 
    AND status_verifikasi = 'disetujui' 
    AND (kategori LIKE '%IPL%' OR kategori LIKE '%Kas%' OR kategori LIKE '%Iuran%')
    AND (
        (keterangan LIKE :periode_str)
        OR (DATE(created_at) BETWEEN :tgl_awal AND :tgl_akhir AND (keterangan NOT LIKE '%[Periode:%' OR keterangan IS NULL))
    )
");
$stmtTotalWajib->execute([
    ':periode_str' => $periodeWildcard,
    ':tgl_awal'    => $tglAwal, 
    ':tgl_akhir'   => $tglAkhir
]);
$totalTerbayarWajib = $stmtTotalWajib->fetchColumn() ?: 0;

$stmtTotalSukarela = $db->prepare("
    SELECT SUM(jumlah) FROM kas_book 
    WHERE tipe_transaksi = 'masuk' 
    AND status_verifikasi = 'disetujui' 
    AND kategori LIKE '%Sukarela%'
    AND (
        (keterangan LIKE :periode_str)
        OR (DATE(created_at) BETWEEN :tgl_awal AND :tgl_akhir AND (keterangan NOT LIKE '%[Periode:%' OR keterangan IS NULL))
    )
");
$stmtTotalSukarela->execute([
    ':periode_str' => $periodeWildcard,
    ':tgl_awal'    => $tglAwal, 
    ':tgl_akhir'   => $tglAkhir
]);
$totalSukarela = $stmtTotalSukarela->fetchColumn() ?: 0;

// SETUP BASE URL & QR VERIFIKASI
$protocol = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? "https" : "http";
$host     = preg_replace('/[^a-zA-Z0-9\.\:-]/', '', $_SERVER['HTTP_HOST'] ?? 'localhost');
$baseUrl  = $protocol . "://" . $host;

// QR Code Laporan Rekonsiliasi Kewajiban
$urlValidasiKewajiban = $baseUrl . "/surat/validasi?type=laporan_kewajiban"
                      . "&tgl_mulai=" . urlencode($tglAwal) 
                      . "&tgl_akhir=" . urlencode($tglAkhir) 
                      . "&pengurus=" . urlencode($user['nama'] ?? 'Admin') 
                      . "&tgl=" . urlencode(date('Y-m-d H:i'));
$qrApiKewajiban = "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=" . urlencode($urlValidasiKewajiban);

// QR Code Laporan Data Warga
$urlValidasiWarga = $baseUrl . "/surat/validasi?type=data_warga"
                  . "&rt=" . urlencode($user['rt'] ?? '-') 
                  . "&rw=" . urlencode($user['rw'] ?? '-') 
                  . "&total=" . count($daftarWarga) 
                  . "&pengurus=" . urlencode($user['nama'] ?? 'Admin') 
                  . "&tgl=" . urlencode(date('Y-m-d H:i'));
$qrApiWarga = "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=" . urlencode($urlValidasiWarga);
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Pengurus - Warga Digital</title>
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- DataTables & jQuery Library -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

    <!-- PDF.js Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script>
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
    </script>

    <style>
        .dataTables_wrapper .dataTables_length select,
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #cbd5e1;
            border-radius: 0.5rem;
            padding: 0.35rem 0.6rem;
            font-size: 0.75rem;
            outline: none;
            background-color: #ffffff;
        }
        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #10b981;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        }
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_paginate {
            font-size: 0.75rem;
            color: #64748b;
            margin-bottom: 0.75rem;
            margin-top: 0.75rem;
        }
        table.dataTable thead th {
            border-bottom: 1px solid #e2e8f0 !important;
            white-space: nowrap;
        }
        table.dataTable.no-footer {
            border-bottom: 1px solid #e2e8f0 !important;
        }

        /* Style Khusus Cetak / Print */
        @media print {
            @page {
                size: A4 landscape;
                margin: 10mm;
            }

            body {
                background-color: #ffffff !important;
                padding: 0 !important;
                color: #000000 !important;
            }

            header, .no-print, .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate, .action-col {
                display: none !important;
            }

            .hide-on-print {
                display: none !important;
            }

            .print-container {
                box-shadow: none !important;
                border: none !important;
                padding: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            table {
                font-size: 9px !important;
                width: 100% !important;
                border-collapse: collapse !important;
            }

            th, td {
                padding: 4px 6px !important;
                border: 1px solid #333333 !important;
            }

            th {
                background-color: #f1f5f9 !important;
                color: #000000 !important;
            }

            .print-header {
                display: block !important;
                margin-bottom: 15px;
                text-align: center;
            }

            .print-qr-footer {
                display: flex !important;
                justify-content: flex-end;
                align-items: center;
                margin-top: 20px;
                page-break-inside: avoid;
            }
        }

        .print-header, .print-qr-footer {
            display: none;
        }
    </style>
</head>
<body class="bg-slate-100 text-slate-800 font-sans min-h-screen pb-12">

    <!-- Header Panel Pengurus -->
    <header class="bg-slate-900 text-white p-6 rounded-b-3xl shadow-lg no-print">
        <div class="max-w-6xl mx-auto flex justify-between items-center">
            <div>
                <div class="flex items-center gap-2">
                    <span class="text-[10px] bg-blue-600 px-2.5 py-0.5 rounded-full uppercase font-bold tracking-wider">
                        <?= htmlspecialchars($userRole, ENT_QUOTES, 'UTF-8') ?>
                    </span>
                    <?php if (isset($_SESSION['view_mode'])): ?>
                        <span class="text-[10px] bg-emerald-600 px-2.5 py-0.5 rounded-full uppercase font-bold">
                            Panel Pengurus
                        </span>
                    <?php endif; ?>
                </div>
                <h1 class="text-xl font-bold mt-1">Selamat Datang, <?= htmlspecialchars($user['nama'] ?? 'Pengurus', ENT_QUOTES, 'UTF-8') ?>! 👋</h1>
                <p class="text-xs text-slate-400 mt-0.5">Wilayah Tugas: RT <?= htmlspecialchars($user['rt'] ?? '-', ENT_QUOTES, 'UTF-8') ?> / RW <?= htmlspecialchars($user['rw'] ?? '-', ENT_QUOTES, 'UTF-8') ?></p>
            </div>
            <div class="flex items-center gap-2">
                <a href="/switch-mode" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs px-3.5 py-2 rounded-xl font-medium transition shadow">
                    🔄 Switch Mode Warga
                </a>
                <a href="/logout" class="bg-slate-800 hover:bg-slate-700 text-xs px-3.5 py-2 rounded-xl font-medium transition border border-slate-700">
                    Keluar
                </a>
            </div>
        </div>
    </header>

    <main class="max-w-6xl mx-auto px-4 mt-6 space-y-6">

        <!-- Ringkasan Tugas Pengurus (Pending Tasks) -->
        <div class="no-print">
            <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500 mb-3 px-1">Tugas & Antrean Perlu Verifikasi</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-slate-500">Laporan Baru</p>
                        <p class="text-xl font-extrabold text-amber-600 mt-0.5"><?= (int)$laporanPending ?> <span class="text-[10px] font-normal text-slate-400">pending</span></p>
                    </div>
                    <span class="text-2xl">📢</span>
                </div>

                <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-slate-500">Pengajuan Surat</p>
                        <p class="text-xl font-extrabold text-blue-600 mt-0.5"><?= (int)$suratPending ?> <span class="text-[10px] font-normal text-slate-400">pending</span></p>
                    </div>
                    <span class="text-2xl">📄</span>
                </div>

                <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-slate-500">Verifikasi Iuran</p>
                        <p class="text-xl font-extrabold text-emerald-600 mt-0.5"><?= (int)$iuranPending ?> <span class="text-[10px] font-normal text-slate-400">pending</span></p>
                    </div>
                    <span class="text-2xl">💳</span>
                </div>

                <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-slate-500">Total Terdaftar</p>
                        <p class="text-xl font-extrabold text-slate-800 mt-0.5"><?= (int)$totalWarga ?> <span class="text-[10px] font-normal text-slate-400">akun</span></p>
                    </div>
                    <span class="text-2xl">👥</span>
                </div>
            </div>
        </div>

        <!-- Modul Rekonsiliasi Kas -->
        <div id="section-kewajiban" class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-5 print-container">
            
            <!-- Header Khusus Cetak Kewajiban -->
            <div class="print-header">
                <h2 class="text-xl font-bold uppercase tracking-wider">LAPORAN REKONSILIASI KEWAJIBAN WARGA & ADMIN</h2>
                <p class="text-sm font-semibold">Periode: <?= date('d/m/Y', strtotime($tglAwal)) ?> s/d <?= date('d/m/Y', strtotime($tglAkhir)) ?> | Wilayah RT <?= htmlspecialchars($user['rt'] ?? '-', ENT_QUOTES, 'UTF-8') ?> / RW <?= htmlspecialchars($user['rw'] ?? '-', ENT_QUOTES, 'UTF-8') ?></p>
                <hr class="my-2 border-black">
            </div>

            <div class="border-b border-slate-100 pb-3 flex flex-col md:flex-row justify-between items-start md:items-center gap-3 no-print">
                <div>
                    <h3 class="font-bold text-slate-800 text-base flex items-center gap-2">
                        ⚖️ Modul Rekonsiliasi Kewajiban Warga & Admin
                    </h3>
                    <p class="text-xs text-slate-500 mt-0.5">Pemantauan setoran IPL, Kas Bulanan, dan Sumbangan Sukarela terintegrasi database.</p>
                </div>
                
                <form method="GET" action="" class="flex items-center gap-2 bg-slate-50 p-2 rounded-xl border border-slate-200 text-xs">
                    <span class="font-semibold text-slate-600">Periode:</span>
                    <input type="date" name="tgl_awal" value="<?= htmlspecialchars($tglAwal, ENT_QUOTES, 'UTF-8') ?>" class="p-1 border rounded bg-white font-mono text-[11px]">
                    <span class="text-slate-400">s/d</span>
                    <input type="date" name="tgl_akhir" value="<?= htmlspecialchars($tglAkhir, ENT_QUOTES, 'UTF-8') ?>" class="p-1 border rounded bg-white font-mono text-[11px]">
                    <button type="submit" class="bg-slate-800 hover:bg-slate-900 text-white px-3 py-1 rounded font-semibold transition">
                        Filter
                    </button>
                    <a href="/kas" class="bg-emerald-800 hover:bg-emerald-900 text-white px-3 py-1 rounded font-semibold transition">
                        Transaksi
                    </a>
                    
                    <button type="button" onclick="cetakSection('section-kewajiban')" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded font-semibold transition flex items-center gap-1 shadow-sm">
                        🖨️ Cetak Laporan
                    </button>
                </form>
            </div>

            <!-- Card Ringkasan Rekonsiliasi -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 no-print">
                <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                    <p class="text-xs font-semibold text-slate-500">Target Kewajiban Wajib</p>
                    <p class="text-lg font-bold text-slate-800 mt-1">
                        Rp <?= number_format($targetTotalWajibLingkungan, 0, ',', '.'); ?>
                    </p>
                    <p class="text-[10px] text-slate-400 mt-1">
                        <?= (int)$totalWarga ?> Akun × Rp <?= number_format($totalTargetWajib, 0, ',', '.'); ?> (IPL + Kas)
                    </p>
                </div>

                <div class="bg-emerald-50 p-4 rounded-xl border border-emerald-200">
                    <p class="text-xs font-semibold text-emerald-700">Realisasi Wajib Periode Ini</p>
                    <p class="text-lg font-bold text-emerald-600 mt-1">Rp <?= number_format($totalTerbayarWajib, 0, ',', '.'); ?></p>
                    <p class="text-[10px] text-emerald-600 mt-1">✓ IPL & Kas disetujui</p>
                </div>

                <div class="bg-purple-50 p-4 rounded-xl border border-purple-200">
                    <p class="text-xs font-semibold text-purple-700">Sumbangan Sukarela</p>
                    <p class="text-lg font-bold text-purple-600 mt-1">Rp <?= number_format($totalSukarela, 0, ',', '.'); ?></p>
                    <p class="text-[10px] text-purple-500 mt-1">🎁 Donasi optional masuk</p>
                </div>

                <?php $selisihTunggakan = $targetTotalWajibLingkungan - $totalTerbayarWajib; ?>
                <div class="<?= $selisihTunggakan > 0 ? 'bg-rose-50 border-rose-200' : 'bg-blue-50 border-blue-200' ?> p-4 rounded-xl border">
                    <p class="text-xs font-semibold <?= $selisihTunggakan > 0 ? 'text-rose-700' : 'text-blue-700' ?>">Total Tunggakan Periode</p>
                    <p class="text-lg font-bold <?= $selisihTunggakan > 0 ? 'text-rose-600' : 'text-blue-600' ?> mt-1">
                        Rp <?= number_format(max(0, $selisihTunggakan), 0, ',', '.'); ?>
                    </p>
                    <p class="text-[10px] <?= $selisihTunggakan > 0 ? 'text-rose-500' : 'text-blue-500' ?> mt-1">
                        <?= $selisihTunggakan > 0 ? '⚠️ Terdeteksi tunggakan' : '🎉 Kewajiban seimbang' ?>
                    </p>
                </div>
            </div>

            <!-- Tabel Monitoring Status Kewajiban -->
            <div class="pt-2">
                <h4 class="font-bold text-xs uppercase text-slate-500 tracking-wider mb-3 no-print">
                    Monitoring Kewajiban Seluruh Pengguna (Periode: <?= date('d/m/Y', strtotime($tglAwal)) ?> - <?= date('d/m/Y', strtotime($tglAkhir)) ?>)
                </h4>
                <div class="overflow-x-auto">
                    <table id="tableKewajiban" class="w-full text-xs text-left text-gray-700 border-collapse">
                        <thead class="bg-slate-100 text-slate-700 uppercase font-semibold border-b">
                            <tr>
                                <th class="p-2.5 border">No</th>
                                <th class="p-2.5 border">Nama Pengguna</th>
                                <th class="p-2.5 border text-center">RT / RW</th>
                                <th class="p-2.5 border text-right">IPL (Wajib)</th>
                                <th class="p-2.5 border text-right">Kas Bulanan (Wajib)</th>
                                <th class="p-2.5 border text-right text-purple-700 bg-purple-50/50">Sukarela (Optional)</th>
                                <th class="p-2.5 border text-center">Indikator Kewajiban</th>
                                <th class="p-2.5 border text-center action-col">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $noK = 1; foreach ($daftarKewajibanWarga as $kw): ?>
                            <?php 
                                $bayarIpl  = (float)$kw['total_ipl'];
                                $bayarKas  = (float)$kw['total_kas'];
                                $sukarela  = (float)$kw['total_sukarela'];
                                $roleUser  = strtolower($kw['role'] ?? 'warga');
                                $isAdmin   = in_array($roleUser, ['rt', 'rw', 'bendahara', 'super_admin', 'satpam']);

                                $iplLunas = $bayarIpl >= $nominalIPL;
                                $kasLunas = $bayarKas >= $nominalKasBulanan;

                                if ($iplLunas && $kasLunas) {
                                    $statusBadge = '<span class="px-2.5 py-0.5 rounded-full text-[10px] font-extrabold bg-emerald-100 text-emerald-800 border border-emerald-300">LUNAS</span>';
                                } elseif ($iplLunas || $kasLunas) {
                                    $statusBadge = '<span class="px-2.5 py-0.5 rounded-full text-[10px] font-extrabold bg-amber-100 text-amber-800 border border-amber-300">SEBAGIAN</span>';
                                } else {
                                    $statusBadge = '<span class="px-2.5 py-0.5 rounded-full text-[10px] font-extrabold bg-rose-100 text-rose-800 border border-rose-300">MENUNGGAK</span>';
                                }

                                $noHp = $kw['no_hp'] ?? '';
                                if (substr($noHp, 0, 1) === '0') {
                                    $noHp = '62' . substr($noHp, 1);
                                }
                                $pesanWA = "Halo Bpk/Ibu *" . ($kw['nama'] ?? '') . "*,\n\nMengingatkan kembali kewajiban iuran IPL & Kas Bulanan periode *" . date('d/m/Y', strtotime($tglAwal)) . " - " . date('d/m/Y', strtotime($tglAkhir)) . "* yang masih terdeteksi menunggak.\n\nMohon lakukan pembayaran atau konfirmasi melalui sistem warga. Terima kasih.";
                                $linkWA = "https://wa.me/" . $noHp . "?text=" . urlencode($pesanWA);
                            ?>
                            <tr class="border-b hover:bg-slate-50">
                                <td class="p-2.5 border text-center"><?= $noK++; ?></td>
                                <td class="p-2.5 border font-bold text-slate-800">
                                    <?= htmlspecialchars($kw['nama'], ENT_QUOTES, 'UTF-8'); ?>
                                    <?php if ($isAdmin): ?>
                                        <span class="ml-1 text-[9px] bg-indigo-100 text-indigo-700 px-1.5 py-0.5 rounded uppercase font-extrabold no-print">
                                            <?= htmlspecialchars($roleUser, ENT_QUOTES, 'UTF-8') ?>
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="p-2.5 border text-center"><?= htmlspecialchars($kw['rt'] ?? '-', ENT_QUOTES, 'UTF-8'); ?> / <?= htmlspecialchars($kw['rw'] ?? '-', ENT_QUOTES, 'UTF-8'); ?></td>
                                
                                <td class="p-2.5 border text-right font-mono <?= $iplLunas ? 'text-emerald-600 font-bold' : 'text-slate-500' ?>">
                                    Rp <?= number_format($bayarIpl, 0, ',', '.'); ?>
                                </td>
                                <td class="p-2.5 border text-right font-mono <?= $kasLunas ? 'text-emerald-600 font-bold' : 'text-slate-500' ?>">
                                    Rp <?= number_format($bayarKas, 0, ',', '.'); ?>
                                </td>
                                <td class="p-2.5 border text-right font-mono font-bold text-purple-600 bg-purple-50/20">
                                    Rp <?= number_format($sukarela, 0, ',', '.'); ?>
                                </td>

                                <td class="p-2.5 border text-center">
                                    <?= $statusBadge; ?>
                                </td>
                                
                                <td class="p-2.5 border text-center action-col">
                                    <div class="flex items-center justify-center gap-1.5">
                                        <?php if (!empty($kw['no_hp'])): ?>
                                            <a href="<?= $linkWA ?>" target="_blank" class="bg-emerald-600 hover:bg-emerald-700 text-white text-[10px] px-2 py-1 rounded font-semibold transition flex items-center gap-1 shadow-sm" title="Kirim Reminder WA">
                                                💬 WA
                                            </a>
                                        <?php endif; ?>

                                        <a href="/kas?user_id=<?= (int)$kw['id']; ?>" class="bg-slate-800 hover:bg-slate-900 text-white text-[10px] px-2.5 py-1 rounded font-semibold transition">
                                            🔍 Detail Mutasi
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- QR Code Validasi Keaslian Laporan Rekonsiliasi -->
            <div class="print-qr-footer">
                <div class="text-center">
                    <img src="<?= htmlspecialchars($qrApiKewajiban, ENT_QUOTES, 'UTF-8'); ?>" alt="QR Code Validasi Laporan Rekonsiliasi" class="w-24 h-24 mx-auto mb-1 border p-1 bg-white">
                    <p class="text-[9px] font-bold text-slate-800 leading-tight">
                        Dokumen Laporan Rekonsiliasi Sah.<br>
                        Scan QR untuk verifikasi data digital.
                    </p>
                </div>
            </div>
        </div>

        <!-- Menu Operasional Pengurus -->
        <div class="no-print">
            <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500 mb-3 px-1">Menu Utama Tugas Pengurus</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <a href="/laporan" class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:border-amber-500 transition flex items-start gap-4 group">
                    <div class="w-12 h-12 bg-amber-100 text-amber-600 rounded-2xl flex items-center justify-center text-2xl group-hover:scale-105 transition">📢</div>
                    <div>
                        <h3 class="font-bold text-sm text-slate-800">1. Tanggapi Pengaduan</h3>
                        <p class="text-xs text-slate-500 mt-1">Cek keluhan warga, beri tanggapan resmi, dan perbarui status masalah.</p>
                    </div>
                </a>

                <a href="/surat" class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:border-blue-500 transition flex items-start gap-4 group">
                    <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-2xl group-hover:scale-105 transition">📄</div>
                    <div>
                        <h3 class="font-bold text-sm text-slate-800">2. Persetujuan Surat</h3>
                        <p class="text-xs text-slate-500 mt-1">Verifikasi permohonan surat pengantar warga dan setujui penerbitan.</p>
                    </div>
                </a>

                <a href="/kas" class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:border-emerald-500 transition flex items-start gap-4 group">
                    <div class="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-2xl flex items-center justify-center text-2xl group-hover:scale-105 transition">💳</div>
                    <div>
                        <h3 class="font-bold text-sm text-slate-800">3. Pembukuan & Kas</h3>
                        <p class="text-xs text-slate-500 mt-1">Cek unggahan bukti transfer/QRIS warga dan catat pengeluaran kas.</p>
                    </div>
                </a>
            </div>
        </div>

        <!-- Tabel Utama Data Warga -->
        <div id="section-warga" class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4 print-container">
            
            <!-- Header Khusus Cetak Data Warga -->
            <div class="print-header">
                <h2 class="text-xl font-bold uppercase tracking-wider">LAPORAN DATA WARGA LINGKUNGAN</h2>
                <p class="text-sm font-semibold">Wilayah RT <?= htmlspecialchars($user['rt'] ?? '-', ENT_QUOTES, 'UTF-8') ?> / RW <?= htmlspecialchars($user['rw'] ?? '-', ENT_QUOTES, 'UTF-8') ?> | Dicetak Tanggal: <?= date('d/m/Y') ?></p>
                <hr class="my-2 border-black">
            </div>

            <div class="border-b border-slate-100 pb-3 flex justify-between items-center no-print">
                <div>
                    <h3 class="font-bold text-slate-800 text-base flex items-center gap-2">
                        👥 4. Daftar Warga & Kelola Akses Role
                    </h3>
                    <p class="text-xs text-slate-500 mt-0.5">Daftar lengkap seluruh warga beserta pengelolaan hak akses pengurus RT, RW, Bendahara, Satpam, atau Super Admin.</p>
                </div>
                
                <button type="button" onclick="cetakSection('section-warga')" class="bg-slate-800 hover:bg-slate-900 text-white text-xs px-3.5 py-2 rounded-xl font-medium transition shadow flex items-center gap-1.5">
                    🖨️ Cetak Data Warga
                </button>
            </div>

            <div class="overflow-x-auto">
                <table id="tableWarga" class="w-full text-xs text-left text-gray-700 border-collapse">
                    <thead class="bg-gray-100 text-gray-700 uppercase font-semibold border-b">
                        <tr>
                            <th class="p-3 border">No</th>
                            <th class="p-3 border">Nama Warga</th>
                            <th class="p-3 border">NIK</th>
                            <th class="p-3 border">Tempat, Tgl Lahir</th>
                            <th class="p-3 border">Alamat & No. Rumah</th>
                            <th class="p-3 border">RT / RW</th>
                            <th class="p-3 border">Agama</th>
                            <th class="p-3 border">Status</th>
                            <th class="p-3 border">Pekerjaan</th>
                            <th class="p-3 border">No. HP / WA</th>
                            <th class="p-3 border">Email</th>
                            <th class="p-3 border action-col text-center">Foto KTP</th>
                            <th class="p-3 border action-col text-center">Foto KK</th>
                            <th class="p-3 border action-col text-center">Foto Buku Nikah</th>
                            <th class="p-3 border text-center">Jml Keluarga</th>
                            <th class="p-3 border text-center">Akses Saat Ini</th>
                            <th class="p-3 border text-center action-col">Aksi & Perubahan Role</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $no = 1; foreach ($daftarWarga as $w): ?>
                        <?php 
                            $safeWarga = [
                                'id'               => $w['id'] ?? '',
                                'nik'              => $w['nik'] ?? '',
                                'nama'             => $w['nama'] ?? '',
                                'tempat_lahir'     => $w['tempat_lahir'] ?? '',
                                'tgl_lahir'        => $w['tgl_lahir'] ?? '',
                                'alamat'           => $w['alamat'] ?? '',
                                'no_rumah'         => $w['no_rumah'] ?? '',
                                'rt'               => $w['rt'] ?? '',
                                'rw'               => $w['rw'] ?? '',
                                'agama'            => $w['agama'] ?? '',
                                'status_perkawinan'=> $w['status_perkawinan'] ?? '',
                                'jumlah_keluarga'  => $w['jumlah_keluarga'] ?? '',
                                'pekerjaan'        => $w['pekerjaan'] ?? '',
                                'no_hp'            => $w['no_hp'] ?? '',
                                'email'            => $w['email'] ?? '',
                                'ktp_path'         => $w['ktp_path'] ?? '',
                                'kk_path'          => $w['kk_path'] ?? '',
                                'buku_nikah_path'  => $w['buku_nikah_path'] ?? '',
                            ];
                        ?>
                        <tr class="bg-white border-b hover:bg-gray-50">
                            <td class="p-3 border text-center"><?= $no++; ?></td>
                            <td class="p-3 border font-bold text-gray-900 whitespace-nowrap"><?= htmlspecialchars($w['nama'] ?? '', ENT_QUOTES, 'UTF-8'); ?></td>
                            <td class="p-3 border font-mono"><?= htmlspecialchars($w['nik'] ?? '', ENT_QUOTES, 'UTF-8'); ?></td>
                            <td class="p-3 border whitespace-nowrap">
                                <?php if (!empty($w['tempat_lahir']) || !empty($w['tgl_lahir'])): ?>
                                    <?= htmlspecialchars($w['tempat_lahir'] ?? '-', ENT_QUOTES, 'UTF-8'); ?>, 
                                    <?= !empty($w['tgl_lahir']) ? date('d-m-Y', strtotime($w['tgl_lahir'])) : '-'; ?>
                                <?php else: ?>
                                    <span class="text-gray-400 italic">-</span>
                                <?php endif; ?>
                            </td>
                            <td class="p-3 border">
                                <?= htmlspecialchars($w['alamat'] ?? '-', ENT_QUOTES, 'UTF-8'); ?> 
                                <?= !empty($w['no_rumah']) ? '(No. ' . htmlspecialchars($w['no_rumah'], ENT_QUOTES, 'UTF-8') . ')' : ''; ?>
                            </td>
                            <td class="p-3 border font-semibold text-center whitespace-nowrap">
                                <?= htmlspecialchars($w['rt'] ?? '-', ENT_QUOTES, 'UTF-8'); ?> / <?= htmlspecialchars($w['rw'] ?? '-', ENT_QUOTES, 'UTF-8'); ?>
                            </td>
                            <td class="p-3 border whitespace-nowrap"><?= htmlspecialchars($w['agama'] ?? '-', ENT_QUOTES, 'UTF-8'); ?></td>
                            <td class="p-3 border whitespace-nowrap"><?= htmlspecialchars($w['status_perkawinan'] ?? '-', ENT_QUOTES, 'UTF-8'); ?></td>
                            <td class="p-3 border whitespace-nowrap"><?= htmlspecialchars($w['pekerjaan'] ?? '-', ENT_QUOTES, 'UTF-8'); ?></td>
                            <td class="p-3 border whitespace-nowrap"><?= htmlspecialchars($w['no_hp'] ?? '-', ENT_QUOTES, 'UTF-8'); ?></td>
                            <td class="p-3 border whitespace-nowrap"><?= htmlspecialchars($w['email'] ?? '-', ENT_QUOTES, 'UTF-8'); ?></td>
                            
                            <td class="p-3 border text-center whitespace-nowrap action-col">
                                <?php if (!empty($w['ktp_path'])): ?>
                                    <button type="button" onclick="openDocModal('<?= htmlspecialchars($w['ktp_path'], ENT_QUOTES, 'UTF-8'); ?>', 'Foto KTP - <?= htmlspecialchars($w['nama'], ENT_QUOTES, 'UTF-8'); ?>')" class="text-blue-600 hover:text-blue-800 font-semibold flex items-center gap-1 justify-center bg-blue-50 px-2 py-1 rounded border border-blue-200">
                                        🔍 Lihat KTP
                                    </button>
                                <?php else: ?>
                                    <span class="text-gray-400 italic">Tidak Ada</span>
                                <?php endif; ?>
                            </td>

                            <td class="p-3 border text-center whitespace-nowrap action-col">
                                <?php if (!empty($w['kk_path'])): ?>
                                    <button type="button" onclick="openDocModal('<?= htmlspecialchars($w['kk_path'], ENT_QUOTES, 'UTF-8'); ?>', 'Foto KK - <?= htmlspecialchars($w['nama'], ENT_QUOTES, 'UTF-8'); ?>')" class="text-emerald-600 hover:text-emerald-800 font-semibold flex items-center gap-1 justify-center bg-emerald-50 px-2 py-1 rounded border border-emerald-200">
                                        🔍 Lihat KK
                                    </button>
                                <?php else: ?>
                                    <span class="text-gray-400 italic">Tidak Ada</span>
                                <?php endif; ?>
                            </td>

                            <td class="p-3 border text-center whitespace-nowrap action-col">
                                <?php if (!empty($w['buku_nikah_path'])): ?>
                                    <button type="button" onclick="openDocModal('<?= htmlspecialchars($w['buku_nikah_path'], ENT_QUOTES, 'UTF-8'); ?>', 'Foto Buku Nikah - <?= htmlspecialchars($w['nama'], ENT_QUOTES, 'UTF-8'); ?>')" class="text-purple-600 hover:text-purple-800 font-semibold flex items-center gap-1 justify-center bg-purple-50 px-2 py-1 rounded border border-purple-200">
                                        🔍 Lihat Nikah
                                    </button>
                                <?php else: ?>
                                    <span class="text-gray-400 italic">Tidak Ada</span>
                                <?php endif; ?>
                            </td>

                            <td class="p-3 border text-center whitespace-nowrap font-medium">
                                <?= !empty($w['jumlah_keluarga']) ? htmlspecialchars($w['jumlah_keluarga'], ENT_QUOTES, 'UTF-8') . ' Orang' : '-' ?>
                            </td>

                            <td class="p-3 border text-center whitespace-nowrap">
                                <span class="px-2 py-1 rounded-md text-[10px] font-bold bg-blue-100 text-blue-800 uppercase">
                                    <?= htmlspecialchars($w['role'] ?? 'warga', ENT_QUOTES, 'UTF-8'); ?>
                                </span>
                            </td>

                            <td class="p-3 border text-center whitespace-nowrap action-col">
                                <div class="flex items-center gap-2 justify-center">
                                    <button type="button" onclick="openEditModal(<?= htmlspecialchars(json_encode($safeWarga), ENT_QUOTES, 'UTF-8'); ?>)" class="bg-amber-500 hover:bg-amber-600 text-white px-2.5 py-1.5 rounded text-xs font-semibold shadow flex items-center gap-1">
                                        ✏️ Edit
                                    </button>

                                    <form action="/admin/update-role" method="POST" class="flex items-center gap-1.5">
                                        <input type="hidden" name="user_id" value="<?= (int)($w['id'] ?? 0); ?>">
                                        <select name="role" class="p-1 border rounded text-xs bg-white focus:ring-1 focus:ring-blue-500">
                                            <option value="warga" <?= ($w['role'] ?? '') === 'warga' ? 'selected' : ''; ?>>Warga</option>
                                            <option value="rt" <?= ($w['role'] ?? '') === 'rt' ? 'selected' : ''; ?>>RT</option>
                                            <option value="rw" <?= ($w['role'] ?? '') === 'rw' ? 'selected' : ''; ?>>RW</option>
                                            <option value="bendahara" <?= ($w['role'] ?? '') === 'bendahara' ? 'selected' : ''; ?>>Bendahara</option>
                                            <option value="satpam" <?= ($w['role'] ?? '') === 'satpam' ? 'selected' : ''; ?>>Satpam</option>
                                            <option value="super_admin" <?= ($w['role'] ?? '') === 'super_admin' ? 'selected' : ''; ?>>Super Admin</option>
                                        </select>
                                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-2.5 py-1.5 rounded text-xs font-semibold shadow">
                                            Simpan
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- QR Code Validasi Keaslian Laporan Data Warga -->
            <div class="print-qr-footer">
                <div class="text-center">
                    <img src="<?= htmlspecialchars($qrApiWarga, ENT_QUOTES, 'UTF-8'); ?>" alt="QR Code Keaslian Dokumen Warga" class="w-24 h-24 mx-auto mb-1 border p-1 bg-white">
                    <p class="text-[9px] font-bold text-slate-800 leading-tight">
                        Dokumen Data Warga Resmi.<br>
                        Scan QR untuk verifikasi keaslian digital.
                    </p>
                </div>
            </div>
        </div>

        <!-- Khusus Super Admin: Pengaturan Modul Sistem -->
        <?php if ($isSuperAdmin): ?>
            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-6 no-print">
                <div>
                    <h3 class="font-bold text-slate-800 text-base flex items-center gap-2">
                        ⚙️ Pengaturan Fitur & Modul Aplikasi
                    </h3>
                    <p class="text-xs text-slate-500 mt-1">Kelola konfigurasi pembayaran, integrasi WhatsApp Fonnte, email SMTP, dan nomor darurat lingkungan.</p>
                </div>

                <div class="bg-blue-50 border border-blue-200 text-blue-800 p-3.5 rounded-xl text-xs space-y-1">
                    <p class="font-bold flex items-center gap-1.5">
                        ℹ️ Catatan Pembaharuan Data:
                    </p>
                    <ul class="list-disc list-inside space-y-0.5 text-[11px] text-blue-700">
                        <li>Field teks yang tidak diubah akan tetap membawa nilai lama dari tabel settings.</li>
                        <li>Field sensitive seperti Password SMTP dan File QRIS yang dikosongkan saat submit tidak akan menimpa data yang sudah ada di database.</li>
                    </ul>
                </div>

                <form action="/settings/save" method="POST" enctype="multipart/form-data" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                        <!-- 1. Pembayaran Kas -->
                        <div class="p-4 rounded-xl border border-slate-200 bg-slate-50/50 space-y-4">
                            <h4 class="font-bold text-xs text-slate-700 uppercase tracking-wider border-b border-slate-200 pb-2 flex items-center gap-1.5">
                                💳 Pembayaran Kas & Iuran
                            </h4>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">Ganti Gambar QRIS Statis</label>
                                <input type="file" name="qris_image" accept="image/*" class="w-full text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-100 file:text-emerald-700 hover:file:bg-emerald-200 border border-slate-300 rounded-xl bg-white">
                                <p class="text-[10px] text-slate-400 mt-1">Biarkan kosong jika tidak ingin mengubah gambar QRIS saat ini.</p>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">Info Rekening Bank Alternatif</label>
                                <textarea name="bank_info" rows="2" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs bg-white outline-none focus:ring-2 focus:ring-emerald-500" placeholder="Contoh: Bank BNI Rek 111111111111 a.n Kas Warga"><?= htmlspecialchars($settings['bank_info'] ?? '', ENT_QUOTES, 'UTF-8') ?></textarea>
                            </div>
                        </div>

                        <!-- 2. WhatsApp Gateway -->
                        <div class="p-4 rounded-xl border border-slate-200 bg-slate-50/50 space-y-4">
                            <h4 class="font-bold text-xs text-slate-700 uppercase tracking-wider border-b border-slate-200 pb-2 flex items-center gap-1.5">
                                💬 API WhatsApp Gateway (Fonnte)
                            </h4>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">Token API Fonnte</label>
                                <input type="password" name="fonnte_api_token" value="<?= htmlspecialchars($settings['fonnte_api_token'] ?? '', ENT_QUOTES, 'UTF-8') ?>" placeholder="Masukkan Token API Fonnte" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-mono bg-white outline-none focus:ring-2 focus:ring-emerald-500">
                                <p class="text-[10px] text-slate-400 mt-1">Digunakan untuk pengiriman notifikasi otomatis via WA.</p>
                            </div>
                        </div>

                        <!-- 3. Konfigurasi Email SMTP -->
                        <div class="p-4 rounded-xl border border-slate-200 bg-slate-50/50 space-y-4">
                            <h4 class="font-bold text-xs text-slate-700 uppercase tracking-wider border-b border-slate-200 pb-2 flex items-center gap-1.5">
                                ✉️ Konfigurasi Email SMTP
                            </h4>
                            <div class="grid grid-cols-3 gap-3">
                                <div class="col-span-2">
                                    <label class="block text-xs font-semibold text-slate-600 mb-1">SMTP Host</label>
                                    <input type="text" name="email_smtp_host" value="<?= htmlspecialchars($settings['email_smtp_host'] ?? '', ENT_QUOTES, 'UTF-8') ?>" placeholder="mail.yppi.org" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs bg-white outline-none focus:ring-2 focus:ring-emerald-500">
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-slate-600 mb-1">Port</label>
                                    <input type="text" name="email_smtp_port" value="<?= htmlspecialchars($settings['email_smtp_port'] ?? '465', ENT_QUOTES, 'UTF-8') ?>" placeholder="465" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs bg-white outline-none focus:ring-2 focus:ring-emerald-500">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">SMTP User / Email Sender</label>
                                <input type="email" name="email_smtp_user" value="<?= htmlspecialchars($settings['email_smtp_user'] ?? '', ENT_QUOTES, 'UTF-8') ?>" placeholder="yppi.mail@yppi.org" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs bg-white outline-none focus:ring-2 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">SMTP Password</label>
                                <input type="password" name="email_smtp_pass" value="" placeholder="•••••••• (Biarkan kosong jika tidak ingin diubah)" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs bg-white outline-none focus:ring-2 focus:ring-emerald-500">
                                <p class="text-[10px] text-slate-400 mt-1">Password lama akan tetap tersimpan jika field ini dikosongkan.</p>
                            </div>
                        </div>

                        <!-- 4. Kontak Darurat -->
                        <div class="p-4 rounded-xl border border-rose-100 bg-rose-50/30 space-y-4">
                            <h4 class="font-bold text-xs text-rose-700 uppercase tracking-wider border-b border-rose-200 pb-2 flex items-center gap-1.5">
                                🚨 Kontak Darurat (Panic Button)
                            </h4>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">Nomor WA Pengurus (RT/RW)</label>
                                <input type="text" name="phone_pengurus" value="<?= htmlspecialchars($settings['phone_pengurus'] ?? '', ENT_QUOTES, 'UTF-8') ?>" placeholder="089612229501" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-mono bg-white outline-none focus:ring-2 focus:ring-rose-500">
                                <p class="text-[10px] text-slate-400 mt-1">Nomor penerima sinyal darurat utama.</p>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">Nomor WA Satpam / Keamanan</label>
                                <input type="text" name="phone_satpam" value="<?= htmlspecialchars($settings['phone_satpam'] ?? '', ENT_QUOTES, 'UTF-8') ?>" placeholder="089661065174" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-mono bg-white outline-none focus:ring-2 focus:ring-rose-500">
                                <p class="text-[10px] text-slate-400 mt-1">Nomor pos satpam/keamanan lingkungan.</p>
                            </div>
                        </div>

                    </div>

                    <button type="submit" class="w-full bg-slate-900 hover:bg-slate-800 text-white font-semibold py-3 rounded-xl shadow transition text-xs">
                        💾 Simpan Konfigurasi Sistem
                    </button>
                </form>
            </div>
        <?php endif; ?>

    </main>

    <!-- Modal Pratinjau Dokumen -->
    <div id="modalDoc" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden flex items-center justify-center p-2 sm:p-4">
        <div class="bg-white rounded-2xl w-full max-w-4xl p-4 shadow-2xl space-y-3 relative flex flex-col max-h-[95vh]">
            <div class="flex justify-between items-center border-b pb-2 shrink-0">
                <h3 class="font-bold text-slate-800 text-xs sm:text-sm flex items-center gap-2 truncate pr-2">
                    📂 <span id="doc-title" class="text-blue-600 truncate"></span>
                </h3>
                <button onclick="closeDocModal()" class="text-slate-400 hover:text-slate-600 font-bold text-2xl leading-none">&times;</button>
            </div>

            <div id="doc-container" class="flex flex-col justify-center items-center bg-slate-100 rounded-xl p-2 border flex-1 min-h-[300px] h-[65vh] overflow-auto"></div>

            <div class="flex justify-between items-center pt-2 border-t shrink-0">
                <a id="doc-download-link" href="#" target="_blank" download class="text-xs text-blue-600 hover:underline font-semibold">
                    🔗 Unduh File
                </a>
                <button onclick="closeDocModal()" class="px-4 py-2 bg-slate-800 text-white text-xs font-semibold rounded-lg">Tutup</button>
            </div>
        </div>
    </div>

    <!-- Modal Edit Warga (Form Lengkap) -->
    <div id="modalEdit" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl max-w-3xl w-full p-6 shadow-2xl space-y-4 max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center border-b pb-3">
                <h3 class="font-bold text-slate-800 text-base flex items-center gap-2">
                    ✏️ Edit Data Warga Lengkap
                </h3>
                <button onclick="closeEditModal()" class="text-slate-400 hover:text-slate-600 font-bold text-xl leading-none">&times;</button>
            </div>

            <form action="/admin/update-warga" method="POST" enctype="multipart/form-data" class="space-y-4 text-xs">
                <input type="hidden" name="user_id" id="edit-id">

                <!-- Section 1: Identitas Utama -->
                <div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200 space-y-3">
                    <h4 class="font-bold text-slate-700 text-xs uppercase tracking-wider border-b pb-1">1. Identitas Utama</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="font-semibold text-slate-600">NIK <span class="text-rose-500">*</span></label>
                            <input type="text" name="nik" id="edit-nik" required maxlength="16" class="w-full mt-1 p-2 border rounded-lg font-mono bg-white">
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">Nama Lengkap <span class="text-rose-500">*</span></label>
                            <input type="text" name="nama" id="edit-nama" required class="w-full mt-1 p-2 border rounded-lg bg-white">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="font-semibold text-slate-600">Tempat Lahir</label>
                            <input type="text" name="tempat_lahir" id="edit-tempat-lahir" class="w-full mt-1 p-2 border rounded-lg bg-white">
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">Tanggal Lahir</label>
                            <input type="date" name="tgl_lahir" id="edit-tgl-lahir" class="w-full mt-1 p-2 border rounded-lg bg-white font-mono">
                        </div>
                    </div>
                </div>

                <!-- Section 2: Alamat & Wilayah -->
                <div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200 space-y-3">
                    <h4 class="font-bold text-slate-700 text-xs uppercase tracking-wider border-b pb-1">2. Alamat & Wilayah</h4>
                    <div>
                        <label class="font-semibold text-slate-600">Alamat Lengkap</label>
                        <input type="text" name="alamat" id="edit-alamat" class="w-full mt-1 p-2 border rounded-lg bg-white">
                    </div>

                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <label class="font-semibold text-slate-600">No. Rumah</label>
                            <input type="text" name="no_rumah" id="edit-no-rumah" class="w-full mt-1 p-2 border rounded-lg bg-white">
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">RT</label>
                            <input type="text" name="rt" id="edit-rt" class="w-full mt-1 p-2 border rounded-lg bg-white">
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">RW</label>
                            <input type="text" name="rw" id="edit-rw" class="w-full mt-1 p-2 border rounded-lg bg-white">
                        </div>
                    </div>
                </div>

                <!-- Section 3: Kontak & Informasi Sosial -->
                <div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200 space-y-3">
                    <h4 class="font-bold text-slate-700 text-xs uppercase tracking-wider border-b pb-1">3. Kontak & Status Social</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="font-semibold text-slate-600">No. HP / WA <span class="text-rose-500">*</span></label>
                            <input type="text" name="no_hp" id="edit-no-hp" required class="w-full mt-1 p-2 border rounded-lg bg-white font-mono">
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">Email</label>
                            <input type="email" name="email" id="edit-email" class="w-full mt-1 p-2 border rounded-lg bg-white">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div>
                            <label class="font-semibold text-slate-600">Agama</label>
                            <select name="agama" id="edit-agama" class="w-full mt-1 p-2 border rounded-lg bg-white">
                                <option value="">-- Pilih Agama --</option>
                                <option value="Islam">Islam</option>
                                <option value="Kristen">Kristen</option>
                                <option value="Katolik">Katolik</option>
                                <option value="Hindu">Hindu</option>
                                <option value="Buddha">Buddha</option>
                                <option value="Konghucu">Konghucu</option>
                            </select>
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">Status Pernikahan</label>
                            <select name="status_perkawinan" id="edit-status-perkawinan" class="w-full mt-1 p-2 border rounded-lg bg-white">
                                <option value="">-- Pilih Status --</option>
                                <option value="Belum Kawin">Belum Kawin</option>
                                <option value="Kawin">Kawin</option>
                                <option value="Cerai Hidup">Cerai Hidup</option>
                                <option value="Cerai Mati">Cerai Mati</option>
                            </select>
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">Jumlah Anggota Keluarga</label>
                            <input type="number" name="jumlah_keluarga" id="edit-jumlah-keluarga" min="1" class="w-full mt-1 p-2 border rounded-lg bg-white font-mono">
                        </div>
                    </div>

                    <div>
                        <label class="font-semibold text-slate-600">Pekerjaan</label>
                        <input type="text" name="pekerjaan" id="edit-pekerjaan" class="w-full mt-1 p-2 border rounded-lg bg-white">
                    </div>
                </div>

                <!-- Section 4: Upload Dokumen Resmi -->
                <div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200 space-y-3">
                    <h4 class="font-bold text-slate-700 text-xs uppercase tracking-wider border-b pb-1">4. Perbarui File Dokumen (Opsional)</h4>
                    <p class="text-[11px] text-slate-500">Abaikan bidang unggah jika tidak ada perubahan dokumen.</p>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div>
                            <label class="font-semibold text-slate-600">Foto KTP</label>
                            <input type="file" name="ktp_file" accept="image/*,.pdf" class="w-full mt-1 text-[10px] text-slate-500 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-[10px] file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200 border rounded bg-white">
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">Foto KK</label>
                            <input type="file" name="kk_file" accept="image/*,.pdf" class="w-full mt-1 text-[10px] text-slate-500 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-[10px] file:bg-emerald-100 file:text-emerald-700 hover:file:bg-emerald-200 border rounded bg-white">
                        </div>
                        <div>
                            <label class="font-semibold text-slate-600">Foto Buku Nikah</label>
                            <input type="file" name="buku_nikah_file" accept="image/*,.pdf" class="w-full mt-1 text-[10px] text-slate-500 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-[10px] file:bg-purple-100 file:text-purple-700 hover:file:bg-purple-200 border rounded bg-white">
                        </div>
                    </div>
                </div>

                <div class="flex justify-end gap-2 pt-3 border-t">
                    <button type="button" onclick="closeEditModal()" class="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold rounded-lg transition">
                        Batal
                    </button>
                    <button type="submit" class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow transition">
                        Simpan Perubahan Data
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Scripts -->
    <script>
    let dtWarga, dtKewajiban;

    $(document).ready(function() {
        dtWarga = $('#tableWarga').DataTable({
            "pageLength": 10,
            "language": { "search": "Cari Warga:", "lengthMenu": "Tampilkan _MENU_ data" }
        });

        dtWarga.on('order.dt search.dt', function () {
            let i = 1;
            dtWarga.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
                this.data(i++);
            });
        });

        dtKewajiban = $('#tableKewajiban').DataTable({
            "pageLength": 5,
            "lengthMenu": [5, 10, 25, 50],
            "language": { "search": "Filter Kewajiban:", "lengthMenu": "Tampilkan _MENU_ data" }
        });
    });

    // Perbaikan Cetak: Tampilkan seluruh baris DataTables sebelum diprint
    function cetakSection(sectionId) {
        const sections = ['section-kewajiban', 'section-warga'];
        
        sections.forEach(id => {
            const el = document.getElementById(id);
            if (el) {
                if (id !== sectionId) {
                    el.classList.add('hide-on-print');
                } else {
                    el.classList.remove('hide-on-print');
                }
            }
        });

        // Set DataTables agar menampilkan semua baris saat dicetak
        const activeTable = sectionId === 'section-kewajiban' ? dtKewajiban : dtWarga;
        const originalLength = activeTable.page.len();

        activeTable.page.len(-1).draw();

        setTimeout(() => {
            window.print();
            // Bawa kembali ke paginasi awal
            activeTable.page.len(originalLength).draw();
        }, 300);
    }

    // Perbaikan Rendering Dokumen PDF & Gambar
    function openDocModal(filePath, title) {
        document.getElementById('doc-title').innerText = title;
        document.getElementById('doc-download-link').href = filePath;

        const container = document.getElementById('doc-container');
        container.innerHTML = ''; 

        const ext = filePath.split('.').pop().toLowerCase();

        if (['jpg', 'jpeg', 'png', 'webp'].includes(ext)) {
            container.innerHTML = `<img src="${filePath}" alt="${title}" class="max-h-full max-w-full rounded-lg object-contain shadow m-auto">`;
        } else if (ext === 'pdf') {
            container.innerHTML = '<canvas id="pdf-render-canvas" class="m-auto shadow rounded border"></canvas>';
            
            pdfjsLib.getDocument(filePath).promise.then(pdf => {
                pdf.getPage(1).then(page => {
                    const canvas = document.getElementById('pdf-render-canvas');
                    const ctx = canvas.getContext('2d');
                    const viewport = page.getViewport({ scale: 1.2 });

                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    page.render({
                        canvasContext: ctx,
                        viewport: viewport
                    });
                });
            }).catch(err => {
                container.innerHTML = `<p class="text-xs text-rose-500 font-semibold m-auto">Gagal memuat pratinjau PDF. Silakan unduh langsung file tersebut.</p>`;
            });
        } else {
            container.innerHTML = `<div class="text-center py-8 m-auto"><p class="text-xs font-semibold text-slate-700">Format file .${ext.toUpperCase()} tidak didukung untuk pratinjau.</p></div>`;
        }

        document.getElementById('modalDoc').classList.remove('hidden');
    }

    function closeDocModal() {
        document.getElementById('modalDoc').classList.add('hidden');
    }

    function openEditModal(warga) {
        document.getElementById('edit-id').value = warga.id || '';
        document.getElementById('edit-nik').value = warga.nik || '';
        document.getElementById('edit-nama').value = warga.nama || '';
        document.getElementById('edit-tempat-lahir').value = warga.tempat_lahir || '';
        document.getElementById('edit-tgl-lahir').value = warga.tgl_lahir || '';
        document.getElementById('edit-alamat').value = warga.alamat || '';
        document.getElementById('edit-no-rumah').value = warga.no_rumah || '';
        document.getElementById('edit-rt').value = warga.rt || '';
        document.getElementById('edit-rw').value = warga.rw || '';
        document.getElementById('edit-no-hp').value = warga.no_hp || '';
        document.getElementById('edit-email').value = warga.email || '';
        document.getElementById('edit-agama').value = warga.agama || '';
        document.getElementById('edit-status-perkawinan').value = warga.status_perkawinan || '';
        document.getElementById('edit-jumlah-keluarga').value = warga.jumlah_keluarga || '';
        document.getElementById('edit-pekerjaan').value = warga.pekerjaan || '';

        document.getElementById('modalEdit').classList.remove('hidden');
    }

    function closeEditModal() {
        document.getElementById('modalEdit').classList.add('hidden');
    }
    </script>
</body>
</html>