<?php
session_start(); // Memulai sesi

// Cek apakah variabel sesi user sudah ada
if (!isset($_SESSION['user_id'])) {
    // Jika tidak ada, tendang pengguna ke halaman login
    header("Location: login.php");
    exit; // Pastikan skrip berhenti agar tidak memuat sisa halaman
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebGIS Pemetaan Sosial — Data Kemiskinan</title>
    <meta name="description" content="Platform WebGIS interaktif untuk pemetaan data sosial, kemiskinan, dan distribusi bantuan warga.">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    
    <style>
        /* ─── DESIGN TOKENS ──────────────────────────────────────── */
        :root {
            /* Primary (blue) */
            --blue:    #2563EB;
            --blue-d:  #1D4ED8;
            --blue-l:  #EFF6FF;
            --blue-m:  rgba(37,99,235,.09);
            /* Dark text */
            --navy:    #0F172A;
            /* Green */
            --green:   #10B981;
            --green-d: #059669;
            --green-l: #ECFDF5;
            /* Red */
            --red:     #EF4444;
            --red-l:   #FEF2F2;
            /* Amber */
            --amber:   #F59E0B;
            --amber-l: #FFFBEB;
            /* Surfaces & Layout */
            --bg:          #EBF0F7;
            --surface:     rgba(255,255,255,0.96);
            --surface-s:   #FFFFFF;
            --border:      #E2E8F0;
            --border-l:    #F1F5F9;
            --text-2:      #475569;
            --text-3:      #94A3B8;
            /* Legacy aliases */
            --glass:       rgba(255,255,255,0.96);
            /* Shadows */
            --shadow:      0 8px 32px rgba(15,23,42,0.14);
            --shadow-sm:   0 2px 10px rgba(15,23,42,0.08);
            --sh-sm:       0 1px 4px  rgba(15,23,42,0.06);
            --sh:          0 4px 20px rgba(15,23,42,0.10);
            --sh-md:       0 8px 32px rgba(15,23,42,0.14);
            /* Radius */
            --r:   16px;
            --r2:  12px;
            --r3:   8px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; font-family: 'Plus Jakarta Sans', sans-serif; overflow: hidden; }

        /* ── MAP with navbar offset ── */
        #map {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            cursor: crosshair;
        }

        #navbar {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 56px;
            z-index: 1200;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(24px) saturate(1.8);
            -webkit-backdrop-filter: blur(24px) saturate(1.8);
            border-bottom: 1px solid rgba(226,232,240,0.7);
            box-shadow: 0 1px 16px rgba(15,23,42,0.08);
            display: flex;
            align-items: center;
            padding: 0 16px;
            gap: 4px;
            animation: slideDown 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        @keyframes slideDown {
            from { opacity:0; transform:translateY(-14px); }
            to   { opacity:1; transform:translateY(0); }
        }

        /* Brand */
        .nav-brand {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-right: 12px;
            text-decoration: none;
            flex-shrink: 0;
        }
        .nav-brand-logo {
            width: 32px; height: 32px;
            border-radius: 9px;
            background: linear-gradient(135deg, #2563EB, #1D4ED8);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 8px rgba(37,99,235,0.35);
        }
        .nav-brand-logo svg { display: block; }
        .nav-brand-text {
            font-size: 13.5px;
            font-weight: 800;
            color: var(--navy);
            letter-spacing: -0.3px;
            line-height: 1;
        }
        .nav-brand-text span {
            color: var(--blue);
        }
        .nav-divider {
            width: 1px;
            height: 24px;
            background: var(--border);
            margin: 0 8px;
            flex-shrink: 0;
        }

        /* Nav Items */
        .nav-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 11px;
            border-radius: 8px;
            border: none;
            background: transparent;
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-2);
            cursor: pointer;
            transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
            white-space: nowrap;
            flex-shrink: 0;
            text-decoration: none;
        }
        .nav-item svg { flex-shrink: 0; transition: transform 0.18s; }
        .nav-item:hover {
            background: var(--blue-m);
            color: var(--blue);
        }
        .nav-item:hover svg { transform: scale(1.1); }
        .nav-item:active { transform: scale(0.97); }
        .nav-item.active {
            background: var(--blue-m);
            color: var(--blue);
        }
        /* Colored variants */
        .nav-item.danger:hover  { background: var(--red-l);   color: var(--red); }
        .nav-item.warning:hover { background: #fff7ed;        color: #D97706; }
        .nav-item.success:hover { background: var(--green-l); color: var(--green-d); }
        /* Active gap state */
        .nav-item.gap-active {
            background: var(--red-l);
            color: var(--red);
            animation: navPulse 2s ease-in-out infinite;
        }
        @keyframes navPulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0);}
            50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); } }
        

        /* Spacer */
        .nav-spacer { flex: 1; }

        /* Stats in Navbar */
        .nav-stats {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--border-l);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 5px 14px;
            font-size: 11.5px;
            font-weight: 500;
            color: var(--navy);
            flex-shrink: 0;
        }
        .nsp-item { display: flex; align-items: center; gap: 5px; }
        .nsp-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .nsp-num  { font-weight: 700; }
        .nsp-sep  { width: 1px; height: 12px; background: var(--border); }
        .nsp-label { color: var(--text-3); font-size: 10.5px; }

        /* User area in Navbar */
        .nav-user {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 12px 5px 8px;
            border-radius: 20px;
            background: var(--border-l);
            border: 1px solid var(--border);
            cursor: default;
            flex-shrink: 0;
            margin-left: 8px;
        }
        .nav-user-avatar {
            width: 26px; height: 26px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2563EB, #1D4ED8);
            display: flex; align-items: center; justify-content: center;
        }
        .nav-user-avatar svg { display: block; }
        .nav-user-name {
            font-size: 12px;
            font-weight: 700;
            color: var(--navy);
        }
        .nav-logout {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--red);
            font-size: 11px;
            font-weight: 700;
            text-decoration: none;
            background: var(--red-l);
            padding: 3px 9px;
            border-radius: 12px;
            transition: background 0.15s;
            flex-shrink: 0;
        }
        .nav-logout:hover { background: rgba(239,68,68,0.18); }
        .nav-logout svg { display: block; }

        /* ── HINT BAR ── */
        #hint-bar {
            position: fixed;
            bottom: 28px; left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            background: rgba(15,23,42,0.78);
            color: rgba(255,255,255,0.88);
            font-size: 11.5px; font-weight: 500;
            padding: 7px 20px 7px 14px;
            border-radius: 24px;
            pointer-events: none;
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(255,255,255,0.12);
            box-shadow: 0 4px 16px rgba(15,23,42,0.2);
        }

        /* ── PANEL BACKDROP ── */
        #panel-backdrop {
            position: fixed; inset: 0;
            z-index: 1900;
            display: none;
        }
        #panel-backdrop.show { display: block; }

        /* ── SLIDE PANELS ── */
        .slide-panel {
            position: fixed;
            top: 0; right: 0;
            height: 100%;
            width: 340px;
            z-index: 2000;
            transform: translateX(110%);
            transition: transform 0.34s cubic-bezier(0.4,0,0.2,1);
        }
        .slide-panel.open { transform: translateX(0); }

        .panel-inner {
            position: absolute; inset: 0;
            background: var(--surface-s);
            border-left: 1px solid var(--border);
            display: flex; flex-direction: column;
            box-shadow: -12px 0 48px rgba(15,23,42,0.14);
        }

        .panel-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 17px 14px;
            border-bottom: 1px solid var(--border-l);
            flex-shrink: 0;
            background: linear-gradient(to bottom, #fafcff, var(--surface-s));
        }
        .panel-title {
            font-size: 14.5px; font-weight: 700; color: var(--navy);
            display: flex; align-items: center; gap: 9px;
        }
        .pt-icon {
            width: 30px; height: 30px; border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
        }
        .btn-close {
            width: 28px; height: 28px; border: none;
            background: var(--border-l); border-radius: 50%;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: var(--text-3); transition: all 0.15s;
            line-height: 1;
        }
        .btn-close:hover { background: var(--border); color: var(--navy); }
        .btn-close svg { display: block; }

        .panel-body {
            flex: 1; overflow-y: auto; padding: 14px 16px 20px;
            background: var(--surface-s);
        }
        .panel-body::-webkit-scrollbar { width: 4px; }
        .panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        /* ── SEARCH ── */
        .search-wrap { position: relative; margin-bottom: 10px; }
        .si { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: 0.45; pointer-events: none; display: flex; }
        #searchInput {
            width: 100%; padding: 9px 12px 9px 32px;
            font-size: 13px; font-family: inherit;
            border: 1.5px solid var(--border); border-radius: var(--r3);
            background: var(--border-l); color: var(--navy);
            transition: border-color 0.2s, background 0.2s;
        }
        #searchInput:focus { outline: none; border-color: var(--blue); background: white; box-shadow: 0 0 0 3px var(--blue-m); }
        #searchInput::placeholder { color: var(--text-3); }

        .sr-item {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 10px; border-radius: var(--r3);
            cursor: pointer; transition: background 0.15s;
        }
        .sr-item:hover { background: var(--blue-m); }
        .sr-icon {
            width: 32px; height: 32px; border-radius: var(--r3);
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; flex-shrink: 0;
        }
        .sr-name { font-size: 13px; font-weight: 600; color: var(--navy); }
        .sr-sub  { font-size: 11px; color: var(--text-3); margin-top: 1px; }

        .empty-state {
            text-align: center; padding: 30px 16px;
            color: var(--text-3); font-size: 13px;
        }
        .es-icon { font-size: 26px; margin-bottom: 7px; display: flex; justify-content: center; }
        .es-icon svg { opacity: 0.35; }

        /* ── HISTORY ITEMS ── */
        .hi {
            display: flex; align-items: center; gap: 10px;
            padding: 10px; border-radius: var(--r2);
            border: 1px solid var(--border-l);
            margin-bottom: 7px;
            background: var(--surface-s);
            transition: box-shadow 0.15s, border-color 0.15s;
        }
        .hi:hover { box-shadow: var(--shadow-sm); border-color: var(--border); }
        .hi-icon {
            width: 34px; height: 34px; border-radius: var(--r3);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .hi-icon svg { display: block; }
        .hi-info { flex: 1; min-width: 0; cursor: pointer; }
        .hi-name { font-size: 12px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hi-meta { font-size: 10px; color: var(--text-3); margin-top: 1px; }
        .hi-del {
            width: 26px; height: 26px; border: none;
            background: var(--red-l); border-radius: var(--r3);
            cursor: pointer; font-size: 12px;
            display: flex; align-items: center; justify-content: center;
            color: var(--red); transition: background 0.15s; flex-shrink: 0;
        }
        .hi-del:hover { background: rgba(239,68,68,0.20); }

        /* ── MODAL UTAMA ── */
        #modal-backdrop {
            position: fixed; inset: 0;
            background: rgba(15,23,42,0.40);
            backdrop-filter: blur(4px);
            z-index: 3000;
            display: none; align-items: center; justify-content: center;
        }
        #modal-backdrop.show { display: flex; }

        #modal-box {
            background: var(--surface-s); border-radius: var(--r);
            width: 360px; max-width: calc(100vw - 24px);
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 60px rgba(15,23,42,0.22);
            overflow: hidden;
            animation: mIn 0.24s cubic-bezier(0.34,1.5,0.64,1);
        }
        @keyframes mIn {
            from { opacity:0; transform: scale(0.88) translateY(14px); }
            to   { opacity:1; transform: scale(1) translateY(0); }
        }

        .mh {
            padding: 16px 16px 0;
            display: flex; align-items: flex-start; justify-content: space-between;
        }
        .mh-left { display: flex; align-items: center; gap: 10px; }
        .mh-icon {
            width: 36px; height: 36px; border-radius: var(--r3);
            display: flex; align-items: center; justify-content: center;
        }
        .mh-icon svg { display: block; }
        .mh-title { font-size: 14px; font-weight: 700; color: var(--navy); }
        .mh-coord { font-size: 10px; color: var(--text-3); margin-top: 2px; }

        /* ── TAB KATEGORI ── */
        .mt-row {
            display: flex; gap: 6px;
            padding: 13px 16px 0;
        }
        .mt {
            flex: 1; padding: 7px 8px; border-radius: var(--r3);
            border: 1.5px solid var(--border);
            background: var(--border-l);
            font-family: inherit; font-size: 12px; font-weight: 600;
            color: var(--text-3); cursor: pointer;
            transition: all 0.18s;
            display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .mt svg { flex-shrink: 0; }
        .mt.a-green { background: var(--green-l); border-color: var(--green); color: var(--green-d); }
        .mt.a-blue  { background: var(--blue-l);  border-color: var(--blue);  color: var(--blue-d); }

        .mb { 
            padding: 12px 16px 0; 
            overflow-y: auto;
            flex: 1;
        }
        .mb::-webkit-scrollbar { width: 4px; }
        .mb::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        /* ── FORM FIELDS ── */
        .ff { margin-bottom: 10px; }
        .ff label {
            display: block; font-size: 10px; font-weight: 700;
            color: var(--text-3); text-transform: uppercase;
            letter-spacing: 0.07em; margin-bottom: 4px;
        }
        .ff input, .ff select {
            width: 100%; padding: 8px 11px; font-size: 13px; font-family: inherit;
            border: 1.5px solid var(--border); border-radius: var(--r3);
            color: var(--navy); transition: border-color 0.18s, box-shadow 0.18s;
            background: var(--border-l);
        }
        .ff input:focus {
            outline: none;
            border-color: var(--blue);
            box-shadow: 0 0 0 3px var(--blue-m);
            background: #fff;
        }

        /* ── SLIDER ── */
        .sc {
            background: var(--green-l); 
            border: 1.5px solid rgba(16,185,129,0.25);
            border-radius: var(--r2); 
            padding: 11px 13px; 
            margin-bottom: 10px;
        }

        .sc-top {
            display: flex; 
            align-items: center; 
            justify-content: space-between;
            margin-bottom: 9px;
        }
        .sc-lbl { 
            font-size: 12px; 
            font-weight: 700; 
            color: var(--navy); 
        }
        .sc-val {
            background: var(--green); 
            color: white;
            font-size: 11px; 
            font-weight: 700;
            padding: 3px 11px; 
            border-radius: 16px; 
            min-width: 52px; 
            text-align: center;
        }

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%; 
            height: 5px; 
            border-radius: 5px;
            background: rgba(16,185,129,0.20); 
            cursor: pointer; 
            margin-bottom: 8px;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 19px; 
            height: 19px; 
            border-radius: 50%;
            background: var(--green); 
            border: 3px solid white;
            box-shadow: 0 2px 6px rgba(16,185,129,0.25); 
            cursor: pointer;
        }
        input[type="range"]::-moz-range-thumb {
            width: 19px; 
            height: 19px; 
            border-radius: 50%;
            background: var(--green); 
            border: 3px solid white;
            box-shadow: 0 2px 6px rgba(16,185,129,0.25); 
            cursor: pointer;
        }

        /* ── MODAL FOOTER BUTTONS ── */
        .mf {
            padding: 12px 16px 16px;
            display: flex;
            gap: 8px;
            background: var(--surface-s);
            border-top: 1px solid var(--border-l);
            flex-shrink: 0;
        }

        .btn-cncl {
            padding: 9px 15px;
            border-radius: var(--r3);
            border: 1.5px solid var(--border);
            background: var(--border-l);
            font-family: inherit;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-2);
            cursor: pointer;
            transition: all 0.14s;
        }
        .btn-cncl:hover {
            background: var(--border);
            color: var(--navy);
        }

        .btn-sv {
            flex: 1;
            padding: 9px;
            border-radius: var(--r3);
            border: none;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.18s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .btn-sv.g { background: var(--green); }
        .btn-sv.g:hover { background: var(--green-d); }
        .btn-sv.b { background: var(--blue); }
        .btn-sv.b:hover { background: var(--blue-d); }
        .btn-sv:active { transform: scale(0.98); }

        /* ── PRESET BUTTONS ── */
        .pp-row { 
            display: flex; 
            gap: 5px; 
        }
        .pp {
            flex: 1; 
            padding: 4px 2px; 
            border-radius: 16px;
            border: 1.5px solid rgba(16,185,129,0.22);
            background: rgba(255,255,255,0.75);
            font-family: inherit; 
            font-size: 10px; 
            font-weight: 700;
            color: var(--text-3); 
            cursor: pointer; 
            transition: all 0.14s;
            text-align: center;
        }
        .pp:hover { 
            border-color: var(--green); 
            color: var(--green); 
        }
        .pp.active { 
            background: var(--green) !important; 
            border-color: var(--green) !important; 
            color: white !important; 
        }

        /* ── TOAST ── */
        #toast {
            position: fixed; bottom: 68px; left: 50%; transform: translateX(-50%) translateY(8px);
            z-index: 9999; background: var(--navy); color: white; font-size: 12px; font-weight: 600;
            padding: 9px 22px; border-radius: 20px;
            box-shadow: 0 6px 24px rgba(15,23,42,0.28), 0 0 0 1px rgba(255,255,255,0.08) inset;
            opacity: 0; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; white-space: nowrap;
        }
        #toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
        #toast.ok   { background: var(--green); }
        #toast.err  { background: var(--red); }

        /* ── LEAFLET POPUP ── */
        .leaflet-popup-content-wrapper {
            border-radius: var(--r) !important; border: none !important;
            box-shadow: 0 16px 48px rgba(15,23,42,0.2) !important;
            font-family: 'Plus Jakarta Sans',sans-serif !important;
            padding: 0 !important; overflow: hidden !important;
        }
        
        .leaflet-popup-content { 
            margin: 0 !important; 
            width: 250px !important;
            display: flex !important;
            flex-direction: column !important;
            box-sizing: border-box !important;
        }
        
        .lp { display: flex; flex-direction: column; width: 100%; }
        .lp-hd {
            display: flex; align-items: center; gap: 9px;
            padding: 12px 14px 8px;
            border-bottom: 1px solid var(--border-l); flex-shrink: 0;
            background: linear-gradient(to bottom, #f8fafc, white);
        }
        .lp-ti { font-size: 13px; font-weight: 700; color: var(--navy); }
        .lp-su { font-size: 10px; color: var(--text-3); }
        
        .lp-bd { padding: 12px 14px; font-size: 12px; color: var(--text-2); line-height: 1.6; }
        .lp-ef { 
            max-height: 180px !important; 
            overflow-y: auto !important; 
            padding: 10px 14px; 
            border-bottom: 1px solid var(--border-l);
        }
        .lp-in {
            width: 100%; padding: 6px 8px; font-size: 11px; font-family: inherit;
            border: 1.5px solid var(--border); border-radius: var(--r3); color: var(--navy);
            margin-bottom: 8px; display: block; background: var(--border-l);
        }
        .lp-in:focus { outline: none; border-color: var(--blue); background: white; }
        
        .lp-btns { 
            padding: 10px 14px 12px; 
            background: var(--border-l);
            border-top: 1px solid var(--border-l);
            flex-shrink: 0;
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 5px; 
        }
        .lp-bt {
            padding: 6px 5px; border-radius: var(--r3); border: 1.5px solid var(--border);
            background: white; font-family: inherit; font-size: 11px; font-weight: 700;
            color: var(--text-2); cursor: pointer; transition: all 0.14s;
            display: flex; align-items: center; justify-content: center; gap: 4px;
        }
        .lp-bt svg { flex-shrink: 0; }
        .lp-bt:hover     { background: var(--blue);  color: white; border-color: var(--blue); }
        .lp-bt:hover svg { color: white; }
        .lp-bt.sv        { background: var(--green); color: white; border-color: var(--green); }
        .lp-bt.dl:hover  { background: var(--red);   color: white; border-color: var(--red); }

        /* ── USER PROFILE BAR ── */
        #user-profile {
            animation: slideDown 0.5s 0.1s cubic-bezier(0.34,1.56,0.64,1) both;
        }

        /* ── GAP BADGE ── */
        @keyframes pulseRing {
            0%   { transform: scale(0.9); opacity: 0.9; }
            70%  { transform: scale(1.4); opacity: 0.3; }
            100% { transform: scale(0.9); opacity: 0.9; }
        }
        .gap-badge {
            position: fixed;
            bottom: 68px; left: 16px;
            z-index: 1000;
            background: var(--red);
            color: white;
            font-size: 11px; font-weight: 700;
            padding: 6px 14px 6px 12px;
            border-radius: 20px;
            box-shadow: 0 4px 16px rgba(239,68,68,0.38);
            display: none;
            font-family: 'Plus Jakarta Sans', sans-serif;
            animation: pulseRing 2s ease-in-out infinite;
            align-items: center;
            gap: 6px;
        }
        .gap-badge svg { flex-shrink: 0; }
        .fab-gap-on {
            background: var(--red-l) !important;
            border: 1.5px solid rgba(239,68,68,0.30) !important;
        }
    </style>
</head>
<body>

<div id="map"></div>

<!-- ═══════════════════════════════════════════
     NAVBAR
═══════════════════════════════════════════ -->
<nav id="navbar">
    <!-- Brand -->
    <div class="nav-brand">
        <div class="nav-brand-logo">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        </div>
        <div class="nav-brand-text">WebGIS<span>&nbsp;Sosial</span></div>
    </div>

    <div class="nav-divider"></div>

    <!-- Menu Items -->
    <?php if (isset($_SESSION['role']) && in_array($_SESSION['role'], ['admin', 'walikota'])): ?>
    <a href="dashboard.php" class="nav-item" style="background:var(--blue-m); color:var(--blue);">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
        Dashboard
    </a>
    <div class="nav-divider"></div>
    <?php endif; ?>

    <button class="nav-item" onclick="openPanel('cari')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        Cari Lokasi
    </button>

    <button class="nav-item" onclick="openPanel('histori')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        Histori
    </button>

    <button class="nav-item danger" id="fab-gap" onclick="toggleGapLayer()">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        <span id="fab-gap-text">Blind Spot</span>
    </button>

    <button class="nav-item warning" onclick="bukaModalLaporan()" style="position:relative">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
        Lapor Warga
        <?php if (in_array($_SESSION['role'] ?? '', ['admin', 'walikota'])): ?>
        <span id="badge-laporan-nav" style="display:none;position:absolute;top:4px;right:4px;min-width:14px;height:14px;border-radius:8px;background:var(--red);color:white;font-size:8px;font-weight:700;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid rgba(255,255,255,0.85)">0</span>
        <?php endif; ?>
    </button>

    <button class="nav-item success" onclick="openModalDonasi()">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
        Bantu Mereka
    </button>

    <button class="nav-item" onclick="bukaTransparansi()" style="color:#D97706">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        Distribusi
    </button>

    <!-- Spacer -->
    <div class="nav-spacer"></div>

    <!-- Live Stats -->
    <div class="nav-stats">
        <div class="nsp-item">
            <div class="nsp-dot" style="background:#10B981"></div>
            <span class="nsp-label">Ibadah</span>
            <span class="nsp-num" id="cI">&mdash;</span>
        </div>
        <div class="nsp-sep"></div>
        <div class="nsp-item">
            <div class="nsp-dot" style="background:#2563EB"></div>
            <span class="nsp-label">KK</span>
            <span class="nsp-num" id="cM">&mdash;</span>
        </div>
        <div class="nsp-sep"></div>
        <div class="nsp-item">
            <div class="nsp-dot" style="background:#94A3B8"></div>
            <span class="nsp-label">Jiwa</span>
            <span class="nsp-num" id="cJ">&mdash;</span>
        </div>
    </div>

    <!-- User -->
    <div class="nav-user">
        <div class="nav-user-avatar">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <span class="nav-user-name"><?php echo ucfirst($_SESSION['role']); ?></span>
        <a href="logout.php" class="nav-logout">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
            Logout
        </a>
    </div>
</nav>

<!-- Hint bar (bottom center) -->
<div id="hint-bar">
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
    Klik di peta untuk menambahkan data
</div>


<div id="panel-backdrop" onclick="closePanel()"></div>

<div class="slide-panel" id="panel-cari">
    <div class="panel-inner">
        <div class="panel-header">
            <div class="panel-title">
                <div class="pt-icon" style="background:var(--blue-l)">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </div>
                Cari Lokasi
            </div>
            <button class="btn-close" onclick="closePanel()">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="panel-body">
            <div class="search-wrap">
                <span class="si">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </span>
                <input type="text" id="searchInput" placeholder="Nama tempat atau kepala keluarga..." oninput="doSearch(this.value)" />
            </div>
            <div id="searchResults">
                <div class="empty-state">
                    <div class="es-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
                    Ketik untuk mencari lokasi
                </div>
            </div>
        </div>
    </div>
</div>

<div class="slide-panel" id="panel-histori">
    <div class="panel-inner">
        <div class="panel-header">
            <div class="panel-title">
                <div class="pt-icon" style="background:var(--border-l)">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                Histori Data
            </div>
            <button class="btn-close" onclick="closePanel()">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="panel-body">
            <div id="histList">
                <div class="empty-state">
                    <div class="es-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10h18M3 14h18M10 3v18M14 3v18" opacity=".3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg></div>
                    Belum ada data tersimpan
                </div>
            </div>
        </div>
    </div>
</div>

<div class="slide-panel" id="panel-transparansi">
    <div class="panel-inner">
        <div class="panel-header">
            <div class="panel-title">
                <div class="pt-icon" style="background:#fef3c7">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#D97706" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                </div>
                Transparansi Distribusi
            </div>
            <button class="btn-close" onclick="closePanel()">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="panel-body">
            
            <div style="background: linear-gradient(135deg,#10B981,#059669); border-radius: var(--r2); padding: 18px; color: white; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(16,185,129,0.28);">
                <div style="font-size: 11px; font-weight: 600; opacity: 0.85; margin-bottom: 4px; display:flex; align-items:center; gap:5px;">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
                    Total Donasi Diterima
                </div>
                <div style="font-size: 26px; font-weight: 800; letter-spacing: 0.5px;" id="trans-masuk">Rp 0</div>
                <div style="font-size: 10px; margin-top: 8px; background: rgba(255,255,255,0.2); display: inline-block; padding: 3px 10px; border-radius: 12px;" id="trans-donatur">Dari 0 Donatur</div>
            </div>

            <div style="font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 12px; border-bottom: 2px solid var(--border-l); padding-bottom: 6px; display:flex; align-items:center; gap:6px;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                Log Penyaluran ke Warga
            </div>
            
            <div id="list-distribusi">
                <div class="empty-state">
                    <div class="es-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
                    Memuat data transparansi...
                </div>
            </div>

        </div>
    </div>
</div>

<div id="modal-donasi" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.48); backdrop-filter:blur(6px); z-index:3000; align-items:center; justify-content:center;">
    <div style="background:white; border-radius:var(--r); padding:20px 24px; width:340px; max-width:90vw; max-height:90vh; overflow-y:auto; box-shadow:0 28px 64px rgba(15,23,42,0.28); animation: mIn 0.24s cubic-bezier(0.34,1.5,0.64,1);">
        
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
            <div style="display:flex;align-items:center;gap:10px">
                <div id="mdl-icon" style="width:34px;height:34px;background:linear-gradient(135deg,#10B981,#059669);border-radius:10px;display:flex;align-items:center;justify-content:center;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
                </div>
                
                <div id="mdl-title-container" style="text-align:left">
                    <div style="font-size:14px;font-weight:700;color:var(--navy)">Salurkan Donasi</div>
                </div>
            </div>
            <button onclick="closeModalDonasi()" style="width:28px;height:28px;border:none;background:var(--border-l);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        
        <div id="donasi-modal-body">
            <div style="background: var(--border-l); border: 1.5px dashed rgba(16,185,129,0.3); border-radius: var(--r2); padding: 16px; text-align: center; margin-bottom: 16px;">
                <div style="font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 4px;">Pilih Metode Pembayaran</div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;">
                    <label style="border: 1.5px solid var(--blue); border-radius: var(--r3); padding: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--blue-l);">
                        <input type="radio" name="metode_donasi" value="QRIS" checked style="margin: 0;">
                        <span style="font-size: 11px; font-weight: 700; color: var(--navy);">QRIS</span>
                    </label>
                    <label style="border: 1.5px solid var(--border); border-radius: var(--r3); padding: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; background: white;">
                        <input type="radio" name="metode_donasi" value="Transfer Bank" style="margin: 0;">
                        <span style="font-size: 11px; font-weight: 700; color: var(--navy);">Transfer Bank</span>
                    </label>
                </div>
            </div>

            <div class="ff"><label>Nominal Donasi (Rp)</label><input type="number" id="donasi_nominal" placeholder="Contoh: 50000" min="10000"></div>
            <div class="ff"><label>Nama Donatur</label><input type="text" id="donasi_nama" placeholder="Nama Anda (Boleh Anonim)"></div>
            <div class="ff"><label>Pesan Dukungan (Opsional)</label><input type="text" id="donasi_pesan" placeholder="Tuliskan doa atau pesan..."></div>
            
            <button class="btn-sv g" style="width: 100%; margin-top: 14px; padding: 10px;" onclick="prosesDonasi()">Lanjutkan Pembayaran</button>
        </div>

    </div>
</div>

<div class="slide-panel" id="panel-laporan-saya">
    <div class="panel-inner">
        <div class="panel-header">
            <div class="panel-title">
                <div class="pt-icon" style="background:var(--amber-l)">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#D97706" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                Laporan Saya
            </div>
            <button class="btn-close" onclick="closePanel()">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="panel-body">
            <div id="laporan-saya-list">
                <div class="empty-state">
                    <div class="es-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
                    Memuat data laporan...
                </div>
            </div>
        </div>
    </div>
</div>

<div class="slide-panel" id="panel-detail">
    <div class="panel-inner">
        <div class="panel-header">
            <div class="panel-title">
                <div class="pt-icon" style="background:var(--blue-l)">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                </div>
                Detail Warga
            </div>
            <button class="btn-close" onclick="closePanel()">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="panel-body" id="detail-content"></div>
    </div>
</div>

<div id="modal-backdrop">
    <div id="modal-box">
        <div class="mh">
            <div class="mh-left">
                <div class="mh-icon" id="micon" style="background:var(--green-l)">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                </div>
                <div>
                    <div class="mh-title">Tambah Data Baru</div>
                    <div class="mh-coord" id="mcoord">—</div>
                </div>
            </div>
            <button class="btn-close" onclick="closeModal()">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>

        <div class="mt-row">
            <button class="mt a-green" id="mt-ibadah" onclick="switchTab('ibadah')">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                Rumah Ibadah
            </button>
            <button class="mt" id="mt-miskin" onclick="switchTab('miskin')">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                Warga Miskin
            </button>
        </div>

        <div class="mb" id="fb-ibadah">
            <div class="ff"><label>Nama Tempat</label><input type="text" id="f_nama" placeholder="Contoh: Masjid Al-Ikhlas" /></div>
            <div class="ff"><label>Kategori Rumah Ibadah</label>
                <select id="f_kategori">
                    <option value="Masjid">Masjid</option>
                    <option value="Gereja">Gereja</option>
                    <option value="Vihara">Vihara</option>
                    <option value="Pura">Pura</option>
                    <option value="Kelenteng">Kelenteng</option>
                </select>
            </div>
            <div class="ff"><label>PIC / Pengurus</label><input type="text" id="f_pic" placeholder="Nama pengurus" /></div>
            <div class="ff"><label>Alamat</label><input type="text" id="f_alm_i" placeholder="Alamat lengkap" /></div>
            <div class="sc">
                <div class="sc-top">
                    <span class="sc-lbl">Radius Jangkauan</span>
                    <span class="sc-val" id="rvDisplay">500 m</span>
                </div>
                <input type="range" id="radSlider" min="500" max="5000" step="50" value="500" oninput="onSlide(this.value)" />
                <div class="pp-row">
                    <button class="pp active" data-r="500"  onclick="setPreset(500,this)">500m</button>
                    <button class="pp"        data-r="1000" onclick="setPreset(1000,this)">1 km</button>
                    <button class="pp"        data-r="2000" onclick="setPreset(2000,this)">2 km</button>
                    <button class="pp"        data-r="5000" onclick="setPreset(5000,this)">5 km</button>
                </div>
            </div>
        </div>

        <div class="mb" id="fb-miskin" style="display:none">
            <div style="display:flex;gap:5px;margin-bottom:10px">
                <button id="stab-kk" onclick="switchSubTab('kk')" style="flex:1;padding:6px;border-radius:6px;border:1.5px solid var(--blue);background:var(--blue-l);font-family:inherit;font-size:11px;font-weight:700;color:var(--blue-d);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:5px;">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    Data KK
                </button>
                <button id="stab-anggota" onclick="switchSubTab('anggota')" style="flex:1;padding:6px;border-radius:6px;border:1.5px solid var(--border);background:var(--border-l);font-family:inherit;font-size:11px;font-weight:700;color:var(--text-3);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:5px;">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                    Anggota <span id="badge-anggota" style="background:var(--blue);color:white;border-radius:10px;padding:1px 6px;font-size:10px;margin-left:3px;display:none">0</span>
                </button>
            </div>

            <div id="stab-body-kk">
                <div class="ff"><label>Nama Kepala Keluarga</label><input type="text" id="f_kk" placeholder="Contoh: Budi Santoso" /></div>
                <div class="ff">
                    <label>Klasifikasi Khusus (Bisa Pilih Lebih Dari Satu)</label>
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:11px; color:var(--navy); padding:4px 0;">
                        <label style="display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:normal;"><input type="checkbox" id="f_k_fakir" value="1" style="width:auto; margin:0;"> Fakir Miskin</label>
                        <label style="display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:normal;"><input type="checkbox" id="f_k_dhuafa" value="1" style="width:auto; margin:0;"> Dhuafa</label>
                        <label style="display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:normal;"><input type="checkbox" id="f_k_lansia" value="1" style="width:auto; margin:0;"> Janda/Lansia</label>
                        <label style="display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:normal;"><input type="checkbox" id="f_k_yatim" value="1" style="width:auto; margin:0;"> Anak Yatim Piatu</label>
                        <label style="display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:normal;"><input type="checkbox" id="f_k_bencana" value="1" style="width:auto; margin:0;"> Korban Bencana</label>
                        <label style="display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:normal;"><input type="checkbox" id="f_k_disab" value="1" style="width:auto; margin:0;"> Disabilitas</label>
                    </div>
                </div>
                <div class="ff"><label>Jumlah Anggota (Jiwa)</label><input type="number" id="f_jml" placeholder="Contoh: 4" min="1" /></div>
                <div class="ff"><label>Alamat</label><input type="text" id="f_alm_m" placeholder="Alamat lengkap" /></div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
                    <div class="ff"><label>Tanggal Lahir KK</label><input type="date" id="f_tgl_lahir" style="font-size:12px;padding:7px 9px" /></div>
                    <div class="ff"><label>Pendidikan Terakhir</label>
                        <select id="f_pendidikan">
                            <option value="">— Pilih —</option>
                            <option>Tidak Sekolah</option><option>SD</option><option>SMP</option><option>SMA</option><option>D3</option><option>S1</option><option>S2</option><option>S3</option>
                        </select></div>
                </div>
                <div class="ff"><label>Pekerjaan</label><input type="text" id="f_pekerjaan" placeholder="Contoh: Buruh harian" /></div>
                <div class="ff"><label>Riwayat Penyakit / Disabilitas</label><input type="text" id="f_penyakit" placeholder="Contoh: Diabetes, atau Tidak ada" /></div>
                <div class="ff"><label>Kepemilikan Jaminan Sosial</label>
                    <select id="f_jaminan">
                        <option value="">— Pilih —</option>
                        <option>BPJS Kesehatan</option><option>KIS</option><option>BPJS Ketenagakerjaan</option><option>Tidak Ada</option>
                    </select></div>
                <button onclick="switchSubTab('anggota')" style="width:100%;padding:8px;margin-top:4px;border-radius:var(--r3);border:1.5px dashed rgba(37,99,235,0.35);background:var(--blue-m);font-family:inherit;font-size:12px;font-weight:600;color:var(--blue-d);cursor:pointer;">＋ Tambah Data Anggota Keluarga</button>
            </div>

            <div id="stab-body-anggota" style="display:none">
                <div id="anggota-list" style="margin-bottom:8px"></div>
                <div style="background:var(--border-l);border:1.5px solid var(--border);border-radius:var(--r2);padding:10px;margin-bottom:8px">
                    <div style="font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px">＋ Anggota Baru</div>
                    <div class="ff"><label>Nama Anggota</label><input type="text" id="an_nama" placeholder="Nama lengkap" /></div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
                        <div class="ff"><label>Tanggal Lahir</label><input type="date" id="an_tgl" /></div>
                        <div class="ff"><label>Jenis Kelamin</label>
                            <select id="an_jk">
                                <option value="">— Pilih —</option><option>Laki-laki</option><option>Perempuan</option>
                            </select></div>
                    </div>
                    <div class="ff"><label>Hubungan dengan KK</label>
                        <select id="an_hub">
                            <option value="">— Pilih —</option><option>Istri/Suami</option><option>Anak</option><option>Orang Tua</option><option>Saudara</option><option>Lainnya</option>
                        </select></div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
                        <div class="ff"><label>Pendidikan</label>
                            <select id="an_pend">
                                <option value="">— Pilih —</option><option>Tidak Sekolah</option><option>SD</option><option>SMP</option><option>SMA</option><option>D3</option><option>S1</option><option>S2</option><option>S3</option>
                            </select></div>
                        <div class="ff"><label>Pekerjaan</label><input type="text" id="an_kerja" placeholder="Pekerjaan" /></div>
                    </div>
                    <div class="ff"><label>Riwayat Penyakit</label><input type="text" id="an_sakit" placeholder="Atau tulis Tidak ada" /></div>
                    <div class="ff"><label>Jaminan Sosial</label>
                        <select id="an_jamin">
                            <option value="">— Pilih —</option><option>BPJS Kesehatan</option><option>KIS</option><option>BPJS Ketenagakerjaan</option><option>Tidak Ada</option>
                        </select></div>
                    <button onclick="tambahAnggota()" style="width:100%;padding:8px;border:none;border-radius:var(--r3);background:var(--blue);color:white;font-weight:700;cursor:pointer;">＋ Masukkan ke Daftar</button>
                </div>
            </div>
        </div>

        <div class="mf">
            <button class="btn-cncl" onclick="closeModal()">Batal</button>
            <button class="btn-sv g" id="btnSv" onclick="simpanModal()" style="display:flex;align-items:center;justify-content:center;gap:6px;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                Simpan ke Peta
            </button>
        </div>
    </div>
</div>

<!-- ═══ MODAL LAPORAN WARGA ═══ -->
<div id="modal-laporan" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.48); backdrop-filter:blur(6px); z-index:3000; align-items:center; justify-content:center;">
    <div style="background:white; border-radius:var(--r); width:380px; max-width:calc(100vw - 24px); max-height:90vh; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(15,23,42,0.22); overflow:hidden; animation: mIn 0.24s cubic-bezier(0.34,1.5,0.64,1);">

        <div style="padding:16px 16px 0; display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0;">
            <div style="display:flex; align-items:center; gap:10px;">
                <div style="width:36px; height:36px; border-radius:var(--r3); background:linear-gradient(135deg,#F59E0B,#D97706); display:flex; align-items:center; justify-content:center;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                </div>
                <div>
                    <div style="font-size:14px; font-weight:700; color:var(--navy)">Lapor Warga</div>
                    <div style="font-size:10px; color:var(--text-3)" id="laporan-step-label">Langkah 1 dari 3</div>
                </div>
            </div>
            <button onclick="tutupModalLaporan()" style="width:28px;height:28px;border:none;background:var(--border-l);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>

        <div style="padding:10px 16px 0; flex-shrink:0;">
            <div style="height:4px; background:var(--border-l); border-radius:4px; overflow:hidden;">
                <div id="laporan-progress-bar" style="height:100%; background:linear-gradient(90deg,#F59E0B,#D97706); border-radius:4px; transition:width 0.4s ease; width:33%"></div>
            </div>
        </div>

        <div style="flex:1; overflow-y:auto; padding:14px 16px 4px;">

            <!-- Step 1 -->
            <div id="laporan-step-1">
                <div style="font-size:13px; font-weight:700; color:var(--navy); margin-bottom:4px;">Siapa yang dilaporkan?</div>
                <div style="font-size:11px; color:var(--text-3); margin-bottom:14px;">Laporan akan diverifikasi admin sebelum masuk ke peta.</div>
                <div style="display:flex; flex-direction:column; gap:8px;">
                    <div id="lbl-diri" onclick="pilihTipeLaporan('diri_sendiri')" style="display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r2);border:2px solid var(--border);cursor:pointer;transition:all 0.18s;">
                        <div style="width:40px;height:40px;border-radius:50%;background:var(--blue-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        </div>
                        <div>
                            <div style="font-size:13px;font-weight:700;color:var(--navy)">Laporan Diri Sendiri</div>
                            <div style="font-size:11px;color:var(--text-3);margin-top:2px;">Saya yang membutuhkan bantuan</div>
                        </div>
                    </div>
                    <div id="lbl-lain" onclick="pilihTipeLaporan('orang_lain')" style="display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r2);border:2px solid var(--green);background:var(--green-l);cursor:pointer;transition:all 0.18s;">
                        <div style="width:40px;height:40px;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                        </div>
                        <div>
                            <div style="font-size:13px;font-weight:700;color:var(--navy)">Laporan Orang Lain</div>
                            <div style="font-size:11px;color:var(--text-3);margin-top:2px;">Saya melaporkan warga yang butuh bantuan</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2 -->
            <div id="laporan-step-2" style="display:none;">
                <div class="ff"><label>Nama Kepala Keluarga *</label><input type="text" id="lap_nama_kk" placeholder="Nama lengkap KK"></div>
                <div class="ff"><label>Alamat *</label><input type="text" id="lap_alamat" placeholder="Alamat lengkap"></div>

                <div style="background:var(--border-l);border:1.5px solid var(--border);border-radius:var(--r3);padding:10px;margin-bottom:10px;">
                    <div style="font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:7px;">Titik Lokasi</div>
                    <div style="display:flex;gap:7px;margin-bottom:7px;">
                        <input type="text" id="lap_lat" placeholder="Latitude" style="flex:1;padding:7px 9px;font-size:12px;font-family:inherit;border:1.5px solid var(--border);border-radius:var(--r3);background:white;color:var(--navy);">
                        <input type="text" id="lap_lng" placeholder="Longitude" style="flex:1;padding:7px 9px;font-size:12px;font-family:inherit;border:1.5px solid var(--border);border-radius:var(--r3);background:white;color:var(--navy);">
                    </div>
                    <button onclick="gunakanLokasiGPS()" id="btn-gps" style="width:100%;padding:8px;border-radius:var(--r3);border:none;background:var(--blue);color:white;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>
                        Gunakan Lokasi Saya (GPS)
                    </button>
                    <div id="lap-lokasi-status" style="font-size:10px;color:var(--text-3);text-align:center;margin-top:5px;display:none;"></div>
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                    <div class="ff"><label>Jml Anggota</label><input type="number" id="lap_jml" placeholder="4" min="1" value="1"></div>
                    <div class="ff"><label>Pekerjaan</label><input type="text" id="lap_pekerjaan" placeholder="Pekerjaan KK"></div>
                </div>

                <div class="ff">
                    <label>Klasifikasi (Boleh Lebih dari Satu)</label>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:11px;color:var(--navy);padding:4px 0;">
                        <label style="display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:normal;"><input type="checkbox" id="lap_fakir" style="width:auto;margin:0;"> Fakir Miskin</label>
                        <label style="display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:normal;"><input type="checkbox" id="lap_dhuafa" style="width:auto;margin:0;"> Dhuafa</label>
                        <label style="display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:normal;"><input type="checkbox" id="lap_lansia" style="width:auto;margin:0;"> Janda/Lansia</label>
                        <label style="display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:normal;"><input type="checkbox" id="lap_yatim" style="width:auto;margin:0;"> Anak Yatim Piatu</label>
                        <label style="display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:normal;"><input type="checkbox" id="lap_bencana" style="width:auto;margin:0;"> Korban Bencana</label>
                        <label style="display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:normal;"><input type="checkbox" id="lap_disab" style="width:auto;margin:0;"> Disabilitas</label>
                    </div>
                </div>

                <div class="ff"><label>Keterangan Tambahan (Opsional)</label><input type="text" id="lap_keterangan" placeholder="Info tambahan untuk admin..."></div>
            </div>

            <!-- Step 3 -->
            <div id="laporan-step-3" style="display:none;text-align:center;padding:10px 0 20px;">
                <div style="font-size:42px;margin-bottom:12px;">✅</div>
                <div style="font-size:15px;font-weight:800;color:var(--navy);margin-bottom:6px;">Laporan Terkirim!</div>
                <div style="font-size:12px;color:var(--text-2);margin-bottom:16px;">Laporan Anda sedang menunggu verifikasi dari admin.</div>
                <div style="background:var(--amber-l);border:1.5px solid rgba(245,158,11,0.3);border-radius:var(--r2);padding:14px;margin-bottom:14px;">
                    <div style="font-size:10px;font-weight:700;color:#B45309;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;">Nomor Referensi</div>
                    <div style="font-size:22px;font-weight:800;color:var(--navy);" id="lap-ref-number">#000000</div>
                </div>
                <button onclick="bukaStatusLaporan()" style="width:100%;padding:9px;border-radius:var(--r3);border:none;background:var(--border-l);font-family:inherit;font-size:12px;font-weight:700;color:var(--text-2);cursor:pointer;margin-bottom:8px;">
                    Cek Status Laporan Saya →
                </button>
                <button onclick="tutupModalLaporan()" style="width:100%;padding:9px;border-radius:var(--r3);border:1.5px solid var(--border);background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer;">
                    Tutup
                </button>
            </div>
        </div>

        <div style="padding:12px 16px 16px;display:flex;gap:8px;background:white;border-top:1px solid var(--border-l);flex-shrink:0;">
            <button id="btn-lap-back" onclick="laporanBack()" style="display:none;padding:9px 15px;border-radius:var(--r3);border:1.5px solid var(--border);background:var(--border-l);font-family:inherit;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;">Kembali</button>
            <button id="btn-lap-next" onclick="laporanNext()" style="flex:1;padding:9px;border-radius:var(--r3);border:none;background:var(--amber);color:white;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;">
                Lanjut →
            </button>
        </div>
    </div>
</div>

<div id="modal-qr" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.48); backdrop-filter:blur(6px); z-index:3000; align-items:center; justify-content:center;">
    <div style="background:white; border-radius:var(--r); padding:24px 28px; width:300px; text-align:center; box-shadow:0 28px 64px rgba(15,23,42,0.28); animation: mIn 0.24s cubic-bezier(0.34,1.5,0.64,1);">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
            <div style="display:flex;align-items:center;gap:10px">
                <div style="width:34px;height:34px;background:linear-gradient(135deg,#F59E0B,#D97706);border-radius:10px;display:flex;align-items:center;justify-content:center;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
                </div>
                <div style="text-align:left">
                    <div style="font-size:13px;font-weight:700;color:var(--navy)">Scan untuk Lapor</div>
                    <div style="font-size:10px;color:var(--text-3)">WebGIS Pemetaan Sosial</div>
                </div>
            </div>
            <button onclick="closeQR()" style="width:28px;height:28px;border:none;background:var(--border-l);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div style="background:var(--border-l); border:2px dashed var(--border); border-radius:var(--r2); padding:16px; margin-bottom:14px">
            <div id="qr-canvas" style="display:flex;justify-content:center;align-items:center;width:180px;height:180px;margin:0 auto"></div>
        </div>
        <div style="background:var(--border-l); border-radius:var(--r3); padding:7px 10px; margin-bottom:14px; font-size:10px; font-weight:600; color:var(--text-3); word-break:break-all" id="qr-url-text">—</div>
        <a id="qr-download" href="#" download="qr-lapor-warga.png" style="display:flex; align-items:center; justify-content:center; gap:7px; background:var(--navy); color:white; border-radius:var(--r3); padding:10px; font-size:12px; font-weight:700; text-decoration:none;">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Download untuk Dicetak
        </a>
    </div>
</div>

<div class="gap-badge" id="gap-badge">
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    <span id="gap-badge-text">—</span>
</div>

<div id="toast"></div>

<script>
const USER_ROLE = '<?php echo $_SESSION['role'] ?? "warga"; ?>';
const USER_MASJID = '<?php echo $_SESSION['nama_masjid'] ?? ""; ?>';
const USER_ID = <?php echo $_SESSION['user_id'] ?? 0; ?>;

let tempLL  = null;
let curTab  = 'ibadah';
let ibData  = [];
let miData  = [];
let gapData = [];
let daftarAnggota = [];

function getIconIbadah(kat) {
    if (!kat) return '🕌';
    const k = kat.toLowerCase();
    if (k.includes('gereja')) return '⛪';
    if (k.includes('vihara')) return '🏯';
    if (k.includes('pura')) return '🛕';
    if (k.includes('kelenteng')) return '🏮';
    return '🕌'; // Default Masjid/Mushola
}

// PETA
const map = L.map('map', { zoomControl: true }).setView([-0.0548, 109.3494], 14);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:19, attribution:'© OpenStreetMap' }).addTo(map);

let lyI = L.layerGroup().addTo(map);
let lyM = L.layerGroup().addTo(map);
let lyGap = L.layerGroup();
let gapAktif = false;
L.control.layers(null, { "Rumah Ibadah": lyI, "Warga Miskin": lyM, "Zona Gap": lyGap }, { collapsed:true, position:'bottomright' }).addTo(map);

// Legenda
const legend = L.control({ position: 'bottomleft' });
legend.onAdd = function() {
    const div = L.DomUtil.create('div');
    div.style.cssText = 'background:rgba(255,255,255,0.96);padding:8px 12px;border-radius:10px;font-size:11px;font-family:Plus Jakarta Sans,sans-serif;box-shadow:0 2px 8px rgba(15,23,42,0.12);line-height:1.8;border:1px solid #E2E8F0';
    div.innerHTML = `
        <strong style="display:block;margin-bottom:4px;color:#0F172A">Warga Miskin</strong>
        <span style="display:flex;align-items:center;gap:6px"><svg width="12" height="12"><circle cx="6" cy="6" r="5" fill="#EF4444"/></svg> Di luar jangkauan</span>
        <span style="display:flex;align-items:center;gap:6px"><svg width="12" height="12"><circle cx="6" cy="6" r="5" fill="#10B981"/></svg> Di dalam jangkauan</span>`;
    return div;
};
legend.addTo(map);

const mkG = new L.Icon({ iconUrl:'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', shadowUrl:'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize:[25,41], iconAnchor:[12,41], popupAnchor:[1,-34], shadowSize:[41,41] });

map.on('click', function(e) {
    // 1. Walikota dan Warga tidak boleh menambah titik data sama sekali
    if (USER_ROLE === 'warga' || USER_ROLE === 'walikota') {
        toast('⚠️ Anda hanya memiliki akses untuk melihat data.', 'err');
        return;
    }

    tempLL = e.latlng;
    document.getElementById('mcoord').textContent = e.latlng.lat.toFixed(5) + ', ' + e.latlng.lng.toFixed(5);
    
    // 2. Jika yang login adalah pengurus masjid, sembunyikan tab Rumah Ibadah
    if (USER_ROLE === 'pengurus_masjid') {
        document.getElementById('mt-ibadah').style.display = 'none';
        switchTab('miskin'); // Langsung arahkan ke tab Warga Miskin
    } else {
        document.getElementById('mt-ibadah').style.display = 'flex';
        switchTab('ibadah'); // Default untuk admin
    }
    
    document.getElementById('modal-backdrop').classList.add('show');
});

function closeModal() {
    document.getElementById('modal-backdrop').classList.remove('show');
    ['f_nama','f_pic','f_alm_i','f_kk','f_jml','f_alm_m','f_tgl_lahir','f_pekerjaan','f_penyakit'].forEach(id => {
        const e = document.getElementById(id); if(e) e.value='';
    });
    ['f_pendidikan','f_jaminan'].forEach(id => {
        const e = document.getElementById(id); if(e) e.selectedIndex = 0;
    });
    // PERBAIKAN: Bersihkan checkbox klasifikasi
    ['f_k_fakir','f_k_dhuafa','f_k_lansia','f_k_yatim','f_k_bencana','f_k_disab'].forEach(id => {
        const e = document.getElementById(id); if(e) e.checked = false;
    });

    daftarAnggota = [];
    renderDaftarAnggota();
    resetFormAnggota();
    switchSubTab('kk');
    document.getElementById('radSlider').value = 500; onSlide(500);
}

function switchTab(tab) {
    curTab = tab;
    document.getElementById('mt-ibadah').className = 'mt' + (tab==='ibadah' ? ' a-green' : '');
    document.getElementById('mt-miskin').className  = 'mt' + (tab==='miskin'  ? ' a-blue'  : '');
    document.getElementById('fb-ibadah').style.display = tab==='ibadah' ? 'block' : 'none';
    document.getElementById('fb-miskin').style.display  = tab==='miskin'  ? 'block' : 'none';
    const btn = document.getElementById('btnSv');
    btn.className = tab==='ibadah' ? 'btn-sv g' : 'btn-sv b';
    const micon = document.getElementById('micon');
    if (tab === 'ibadah') {
        micon.style.background = 'var(--green-l)';
        micon.innerHTML = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`;
    } else {
        micon.style.background = 'var(--blue-l)';
        micon.innerHTML = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>`;
    }
}

function onSlide(v) {
    const n = parseInt(v);
    document.getElementById('rvDisplay').textContent = n >= 1000 ? (n/1000).toFixed(1)+' km' : n+' m';
    document.querySelectorAll('.pp').forEach(b => b.classList.toggle('active', parseInt(b.dataset.r)===n));
    const slider = document.getElementById('radSlider');
    const pct = ((n - 500) / (5000 - 500)) * 100;
    slider.style.background = `linear-gradient(to right, var(--green) ${pct}%, rgba(16,185,129,0.2) ${pct}%)`;
}
function updateEditSlider(id, v) {
    const n = parseInt(v);
    const display = document.getElementById(`pe_rv_${id}`);
    const slider = document.getElementById(`pe_r_${id}`);
    
    // Update angka km / meter
    if (display) {
        display.textContent = n >= 1000 ? (n / 1000).toFixed(1) + ' km' : n + ' m';
    }
    // Update warna progres hijau pada bar
    if (slider) {
        const pct = ((n - 500) / (5000 - 500)) * 100;
        slider.style.background = `linear-gradient(to right, var(--green) ${pct}%, rgba(16,185,129,0.2) ${pct}%)`;
    }
}
function setPreset(v, el) {
    document.getElementById('radSlider').value = v; onSlide(v);
    document.querySelectorAll('.pp').forEach(b => b.classList.remove('active'));
    el.classList.add('active');
}

function simpanModal() {
    if (!tempLL) return;
    
    // Cegah pengurus masjid menambahkan titik masjid baru (Hanya Admin)
    if (curTab === 'ibadah' && USER_ROLE !== 'admin') {
        toast('⚠️ Hanya Admin pusat yang dapat menambah data Rumah Ibadah.', 'err');
        return;
    }

    const fd = new FormData();
    fd.append('lat', tempLL.lat); fd.append('lng', tempLL.lng);
    
    if (curTab === 'ibadah') {
        // Tangkap elemen
        const elNama = document.getElementById('f_nama');
        const elKat  = document.getElementById('f_kategori'); // 👈 Tangkap elemen dropdown
        const elPic  = document.getElementById('f_pic');
        const elAlm  = document.getElementById('f_alm_i');
        const elRad  = document.getElementById('radSlider');

        // Ambil nilainya
        const n = elNama ? elNama.value.trim() : '';
        const k = elKat  ? elKat.value : 'Masjid'; // 👈 Ambil value, default Masjid
        const p = elPic  ? elPic.value.trim() : '';
        const a = elAlm  ? elAlm.value.trim() : '';
        const r = elRad  ? elRad.value : 500;

        if (!n || !p || !a) { toast('⚠️ Lengkapi semua field rumah ibadah', 'err'); return; }

        // Masukkan ke paket kiriman
        fd.append('nama_tempat', n);
        fd.append('kategori', k); // 👈 Masukkan kategori ke API
        fd.append('pic', p);
        fd.append('alamat', a);
        fd.append('radius', r);

        fetch('api_ibadah.php?aksi=simpan', { method:'POST', body:fd })
            .then(res => res.text())
            .then(text => { 
                console.log("Respon Ibadah PHP:", text);
                if(text.includes('Sukses')) {
                    closeModal(); muatData(); toast('✅ Rumah Ibadah ditambahkan!', 'ok'); 
                } else {
                    toast('❌ ' + text, 'err');
                }
            }).catch(e => toast('❌ Error Jaringan','err'));

    } else {
        // VALIDASI GEO-FENCE KHUSUS PENGURUS MASJID
        if (USER_ROLE === 'pengurus_masjid') {
            const myMosque = ibData.find(ib => ib.nama_tempat === USER_MASJID);
            if (myMosque) {
                const jarak = haversine(tempLL.lat, tempLL.lng, parseFloat(myMosque.lat), parseFloat(myMosque.lng));
                if (jarak > parseInt(myMosque.radius)) {
                    toast(`⚠️ Ditolak! Titik ini berjarak ${Math.round(jarak)}m (di luar radius ${myMosque.radius}m masjid Anda).`, 'err');
                    return; 
                }
            } else {
                toast('⚠️ Data masjid Anda tidak ditemukan di peta. Hubungi Admin.', 'err');
                return;
            }
        }

        const k = document.getElementById('f_kk') ? document.getElementById('f_kk').value.trim() : '';
        const j = document.getElementById('f_jml') ? document.getElementById('f_jml').value : 0;
        const a = document.getElementById('f_alm_m') ? document.getElementById('f_alm_m').value.trim() : '';
        if (!k || !j || !a) { toast('⚠️ Lengkapi field Kepala Keluarga, Anggota, dan Alamat','err'); return; }

        fd.append('nama_kk',             k);
        fd.append('jumlah_anggota',      j);
        fd.append('alamat',              a);
        fd.append('tanggal_lahir',       document.getElementById('f_tgl_lahir') ? document.getElementById('f_tgl_lahir').value : '');
        fd.append('pendidikan_terakhir', document.getElementById('f_pendidikan') ? document.getElementById('f_pendidikan').value : '');
        fd.append('pekerjaan',           document.getElementById('f_pekerjaan') ? document.getElementById('f_pekerjaan').value.trim() : '');
        fd.append('riwayat_penyakit',    document.getElementById('f_penyakit') ? document.getElementById('f_penyakit').value.trim() : '');
        fd.append('kepemilikan_jaminan', document.getElementById('f_jaminan') ? document.getElementById('f_jaminan').value : '');
        fd.append('anggota',             JSON.stringify(daftarAnggota));

        // Amankan pembacaan checkbox
        const cekFakir = document.getElementById('f_k_fakir'); fd.append('is_fakir_miskin', (cekFakir && cekFakir.checked) ? 1 : 0);
        const cekDhuafa= document.getElementById('f_k_dhuafa');fd.append('is_dhuafa', (cekDhuafa && cekDhuafa.checked) ? 1 : 0);
        const cekLansia= document.getElementById('f_k_lansia');fd.append('is_lansia_tunggal', (cekLansia && cekLansia.checked) ? 1 : 0);
        const cekYatim = document.getElementById('f_k_yatim'); fd.append('is_anak_yatim', (cekYatim && cekYatim.checked) ? 1 : 0);
        const cekBencana=document.getElementById('f_k_bencana');fd.append('is_korban_bencana', (cekBencana && cekBencana.checked) ? 1 : 0);
        const cekDisab = document.getElementById('f_k_disab'); fd.append('is_disabilitas', (cekDisab && cekDisab.checked) ? 1 : 0);

        fetch('api_kemiskinan.php?aksi=simpan', { method:'POST', body:fd })
            .then(res => res.text())
            .then(text => { 
                console.log("Respon Warga PHP:", text);
                if(text.includes('Sukses') || text.trim() === '') {
                    closeModal(); muatData(); toast('✅ Warga Miskin berhasil ditambahkan!', 'ok'); 
                } else {
                    toast('❌ ' + text, 'err'); // Akan menampilkan error MySQL langsung di layar!
                }
            })
            .catch(err => {
                toast('❌ Gagal menghubungi server', 'err');
                console.error(err);
            });
    }
}

function haversine(lat1, lng1, lat2, lng2) {
    const R = 6371000;
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLng = (lng2 - lng1) * Math.PI / 180;
    const a = Math.sin(dLat/2)**2 + Math.cos(lat1 * Math.PI/180) * Math.cos(lat2 * Math.PI/180) * Math.sin(dLng/2)**2;
    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}

function isInsideAnyCircle(lat, lng) {
    return ibData.some(ib => {
        const dist = haversine(lat, lng, parseFloat(ib.lat), parseFloat(ib.lng));
        return dist <= parseInt(ib.radius);
    });
}

function renderMiskin() {
    lyM.clearLayers();
    if (!miData || !Array.isArray(miData)) return;

    miData.forEach(d => {
        const lat = parseFloat(d.lat);
        const lng = parseFloat(d.lng);

        if (isNaN(lat) || isNaN(lng) || lat === 0 || lng === 0) {
            console.warn("Koordinat dilewati karena tidak valid untuk KK:", d.nama_kk);
            return;
        }

        const inside = isInsideAnyCircle(lat, lng);
        const warna  = inside ? '#10B981' : '#EF4444'; 

        // 1. Buat markernya saja, JANGAN pasang bindPopup di sini
        const marker = L.circleMarker([lat, lng], {
            radius:      inside ? 7 : 9,
            color:       warna,
            fillColor:   warna,
            fillOpacity: inside ? 0.75 : 0.95,
            weight:      inside ? 2 : 3
        }).addTo(lyM); 

        // 2. Pasang popup berdasarkan role
        if (USER_ROLE !== 'warga') {
            marker.bindPopup(popM(d));
        } else {
            marker.bindPopup(`<div class="lp-bd" style="font-family: 'Plus Jakarta Sans', sans-serif;">📌 <strong>Status Zona:</strong> Warga terdata di area ${inside ? '<span style="color:var(--green)">Terjangkau</span>' : '<span style="color:var(--red)">Blind Spot</span>'}.</div>`);
        }

        if (!inside) {
            marker.once('add', () => {
                const el = marker.getElement();
                if (el) el.style.animation = 'pulseRing 2s ease-in-out infinite';
            });
        }
    }); 
}

function muatData() {
    fetch('api_ibadah.php?aksi=tampil').then(r => r.json()).then(data => {
        lyI.clearLayers(); ibData = data;
        data.forEach(d => {
            L.circle([d.lat, d.lng], { color: '#10B981', fillColor: '#10B981', fillOpacity: 0.1, radius: parseInt(d.radius), weight: 1.5 }).addTo(lyI);
            const m = L.marker([d.lat, d.lng], { icon: mkG, draggable: true }).addTo(lyI).bindPopup(popI(d));
            m.on('dragend', e => updLoc('ibadah', d.id, e.target.getLatLng()));
        });
        renderMiskin(); updStats(); renderHist();
        if (gapAktif) renderGapZones();
    });

    fetch('api_kemiskinan.php?aksi=tampil')
    .then(r => r.json())
    .then(data => {
        lyM.clearLayers(); // Bersihkan layer lama agar tidak menumpuk
        miData = data;     // Masukkan data baru dari PHP ke global array
        renderMiskin();    // Panggil penggambaran ulang titik lingkaran
        updStats();        // Update papan statistik di atas peta
        renderHist();      // Segarkan timeline histori kiri/kanan
    })
    .catch(e => console.error("Gagal sinkronisasi data spasial:", e));
}

function popI(d) {
    const rl = d.radius >= 1000 ? (d.radius / 1000).toFixed(1) + 'km' : d.radius + 'm';
    
    let rVal = parseInt(d.radius) || 500;
    if (rVal < 500) rVal = 500;
    if (rVal > 5000) rVal = 5000;
    const pct = ((rVal - 500) / (5000 - 500)) * 100;
    const bgGradient = `linear-gradient(to right, var(--green) ${pct}%, rgba(16,185,129,0.2) ${pct}%)`;

    // Panggil fungsi Emoji dinamis
    const katIbadah = d.kategori || 'Masjid';
    const iconDynamic = getIconIbadah(katIbadah);

    let tombolAdminHtml = '';
    if (USER_ROLE === 'admin' || (USER_ROLE === 'pengurus_masjid' && USER_MASJID === d.nama_tempat)) {
        tombolAdminHtml = `
            <div class="lp-btns" id="pi_btn_view_${d.id}" style="display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px;">
                <button class="lp-bt" onclick="lpToggle('ibadah',${d.id})">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                    Edit
                </button>
                <button class="lp-bt dl" onclick="hapus('ibadah',${d.id})">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>
                    Hapus
                </button>
            </div>
            
            <div class="lp-btns" id="pi_btn_edit_${d.id}" style="display: none !important; grid-template-columns: 1fr 1fr !important; gap: 5px;">
                <button class="lp-bt" onclick="lpToggle('ibadah',${d.id})">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    Batal
                </button>
                <button class="lp-bt sv" onclick="lpUpdate('ibadah',${d.id})">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Selesai
                </button>
            </div>
        `;
    }

    // Category badge color mapping
    const katColors = { 'Masjid':'#10B981','Gereja':'#3B82F6','Vihara':'#F59E0B','Pura':'#F97316','Kelenteng':'#EC4899' };
    const katColor = katColors[katIbadah] || '#10B981';

    return `<div class="lp">
        <div class="lp-hd" style="background: linear-gradient(135deg, ${katColor}18, ${katColor}08); border-bottom: 3px solid ${katColor}30; padding: 14px;">
            <div style="display:flex; align-items:center; gap:10px;">
                <div style="width:36px; height:36px; border-radius:10px; background:${katColor}20; border:1.5px solid ${katColor}40; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="${katColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                </div>
                <div style="flex:1; min-width:0;">
                    <div class="lp-ti" style="font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${d.nama_tempat}</div>
                    <div style="display:flex; align-items:center; gap:5px; margin-top:3px;">
                        <span style="background:${katColor}; color:white; font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; letter-spacing:0.03em;">${katIbadah}</span>
                        <span style="font-size:10px; color:#64748B; display:flex; align-items:center; gap:3px;">
                            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                            Radius: <strong style="color:${katColor}; font-weight:800;">${rl}</strong>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="lp-bd" id="pi_${d.id}" style="display:grid; gap:6px; padding:12px 14px;">
            <div style="display:flex; align-items:flex-start; gap:7px; background:#F8FAFC; border-radius:7px; padding:7px 9px;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="2" stroke-linecap="round" style="flex-shrink:0; margin-top:1px;"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                <div style="line-height:1.4;"><span style="font-size:9px; font-weight:700; color:#94A3B8; text-transform:uppercase; letter-spacing:0.08em;">PIC / Pengurus</span><br><span style="font-size:11.5px; font-weight:600; color:#0F172A;">${d.pic}</span></div>
            </div>
            <div style="display:flex; align-items:flex-start; gap:7px; background:#F8FAFC; border-radius:7px; padding:7px 9px;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="2" stroke-linecap="round" style="flex-shrink:0; margin-top:1px;"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                <div style="line-height:1.4;"><span style="font-size:9px; font-weight:700; color:#94A3B8; text-transform:uppercase; letter-spacing:0.08em;">Alamat</span><br><span style="font-size:11.5px; font-weight:600; color:#0F172A;">${d.alamat}</span></div>
            </div>
        </div>
        
        <div class="lp-ef" id="pif_${d.id}" style="display:none">
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Nama Tempat</label>
            <input class="lp-in" id="pe_n_${d.id}" value="${d.nama_tempat}" placeholder="Nama Tempat">

            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Kategori</label>
            <select class="lp-in" id="pe_k_${d.id}">
                <option value="Masjid" ${katIbadah=='Masjid'?'selected':''}>Masjid</option>
                <option value="Gereja" ${katIbadah=='Gereja'?'selected':''}>Gereja</option>
                <option value="Vihara" ${katIbadah=='Vihara'?'selected':''}>Vihara</option>
                <option value="Pura" ${katIbadah=='Pura'?'selected':''}>Pura</option>
                <option value="Kelenteng" ${katIbadah=='Kelenteng'?'selected':''}>Kelenteng</option>
            </select>

            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">PIC / Pengurus</label>
            <input class="lp-in" id="pe_p_${d.id}" value="${d.pic}" placeholder="Nama Pengurus">
            
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Alamat</label>
            <input class="lp-in" id="pe_a_${d.id}" value="${d.alamat}" placeholder="Alamat Lengkap">
            
            <div style="background: var(--border-l); border: 1.5px solid var(--border); border-radius: var(--r3); padding: 10px; margin-top: 8px; margin-bottom: 8px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                    <label style="font-size:10px; font-weight:700; color:var(--navy); margin:0;">Radius Jangkauan</label>
                    <span id="pe_rv_${d.id}" style="background:var(--green); color:white; font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px;">${rl}</span>
                </div>
                <input type="range" id="pe_r_${d.id}" min="500" max="5000" step="50" value="${rVal}" style="background: ${bgGradient};" oninput="updateEditSlider(${d.id}, this.value)">
            </div>
        </div>
        
        ${tombolAdminHtml}
    </div>`;
}

function popM(d) {
    const sel = (val, opt) => val === opt ? 'selected' : '';
    const chk = (val) => val == 1 ? 'checked' : '';

    // AMANKAN KELUARGA: Hitung jumlah jiwa secara dinamis dari string anggota keluarga
    let jumlahJiwa = d.jumlah_anggota || 0;
    try {
        if (d.anggota) {
            const angArr = typeof d.anggota === 'string' ? JSON.parse(d.anggota) : d.anggota;
            if (angArr && angArr.length > 0) {
                jumlahJiwa = angArr.length + 1; 
            }
        }
    } catch(e) {
        console.log("Format anggota belum berupa array/JSON valid saat render titik");
    }

    const infoBantuan = d.status_bantuan || "Warga ini belum pernah menerima bantuan.";

    // PROSES TAG KLASIFIKASI UNTUK MUNCUL DI ATAS INFO ANGGOTA
    let tags = [];
    if (d.is_fakir_miskin == 1)   tags.push({ label: 'Fakir Miskin', color: '#dc2626' });
    if (d.is_dhuafa == 1)         tags.push({ label: 'Dhuafa',        color: '#9333ea' });
    if (d.is_lansia_tunggal == 1) tags.push({ label: 'Janda/Lansia',  color: '#d97706' });
    if (d.is_anak_yatim == 1)     tags.push({ label: 'Yatim Piatu',   color: '#0891b2' });
    if (d.is_korban_bencana == 1) tags.push({ label: 'Bencana',       color: '#ea580c' });
    if (d.is_disabilitas == 1)    tags.push({ label: 'Disabilitas',   color: '#0284c7' });

    let klasifikasiHtmlPopup = '';
    if (tags.length > 0) {
        klasifikasiHtmlPopup = `<div style="display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px;">` +
            tags.map(t => `<span style="background:${t.color}20; color:${t.color}; border:1px solid ${t.color}40; font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; letter-spacing:0.02em;">${t.label}</span>`).join('') +
        `</div>`;
    }

    // ==========================================
    // LOGIKA GEO-FENCING (BATASAN RADIUS MASJID)
    // ==========================================
    let masukRadiusSaya = false;
    if (USER_ROLE === 'pengurus_masjid') {
        const myMosque = ibData.find(ib => ib.nama_tempat === USER_MASJID);
        if (myMosque) {
            // Hitung jarak warga ke masjid pengurus
            const jarak = haversine(parseFloat(d.lat), parseFloat(d.lng), parseFloat(myMosque.lat), parseFloat(myMosque.lng));
            // Jika jaraknya lebih kecil atau sama dengan radius masjid, tandai TRUE
            if (jarak <= parseInt(myMosque.radius)) {
                masukRadiusSaya = true;
            }
        }
    }

    // Penentuan Hak Akses Edit/Hapus
    let btnEditHapusHtml = '';
    let isBisaEdit = false;

    // Admin bisa edit semua. Pengurus HANYA bisa edit jika warga di dalam radiusnya.
    if (USER_ROLE === 'admin' || (USER_ROLE === 'pengurus_masjid' && masukRadiusSaya)) {
        isBisaEdit = true;
        btnEditHapusHtml = `
            <button class="lp-bt" onclick="lpToggle('miskin',${d.id})" style="display:flex;align-items:center;justify-content:center;gap:4px;">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                Edit
            </button>
            <button class="lp-bt dl" onclick="hapus('miskin',${d.id})" style="display:flex;align-items:center;justify-content:center;gap:4px;">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>
                Hapus
            </button>
        `;
    }

    // Penentuan Hak Akses Tombol Tambah Histori Bantuan
    let btnBantuanHtml = '';
    if (USER_ROLE === 'admin' || (USER_ROLE === 'pengurus_masjid' && masukRadiusSaya)) {
        btnBantuanHtml = `
            <button class="lp-bt" style="grid-column: 1 / -1 !important; width: 100%; margin-top: 3px; background: linear-gradient(135deg,#2563EB,#1D4ED8); color: white; border: none; display:flex; align-items:center; justify-content:center; gap:5px;" onclick="bukaFormBantuan(${d.id})">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
                Tambah Histori Bantuan
            </button>
        `;
    }

    // Penentuan jumlah kolom tabel agar tombol responsif
    const gridKolom = isBisaEdit ? '1fr 1fr 1fr' : '1fr';

    // Determine status
    const insidePop = isInsideAnyCircle(parseFloat(d.lat), parseFloat(d.lng));
    const statusColor = insidePop ? '#10B981' : '#EF4444';
    const statusLabel = insidePop ? 'Terjangkau' : 'Blind Spot';
    const statusBg    = insidePop ? '#ECFDF5' : '#FEF2F2';
    const statusBorder= insidePop ? '#6EE7B7' : '#FECACA';

    return `<div class="lp">
        <div class="lp-hd" style="background: linear-gradient(135deg,#1E40AF12,#2563EB08); border-bottom: 3px solid #2563EB22; padding:14px;">
            <div style="display:flex; align-items:center; gap:10px;">
                <div style="width:36px; height:36px; border-radius:10px; background:#2563EB18; border:1.5px solid #2563EB35; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                </div>
                <div style="flex:1; min-width:0;">
                    <div class="lp-ti" style="font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${d.nama_kk}</div>
                    <div style="display:flex; align-items:center; gap:5px; margin-top:3px;">
                        <span style="background:${statusColor}; color:white; font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px;">${statusLabel}</span>
                        <span style="font-size:10px; color:#64748B; display:flex; align-items:center; gap:3px;">
                            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                            <strong>${jumlahJiwa} jiwa</strong>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div style="background:${statusBg}; border:1px solid ${statusBorder}; padding:8px 12px; margin:10px 14px 0; border-radius:8px; font-size:10px; color:${statusColor}; font-weight:600; display:flex; align-items:flex-start; gap:6px;">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" style="flex-shrink:0; margin-top:1px;"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
            <span>${infoBantuan}</span>
        </div>
        
        <div class="lp-bd" id="pm_${d.id}" style="padding:12px 14px;">
            ${klasifikasiHtmlPopup}
            <div style="display:flex; flex-direction:column; gap:6px;">
                <div style="display:flex; align-items:flex-start; gap:7px; background:#F8FAFC; border-radius:7px; padding:7px 9px;">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="2" stroke-linecap="round" style="flex-shrink:0; margin-top:1px;"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    <div style="line-height:1.4;"><span style="font-size:9px; font-weight:700; color:#94A3B8; text-transform:uppercase; letter-spacing:0.08em;">Alamat</span><br><span style="font-size:11.5px; font-weight:600; color:#0F172A;">${d.alamat}</span></div>
                </div>
            </div>
        </div>
        
        <div class="lp-ef" id="pmf_${d.id}" style="display: none;">
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Nama Kepala Keluarga</label>
            <input class="lp-in" id="me_k_${d.id}" value="${d.nama_kk || ''}">
            
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Jumlah Anggota</label>
            <input class="lp-in" type="number" id="me_j_${d.id}" value="${d.jumlah_anggota || ''}" min="1">
            
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Alamat</label>
            <input class="lp-in" id="me_a_${d.id}" value="${d.alamat || ''}">
            
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Tanggal Lahir</label>
            <input class="lp-in" type="date" id="me_tl_${d.id}" value="${d.tanggal_lahir || ''}">
            
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Pendidikan Terakhir</label>
            <select class="lp-in" id="me_pd_${d.id}">
                <option value="">— Pilih —</option>
                ${['Tidak Sekolah','SD','SMP','SMA','D3','S1','S2','S3'].map(opt => `<option value="${opt}" ${sel(d.pendidikan_terakhir, opt)}>${opt}</option>`).join('')}
            </select>
            
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Pekerjaan</label>
            <input class="lp-in" id="me_pk_${d.id}" value="${d.pekerjaan || ''}">
            
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Riwayat Penyakit</label>
            <input class="lp-in" id="me_rp_${d.id}" value="${d.riwayat_penyakit || ''}">
            
            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-bottom:2px;">Jaminan Sosial</label>
            <select class="lp-in" id="me_js_${d.id}">
                <option value="">— Pilih —</option>
                ${['BPJS Kesehatan','KIS','BPJS Ketenagakerjaan','Tidak Ada'].map(opt => `<option value="${opt}" ${sel(d.kepemilikan_jaminan, opt)}>${opt}</option>`).join('')}
            </select>

            <label style="font-size:10px; font-weight:700; color:var(--navy); display:block; margin-top:8px; margin-bottom:4px;">Klasifikasi Khusus</label>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:10px; margin-bottom:10px;">
                <label style="display:flex; align-items:center; gap:4px;"><input type="checkbox" id="me_k_fakir_${d.id}" style="width:auto; margin:0;" ${chk(d.is_fakir_miskin)}> Fakir Miskin</label>
                <label style="display:flex; align-items:center; gap:4px;"><input type="checkbox" id="me_k_dhuafa_${d.id}" style="width:auto; margin:0;" ${chk(d.is_dhuafa)}> Dhuafa</label>
                <label style="display:flex; align-items:center; gap:4px;"><input type="checkbox" id="me_k_lansia_${d.id}" style="width:auto; margin:0;" ${chk(d.is_lansia_tunggal)}> Janda/Lansia</label>
                <label style="display:flex; align-items:center; gap:4px;"><input type="checkbox" id="me_k_yatim_${d.id}" style="width:auto; margin:0;" ${chk(d.is_anak_yatim)}> Yatim Piatu</label>
                <label style="display:flex; align-items:center; gap:4px;"><input type="checkbox" id="me_k_bencana_${d.id}" style="width:auto; margin:0;" ${chk(d.is_korban_bencana)}> Bencana</label>
                <label style="display:flex; align-items:center; gap:4px;"><input type="checkbox" id="me_k_disab_${d.id}" style="width:auto; margin:0;" ${chk(d.is_disabilitas)}> Disabilitas</label>
            </div>
        </div>
        
        <div class="lp-btns" id="pm_btn_view_${d.id}" style="display: grid !important; grid-template-columns: ${gridKolom} !important; gap: 5px;">
            <button class="lp-bt" onclick="lihatDetailMiskin(${d.id})" style="display:flex;align-items:center;justify-content:center;gap:4px;">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                Detail
            </button>
            ${btnEditHapusHtml}
            ${btnBantuanHtml}
        </div>

        <div class="lp-btns" id="pm_btn_edit_${d.id}" style="display: none !important; grid-template-columns: 1fr 1fr !important; gap: 5px;">
            <button class="lp-bt" onclick="lpToggle('miskin',${d.id})" style="display:flex;align-items:center;justify-content:center;gap:4px;">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                Batal
            </button>
            <button class="lp-bt sv" onclick="lpUpdate('miskin',${d.id})" style="display:flex;align-items:center;justify-content:center;gap:4px;">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                Selesai
            </button>
        </div>
    </div>`;
}

function lpUpdate(jenis, id) {
    const fd = new FormData(); 
    fd.append('id', id);
    let url = '';
    
    if (jenis === 'ibadah') {
        fd.append('nama_tempat', document.getElementById(`pe_n_${id}`).value);
        
        // TAMBAHKAN BARIS INI UNTUK MENANGKAP KATEGORI EDIT
        fd.append('kategori',    document.getElementById(`pe_k_${id}`).value); 
        
        fd.append('pic',         document.getElementById(`pe_p_${id}`).value);
        fd.append('alamat',      document.getElementById(`pe_a_${id}`).value);
        fd.append('radius',      document.getElementById(`pe_r_${id}`).value);
        url = 'api_ibadah.php?aksi=update';
    } else {
        // 1. Ambil data teks utama dengan pengaman (mencegah JS crash jika elemen telat dimuat)
        const elNama = document.getElementById(`me_k_${id}`);
        const elJml  = document.getElementById(`me_j_${id}`);
        const elAlm  = document.getElementById(`me_a_${id}`);
        const elTgl  = document.getElementById(`me_tl_${id}`);
        const elPend = document.getElementById(`me_pd_${id}`);
        const elPek  = document.getElementById(`me_pk_${id}`);
        const elPeny = document.getElementById(`me_rp_${id}`);
        const elJam  = document.getElementById(`me_js_${id}`);

        fd.append('nama_kk',             elNama ? elNama.value : '');
        fd.append('jumlah_anggota',      elJml  ? elJml.value  : 0);
        fd.append('alamat',              elAlm  ? elAlm.value  : '');
        fd.append('tanggal_lahir',       elTgl  ? elTgl.value  : '');
        fd.append('pendidikan_terakhir', elPend ? elPend.value : '');
        fd.append('pekerjaan',           elPek  ? elPek.value  : '');
        fd.append('riwayat_penyakit',    elPeny ? elPeny.value : '');
        fd.append('kepemilikan_jaminan', elJam  ? elJam.value  : '');

        // 2. KUNCI PERBAIKAN: Tangkap data checkbox klasifikasi khusus saat Edit
        const cekFakir   = document.getElementById(`me_k_fakir_${id}`);
        const cekDhuafa  = document.getElementById(`me_k_dhuafa_${id}`);
        const cekLansia  = document.getElementById(`me_k_lansia_${id}`);
        const cekYatim   = document.getElementById(`me_k_yatim_${id}`);
        const cekBencana = document.getElementById(`me_k_bencana_${id}`);
        const cekDisab   = document.getElementById(`me_k_disab_${id}`);

        fd.append('is_fakir_miskin',   (cekFakir   && cekFakir.checked)   ? 1 : 0);
        fd.append('is_dhuafa',         (cekDhuafa  && cekDhuafa.checked)  ? 1 : 0);
        fd.append('is_lansia_tunggal', (cekLansia  && cekLansia.checked)  ? 1 : 0);
        fd.append('is_anak_yatim',     (cekYatim   && cekYatim.checked)   ? 1 : 0);
        fd.append('is_korban_bencana', (cekBencana && cekBencana.checked) ? 1 : 0);
        fd.append('is_disabilitas',    (cekDisab   && cekDisab.checked)   ? 1 : 0);

        url = 'api_kemiskinan.php?aksi=update';
    }
    
    // 3. Kirim ke PHP dan muat ulang peta
    fetch(url, { method: 'POST', body: fd })
        .then(res => res.text()) // Ambil teks asli dari PHP untuk debugging jika ada error
        .then(text => { 
            console.log("Respon Update PHP:", text);
            if(text.includes('Sukses') || text.trim() === '') {
                map.closePopup(); 
                muatData(); 
                toast('✅ Data diperbarui!','ok'); 
            } else {
                toast('❌ Gagal Update. Lihat Console.', 'err');
            }
        })
        .catch(err => {
            console.error("Kesalahan Fetch:", err);
            toast('❌ Gagal memperbarui data', 'err');
        });
}

// =========================================
// FUNGSI TOGGLE & UPDATE UNTUK POPUP PETA
// =========================================

function lpToggle(jenis, id) {
    const prefix = jenis === 'ibadah' ? 'pi' : 'pm';
    
    const infoText = document.getElementById(`${prefix}_${id}`);
    const formInput = document.getElementById(`${prefix}f_${id}`);
    const btnView = document.getElementById(`${prefix}_btn_view_${id}`);
    const btnEdit = document.getElementById(`${prefix}_btn_edit_${id}`);

    if (!formInput) {
        console.error(`[DEBUG] Elemen dengan ID ${prefix}f_${id} tidak ditemukan!`);
        toast('⚠️ Terjadi kesalahan UI.', 'err');
        return;
    }

    // Cek apakah form sedang tersembunyi
    const isFormHidden = (formInput.style.display === 'none' || formInput.style.display === '');
    
    if (isFormHidden) {
        // Mode Edit: Sembunyikan teks, Munculkan form
        if (infoText) infoText.style.display = 'none';
        formInput.style.setProperty('display', 'block', 'important');
        if (btnView) btnView.style.setProperty('display', 'none', 'important');
        if (btnEdit) btnEdit.style.setProperty('display', 'grid', 'important');
    } else {
        // Mode Batal/View: Munculkan teks, Sembunyikan form
        if (infoText) infoText.style.display = 'block';
        formInput.style.setProperty('display', 'none', 'important');
        if (btnView) btnView.style.setProperty('display', 'grid', 'important');
        if (btnEdit) btnEdit.style.setProperty('display', 'none', 'important');
    }
}

function lpUpdate(jenis, id) {
    const fd = new FormData(); 
    fd.append('id', id);
    let url = '';
    
    if (jenis === 'ibadah') {
        fd.append('nama_tempat', document.getElementById(`pe_n_${id}`).value);
        
        // Mengunci pengiriman kategori agar tidak hilang saat update
        fd.append('kategori',    document.getElementById(`pe_k_${id}`).value); 
        
        fd.append('pic',         document.getElementById(`pe_p_${id}`).value);
        fd.append('alamat',      document.getElementById(`pe_a_${id}`).value);
        fd.append('radius',      document.getElementById(`pe_r_${id}`).value);
        url = 'api_ibadah.php?aksi=update';
    } else {
        // Ambil data teks utama warga miskin dengan pengaman
        const elNama = document.getElementById(`me_k_${id}`);
        const elJml  = document.getElementById(`me_j_${id}`);
        const elAlm  = document.getElementById(`me_a_${id}`);
        const elTgl  = document.getElementById(`me_tl_${id}`);
        const elPend = document.getElementById(`me_pd_${id}`);
        const elPek  = document.getElementById(`me_pk_${id}`);
        const elPeny = document.getElementById(`me_rp_${id}`);
        const elJam  = document.getElementById(`me_js_${id}`);

        fd.append('nama_kk',             elNama ? elNama.value : '');
        fd.append('jumlah_anggota',      elJml  ? elJml.value  : 0);
        fd.append('alamat',              elAlm  ? elAlm.value  : '');
        fd.append('tanggal_lahir',       elTgl  ? elTgl.value  : '');
        fd.append('pendidikan_terakhir', elPend ? elPend.value : '');
        fd.append('pekerjaan',           elPek  ? elPek.value  : '');
        fd.append('riwayat_penyakit',    elPeny ? elPeny.value : '');
        fd.append('kepemilikan_jaminan', elJam  ? elJam.value  : '');

        // Tangkap data checkbox klasifikasi khusus saat Edit
        const cekFakir   = document.getElementById(`me_k_fakir_${id}`);
        const cekDhuafa  = document.getElementById(`me_k_dhuafa_${id}`);
        const cekLansia  = document.getElementById(`me_k_lansia_${id}`);
        const cekYatim   = document.getElementById(`me_k_yatim_${id}`);
        const cekBencana = document.getElementById(`me_k_bencana_${id}`);
        const cekDisab   = document.getElementById(`me_k_disab_${id}`);

        fd.append('is_fakir_miskin',   (cekFakir   && cekFakir.checked)   ? 1 : 0);
        fd.append('is_dhuafa',         (cekDhuafa  && cekDhuafa.checked)  ? 1 : 0);
        fd.append('is_lansia_tunggal', (cekLansia  && cekLansia.checked)  ? 1 : 0);
        fd.append('is_anak_yatim',     (cekYatim   && cekYatim.checked)   ? 1 : 0);
        fd.append('is_korban_bencana', (cekBencana && cekBencana.checked) ? 1 : 0);
        fd.append('is_disabilitas',    (cekDisab   && cekDisab.checked)   ? 1 : 0);

        url = 'api_kemiskinan.php?aksi=update';
    }
    
    // Kirim paket data ke server PHP
    fetch(url, { method: 'POST', body: fd })
        .then(res => res.text())
        .then(text => { 
            console.log("Respon Update PHP:", text);
            if(text.includes('Sukses') || text.trim() === '') {
                map.closePopup(); 
                muatData(); 
                toast('✅ Data diperbarui!', 'ok'); 
            } else {
                toast('❌ Gagal Update. Lihat Console.', 'err');
            }
        })
        .catch(err => {
            console.error("Kesalahan Fetch:", err);
            toast('❌ Gagal memperbarui data', 'err');
        });
}

function hapus(jenis, id) {
    if (!confirm('Yakin hapus data ini?')) return;
    const fd = new FormData(); fd.append('id',id);
    const url = jenis==='ibadah' ? 'api_ibadah.php?aksi=hapus' : 'api_kemiskinan.php?aksi=hapus';
    fetch(url,{method:'POST',body:fd}).then(()=>{ map.closePopup(); muatData(); toast('🗑️ Data dihapus',''); });
}

function updLoc(jenis, id, ll) {
    if (!confirm('Simpan posisi baru?')) { muatData(); return; }
    const fd = new FormData(); fd.append('id',id); fd.append('lat',ll.lat); fd.append('lng',ll.lng);
    const url = jenis==='ibadah' ? 'api_ibadah.php?aksi=update_lokasi' : 'api_kemiskinan.php?aksi=update_lokasi';
    fetch(url,{method:'POST',body:fd}).then(()=>{ muatData(); toast('📍 Lokasi diperbarui','ok'); });
}

function updStats() {
    const jiwa = miData.reduce((a,d)=>a+parseInt(d.jumlah_anggota||0),0);
    document.getElementById('cI').textContent = ibData.length;
    document.getElementById('cM').textContent = miData.length;
    document.getElementById('cJ').textContent = jiwa;
}

function renderHist() {
    const el = document.getElementById('histList');
    
    fetch('api_kemiskinan.php?aksi=tampil_bantuan')
        .then(r => r.json())
        .then(logBantuan => {
            
            // PRIVASI: Jika warga, sembunyikan riwayat spasial pendaftaran warga
            const historiSpasialMiskin = USER_ROLE === 'warga' ? [] : miData.map(d => ({
                tipe: 'spasial_miskin',
                nama: d.nama_kk,
                meta: `Titik Warga Miskin baru terdata · ${d.jumlah_anggota} jiwa`,
                lat: d.lat,
                lng: d.lng,
                icon: '🏘️',
                bg: '#ddf0fb',
                htmlKanan: USER_ROLE === 'admin' ? `<button class="hi-del" onclick="hapus('miskin',${d.id})">🗑</button>` : ''
            }));

            const historiSpasial = [
                ...ibData.map(d => ({
                    tipe: 'spasial_ibadah',
                    nama: d.nama_tempat,
                    meta: `Rumah Ibadah baru ditambahkan · Radius ${d.radius >= 1000 ? (d.radius/1000).toFixed(1)+'km' : d.radius+'m'}`,
                    lat: d.lat,
                    lng: d.lng,
                    icon: '🕌',
                    bg: '#d7f5e7',
                    htmlKanan: USER_ROLE === 'admin' ? `<button class="hi-del" onclick="hapus('ibadah',${d.id})">🗑</button>` : ''
                })),
                ...historiSpasialMiskin
            ];

            // PRIVASI: Jika warga, sembunyikan semua riwayat log bansos spesifik nama orang lain
            const historiBansos = USER_ROLE === 'warga' ? [] : logBantuan.map(b => ({
                tipe: 'bantuan',
                nama: `Bantuan: ${b.jenis_bantuan}`,
                meta: `Disalurkan ke KK ${b.nama_kk} oleh ${b.sumber_bantuan} (${b.tanggal})`,
                lat: b.lat,
                lng: b.lng,
                icon: '🎁',
                bg: '#fff7ed',
                htmlKanan: `<span style="font-size: 10px; font-weight: 700; color: #c2410c; background: #ffedd5; padding: 2px 6px; border-radius: 10px; white-space: nowrap;">Log</span>`
            }));

            const allHistori = [...historiSpasial, ...historiBansos];

            if (!allHistori.length) {
                el.innerHTML = '<div class="empty-state"><div class="es-icon">📭</div>Belum ada aktivitas data atau bantuan</div>';
                return;
            }

            el.innerHTML = allHistori.map(d => `
                <div class="hi" style="border-left: 3px solid ${d.tipe === 'bantuan' ? '#f97316' : 'transparent'};">
                    <div class="hi-icon" style="background:${d.bg}">${d.icon}</div>
                    <div class="hi-info" onclick="flyClose(${d.lat},${d.lng})">
                        <div class="hi-name" style="font-weight:700; color:var(--navy);">${d.nama}</div>
                        <div class="hi-meta" style="font-size:10px; margin-top:2px;">${d.meta}</div>
                    </div>
                    <div style="display:flex; align-items:center; flex-shrink:0;">
                        ${d.htmlKanan}
                    </div>
                </div>
            `).join('');
        })
        .catch(err => {
            console.error("Gagal memuat histori bantuan:", err);
        });
}

function doSearch(q) {
    const el = document.getElementById('searchResults');
    const qn = q.trim().toLowerCase();
    if (!qn) { el.innerHTML='<div class="empty-state"><div class="es-icon">🗺️</div>Ketik untuk mencari lokasi</div>'; return; }
    
    // PRIVASI: Jika role-nya warga, kosongkan array data pencarian warga miskin
    const dataWargaPencarian = USER_ROLE === 'warga' ? [] : miData.map(d=>({ jenis:'miskin', nama:d.nama_kk, meta:`${d.jumlah_anggota} jiwa`, lat:d.lat, lng:d.lng }));

    const res = [
        ...ibData.map(d=>({ jenis:'ibadah', nama:d.nama_tempat, meta:`r=${d.radius>=1000?(d.radius/1000).toFixed(1)+'km':d.radius+'m'}`, lat:d.lat, lng:d.lng })),
        ...dataWargaPencarian
    ].filter(d=>d.nama.toLowerCase().includes(qn));
    
    if (!res.length) { el.innerHTML='<div class="empty-state"><div class="es-icon">🔍</div>Tidak ditemukan</div>'; return; }
    el.innerHTML = res.slice(0,8).map(d=>`
        <div class="sr-item" onclick="flyClose(${d.lat},${d.lng})">
            <div class="sr-icon" style="background:${d.jenis==='ibadah'?'var(--green-l)':'var(--blue-l)'}">${d.jenis==='ibadah'?'🕌':'🏘️'}</div>
            <div><div class="sr-name">${d.nama}</div><div class="sr-sub">${d.meta}</div></div>
        </div>`).join('');
}

function flyClose(lat, lng) { closePanel(); setTimeout(() => map.flyTo([lat,lng], 17, {animate:true, duration:1.2}), 220); }
function openPanel(n) {
    document.querySelectorAll('.slide-panel').forEach(p=>p.classList.remove('open'));
    document.getElementById('panel-'+n).classList.add('open');
    document.getElementById('panel-backdrop').classList.add('show');
    if (n==='cari') setTimeout(()=>document.getElementById('searchInput').focus(), 340);
}
function closePanel() {
    document.querySelectorAll('.slide-panel').forEach(p=>p.classList.remove('open'));
    document.getElementById('panel-backdrop').classList.remove('show');
}
function toast(msg, type) {
    const t = document.getElementById('toast'); t.textContent = msg; t.className = 'show' + (type ? ' '+type : ''); setTimeout(()=>t.className='', 3000);
}

let qrInstance = null;
function openModal(type) {
    if (type !== 'qr') return;
    const url = window.location.href.replace(/\/[^/]*$/, '') + '/lapor.php';
    document.getElementById('qr-url-text').textContent = url;
    const container = document.getElementById('qr-canvas'); container.innerHTML = '';
    qrInstance = new QRCode(container, { text: url, width: 180, height: 180, colorDark: '#0F172A', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H });
    setTimeout(() => {
        const img = container.querySelector('img') || container.querySelector('canvas');
        if (img) document.getElementById('qr-download').href = img.tagName === 'CANVAS' ? img.toDataURL('image/png') : img.src;
    }, 300);
    document.getElementById('modal-qr').style.display = 'flex';
}
function closeQR() { document.getElementById('modal-qr').style.display = 'none'; }
document.getElementById('modal-qr').addEventListener('click', function(e) { if (e.target === this) closeQR(); });

function switchSubTab(tab) {
    const isKK = tab === 'kk';
    document.getElementById('stab-body-kk').style.display      = isKK ? 'block' : 'none';
    document.getElementById('stab-body-anggota').style.display = isKK ? 'none'  : 'block';
    const styleAktif  = 'flex:1;padding:6px;border-radius:6px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.15s;border:1.5px solid ';
    document.getElementById('stab-kk').style.cssText      = styleAktif + (isKK  ? 'var(--blue);background:var(--blue-l);color:var(--blue-d)' : 'var(--border);background:var(--border-l);color:var(--text-3)');
    document.getElementById('stab-anggota').style.cssText = styleAktif + (!isKK ? 'var(--blue);background:var(--blue-l);color:var(--blue-d)' : 'var(--border);background:var(--border-l);color:var(--text-3)');
}

function tambahAnggota() {
    const nama = document.getElementById('an_nama').value.trim();
    const hub  = document.getElementById('an_hub').value;
    if (!nama) { toast('⚠️ Nama anggota wajib diisi', 'err'); return; }
    if (!hub)  { toast('⚠️ Pilih hubungan dengan KK', 'err'); return; }
    const anggota = { nama, tanggal_lahir: document.getElementById('an_tgl').value || '', jenis_kelamin: document.getElementById('an_jk').value || '', hubungan_kk: hub, pendidikan_terakhir: document.getElementById('an_pend').value || '', pekerjaan: document.getElementById('an_kerja').value.trim() || '', riwayat_penyakit: document.getElementById('an_sakit').value.trim() || '', kepemilikan_jaminan: document.getElementById('an_jamin').value || '' };
    daftarAnggota.push(anggota); renderDaftarAnggota(); resetFormAnggota(); toast('✅ ' + nama + ' ditambahkan', 'ok');
}

function renderDaftarAnggota() {
    const el = document.getElementById('anggota-list'); const badge = document.getElementById('badge-anggota');
    badge.style.display = daftarAnggota.length ? 'inline' : 'none'; badge.textContent = daftarAnggota.length;
    if (!daftarAnggota.length) { el.innerHTML = '<div style="text-align:center;font-size:11px;color:var(--text-3);padding:8px 0">Belum ada anggota ditambahkan</div>'; return; }
    el.innerHTML = daftarAnggota.map((a, i) => {
        let usiaTxt = ''; if (a.tanggal_lahir) { const usia = Math.floor((new Date() - new Date(a.tanggal_lahir)) / (365.25*24*3600*1000)); usiaTxt = ` · ${usia} thn`; }
        return `<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r3);border:1px solid var(--border-l);background:var(--surface-s);margin-bottom:5px"><div style="width:30px;height:30px;border-radius:var(--r3);background:var(--blue-l);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0">${a.jenis_kelamin==='Perempuan'?'👩':'👨'}</div><div style="flex:1;min-width:0"><div style="font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${a.nama}</div><div style="font-size:10px;color:var(--text-3);margin-top:1px">${a.hubungan_kk}${usiaTxt}${a.pendidikan_terakhir?' · '+a.pendidikan_terakhir:''}</div></div><button onclick="hapusAnggota(${i})" style="width:24px;height:24px;border:none;background:var(--red-l);border-radius:var(--r3);cursor:pointer;font-size:11px;color:var(--red);flex-shrink:0">🗑</button></div>`;
    }).join('');
}
function hapusAnggota(index) { daftarAnggota.splice(index, 1); renderDaftarAnggota(); }
function resetFormAnggota() { ['an_nama','an_tgl','an_kerja','an_sakit'].forEach(id => document.getElementById(id).value = ''); ['an_jk','an_hub','an_pend','an_jamin'].forEach(id => document.getElementById(id).selectedIndex = 0); }

function lihatDetailMiskin(id) {
    const d = miData.find(x => x.id == id); 
    if (!d) return;

    let anggotaHtml = '';
    try {
        const ang = typeof d.anggota === 'string' ? JSON.parse(d.anggota) : (d.anggota || []);
        if (ang.length === 0) {
            anggotaHtml = '<div style="font-size:11px;color:var(--text-3);text-align:center;padding:10px 0;background:var(--border-l);border-radius:var(--r3);">Tidak ada data anggota keluarga lain.</div>';
        } else {
            anggotaHtml = ang.map((a, i) => {
                let usiaTxt = '';
                if (a.tanggal_lahir) {
                    const tglLahir = new Date(a.tanggal_lahir); 
                    const tglSekarang = new Date();
                    let usia = tglSekarang.getFullYear() - tglLahir.getFullYear(); 
                    const bulan = tglSekarang.getMonth() - tglLahir.getMonth();
                    if (bulan < 0 || (bulan === 0 && tglSekarang.getDate() < tglLahir.getDate())) { usia--; }
                    usiaTxt = ` (${usia} tahun)`;
                }
                return `
                <div style="background:var(--border-l); border:1px solid var(--border); padding:10px; border-radius:var(--r3); margin-bottom:6px; font-size:11px; line-height:1.5;">
                    <div style="display:flex; justify-content:space-between; align-items:center;">
                        <strong style="color:var(--navy);font-size:12px;">${i+1}. ${a.nama}</strong>
                        <span style="color:var(--blue); font-weight:700; background:var(--blue-l); padding:1px 7px; border-radius:10px; font-size:9px;">${a.hubungan_kk}</span>
                    </div>
                    <div style="margin-top:5px; color:var(--text-2);">
                        <strong>Lahir:</strong> ${a.tanggal_lahir || '-'} ${usiaTxt} | ${a.jenis_kelamin || '-'}<br>
                        <strong>Pekerjaan:</strong> ${a.pekerjaan || '-'}<br>
                        <strong>Kesehatan:</strong> ${a.riwayat_penyakit || '-'} | <strong>Jaminan:</strong> ${a.kepemilikan_jaminan || '-'}
                    </div>
                </div>`;
            }).join('');
        }
    } catch(e) { 
        anggotaHtml = '<div style="font-size:11px;color:var(--red);">Format data anggota tidak valid.</div>'; 
    }

    const panelInfoBantuan = d.status_bantuan || "Belum ada rekam jejak bantuan tercatat.";

    // Proses Label Klasifikasi Khusus Untuk Panel
    let tags = [];
    if (d.is_fakir_miskin == 1) tags.push('Fakir Miskin');
    if (d.is_dhuafa == 1) tags.push('Dhuafa');
    if (d.is_lansia_tunggal == 1) tags.push('Janda/Duda Lansia');
    if (d.is_anak_yatim == 1) tags.push('Anak Yatim Piatu');
    if (d.is_korban_bencana == 1) tags.push('Korban Bencana');
    if (d.is_disabilitas == 1) tags.push('Penyandang Disabilitas');

    let klasifikasiHtml = tags.length > 0 
        ? tags.map(t => `<span style="background:var(--red); color:white; padding:3px 8px; border-radius:12px; font-size:9px; font-weight:700; display:inline-block; margin-right:4px; margin-bottom:4px;">⚠️ ${t}</span>`).join('')
        : ''; 

    // Susun struktur HTML utama
    const html = `
        <div style="margin-bottom:16px;">
            <div style="font-size:16px;font-weight:700;color:var(--navy);">${d.nama_kk}</div>
            
            <div style="margin-top:6px; margin-bottom:6px;">${klasifikasiHtml}</div>
            
            <div style="font-size:12px;color:var(--text-3);">📍 ${d.alamat}</div>
        </div>

        <div style="background: #fff7ed; border: 1px solid #ffedd5; padding: 10px 12px; border-radius: var(--r3); font-size: 11px; color: #c2410c; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
            🎁 ${panelInfoBantuan}
        </div>
        
        <table style="width:100%; font-size:12px; margin-bottom:18px; border-collapse:collapse;">
            <tr style="border-bottom:1px solid var(--border-l);"><td style="padding:6px 0;color:var(--text-2);">Jml Anggota</td><td style="font-weight:700;color:var(--navy);text-align:right;">${d.jumlah_anggota} Jiwa</td></tr>
            <tr style="border-bottom:1px solid var(--border-l);"><td style="padding:6px 0;color:var(--text-2);">Tgl Lahir KK</td><td style="font-weight:600;color:var(--navy);text-align:right;">${d.tanggal_lahir || '-'}</td></tr>
            <tr style="border-bottom:1px solid var(--border-l);"><td style="padding:6px 0;color:var(--text-2);">Pendidikan</td><td style="font-weight:600;color:var(--navy);text-align:right;">${d.pendidikan_terakhir || '-'}</td></tr>
            <tr style="border-bottom:1px solid var(--border-l);"><td style="padding:6px 0;color:var(--text-2);">Pekerjaan</td><td style="font-weight:600;color:var(--navy);text-align:right;">${d.pekerjaan || '-'}</td></tr>
            <tr style="border-bottom:1px solid var(--border-l);"><td style="padding:6px 0;color:var(--text-2);">Riwayat Sakit</td><td style="font-weight:600;color:var(--navy);text-align:right;">${d.riwayat_penyakit || '-'}</td></tr>
            <tr style="border-bottom:1px solid var(--border-l);"><td style="padding:6px 0;color:var(--text-2);">Jaminan Sosial</td><td style="font-weight:600;color:var(--navy);text-align:right;">${d.kepemilikan_jaminan || '-'}</td></tr>
        </table>
        
        <div style="font-size:12px; font-weight:700; color:var(--navy); margin-bottom:8px; border-bottom:1.5px solid var(--border-l); padding-bottom:4px;">👨‍👩‍👧 Daftar Anggota Keluarga</div>
        <div style="margin-bottom:18px;">${anggotaHtml}</div>

        <div style="font-size:12px; font-weight:700; color:var(--navy); margin-bottom:8px; border-bottom:1.5px solid var(--border-l); padding-bottom:4px;">📋 Histori Log Bantuan Keluarga</div>
        <div id="panel-bantuan-kk-list" style="font-size:11px; color:var(--text-3);">Memuat riwayat bantuan...</div>
    `;
    
    document.getElementById('detail-content').innerHTML = html; 
    openPanel('detail');

    fetch('api_kemiskinan.php?aksi=tampil_bantuan')
        .then(r => r.json())
        .then(logBantuan => {
            const listEl = document.getElementById('panel-bantuan-kk-list');
            const historiSpesifik = logBantuan.filter(b => b.warga_id == id);

            if (historiSpesifik.length === 0) {
                listEl.innerHTML = '<div style="text-align:center; padding:10px 0; color:var(--text-3); background:var(--border-l); border-radius:var(--r3);">Keluarga ini belum tercatat menerima bantuan spesifik apapun.</div>';
                return;
            }

            listEl.innerHTML = historiSpesifik.map(b => `
                <div style="display:flex; flex-direction:column; background:#fff7ed; border:1px solid #ffedd5; padding:8px 10px; border-radius:var(--r3); margin-bottom:5px;">
                    <div style="display:flex; justify-content:space-between; font-weight:700; color:#c2410c;">
                        <span>🎁 ${b.jenis_bantuan}</span>
                        <span style="font-size:10px; opacity:0.75; font-weight:500;">${b.tanggal}</span>
                    </div>
                    <div style="font-size:10px; color:var(--text-2); margin-top:4px;">
                        Penyalur: <strong>${b.sumber_bantuan}</strong>
                    </div>
                </div>
            `).join('');
        })
        .catch(err => {
            console.error(err);
            document.getElementById('panel-bantuan-kk-list').innerHTML = '<div style="color:var(--red); font-size:11px;">Gagal menarik data histori bantuan keluarga.</div>';
        });
}

// =========================================
// COVERAGE GAP DETECTION — ZONA BLIND SPOT
// =========================================

function clusterPoints(points, radiusMeter) {
    const clusters = [];
    const visited  = new Set();

    points.forEach((p, i) => {
        if (visited.has(i)) return;
        const cluster = [p];
        visited.add(i);

        points.forEach((q, j) => {
            if (visited.has(j)) return;
            const dist = haversine(
                parseFloat(p.lat), parseFloat(p.lng),
                parseFloat(q.lat), parseFloat(q.lng)
            );
            if (dist <= radiusMeter) {
                cluster.push(q);
                visited.add(j);
            }
        });
        clusters.push(cluster);
    });

    return clusters;
}

function renderGapZones() {
    lyGap.clearLayers();

    // 1. Saring warga yang TIDAK terjangkau oleh ibadah manapun
    const uncovered = miData.filter(d => {
        const lat = parseFloat(d.lat);
        const lng = parseFloat(d.lng);
        if (isNaN(lat) || isNaN(lng) || lat === 0 || lng === 0) return false;
        return !isInsideAnyCircle(lat, lng);
    });

    if (uncovered.length === 0) {
        toast('✅ Tidak ada zona blind spot — semua warga terjangkau!', 'ok');
        updateGapBadge(0, 0, 0);
        return;
    }

    // 2. Kelompokkan titik berdekatan ke dalam cluster (radius 600m)
    const clusters = clusterPoints(uncovered, 600);

    // 3. Visualisasi tiap cluster sebagai zona
    clusters.forEach(cluster => {
        if (cluster.length < 2) return; // ← skip zona yang isinya cuma 1 KK

        // Hitung titik tengah (centroid)
        const cLat = cluster.reduce((s, p) => s + parseFloat(p.lat), 0) / cluster.length;
        const cLng = cluster.reduce((s, p) => s + parseFloat(p.lng), 0) / cluster.length;

        // Hitung radius zona berdasarkan sebaran titik + buffer
        const maxDist = Math.max(
            150,
            ...cluster.map(p => haversine(cLat, cLng, parseFloat(p.lat), parseFloat(p.lng)))
        );
        const zoneRadius = maxDist + 180;

        // Tentukan warna berdasarkan jumlah KK tidak terjangkau
        const n     = cluster.length;
        const color = n >= 5 ? '#dc2626' : n >= 3 ? '#f97316' : '#f59e0b';
        const label = n >= 5 ? 'Kritis' : n >= 3 ? 'Sedang' : 'Rendah';

        const totalJiwa = cluster.reduce((s, d) => s + parseInt(d.jumlah_anggota || 0), 0);
        const daftarKK  = cluster.map(d =>
            `<div style="padding:3px 0;border-bottom:1px solid rgba(0,0,0,0.05)">
                • <strong>${d.nama_kk}</strong> — ${d.jumlah_anggota} jiwa
            </div>`
        ).join('');

        // Zona transparan dengan garis putus-putus
        L.circle([cLat, cLng], {
            radius:      zoneRadius,
            color:       color,
            fillColor:   color,
            fillOpacity: 0.12,
            weight:      2.5,
            dashArray:   '8, 5'
        }).addTo(lyGap).bindPopup(`
            <div style="font-family:'Plus Jakarta Sans',sans-serif; min-width:220px">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
                    <div style="width:36px;height:36px;background:${color}20;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px">🚨</div>
                    <div>
                        <div style="font-size:14px;font-weight:700;color:#0F172A">Zona Blind Spot</div>
                        <div style="font-size:10px;background:${color};color:white;border-radius:10px;padding:1px 8px;font-weight:700;display:inline-block">
                            Risiko ${label}
                        </div>
                    </div>
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px">
                    <div style="background:${color}15;border-radius:8px;padding:8px;text-align:center">
                        <div style="font-size:20px;font-weight:800;color:${color}">${n}</div>
                        <div style="font-size:9px;color:#0F172A;font-weight:600">KK Tidak Terjangkau</div>
                    </div>
                    <div style="background:rgba(15,23,42,0.05);border-radius:8px;padding:8px;text-align:center">
                        <div style="font-size:20px;font-weight:800;color:#0F172A">${totalJiwa}</div>
                        <div style="font-size:9px;color:#0F172A;font-weight:600">Total Jiwa</div>
                    </div>
                </div>

                <div style="font-size:11px;color:rgba(15,23,42,0.7);margin-bottom:10px;max-height:110px;overflow-y:auto">
                    ${daftarKK}
                </div>

                <div style="background:#fef3c7;border-radius:7px;padding:7px 10px;font-size:10px;color:#92400e;font-weight:600">
                    💡 Rekomendasi: Pertimbangkan pendirian pos bantuan atau program jangkauan baru di sekitar area ini.
                </div>
            </div>
        `, { maxWidth: 260 });

        // Titik centroid zona (lebih terlihat di peta kecil)
        L.circleMarker([cLat, cLng], {
            radius:      10,
            color:       color,
            fillColor:   color,
            fillOpacity: 1,
            weight:      3
        }).addTo(lyGap);
    });

    // 4. Update badge ringkasan
    const totalJiwaTidakTerjangkau = uncovered.reduce((s, d) => s + parseInt(d.jumlah_anggota || 0), 0);
    updateGapBadge(clusters.length, uncovered.length, totalJiwaTidakTerjangkau);
}

function updateGapBadge(zona, kk, jiwa) {
    const badge = document.getElementById('gap-badge');
    const text  = document.getElementById('gap-badge-text');
    if (!gapAktif || zona === 0) { badge.style.display = 'none'; return; }
    badge.style.display = 'flex';
    text.textContent    = `${zona} zona · ${kk} KK · ${jiwa} jiwa tidak terjangkau`;
}


function toggleGapLayer() {
    const fabEl  = document.getElementById('fab-gap');
    const textEl = document.getElementById('fab-gap-text');

    if (gapAktif) {
        lyGap.remove();
        gapAktif = false;
        fabEl.classList.remove('gap-active');
        textEl.textContent = 'Blind Spot';
        document.getElementById('gap-badge').style.display = 'none';
        toast('Layer Zona Blind Spot disembunyikan', '');
    } else {
        if (miData.length === 0) {
            toast('Belum ada data warga untuk dianalisis', 'err');
            return;
        }
        renderGapZones();
        lyGap.addTo(map);
        gapAktif = true;
        fabEl.classList.add('gap-active');
        textEl.textContent = 'Sembunyikan Zona';
    }
}


// =========================================
// FITUR DONASI DIGITAL (QRIS & TRANSFER)
// =========================================

function prosesDonasi() {
    const jenisEl    = document.getElementById('donasi_jenis');
    const nominalEl  = document.getElementById('donasi_nominal');
    const namaEl     = document.getElementById('donasi_nama');
    const pesanEl    = document.getElementById('donasi_pesan');
    const tujuanEl   = document.getElementById('donasi_tujuan');

    if (!nominalEl) return;

    const jenis    = jenisEl  ? jenisEl.value  : 'Uang Tunai';
    const isUang   = (jenis === 'Uang Tunai');
    const nilaiInput = nominalEl.value.trim();
    const nama     = namaEl  ? namaEl.value.trim()  || 'Hamba Allah' : 'Hamba Allah';
    const pesan    = pesanEl ? pesanEl.value.trim() : '';
    const tujuanId = tujuanEl ? tujuanEl.value : '0';
    const metodeInput = document.querySelector('input[name="metode_donasi"]:checked');
    const metode   = metodeInput ? metodeInput.value : 'QRIS';

    // Validasi berbeda tergantung jenis donasi
    if (isUang) {
        const nominal = parseInt(nilaiInput);
        if (!nilaiInput || isNaN(nominal) || nominal < 10000) {
            toast('⚠️ Minimal donasi uang adalah Rp 10.000', 'err');
            return;
        }
    } else {
        if (!nilaiInput) {
            toast('⚠️ Mohon isi deskripsi barang yang akan didonasikan', 'err');
            return;
        }
    }

    const modalBody = document.getElementById('donasi-modal-body');

    // Donasi barang: tampilkan halaman konfirmasi tanpa QRIS/Transfer
    if (!isUang) {
        modalBody.innerHTML = `
            <div style="text-align:center; padding: 16px 0;">
                <div style="font-size: 32px; margin-bottom: 8px;">📦</div>
                <div style="font-weight:700; color:var(--navy); margin-bottom:6px;">Terima Kasih, ${nama}!</div>
                <div style="font-size:12px; color:var(--text-2); margin-bottom:16px;">
                    Donasi <strong>${jenis}: ${nilaiInput}</strong> akan kami koordinasikan.
                </div>
                <div style="background:var(--border-l); border-radius:var(--r2); padding:12px; font-size:11px; color:var(--text-2); text-align:left; margin-bottom:16px;">
                    📞 Tim kami akan menghubungi Anda untuk koordinasi pengiriman.<br>
                    📍 Atau bisa langsung ke rumah ibadah/pos bantuan terdekat.
                </div>
            </div>
            <div class="ff">
                <label>Upload Foto Barang (Opsional)</label>
                <input type="file" id="donasi_bukti" accept="image/*" style="background:white; padding:6px;">
            </div>
            <button class="btn-sv g" style="width:100%; margin-top:10px; padding:10px;"
                    onclick="konfirmasiDonasi('Barang', 0, '${nama.replace(/'/g,"\\'")}', '${pesan.replace(/'/g,"\\'")}', ${tujuanId}, '${jenis}', '${nilaiInput.replace(/'/g,"\\'")}')">
                Konfirmasi Donasi Barang ✅
            </button>
            <button class="btn-cncl" style="width:100%; margin-top:8px; border:none; background:transparent;"
                    onclick="closeModalDonasi()">Batalkan</button>
        `;
        return;
    }

    // Donasi uang: tampilkan instruksi QRIS atau Transfer
    const nominal = parseInt(nilaiInput);
    let instruksiHtml = '';
    if (metode === 'QRIS') {
        instruksiHtml = `
            <div style="text-align:center; padding-top:10px;">
                <div style="font-weight:700; color:var(--navy); margin-bottom:10px;">Scan QRIS di bawah ini</div>
                <div style="background:#fff; padding:10px; border-radius:var(--r2); display:inline-block; border:1.5px solid var(--border); margin-bottom:10px;">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d0/QR_code_for_mobile_English_Wikipedia.svg" width="160" height="160" alt="QRIS">
                </div>
                <div style="font-size:11px; color:var(--text-3);">Total Pembayaran</div>
                <div style="font-size:22px; font-weight:800; color:var(--green);">Rp ${nominal.toLocaleString('id-ID')}</div>
            </div>`;
    } else {
        instruksiHtml = `
            <div style="text-align:center; padding-top:10px;">
                <div style="font-weight:700; color:var(--navy); margin-bottom:10px;">Transfer ke Rekening Bank</div>
                <div style="background:var(--blue-l); border:1.5px dashed var(--blue); padding:15px; border-radius:var(--r2); margin-bottom:10px;">
                    <div style="font-size:11px; color:var(--navy);">Bank Mandiri</div>
                    <div style="font-size:18px; font-weight:800; color:var(--blue-d); letter-spacing:1px; margin:4px 0;">123-456-789-0123</div>
                    <div style="font-size:11px; font-weight:700; color:var(--navy);">a.n. Webgis Poverty</div>
                </div>
                <div style="font-size:11px; color:var(--text-3);">Total Pembayaran</div>
                <div style="font-size:22px; font-weight:800; color:var(--green);">Rp ${nominal.toLocaleString('id-ID')}</div>
            </div>`;
    }

    modalBody.innerHTML = `
        ${instruksiHtml}
        <div style="margin-top:20px; border-top:1.5px solid var(--border-l); padding-top:15px;">
            <div class="ff">
                <label>Upload Bukti Transfer</label>
                <input type="file" id="donasi_bukti" accept="image/*" style="background:white; padding:6px;">
            </div>
            <button class="btn-sv g" style="width:100%; margin-top:10px; padding:10px;"
                    onclick="konfirmasiDonasi('${metode}', ${nominal}, '${nama.replace(/'/g,"\\'")}', '${pesan.replace(/'/g,"\\'")}', ${tujuanId}, 'Uang Tunai', '')">
                Selesai & Konfirmasi ✅
            </button>
            <button class="btn-cncl" style="width:100%; margin-top:8px; border:none; background:transparent;"
                    onclick="closeModalDonasi()">Batalkan</button>
        </div>
    `;
}
// =========================================
// FITUR DONASI DIGITAL (PILIHAN RUMAH IBADAH)
// =========================================

function openModalDonasi() {
    const icon = document.getElementById('mdl-icon');
    const title = document.getElementById('mdl-title-container');
    if(icon) icon.textContent = '💖';
    if(title) title.innerHTML = `<div style="font-size:14px;font-weight:700;color:var(--navy)">Salurkan Donasi</div>`;

    let opsiIbadah = `<option value="0">— Umum (Bebaskan Penyaluran) —</option>`;
    if (ibData && ibData.length > 0) {
        ibData.forEach(ib => {
            opsiIbadah += `<option value="${ib.id}"> ${ib.nama_tempat}</option>`;
        });
    }

    document.getElementById('donasi-modal-body').innerHTML = `
        <div class="ff">
            <label>Jenis Donasi</label>
            <select id="donasi_jenis" style="width:100%; padding:8px 11px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--r3); color:var(--navy); background:var(--border-l);" onchange="toggleJenisDonasi(this.value)">
                <option value="Uang Tunai">💵 Uang Tunai</option>
                <option value="Sembako">🛒 Sembako</option>
                <option value="Bantuan Kesehatan">🏥 Bantuan Kesehatan</option>
                <option value="Bantuan Pendidikan">📚 Bantuan Pendidikan</option>
                <option value="Pakaian">👕 Pakaian</option>
                <option value="Lainnya">📦 Lainnya</option>
            </select>
        </div>

        <div id="metode-pembayaran-box" style="background: var(--border-l); border: 1.5px dashed rgba(16,185,129,0.3); border-radius: var(--r2); padding: 16px; text-align: center; margin-bottom: 16px;">
            <div style="font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 4px;">Pilih Metode Pembayaran</div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;">
                <label style="border: 1.5px solid var(--blue); border-radius: var(--r3); padding: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--blue-l);">
                    <input type="radio" name="metode_donasi" value="QRIS" checked style="margin: 0;">
                    <span style="font-size: 11px; font-weight: 700; color: var(--navy);">QRIS</span>
                </label>
                <label style="border: 1.5px solid var(--border); border-radius: var(--r3); padding: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; background: white;">
                    <input type="radio" name="metode_donasi" value="Transfer Bank" style="margin: 0;">
                    <span style="font-size: 11px; font-weight: 700; color: var(--navy);">Transfer Bank</span>
                </label>
            </div>
        </div>
        
        <div class="ff">
            <label>Tujuan Penyaluran Bantuan</label>
            <select id="donasi_tujuan" style="width:100%; padding:8px 11px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--r3); color:var(--navy); background:var(--border-l);">
                ${opsiIbadah}
            </select>
        </div>

        <div class="ff">
            <label id="label_nominal">Nominal Donasi (Rp)</label>
            <input type="text" id="donasi_nominal" placeholder="Contoh: 50000">
        </div>
        <div class="ff"><label>Nama Donatur</label><input type="text" id="donasi_nama" placeholder="Nama Anda (Boleh Anonim)"></div>
        <div class="ff"><label>Pesan Dukungan (Opsional)</label><input type="text" id="donasi_pesan" placeholder="Tuliskan doa atau pesan..."></div>
        
        <button class="btn-sv g" style="width: 100%; margin-top: 14px; padding: 10px;" onclick="prosesDonasi()">Lanjutkan Pembayaran</button>
    `;
    
    document.getElementById('modal-donasi').style.display = 'flex';
}

function toggleJenisDonasi(jenis) {
    const boxMetode = document.getElementById('metode-pembayaran-box');
    const labelNominal = document.getElementById('label_nominal');
    const inputNominal = document.getElementById('donasi_nominal');
    
    if (jenis === 'Uang Tunai') {
        boxMetode.style.display = 'block';
        labelNominal.textContent = 'Nominal Donasi (Rp)';
        inputNominal.placeholder = 'Contoh: 50000';
    } else {
        boxMetode.style.display = 'none';
        labelNominal.textContent = 'Deskripsi & Jumlah Barang';
        inputNominal.placeholder = 'Contoh: 3 Paket Sembako / 5 Karung Beras';
    }
}

function bukaFormBantuan(wargaId) {
    // Tutup popup marker agar tampilan lebih bersih
    map.closePopup();

    // AMANKAN NAMA: Cari data nama_kk secara mandiri dari array miData berdasarkan wargaId
    const d = miData.find(x => x.id == wargaId);
    if (!d) {
        toast('⚠️ Data warga tidak ditemukan', 'err');
        return;
    }
    const namaKk = d.nama_kk;

    const modalBody = document.getElementById('donasi-modal-body');
    
    // Ubah ikon dan judul modal agar sesuai dengan konteks Pencatatan Bantuan
    const icon = document.getElementById('mdl-icon');
    const title = document.getElementById('mdl-title-container');
    if(icon) icon.textContent = '📝';
    
    const namaAman = namaKk.replace(/'/g, "\\'");
    if(title) title.innerHTML = `<div style="font-size:14px;font-weight:700;color:var(--navy)">Catat Bantuan:<br><span style="color:var(--blue); font-size:12px;">${namaAman}</span></div>`;

    // Tarik data rumah ibadah untuk dijadikan opsi penyalur
    let opsiPenyalur = '';
    
    if (USER_ROLE === 'pengurus_masjid') {
        // Kunci dropdown HANYA untuk masjid pengurus tersebut
        opsiPenyalur = `<option value="${USER_MASJID}" selected>🕌 ${USER_MASJID}</option>`;
    } else {
        // Jika Admin, tampilkan semua pilihan
        opsiPenyalur = `<option value="">— Pilih Penyalur (Rumah Ibadah) —</option>`;
        if (ibData && ibData.length > 0) {
            ibData.forEach(ib => {
                opsiPenyalur += `<option value="${ib.nama_tempat}">🕌${ib.nama_tempat}</option>`;
            });
        }
        opsiPenyalur += `<option value="Donatur Pribadi / Anonim">👤 Donatur Pribadi / Anonim</option>`;
        opsiPenyalur += `<option value="Lainnya">📦 Lainnya</option>`;
    }

    modalBody.innerHTML = `
        <div class="ff">
            <label>Jenis Bantuan</label>
            <select id="hb_jenis" style="width:100%; padding:8px 11px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--r3); color:var(--navy); background:var(--border-l);">
                <option value="">— Pilih Jenis —</option>
                <option value="1">💵 Uang Tunai</option>
                <option value="2">🛒 Sembako</option>
                <option value="3">🏥 Bantuan Kesehatan</option>
                <option value="4">📚 Bantuan Pendidikan</option>
                <option value="6">👕 Pakaian</option>
                <option value="5">📦 Lainnya</option>
            </select>
        </div>

        <div class="ff">
            <label>Tanggal Distribusi</label>
            <input type="date" id="hb_tgl" value="${new Date().toISOString().split('T')[0]}">
        </div>
        
        <div class="ff">
            <label>Nama Penyalur / Sumber Bantuan</label>
            <select id="hb_penyalur" style="width:100%; padding:8px 11px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--r3); color:var(--navy); background:var(--border-l);">
                ${opsiPenyalur}
            </select>
        </div>
        
        <div class="ff">
            <label>Deskripsi Bantuan</label>
            <input type="text" id="hb_deskripsi" placeholder="Contoh: Rp 500.000 / 2 Paket Sembako / 5 Kg Beras">
        </div>

        <div class="ff">
            <label>Keterangan / Catatan</label>
            <input type="text" id="hb_catatan" placeholder="Contoh: Bantuan rutin bulanan">
        </div>
        
        <button class="btn-sv b" style="width:100%; margin-top:14px; padding:10px;" 
                onclick="simpanHistoriBantuan(${wargaId})">💾 Simpan Data Bantuan</button>
        <button class="btn-cncl" style="width:100%; margin-top:8px; border:none; background:transparent;" 
                onclick="closeModalDonasi()">Batalkan</button>
    `;
    
    document.getElementById('modal-donasi').style.display = 'flex';
}

function closeModalDonasi() {
    document.getElementById('modal-donasi').style.display = 'none';
}

// Klik area luar modal untuk menutup
document.getElementById('modal-donasi').addEventListener('click', function(e) {
    if (e.target === this) closeModalDonasi();
});



function konfirmasiDonasi(metode, nominal, nama, pesan, tujuanId, jenisDonasi, deskripsiBarang) {
    const fileInput = document.getElementById('donasi_bukti');
    const isUang = (jenisDonasi === 'Uang Tunai');

    // Bukti wajib hanya untuk donasi uang
    if (isUang && (!fileInput.files || fileInput.files.length === 0)) {
        toast('⚠️ Harap upload bukti transfer terlebih dahulu', 'err');
        return;
    }

    const fd = new FormData();
    fd.append('metode',          metode);
    fd.append('nominal',         nominal);
    fd.append('nama',            nama);
    fd.append('pesan',           pesan);
    fd.append('ibadah_id',       tujuanId);
    fd.append('jenis_donasi',    jenisDonasi);
    fd.append('deskripsi_barang', deskripsiBarang);

    if (fileInput.files && fileInput.files.length > 0) {
        fd.append('bukti', fileInput.files[0]);
    }

    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '⏳ Sedang Memproses...';
    btn.disabled = true;

    // Kirim ke api_donasi.php?aksi=simpan agar tidak ambigu
    fetch('api_donasi.php?aksi=simpan', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(res => {
            btn.disabled = false;
            if (res.status === 'sukses') {
                toast('🎉 Terima kasih! Donasi Anda sedang diproses oleh admin.', 'ok');
                setTimeout(() => closeModalDonasi(), 1500);
            } else {
                btn.innerHTML = originalText;
                toast('❌ ' + res.pesan, 'err');
            }
        })
        .catch(err => {
            console.error(err);
            btn.innerHTML = originalText;
            btn.disabled = false;
            toast('❌ Gagal menghubungi server', 'err');
        });
}

function bukaTransparansi() {
    openPanel('transparansi');
    const listEl = document.getElementById('list-distribusi');
    listEl.innerHTML = '<div class="empty-state"><div class="es-icon">⏳</div>Memuat data...</div>';

    fetch('api_distribusi.php?aksi=global')
        .then(r => r.json())
        .then(res => {
            window.dataLogGlobal = res.log_distribusi;

            document.getElementById('trans-masuk').textContent = 'Rp ' + parseInt(res.total_donasi).toLocaleString('id-ID');
            document.getElementById('trans-donatur').textContent = `Dari ${res.jumlah_donatur} Donatur`;

            if (!res.log_distribusi || res.log_distribusi.length === 0) {
                listEl.innerHTML = '<div class="empty-state"><div class="es-icon">📭</div>Belum ada riwayat penyaluran donasi.</div>';
                return;
            }

            listEl.innerHTML = res.log_distribusi.map(d => {
                // KUNCI FILTER: Tombol Edit & Hapus hanya dibuat jika USER_ROLE adalah admin
                let tombolAksiAdmin = '';
                if (USER_ROLE === 'admin') {
                    tombolAksiAdmin = `
                        <button onclick="event.stopPropagation(); editFormBantuan(${d.id})" style="border:none; background:var(--blue-m); color:var(--blue-d); padding: 3px 6px; border-radius:var(--r3); cursor:pointer; font-size:10px; font-weight:700;">✏️ Edit</button>
                        <button onclick="event.stopPropagation(); hapusHistoriBantuan(${d.id})" style="border:none; background:var(--red-l); color:var(--red); padding: 3px 6px; border-radius:var(--r3); cursor:pointer; font-size:10px; font-weight:700;">🗑️ Hapus</button>
                    `;
                }

                return `
                    <div style="background: white; border: 1px solid var(--border-l); border-radius: var(--r2); padding: 12px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; box-shadow: var(--sh-sm);" 
                         onclick="flyClose(${d.lat}, ${d.lng})" 
                         onmouseover="this.style.borderColor='var(--blue)'" 
                         onmouseout="this.style.borderColor='var(--border-l)'">
                         
                        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px;">
                            <div style="font-weight: 700; color: var(--navy); font-size: 13px;">${d.nama_kk}</div>
                            <div style="display: flex; gap: 4px; align-items: center;">
                                ${tombolAksiAdmin}
                                <div style="font-size: 9px; font-weight: 600; color: #b45309; background: #fef3c7; padding: 3px 8px; border-radius: 10px;">${d.tanggal_distribusi}</div>
                            </div>
                        </div>
                        
                        <div style="font-size: 11px; color: var(--text-2); margin-bottom: 6px;">
                            <strong>Bantuan:</strong> ${d.satuan_custom} <br>
                            <strong>Oleh:</strong> ${d.nama_penyalur}
                        </div>
                        
                        <div style="font-size: 10px; background: var(--border-l); padding: 6px 8px; border-radius: var(--r3); color: var(--text-2); font-style: italic;">
                            "${d.catatan || 'Distribusi reguler'}"
                        </div>
                    </div>
                `;
            }).join('');
        })
        .catch(err => {
            console.error(err);
            listEl.innerHTML = '<div class="empty-state" style="color:var(--red);"><div class="es-icon">❌</div>Gagal memuat data transparansi.</div>';
        });
}

function simpanHistoriBantuan(wargaId) {
    const jenisId = document.getElementById('hb_jenis').value; 
    const tgl = document.getElementById('hb_tgl').value;
    const penyalur = document.getElementById('hb_penyalur').value.trim();
    const deskripsi = document.getElementById('hb_deskripsi').value.trim(); // Tangkap deskripsi
    const catatan = document.getElementById('hb_catatan').value.trim();

    // Pastikan deskripsi divalidasi
    if (!jenisId || !tgl || !penyalur || !deskripsi) {
        toast('⚠️ Mohon lengkapi Jenis, Tanggal, Penyalur, dan Deskripsi Bantuan.', 'err');
        return;
    }

    const fd = new FormData();
    fd.append('warga_id', wargaId);
    fd.append('jenis_id', jenisId); 
    fd.append('tanggal_distribusi', tgl);
    fd.append('nama_penyalur', penyalur);
    fd.append('deskripsi_bantuan', deskripsi); // Masukkan ke koper
    fd.append('catatan', catatan);

    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '⏳ Menyimpan...';
    btn.disabled = true;

    fetch('api_kemiskinan.php?aksi=simpan_bantuan', { method: 'POST', body: fd })
        .then(r => r.text())
        .then(text => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            
            if (text.includes('Sukses')) {
                toast('✅ Data bantuan berhasil dicatat!', 'ok');
                closeModalDonasi();
                muatData(); 
            } else {
                toast('❌ Gagal menyimpan. ' + text, 'err');
                console.error("Respon PHP:", text);
            }
        })
        .catch(err => {
            console.error("Fetch Error:", err);
            btn.innerHTML = originalText;
            btn.disabled = false;
            toast('❌ Gagal menghubungi server.', 'err');
        });
}

function editFormBantuan(logId) {
    // Cari data log lama di memori global
    const log = window.dataLogGlobal.find(x => x.id == logId);
    if (!log) {
        toast('⚠️ Data log tidak ditemukan', 'err');
        return;
    }

    const modalBody = document.getElementById('donasi-modal-body');
    const icon = document.getElementById('mdl-icon');
    const title = document.getElementById('mdl-title-container');
    
    if(icon) icon.textContent = '✏️';
    const namaAman = (log.nama_kk || 'Warga').replace(/'/g, "\\'");
    if(title) title.innerHTML = `<div style="font-size:14px;font-weight:700;color:var(--navy)">Edit Bantuan:<br><span style="color:var(--blue); font-size:12px;">${namaAman}</span></div>`;

    // Susun opsi penyalur dengan menandai (selected) penyalur yang lama
    let opsiPenyalur = `<option value="">— Pilih Penyalur (Rumah Ibadah) —</option>`;
    if (ibData && ibData.length > 0) {
        ibData.forEach(ib => {
            const isSel = (log.nama_penyalur === ib.nama_tempat) ? 'selected' : '';
            opsiPenyalur += `<option value="${ib.nama_tempat}" ${isSel}>🕌 ${ib.nama_tempat}</option>`;
        });
    }
    opsiPenyalur += `<option value="Donatur Pribadi / Anonim" ${log.nama_penyalur === 'Donatur Pribadi / Anonim' ? 'selected' : ''}>👤 Donatur Pribadi / Anonim</option>`;
    opsiPenyalur += `<option value="Lainnya" ${log.nama_penyalur === 'Lainnya' ? 'selected' : ''}>📦 Lainnya</option>`;

    // Render form dengan value bawaan dari data lama
    modalBody.innerHTML = `
        <div class="ff">
            <label>Jenis Bantuan</label>
            <select id="hb_edit_jenis" style="width:100%; padding:8px 11px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--r3); color:var(--navy); background:var(--border-l);">
                <option value="">— Pilih Jenis —</option>
                <option value="1" ${log.jenis_id == 1 ? 'selected' : ''}>💵 Uang Tunai</option>
                <option value="2" ${log.jenis_id == 2 ? 'selected' : ''}>🛒 Sembako</option>
                <option value="3" ${log.jenis_id == 3 ? 'selected' : ''}>🏥 Bantuan Kesehatan</option>
                <option value="4" ${log.jenis_id == 4 ? 'selected' : ''}>📚 Bantuan Pendidikan</option>
                <option value="6" ${log.jenis_id == 6 ? 'selected' : ''}>👕 Pakaian</option>
                <option value="5" ${log.jenis_id == 5 ? 'selected' : ''}>📦 Lainnya</option>
            </select>
        </div>

        <div class="ff">
            <label>Tanggal Distribusi</label>
            <input type="date" id="hb_edit_tgl" value="${log.tanggal_distribusi}">
        </div>
        
        <div class="ff">
            <label>Nama Penyalur / Sumber Bantuan</label>
            <select id="hb_edit_penyalur" style="width:100%; padding:8px 11px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--r3); color:var(--navy); background:var(--border-l);">
                ${opsiPenyalur}
            </select>
        </div>
        
        <div class="ff">
            <label>Deskripsi Bantuan</label>
            <input type="text" id="hb_edit_deskripsi" value="${log.satuan_custom || ''}" placeholder="Contoh: Rp 500.000 / 2 Paket Sembako">
        </div>

        <div class="ff">
            <label>Keterangan / Catatan</label>
            <input type="text" id="hb_edit_catatan" value="${log.catatan || ''}" placeholder="Contoh: Bantuan rutin bulanan">
        </div>
        
        <button class="btn-sv b" style="width:100%; margin-top:14px; padding:10px;" 
                onclick="simpanEditBantuan(${logId})">💾 Update Data Bantuan</button>
        <button class="btn-cncl" style="width:100%; margin-top:8px; border:none; background:transparent;" 
                onclick="closeModalDonasi()">Batalkan</button>
    `;
    
    document.getElementById('modal-donasi').style.display = 'flex';
}

function simpanEditBantuan(logId) {
    const jenisId = document.getElementById('hb_edit_jenis').value; 
    const tgl = document.getElementById('hb_edit_tgl').value;
    const penyalur = document.getElementById('hb_edit_penyalur').value;
    const deskripsi = document.getElementById('hb_edit_deskripsi').value.trim();
    const catatan = document.getElementById('hb_edit_catatan').value.trim();

    if (!jenisId || !tgl || !penyalur || !deskripsi) {
        toast('⚠️ Mohon lengkapi Jenis, Tanggal, Penyalur, dan Deskripsi.', 'err');
        return;
    }

    const fd = new FormData();
    fd.append('id', logId);
    fd.append('jenis_id', jenisId); 
    fd.append('tanggal_distribusi', tgl);
    fd.append('nama_penyalur', penyalur);
    fd.append('deskripsi_bantuan', deskripsi);
    fd.append('catatan', catatan);

    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '⏳ Mengupdate...';
    btn.disabled = true;

    fetch('api_kemiskinan.php?aksi=update_bantuan', { method: 'POST', body: fd })
        .then(r => r.text())
        .then(text => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            
            if (text.includes('Sukses')) {
                toast('✅ Histori bantuan berhasil diperbarui!', 'ok');
                closeModalDonasi();
                bukaTransparansi(); // Refresh panel transparansi agar data baru muncul
                muatData(); // Refresh peta
            } else {
                toast('❌ Gagal update. ' + text, 'err');
            }
        })
        .catch(err => {
            console.error(err);
            btn.innerHTML = originalText;
            btn.disabled = false;
            toast('❌ Gagal menghubungi server.', 'err');
        });
}

function hapusHistoriBantuan(logId) {
    if (!confirm('Apakah Anda yakin ingin menghapus riwayat bantuan ini secara permanen?')) return;

    const fd = new FormData();
    fd.append('id', logId);

    fetch('api_kemiskinan.php?aksi=hapus_bantuan', { method: 'POST', body: fd })
        .then(r => r.text())
        .then(text => {
            if (text.includes('Sukses')) {
                toast('🗑️ Riwayat bantuan berhasil dihapus!', 'ok');
                bukaTransparansi(); // Segarkan isi panel transparansi secara real-time
                muatData();         // Segarkan status penanda bantuan di peta utama
            } else {
                toast('❌ Gagal menghapus data log.', 'err');
                console.error("Respon PHP:", text);
            }
        })
        .catch(err => {
            console.error("Fetch Error:", err);
            toast('❌ Gagal berkomunikasi dengan server.', 'err');
        });
}


onSlide(500);
muatData();

// ─── FITUR LAPORAN WARGA ──────────────────────────────────────────────────
let _laporanStep = 1;
let _tipeLaporan = 'orang_lain';

function bukaModalLaporan() {
    _laporanStep = 1;
    _tipeLaporan = 'orang_lain';
    resetFormLaporan();
    tampilkanLaporanStep(1);
    document.getElementById('modal-laporan').style.display = 'flex';
}

function tutupModalLaporan() {
    document.getElementById('modal-laporan').style.display = 'none';
}

function resetFormLaporan() {
    ['lap_nama_kk','lap_alamat','lap_lat','lap_lng','lap_pekerjaan','lap_keterangan'].forEach(id => {
        const el = document.getElementById(id); if(el) el.value = '';
    });
    const jml = document.getElementById('lap_jml'); if(jml) jml.value = '1';
    ['lap_fakir','lap_dhuafa','lap_lansia','lap_yatim','lap_bencana','lap_disab'].forEach(id => {
        const el = document.getElementById(id); if(el) el.checked = false;
    });
    const btnGps = document.getElementById('btn-gps');
    if(btnGps) { btnGps.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg> Gunakan Lokasi Saya (GPS)'; btnGps.style.background = 'var(--blue)'; btnGps.disabled = false; }
    const lapSt = document.getElementById('lap-lokasi-status'); if(lapSt) lapSt.style.display = 'none';
    pilihTipeLaporan('orang_lain');
}

function pilihTipeLaporan(tipe) {
    _tipeLaporan = tipe;
    const elDiri = document.getElementById('lbl-diri');
    const elLain = document.getElementById('lbl-lain');
    if(elDiri) { elDiri.style.border = tipe === 'diri_sendiri' ? '2px solid var(--blue)'  : '2px solid var(--border)'; elDiri.style.background = tipe === 'diri_sendiri' ? 'var(--blue-l)' : 'white'; }
    if(elLain) { elLain.style.border = tipe === 'orang_lain'   ? '2px solid var(--green)' : '2px solid var(--border)'; elLain.style.background = tipe === 'orang_lain'   ? 'var(--green-l)': 'white'; }
}

function tampilkanLaporanStep(step) {
    _laporanStep = step;
    [1,2,3].forEach(i => {
        const el = document.getElementById('laporan-step-' + i);
        if(el) el.style.display = (i === step) ? 'block' : 'none';
    });
    const labels  = ['Langkah 1 dari 3', 'Langkah 2 dari 3', 'Selesai!'];
    const widths  = ['33%', '66%', '100%'];
    document.getElementById('laporan-step-label').textContent = labels[step - 1];
    document.getElementById('laporan-progress-bar').style.width = widths[step - 1];

    const btnBack = document.getElementById('btn-lap-back');
    const btnNext = document.getElementById('btn-lap-next');
    if(step === 1) {
        btnBack.style.display = 'none';
        btnNext.style.display = 'flex';
        btnNext.innerHTML = 'Lanjut →';
        btnNext.style.background = 'var(--amber)';
        btnNext.disabled = false;
    } else if(step === 2) {
        btnBack.style.display = 'flex';
        btnNext.style.display = 'flex';
        btnNext.innerHTML = 'Kirim Laporan';
        btnNext.style.background = 'var(--green)';
        btnNext.disabled = false;
    } else {
        btnBack.style.display = 'none';
        btnNext.style.display = 'none';
    }
}

function laporanNext() {
    if(_laporanStep === 1)      tampilkanLaporanStep(2);
    else if(_laporanStep === 2) kirimLaporan();
}

function laporanBack() {
    if(_laporanStep === 2) tampilkanLaporanStep(1);
}

function gunakanLokasiGPS() {
    const btn    = document.getElementById('btn-gps');
    const status = document.getElementById('lap-lokasi-status');
    btn.innerHTML = '⏳ Mendeteksi lokasi...';
    btn.disabled  = true;
    status.style.display = 'block';
    status.style.color   = 'var(--text-3)';
    status.textContent   = 'Meminta izin akses lokasi...';
    if(!navigator.geolocation) {
        btn.innerHTML    = '❌ GPS tidak didukung';
        btn.disabled     = false;
        status.textContent = 'Browser tidak mendukung geolocation.';
        return;
    }
    navigator.geolocation.getCurrentPosition(
        (pos) => {
            const lat = pos.coords.latitude.toFixed(7);
            const lng = pos.coords.longitude.toFixed(7);
            document.getElementById('lap_lat').value = lat;
            document.getElementById('lap_lng').value = lng;
            btn.innerHTML       = '✅ Lokasi berhasil didapat!';
            btn.style.background = 'var(--green)';
            btn.disabled        = false;
            status.style.color  = 'var(--green-d)';
            status.textContent  = `Koordinat: ${lat}, ${lng}`;
            toast('📍 Lokasi GPS berhasil diambil!', 'ok');
        },
        () => {
            btn.innerHTML       = '⚠️ Gagal – Izinkan akses lokasi';
            btn.style.background = 'var(--red)';
            btn.disabled        = false;
            status.style.color  = 'var(--red)';
            status.textContent  = 'Buka pengaturan browser dan izinkan akses lokasi.';
        },
        { timeout: 10000, enableHighAccuracy: true }
    );
}

function kirimLaporan() {
    const nama   = document.getElementById('lap_nama_kk').value.trim();
    const alamat = document.getElementById('lap_alamat').value.trim();
    const lat    = parseFloat(document.getElementById('lap_lat').value);
    const lng    = parseFloat(document.getElementById('lap_lng').value);
    if(!nama || !alamat || isNaN(lat) || isNaN(lng) || lat === 0 || lng === 0) {
        toast('⚠️ Nama, alamat, dan titik lokasi GPS wajib diisi.', 'err');
        return;
    }
    const btnNext = document.getElementById('btn-lap-next');
    btnNext.innerHTML = '⏳ Mengirim...';
    btnNext.disabled  = true;

    const fd = new FormData();
    fd.append('tipe_laporan',      _tipeLaporan);
    fd.append('nama_kk',           nama);
    fd.append('jumlah_anggota',    document.getElementById('lap_jml').value || 1);
    fd.append('alamat',            alamat);
    fd.append('lat',               lat);
    fd.append('lng',               lng);
    fd.append('pekerjaan',         document.getElementById('lap_pekerjaan').value.trim());
    fd.append('keterangan',        document.getElementById('lap_keterangan').value.trim());
    fd.append('is_fakir_miskin',   document.getElementById('lap_fakir').checked   ? 1 : 0);
    fd.append('is_dhuafa',         document.getElementById('lap_dhuafa').checked  ? 1 : 0);
    fd.append('is_lansia_tunggal', document.getElementById('lap_lansia').checked  ? 1 : 0);
    fd.append('is_anak_yatim',     document.getElementById('lap_yatim').checked   ? 1 : 0);
    fd.append('is_korban_bencana', document.getElementById('lap_bencana').checked ? 1 : 0);
    fd.append('is_disabilitas',    document.getElementById('lap_disab').checked   ? 1 : 0);

    fetch('api_laporan_warga.php?aksi=simpan', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(res => {
            btnNext.disabled = false;
            if(res.status === 'sukses') {
                document.getElementById('lap-ref-number').textContent = '#' + String(res.id).padStart(6, '0');
                tampilkanLaporanStep(3);
                muatBadgeLaporanNav();
            } else {
                btnNext.innerHTML = 'Kirim Laporan';
                toast('❌ ' + res.pesan, 'err');
            }
        })
        .catch(() => {
            btnNext.disabled  = false;
            btnNext.innerHTML = 'Kirim Laporan';
            toast('❌ Gagal menghubungi server.', 'err');
        });
}

function bukaStatusLaporan() {
    tutupModalLaporan();
    openPanel('laporan-saya');
    muatStatusLaporan();
}

function muatStatusLaporan() {
    const listEl = document.getElementById('laporan-saya-list');
    listEl.innerHTML = '<div class="empty-state"><div class="es-icon"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>Memuat...</div>';
    fetch('api_laporan_warga.php?aksi=cek_status')
        .then(r => r.json())
        .then(data => {
            if(!data.length) {
                listEl.innerHTML = '<div class="empty-state"><div class="es-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>Belum ada laporan yang dibuat.</div>';
                return;
            }
            const stCfg = {
                'menunggu':    { color:'#F59E0B', bg:'#FFFBEB',  label:'⏳ Menunggu' },
                'diverifikasi':{ color:'#10B981', bg:'#ECFDF5',  label:'✅ Diverifikasi' },
                'ditolak':     { color:'#EF4444', bg:'#FEF2F2',  label:'❌ Ditolak' }
            };
            listEl.innerHTML = data.map(lap => {
                const st  = stCfg[lap.status] || stCfg['menunggu'];
                const tgl = new Date(lap.created_at).toLocaleDateString('id-ID', {day:'2-digit',month:'short',year:'numeric'});
                const tipeLbl = lap.tipe_laporan === 'diri_sendiri' ? 'Diri Sendiri' : 'Orang Lain';
                return `
                <div style="background:white;border:1px solid var(--border-l);border-radius:var(--r2);padding:12px 13px;margin-bottom:8px;border-left:4px solid ${st.color};">
                    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;">
                        <div style="font-size:13px;font-weight:700;color:var(--navy);">${lap.nama_kk}</div>
                        <span style="background:${st.bg};color:${st.color};font-size:9px;font-weight:700;padding:3px 8px;border-radius:10px;white-space:nowrap;">${st.label}</span>
                    </div>
                    <div style="font-size:11px;color:var(--text-3);">Ref: <strong>#${String(lap.id).padStart(6,'0')}</strong> · ${tipeLbl}</div>
                    <div style="font-size:11px;color:var(--text-3);margin-top:2px;">📍 ${lap.alamat}</div>
                    <div style="font-size:10px;color:var(--text-3);margin-top:3px;">Dikirim: ${tgl}</div>
                    ${lap.catatan_admin ? `<div style="margin-top:7px;background:${st.bg};border-radius:var(--r3);padding:7px 9px;font-size:11px;color:${st.color};font-weight:600;">📝 Catatan Admin: ${lap.catatan_admin}</div>` : ''}
                </div>`;
            }).join('');
        })
        .catch(() => {
            listEl.innerHTML = '<div class="empty-state" style="color:var(--red)">Gagal memuat data.</div>';
        });
}

function muatBadgeLaporanNav() {
    fetch('api_laporan_warga.php?aksi=hitung_menunggu')
        .then(r => r.json())
        .then(res => {
            const badge = document.getElementById('badge-laporan-nav');
            if(!badge) return;
            if(res.jumlah > 0) { badge.textContent = res.jumlah; badge.style.display = 'flex'; }
            else badge.style.display = 'none';
        })
        .catch(() => {});
}

// Tutup modal laporan jika klik di luar
document.getElementById('modal-laporan').addEventListener('click', function(e) {
    if(e.target === this) tutupModalLaporan();
});

// Load badge laporan saat halaman pertama dibuka (admin/walikota saja)
<?php if (in_array($_SESSION['role'] ?? '', ['admin', 'walikota'])): ?>
muatBadgeLaporanNav();
<?php endif; ?>

</script>
</body>
</html>
