<?php
session_start();
if (!isset($_SESSION['user_id']) || !in_array($_SESSION['role'], ['admin', 'walikota'])) {
    header("Location: login.php");
    exit;
}
$admin_name = $_SESSION['username'] ?? 'User';
$role = $_SESSION['role'] ?? 'warga';
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Dashboard — WebGIS Pemetaan Sosial</title>
<meta name="description" content="Panel administrasi WebGIS untuk manajemen data kemiskinan, distribusi bantuan, dan donasi.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&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>
<style>
/* ─── DESIGN TOKENS (selaras dengan index.php) ─── */
:root {
  --blue:    #2563EB;
  --blue-d:  #1D4ED8;
  --blue-l:  #EFF6FF;
  --blue-m:  rgba(37,99,235,.09);
  --navy:    #0F172A;
  --green:   #10B981;
  --green-d: #059669;
  --green-l: #ECFDF5;
  --red:     #EF4444;
  --red-l:   #FEF2F2;
  --amber:   #F59E0B;
  --amber-l: #FFFBEB;
  --purple:  #8B5CF6;
  --purple-l:#F5F3FF;
  --teal:    #0891B2;
  --teal-l:  #ECFEFF;
  --bg:      #EBF0F7;
  --surface: rgba(255,255,255,0.96);
  --surface-s:#FFFFFF;
  --border:  #E2E8F0;
  --border-l:#F1F5F9;
  --text:    #0F172A;
  --text-2:  #475569;
  --text-3:  #94A3B8;
  --sh-sm:   0 1px 4px rgba(15,23,42,.06);
  --sh:      0 4px 20px rgba(15,23,42,.08);
  --sh-md:   0 8px 32px rgba(15,23,42,.12);
  --r:  16px;
  --r2: 12px;
  --r3:  8px;
  --sidebar-w: 64px;
  --topbar-h:  58px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Plus Jakarta Sans',sans-serif;overflow:hidden;background:var(--bg)}
#app{display:flex;height:100vh}

/* ── SIDEBAR ── */
#sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--surface-s);
  display:flex;flex-direction:column;align-items:center;
  padding:14px 0 12px;
  border-right:1px solid var(--border);
  z-index:100;gap:2px;
  box-shadow:1px 0 12px rgba(15,23,42,0.06);
}
.sb-logo{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,#2563EB,#1D4ED8);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(37,99,235,0.35);
}
.sb-logo svg{display:block;}
.sb-divider{width:28px;height:1px;background:var(--border);margin:5px 0}
.nav-item{
  position:relative;width:42px;height:42px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,color .15s;
  color:var(--text-3);text-decoration:none;border:none;background:transparent;
}
.nav-item svg{display:block;flex-shrink:0;}
.nav-item:hover{background:var(--blue-m);color:var(--blue)}
.nav-item.active{background:var(--blue-m);color:var(--blue)}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--blue)
}
.nav-item.danger:hover{background:var(--red-l);color:var(--red)}
.ni-badge{
  position:absolute;top:5px;right:5px;min-width:14px;height:14px;
  border-radius:8px;background:var(--red);color:white;
  font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;
  padding:0 3px;border:1.5px solid var(--surface-s)
}
.ni-badge.teal{background:var(--teal)}
.sb-spacer{flex:1}
.sb-user-av{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#2563EB,#1D4ED8);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:white;cursor:pointer;
  transition:opacity .15s;letter-spacing:-0.5px;
}
.sb-user-av:hover{opacity:.8}

/* ── MAIN ── */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#topbar{
  height:var(--topbar-h);flex-shrink:0;
  background:var(--surface-s);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:10px;
  box-shadow:0 1px 10px rgba(15,23,42,0.06);
}
.tb-breadcrumb{flex:1}
.tb-page{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.3px}
.tb-sub{font-size:11px;color:var(--text-3);margin-top:1px}

.tb-search{position:relative;width:220px}
.tb-search input{
  width:100%;padding:8px 12px 8px 34px;
  border-radius:var(--r2);border:1.5px solid var(--border);
  background:var(--bg);font-family:inherit;font-size:12px;color:var(--text);
  transition:border-color .15s,background .15s
}
.tb-search input:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 3px var(--blue-m)}
.tb-search-icon{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none;display:flex;
}

.tb-actions{display:flex;align-items:center;gap:6px}
.tb-btn{
  display:flex;align-items:center;gap:5px;padding:7px 13px;
  border-radius:var(--r3);border:none;font-family:inherit;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;
}
.tb-btn.primary{background:var(--blue);color:white}.tb-btn.primary:hover{background:var(--blue-d)}
.tb-btn.ghost{background:transparent;color:var(--text-2);border:1.5px solid var(--border)}.tb-btn.ghost:hover{background:var(--bg)}
.tb-notif{
  width:34px;height:34px;border-radius:var(--r3);
  border:1.5px solid var(--border);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-3);position:relative;transition:background .15s
}
.tb-notif:hover{background:var(--bg);color:var(--text-2)}
.notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid white}

/* ── CONTENT ── */
#content{flex:1;overflow-y:auto;padding:18px 20px;min-width:0}
#content::-webkit-scrollbar{width:4px}
#content::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.view{display:none}.view.active{display:block}

/* ── DASHBOARD GRID ── */
.dash-grid{display:grid;grid-template-columns:380px 1fr;gap:14px;height:calc(100vh - var(--topbar-h) - 36px)}
.dash-left{display:flex;flex-direction:column;gap:9px;overflow:hidden}
.dash-right{display:flex;flex-direction:column;gap:9px;overflow:hidden}

/* ── MINI STATS ── */
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;flex-shrink:0}
.mini-stat{
  background:var(--surface-s);border-radius:var(--r2);padding:10px 11px;
  border:1px solid var(--border-l);box-shadow:var(--sh-sm);
}
.mini-stat.accent{background:linear-gradient(135deg,var(--blue),var(--blue-d))}
.mini-stat.accent-teal{background:linear-gradient(135deg,var(--teal),#0E7490)}
.ms-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:5px;}
.ms-lbl{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.mini-stat.accent .ms-lbl,.mini-stat.accent-teal .ms-lbl{color:rgba(255,255,255,.65)}
.ms-num{font-size:18px;font-weight:800;color:var(--text);margin-top:2px}
.mini-stat.accent .ms-num,.mini-stat.accent-teal .ms-num{color:white}

/* ── SEARCH CARD ── */
.search-card{
  background:var(--surface-s);border-radius:var(--r2);padding:11px 13px;
  border:1px solid var(--border-l);box-shadow:var(--sh-sm);flex-shrink:0
}
.sc-input{position:relative;margin-bottom:9px}
.sc-input input{
  width:100%;padding:8px 12px 8px 33px;border-radius:var(--r3);
  border:1.5px solid var(--border);background:var(--bg);
  font-family:inherit;font-size:12px;color:var(--text);transition:border-color .15s
}
.sc-input input:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 3px var(--blue-m)}
.sc-input-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none;display:flex;}
.filter-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.filter-chip{
  display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;
  border:1.5px solid var(--border);background:var(--bg);
  font-size:11px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .14s
}
.filter-chip.active,.filter-chip:hover{background:var(--blue-l);border-color:var(--blue);color:var(--blue)}

/* ── LIST SCROLL ── */
.list-scroll{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:7px;padding-right:2px}
.list-scroll::-webkit-scrollbar{width:3px}
.list-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.tracking-card{
  background:var(--surface-s);border-radius:var(--r2);
  border:1.5px solid var(--border-l);box-shadow:var(--sh-sm);
  padding:13px 14px;cursor:pointer;transition:box-shadow .15s,border-color .15s;flex-shrink:0;
}
.tracking-card:hover{box-shadow:var(--sh);border-color:var(--border)}
.tracking-card.active-card{border-color:var(--blue);background:#FAFCFF;box-shadow:0 0 0 3px rgba(37,99,235,.08),var(--sh)}
.tc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.tc-id{font-size:11.5px;font-weight:700;color:var(--text-2)}
.tc-id span{color:var(--blue);font-size:12.5px}
.tc-header-right{display:flex;align-items:center;gap:5px}
.status-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px}
.sp-blue{background:var(--blue);color:white}
.sp-amber{background:var(--amber-l);color:#B45309}
.sp-green{background:var(--green-l);color:#047857}
.sp-red{background:var(--red-l);color:#B91C1C}
.sp-teal{background:var(--teal-l);color:#0E7490}
.tc-more{
  width:24px;height:24px;border:none;background:none;
  cursor:pointer;color:var(--text-3);border-radius:6px;
  display:flex;align-items:center;justify-content:center;transition:background .14s;font-size:16px;line-height:1;
}
.tc-more:hover{background:var(--bg)}
.tc-progress{height:4px;border-radius:4px;background:var(--border-l);overflow:hidden;margin-bottom:11px}
.tc-progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue-d),var(--blue));transition:width .8s ease}
.tc-timeline{display:flex;flex-direction:column}
.tl-row{display:flex;align-items:center;gap:9px;position:relative}
.tl-left{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}
.tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;z-index:1}
.tl-dot.filled{background:var(--blue)}
.tl-dot.empty{background:transparent;border:2px solid var(--border)}
.tl-line{width:1.5px;height:14px;background:var(--border-l)}
.tl-date{font-size:9px;color:var(--text-3);font-weight:600;width:52px;flex-shrink:0}
.tl-label{font-size:11.5px;font-weight:600;color:var(--text);flex:1}
.tl-time{font-size:10px;color:var(--text-3);font-weight:500;white-space:nowrap}

/* ── RIGHT PANEL HEADER ── */
.panel-header{
  background:var(--surface-s);border-radius:var(--r2);padding:11px 15px;
  border:1px solid var(--border-l);box-shadow:var(--sh-sm);flex-shrink:0
}
.ph-top{display:flex;align-items:center;justify-content:space-between}
.ph-eyebrow{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.ph-title{font-size:14px;font-weight:800;color:var(--text);margin-top:2px}
.ph-title span{color:var(--blue)}

/* ── MAP BLOCK ── */
.map-block{
  background:var(--surface-s);border-radius:var(--r2);
  border:1px solid var(--border-l);overflow:hidden;flex-shrink:0;box-shadow:var(--sh-sm)
}
.map-visual{width:100%;height:190px;background:linear-gradient(135deg,#EEF4FF 0%,#E0EDFF 60%,#D4E6FF 100%);position:relative;overflow:hidden}
.map-open-btn{
  position:absolute;top:9px;right:9px;display:flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:var(--r3);background:white;border:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--blue);cursor:pointer;
  box-shadow:var(--sh-sm);transition:box-shadow .14s;text-decoration:none;z-index:9999
}
.map-open-btn svg{flex-shrink:0;}
.map-open-btn:hover{box-shadow:var(--sh)}
.map-stats-row{display:flex;border-top:1px solid var(--border-l)}
.msr-item{flex:1;padding:9px 11px;display:flex;flex-direction:column;gap:1px;border-right:1px solid var(--border-l)}
.msr-item:last-child{border-right:none}
.msr-icon{display:flex;color:var(--text-3);}
.msr-icon svg{display:block;}
.msr-label{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.msr-val{font-size:11.5px;font-weight:800;color:var(--text)}

/* ── TABS ── */
.tabs-card{
  background:var(--surface-s);border-radius:var(--r2);
  border:1px solid var(--border-l);box-shadow:var(--sh-sm);flex:1;overflow:hidden;display:flex;flex-direction:column
}
.tabs-nav{display:flex;border-bottom:1px solid var(--border-l);padding:0 10px;flex-shrink:0;overflow-x:auto}
.tabs-nav::-webkit-scrollbar{height:0}
.tab-btn{
  padding:9px 11px;font-size:11px;font-weight:700;color:var(--text-3);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;flex-shrink:0
}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-btn:hover:not(.active){color:var(--text-2)}
.tabs-body{flex:1;overflow-y:auto;padding:13px 15px}
.tabs-body::-webkit-scrollbar{width:3px}
.tabs-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.tab-pane{display:none}.tab-pane.active{display:block}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:11px}
.dg-item{background:var(--bg);border-radius:var(--r3);padding:9px 11px}
.dgi-label{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.dgi-val{font-size:17px;font-weight:800;color:var(--text)}
.dgi-sub{font-size:10px;color:var(--text-3);margin-top:1px}
.cov-widget{background:var(--bg);border-radius:var(--r3);padding:11px 13px}
.cov-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cov-row-title{font-size:12px;font-weight:700;color:var(--text)}
.cov-pct-badge{font-size:14px;font-weight:800;color:var(--blue)}
.cov-bar{height:6px;border-radius:4px;background:var(--border);overflow:hidden}
.cov-bar-fill{height:100%;border-radius:4px;background:var(--blue);transition:width 1.2s ease;width:0%}

/* ── ACTIVITY FEED ── */
.af-item{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border-l)}
.af-item:last-child{border-bottom:none}
.af-dot{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.af-dot svg{display:block;}
.af-text{font-size:12px;font-weight:600;color:var(--text);line-height:1.4}
.af-text b{color:var(--blue)}
.af-meta{font-size:10px;color:var(--text-3);margin-top:2px}
.warga-mini{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r3);background:var(--bg);margin-bottom:5px}
.wm-av{width:28px;height:28px;border-radius:50%;background:var(--amber-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#B45309;}
.wm-av svg{display:block;}
.wm-name{font-size:12px;font-weight:700;color:var(--text);flex:1}
.wm-sub{font-size:10px;color:var(--text-3);margin-top:1px}

/* ── DONASI CARD ── */
.donasi-item{
  display:flex;align-items:flex-start;gap:9px;padding:9px 11px;
  border-radius:var(--r3);background:var(--bg);margin-bottom:5px;
  border-left:3px solid transparent;transition:border-color .15s;cursor:pointer;
}
.donasi-item:hover{background:var(--border-l)}
.donasi-item.status-menunggu{border-left-color:var(--amber)}
.donasi-item.status-dikonfirmasi{border-left-color:var(--green)}
.donasi-item.status-ditolak{border-left-color:var(--red)}
.di-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.di-avatar svg{display:block;}
.di-name{font-size:12px;font-weight:700;color:var(--text)}
.di-meta{font-size:10px;color:var(--text-3);margin-top:2px;line-height:1.4}
.di-amount{font-size:12.5px;font-weight:800;color:var(--teal);white-space:nowrap;text-align:right}
.di-amount-sub{font-size:9px;color:var(--text-3);margin-top:2px;text-align:right}

/* ── DONASI SUMMARY ROW ── */
.donasi-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:11px}
.ds-box{background:var(--bg);border-radius:var(--r3);padding:9px 11px;text-align:center}
.ds-box-num{font-size:17px;font-weight:800}
.ds-box-lbl{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}

/* ── FULL CARDS / TABLES ── */
.full-card{background:var(--surface-s);border-radius:var(--r);border:1px solid var(--border-l);box-shadow:var(--sh-sm);margin-bottom:18px}
.card-hdr{padding:13px 17px;border-bottom:1px solid var(--border-l);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.card-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;}
.card-icon svg{display:block;}
.tbl-toolbar{display:flex;align-items:center;gap:7px;padding:9px 15px;border-bottom:1px solid var(--border-l)}
.tbl-search{position:relative;flex:1}
.tbl-search input{
  width:100%;padding:7px 10px 7px 30px;font-size:12px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--r3);color:var(--text);
  background:var(--bg);transition:border-color .18s
}
.tbl-search input:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 3px var(--blue-m)}
.tbl-search-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none;display:flex;}
.tbl-add{
  display:flex;align-items:center;gap:5px;padding:7px 13px;
  border-radius:var(--r3);border:none;font-family:inherit;
  font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap
}
.ta-blue{background:var(--blue);color:white}.ta-blue:hover{background:var(--blue-d)}
.ta-green{background:var(--green);color:white}.ta-green:hover{background:var(--green-d)}
.ta-teal{background:var(--teal);color:white}.ta-teal:hover{background:#0E7490}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead tr{background:var(--bg)}
th{padding:8px 13px;font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;text-align:left;border-bottom:1px solid var(--border-l);white-space:nowrap}
td{padding:10px 13px;font-size:12px;color:var(--text);border-bottom:1px solid var(--border-l)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFCFF}
.chip{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px}
.chip-blue{background:var(--blue-m);color:var(--blue)}
.chip-green{background:var(--green-l);color:#047857}
.chip-red{background:var(--red-l);color:#B91C1C}
.chip-amber{background:var(--amber-l);color:#B45309}
.chip-purple{background:var(--purple-l);color:#6D28D9}
.chip-teal{background:var(--teal-l);color:#0E7490}
.chip-gray{background:var(--bg);color:var(--text-3)}
.act-btns{display:flex;align-items:center;gap:4px}
.act-btn{width:27px;height:27px;border:none;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s}
.act-btn svg{display:block;}
.ab-edit{background:var(--blue-l);color:var(--blue)}.ab-edit:hover{background:var(--blue);color:white}
.ab-del{background:var(--red-l);color:var(--red)}.ab-del:hover{background:var(--red);color:white}
.ab-ok{background:var(--green-l);color:var(--green)}.ab-ok:hover{background:var(--green);color:white}
.ab-view{background:var(--teal-l);color:var(--teal)}.ab-view:hover{background:var(--teal);color:white}
.empty-tbl{text-align:center;padding:36px 16px;color:var(--text-3);font-size:12px;font-weight:500}

/* ── ANALYSIS ── */
.an-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.an-stat{background:var(--surface-s);border-radius:var(--r3);padding:13px 15px;border:1px solid var(--border-l);box-shadow:var(--sh-sm)}
.ans-num{font-size:24px;font-weight:800}
.ans-lbl{font-size:9px;font-weight:700;margin-top:3px;text-transform:uppercase;letter-spacing:.06em}

/* ── MODAL ── */
#modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(6px);z-index:9000;display:none;align-items:center;justify-content:center}
#modal-overlay.open{display:flex}
.modal{background:white;border-radius:var(--r);width:460px;max-width:calc(100vw - 32px);max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh-md);animation:mIn .2s cubic-bezier(.34,1.5,.64,1)}
@keyframes mIn{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-hdr{padding:15px 19px 11px;border-bottom:1px solid var(--border-l);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:14px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:9px}
.mt-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.mt-icon svg{display:block;}
.modal-close{
  width:27px;height:27px;border:none;border-radius:50%;
  background:var(--bg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:background .14s;font-size:13px;
}
.modal-close:hover{background:var(--border)}
.modal-body{flex:1;overflow-y:auto;padding:15px 19px 8px}
.modal-body::-webkit-scrollbar{width:3px}
.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.modal-foot{padding:11px 19px 15px;border-top:1px solid var(--border-l);display:flex;gap:7px;flex-shrink:0}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ff{margin-bottom:11px}
.ff label{display:block;font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.ff input,.ff select,.ff textarea{
  width:100%;padding:8px 11px;font-size:12px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--r3);color:var(--text);
  transition:border-color .18s;background:var(--bg)
}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 3px var(--blue-m)}
.ff textarea{min-height:68px;resize:vertical}
.ff-hint{font-size:10px;color:var(--text-3);margin-top:3px}
.ff-divider{display:flex;align-items:center;gap:8px;margin:4px 0 11px}
.ff-divider span{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.ff-divider::before,.ff-divider::after{content:'';flex:1;height:1px;background:var(--border-l)}
.slider-block{background:var(--green-l);border:1.5px solid rgba(16,185,129,.2);border-radius:var(--r3);padding:11px 13px;margin-bottom:11px}
.sb-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.sb-lbl{font-size:12px;font-weight:700;color:var(--text)}
.sb-val{background:var(--green);color:white;font-size:11px;font-weight:700;padding:3px 11px;border-radius:16px;min-width:50px;text-align:center}
input[type="range"]{appearance:none;width:100%;height:5px;border-radius:5px;background:rgba(16,185,129,.2);cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--green);border:3px solid white;box-shadow:0 2px 6px rgba(16,185,129,.3);cursor:pointer}
.preset-row{display:flex;gap:5px;margin-top:8px}
.preset{flex:1;padding:4px 2px;border-radius:16px;text-align:center;border:1.5px solid rgba(16,185,129,.2);background:white;font-family:inherit;font-size:10px;font-weight:700;color:var(--text-3);cursor:pointer;transition:all .14s}
.preset:hover{border-color:var(--green);color:var(--green)}
.preset.on{background:var(--green);border-color:var(--green);color:white}
.check-grid{display:flex;flex-wrap:wrap;gap:5px}
.check-item{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;border:1.5px solid var(--border);cursor:pointer;transition:all .14s;font-size:11px;font-weight:600;color:var(--text-2);background:var(--bg)}
.check-item:has(input:checked){background:var(--blue-l);border-color:var(--blue);color:var(--blue)}
.check-item input{display:none}
.btn-cncl{padding:8px 15px;border-radius:var(--r3);border:1.5px solid var(--border);background:var(--bg);font-family:inherit;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .14s}
.btn-cncl:hover{background:var(--border);color:var(--text)}
.btn-save{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 .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.bs-green{background:var(--green)}.bs-green:hover{background:var(--green-d)}
.bs-blue{background:var(--blue)}.bs-blue:hover{background:var(--blue-d)}
.bs-red{background:var(--red)}.bs-red:hover{background:#DC2626}
.bs-teal{background:var(--teal)}.bs-teal:hover{background:#0E7490}
.btn-save:active{transform:scale(.98)}

/* ── DONASI DETAIL BOX ── */
.donasi-detail-box{background:var(--bg);border-radius:var(--r2);padding:13px 15px;margin-bottom:11px}
.ddb-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border-l)}
.ddb-row:last-child{border-bottom:none}
.ddb-label{font-size:11px;color:var(--text-3);font-weight:600}
.ddb-value{font-size:12px;color:var(--text);font-weight:700;text-align:right}

/* ── CONFIRM ── */
#confirm-overlay{position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(4px);z-index:9500;display:none;align-items:center;justify-content:center}
.confirm-box{background:white;border-radius:var(--r);width:340px;max-width:calc(100vw - 32px);box-shadow:var(--sh-md);animation:mIn .2s cubic-bezier(.34,1.5,.64,1);overflow:hidden}
.cb-icon-wrap{display:flex;align-items:center;justify-content:center;padding:22px 0 10px}
.cb-icon{width:52px;height:52px;border-radius:50%;background:var(--red-l);display:flex;align-items:center;justify-content:center;color:var(--red);}
.cb-icon svg{display:block;}
.cb-title{font-size:15px;font-weight:800;color:var(--text);text-align:center;padding:0 20px}
.cb-sub{font-size:12px;color:var(--text-2);text-align:center;padding:5px 20px 17px;line-height:1.5}
.cb-btns{display:flex;gap:7px;padding:0 15px 15px}

/* ── JENIS DONASI BADGE ── */
.jenis-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;
}
.jb-tunai{background:var(--green-l);color:#047857}
.jb-sembako{background:var(--amber-l);color:#B45309}
.jb-kesehatan{background:var(--red-l);color:#B91C1C}
.jb-pendidikan{background:var(--blue-l);color:var(--blue-d)}
.jb-pakaian{background:var(--purple-l);color:#6D28D9}
.jb-peralatan{background:var(--teal-l);color:#0E7490}
.jb-bangunan{background:#f0fdf4;color:#166534}
.jb-ternak{background:#fefce8;color:#a16207}
.jb-lainnya{background:var(--bg);color:var(--text-2)}

/* ── FILTER DONASI ── */
.don-filter-bar{display:flex;gap:6px;flex-wrap:wrap;padding:9px 15px;border-bottom:1px solid var(--border-l);}
.don-filter-chip{
  display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;
  border:1.5px solid var(--border);background:var(--bg);
  font-size:10.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .14s;
  white-space:nowrap;
}
.don-filter-chip.active{background:var(--teal-l);border-color:var(--teal);color:var(--teal)}
.don-filter-chip:hover:not(.active){background:var(--border-l)}

/* ── TOAST ── */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);z-index:99999;background:var(--text);color:white;font-size:12px;font-weight:600;padding:9px 20px;border-radius:20px;box-shadow:var(--sh-md);opacity:0;transition:all .25s ease;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)}
</style>
</head>
<body>
<div id="app">

<!-- ═══ SIDEBAR ═══ -->
<aside id="sidebar">
  <div class="sb-logo">
    <svg width="18" height="18" 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>
  <a class="nav-item active" onclick="switchView('dashboard',this)" title="Dashboard">
    <svg width="18" height="18" 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>
    <span class="ni-badge" id="badge-ri">0</span>
  </a>
  <div class="sb-divider"></div>
  <a class="nav-item" onclick="switchView('rumah-ibadah',this)" title="Rumah Ibadah">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.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>
  </a>
  <a class="nav-item" onclick="switchView('warga-miskin',this)" title="Warga Miskin">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
    <span class="ni-badge" id="badge-wm">0</span>
  </a>
  <div class="sb-divider"></div>
  <a class="nav-item" onclick="switchView('bantuan',this)" title="Log Bantuan">
    <svg width="18" height="18" 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>
  </a>
  <a class="nav-item" onclick="switchView('donasi',this)" title="Log Donasi">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="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>
    <span class="ni-badge teal" id="badge-donasi">0</span>
  </a>
  <div class="sb-divider"></div>
  <a class="nav-item" onclick="switchView('analisis',this)" title="Analisis Blind Spot">
    <svg width="18" height="18" 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>
  </a>
  <div class="sb-divider"></div>
  <a class="nav-item" onclick="switchView('verifikasi-laporan',this)" title="Verifikasi Laporan Warga">
    <svg width="18" height="18" 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>
    <span class="ni-badge" id="badge-laporan-dashboard" style="display:none">0</span>
  </a>
  <a class="nav-item" onclick="location.href='index.php'" title="Buka Peta">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
  </a>
  <div class="sb-spacer"></div>
  <div class="sb-user-av" title="Logout — <?= htmlspecialchars($admin_name) ?>" onclick="location.href='logout.php'">
    <?= strtoupper(substr($admin_name,0,1)) ?>
  </div>
</aside>

<!-- ═══ MAIN ═══ -->
<div id="main">
  <header id="topbar">
    <div class="tb-breadcrumb">
      <div class="tb-page" id="tb-title">Dashboard</div>
      <div class="tb-sub" id="tb-sub">Ringkasan Pemetaan Sosial</div>
    </div>
    <div class="tb-search">
      <div class="tb-search-icon">
        <svg width="13" height="13" 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>
      </div>
      <input type="text" placeholder="Cari data...">
    </div>
    <div class="tb-actions">
      <button class="tb-btn ghost" onclick="location.href='index.php'">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
        Buka Peta
      </button>
      <button class="tb-notif" onclick="showToast('Tidak ada notifikasi baru','ok')">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
        <span class="notif-dot"></span>
      </button>
    </div>
  </header>

  <div id="content">

    <!-- ╔══════ DASHBOARD ══════╗ -->
    <div class="view active" id="view-dashboard">
      <div class="dash-grid">

        <!-- LEFT -->
        <div class="dash-left">
          <!-- 4 mini stats -->
          <div class="mini-stats">
            <div class="mini-stat">
              <div class="ms-lbl">Rumah Ibadah</div>
              <div class="ms-num" id="dash-total-ri">0</div>
            </div>
            <div class="mini-stat">
              <div class="ms-lbl">KK Warga</div>
              <div class="ms-num" id="dash-total-wm">0</div>
            </div>
            <div class="mini-stat accent">
              <div class="ms-lbl">Coverage</div>
              <div class="ms-num" id="dash-cov-pct">0%</div>
            </div>
            <div class="mini-stat accent-teal">
              <div class="ms-lbl">Donasi Masuk</div>
              <div class="ms-num" id="dash-total-donasi">0</div>
            </div>
          </div>

          <!-- Search + filter -->
          <div class="search-card">
            <div class="sc-input">
              <div class="sc-input-icon">
                <svg width="13" height="13" 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>
              </div>
              <input type="text" placeholder="Cari nama tempat ibadah..." oninput="filterDashList(this.value)">
            </div>
            <div class="filter-row" id="dash-filter-row">
              <div class="filter-chip active" onclick="filterDashKat('all',this)">Semua</div>
              <div class="filter-chip" onclick="filterDashKat('Masjid',this)">Masjid</div>
              <div class="filter-chip" onclick="filterDashKat('Gereja',this)">Gereja</div>
              <div class="filter-chip" onclick="filterDashKat('Vihara',this)">Vihara</div>
              <div class="filter-chip" onclick="filterDashKat('Pura',this)">Pura</div>
            </div>
          </div>

          <!-- Ibadah list -->
          <div class="list-scroll" id="dash-ibadah-list"></div>

          <?php if ($role === 'admin' || $role === 'walikota'): ?>
          <button class="tbl-add ta-blue" style="width:100%;justify-content:center;padding:9px;border-radius:var(--r2);"
            onclick="openModal('modal-ri');isEditRI=false;resetFormRI();">
            + Tambah Rumah Ibadah
          </button>
          <?php endif; ?>
        </div>

        <!-- RIGHT -->
        <div class="dash-right">
          <div class="panel-header">
            <div class="ph-top">
              <div>
                <div class="ph-eyebrow">Detail Lokasi</div>
                <div class="ph-title" id="detail-name">Pilih Rumah Ibadah</div>
              </div>
              <button class="tb-btn primary" onclick="location.href='index.php'">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
                Buka Peta
              </button>
            </div>
          </div>

          <!-- Mini map -->
          <div class="map-block">
            <div class="map-visual" id="mini-map" style="z-index:1">
              <a href="index.php" class="map-open-btn">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
                Lihat Peta Lengkap
              </a>
            </div>
            <div class="map-stats-row">
              <div class="msr-item">
                <div class="msr-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
                <div class="msr-label">Terjangkau</div>
                <div class="msr-val" id="ms-covered">0 KK</div>
              </div>
              <div class="msr-item">
                <div class="msr-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></div>
                <div class="msr-label">Blind Spot</div>
                <div class="msr-val" id="ms-blind">0 KK</div>
              </div>
              <div class="msr-item">
                <div class="msr-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2.5" 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 class="msr-label">Ibadah Aktif</div>
                <div class="msr-val" id="ms-ibadah">0</div>
              </div>
              <div class="msr-item">
                <div class="msr-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
                <div class="msr-label">Klaster</div>
                <div class="msr-val" id="ms-cluster">0</div>
              </div>
            </div>
          </div>

          <!-- Tabs -->
          <div class="tabs-card">
            <div class="tabs-nav">
              <div class="tab-btn active" onclick="switchDashTab('statistik',this)">Statistik</div>
              <div class="tab-btn" onclick="switchDashTab('warga',this)">Warga</div>
              <div class="tab-btn" onclick="switchDashTab('bantuan',this)">Log Bantuan</div>
              <div class="tab-btn" onclick="switchDashTab('donasi-tab',this)">Donasi</div>
              <div class="tab-btn" onclick="switchDashTab('analisis',this)">Analisis</div>
            </div>
            <div class="tabs-body">

              <!-- Statistik -->
              <div class="tab-pane active" id="tab-statistik">
                <div class="detail-grid">
                  <div class="dg-item"><div class="dgi-label">Rumah Ibadah</div><div class="dgi-val" id="ds-ri">0</div><div class="dgi-sub">Aktif dalam sistem</div></div>
                  <div class="dg-item"><div class="dgi-label">Total Warga</div><div class="dgi-val" id="ds-wm">0</div><div class="dgi-sub">Kepala Keluarga</div></div>
                  <div class="dg-item"><div class="dgi-label">Terjangkau</div><div class="dgi-val" style="color:var(--green)" id="ds-covered">0</div><div class="dgi-sub">Dalam radius ibadah</div></div>
                  <div class="dg-item"><div class="dgi-label">Blind Spot</div><div class="dgi-val" style="color:var(--red)" id="ds-blind">0</div><div class="dgi-sub">Di luar jangkauan</div></div>
                </div>
                <div class="cov-widget">
                  <div class="cov-row"><span class="cov-row-title">Coverage Rate</span><span class="cov-pct-badge" id="cov-pct2">0%</span></div>
                  <div class="cov-bar"><div class="cov-bar-fill" id="cov-bar2"></div></div>
                </div>
                <div style="margin-top:11px">
                  <div style="font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px">Distribusi Terbaru</div>
                  <div id="dash-activity-feed"></div>
                </div>
              </div>

              <!-- Warga -->
              <div class="tab-pane" id="tab-warga"><div id="tab-warga-list"></div></div>

              <!-- Log Bantuan -->
              <div class="tab-pane" id="tab-bantuan"><div id="tab-bantuan-list"></div></div>

              <!-- Donasi Tab -->
              <div class="tab-pane" id="tab-donasi-tab">
                <div class="donasi-summary">
                  <div class="ds-box">
                    <div class="ds-box-num" style="color:var(--teal)" id="dtab-total">0</div>
                    <div class="ds-box-lbl">Total</div>
                  </div>
                  <div class="ds-box">
                    <div class="ds-box-num" style="color:var(--amber)" id="dtab-menunggu">0</div>
                    <div class="ds-box-lbl">Menunggu</div>
                  </div>
                  <div class="ds-box">
                    <div class="ds-box-num" style="color:var(--green)" id="dtab-dikonfirmasi">0</div>
                    <div class="ds-box-lbl">Dikonfirmasi</div>
                  </div>
                </div>
                <div style="font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px">Donasi Terbaru dari Pengguna</div>
                <div id="tab-donasi-list"></div>
                <button onclick="switchView('donasi',document.querySelector('[title=\'Log Donasi\']'))"
                  style="width:100%;margin-top:9px;padding:8px;background:var(--teal-l);color:var(--teal);border:none;border-radius:var(--r3);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer">
                  Lihat Semua Log Donasi →
                </button>
              </div>

              <!-- Analisis -->
              <div class="tab-pane" id="tab-analisis"><div id="tab-analisis-content"></div></div>

            </div>
          </div>
        </div><!-- end dash-right -->
      </div>
    </div>

    <!-- ╔══════ RUMAH IBADAH ══════╗ -->
    <div class="view" id="view-rumah-ibadah">
      <div class="full-card">
        <div class="card-hdr">
          <div class="card-title">
            <div class="card-icon" style="background:var(--blue-l);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"><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>
            Manajemen Rumah Ibadah
          </div>
          <button class="tbl-add ta-blue" onclick="openModal('modal-ri');isEditRI=false;resetFormRI();">+ Tambah Baru</button>
        </div>
        <div class="tbl-toolbar">
          <div class="tbl-search">
            <div class="tbl-search-icon"><svg width="12" height="12" 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></div>
            <input type="text" placeholder="Cari nama, alamat, PIC..." oninput="filterTable('ri-tbody',this.value)">
          </div>
        </div>
        <div class="tbl-scroll">
          <table>
            <thead><tr><th>ID</th><th>Nama Ibadah</th><th>Alamat</th><th>PIC</th><th>Radius</th><th>Aksi</th></tr></thead>
            <tbody id="ri-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ╔══════ WARGA MISKIN ══════╗ -->
    <div class="view" id="view-warga-miskin">
      <div class="full-card">
        <div class="card-hdr">
          <div class="card-title">
            <div class="card-icon" style="background:var(--amber-l);color:var(--amber)">
              <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="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>
            Manajemen Data Warga Miskin
          </div>
          <button class="tbl-add ta-green" onclick="openModal('modal-wm');isEditWM=false;resetFormWM();">+ Tambah KK</button>
        </div>
        <div class="tbl-toolbar">
          <div class="tbl-search">
            <div class="tbl-search-icon"><svg width="12" height="12" 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></div>
            <input type="text" placeholder="Cari nama KK, alamat..." oninput="filterTable('wm-tbody',this.value)">
          </div>
        </div>
        <div class="tbl-scroll">
          <table>
            <thead><tr><th>ID</th><th>Kepala Keluarga</th><th>Pekerjaan</th><th>Jml Anggota</th><th>Klasifikasi</th><th>Status</th><th>Aksi</th></tr></thead>
            <tbody id="wm-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ╔══════ BANTUAN ══════╗ -->
    <div class="view" id="view-bantuan">
      <div class="full-card">
        <div class="card-hdr">
          <div class="card-title">
            <div class="card-icon" style="background:var(--green-l);color:var(--green)">
              <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>
            </div>
            Log Distribusi Bantuan
          </div>
          <button class="tbl-add ta-green" onclick="openModal('modal-bantuan');isEditBantuan=false;resetFormBantuan();">+ Catat Bantuan</button>
        </div>
        <div class="tbl-toolbar">
          <div class="tbl-search">
            <div class="tbl-search-icon"><svg width="12" height="12" 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></div>
            <input type="text" placeholder="Cari penerima, jenis bantuan..." oninput="filterTable('bantuan-tbody',this.value)">
          </div>
        </div>
        <div class="tbl-scroll">
          <table>
            <thead><tr><th>ID</th><th>Penerima</th><th>Jenis Bantuan</th><th>Tanggal</th><th>Penyalur</th><th>Keterangan</th><th>Aksi</th></tr></thead>
            <tbody id="bantuan-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ╔══════ LOG DONASI ══════╗ -->
    <div class="view" id="view-donasi">
      <!-- Ringkasan atas -->
      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px">
        <div class="an-stat">
          <div class="ans-num" style="color:var(--teal)" id="don-total-num">0</div>
          <div class="ans-lbl" style="color:var(--teal)">Total Donasi</div>
        </div>
        <div class="an-stat">
          <div class="ans-num" style="color:var(--amber)" id="don-menunggu-num">0</div>
          <div class="ans-lbl" style="color:var(--amber)">Menunggu Konfirmasi</div>
        </div>
        <div class="an-stat">
          <div class="ans-num" style="color:var(--green)" id="don-confirmed-num">0</div>
          <div class="ans-lbl" style="color:var(--green)">Dikonfirmasi</div>
        </div>
        <div class="an-stat">
          <div class="ans-num" style="color:var(--blue)" id="don-nilai-total">Rp 0</div>
          <div class="ans-lbl" style="color:var(--blue)">Total Nilai Uang</div>
        </div>
      </div>

      <div class="full-card">
        <div class="card-hdr">
          <div class="card-title">
            <div class="card-icon" style="background:var(--teal-l);color:var(--teal)">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="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>
            </div>
            Log Donasi dari Pengguna
          </div>
          <div style="display:flex;gap:7px;align-items:center">
            <select id="don-filter-status" onchange="renderTableDonasi()" style="padding:6px 10px;border-radius:var(--r3);border:1.5px solid var(--border);background:var(--bg);font-family:inherit;font-size:11px;font-weight:600;color:var(--text-2);cursor:pointer">
              <option value="">Semua Status</option>
              <option value="Menunggu">Menunggu</option>
              <option value="Dikonfirmasi">Dikonfirmasi</option>
              <option value="Ditolak">Ditolak</option>
            </select>
            <button class="tbl-add" style="background:var(--blue-l);color:var(--blue);border:none;padding:6px 11px;border-radius:var(--r3);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px" onclick="muatDataDashboard();showToast('Memperbarui data...','ok')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
              Refresh
            </button>
          </div>
        </div>
        <!-- Filter jenis donasi -->
        <div class="don-filter-bar" id="don-jenis-filter-bar">
          <div class="don-filter-chip active" onclick="filterDonasiJenis('',this)">Semua Jenis</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Uang Tunai',this)">Uang Tunai</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Sembako',this)">Sembako</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Bantuan Kesehatan',this)">Kesehatan</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Bantuan Pendidikan',this)">Pendidikan</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Pakaian',this)">Pakaian</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Peralatan Rumah Tangga',this)">Peralatan</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Bahan Bangunan',this)">Bahan Bangunan</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Hewan Ternak',this)">Hewan Ternak</div>
          <div class="don-filter-chip" onclick="filterDonasiJenis('Lainnya',this)">Lainnya</div>
        </div>
        <div class="tbl-toolbar">
          <div class="tbl-search">
            <div class="tbl-search-icon"><svg width="12" height="12" 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></div>
            <input type="text" placeholder="Cari nama donatur, jenis donasi..." oninput="filterTable('donasi-tbody',this.value)">
          </div>
        </div>
        <div class="tbl-scroll">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Donatur</th>
                <th>Jenis Donasi</th>
                <th>Nilai / Keterangan</th>
                <th>Disalurkan ke</th>
                <th>Tanggal</th>
                <th>Status</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody id="donasi-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ╔══════ ANALISIS ══════╗ -->
    <div class="view" id="view-analisis">
      <div class="an-stat-grid">
        <div class="an-stat"><div class="ans-num" style="color:var(--green)" id="an-terjangkau">0</div><div class="ans-lbl" style="color:var(--green)">Terjangkau</div></div>
        <div class="an-stat"><div class="ans-num" style="color:var(--red)" id="an-blindspot">0</div><div class="ans-lbl" style="color:var(--red)">Blind Spot</div></div>
        <div class="an-stat"><div class="ans-num" style="color:var(--blue)" id="an-ibadah">0</div><div class="ans-lbl" style="color:var(--blue)">Ibadah Aktif</div></div>
        <div class="an-stat"><div class="ans-num" style="color:var(--amber)" id="an-kritis">0</div><div class="ans-lbl" style="color:var(--amber)">Klaster Terdeteksi</div></div>
      </div>
      <div class="full-card">
        <div class="card-hdr">
          <div class="card-title">
            <div class="card-icon" style="background:var(--red-l);color:var(--red)">
              <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>
            </div>
            Zona Blind Spot Terdeteksi
          </div>
          <button class="tbl-add" style="background:var(--blue-l);color:var(--blue);border:none;padding:6px 11px;border-radius:var(--r3);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px" onclick="muatDataDashboard();showToast('Memperbarui data...','ok')">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
            Refresh
          </button>
        </div>
        <div class="tbl-scroll">
          <table>
            <thead><tr><th>#</th><th>Koordinat Centroid</th><th>Jml KK Terdampak</th><th>Prioritas</th></tr></thead>
            <tbody id="blindspot-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- ╔══════ VERIFIKASI LAPORAN ══════╗ -->
    <div class="view" id="view-verifikasi-laporan">
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:14px">
        <div class="an-stat"><div class="ans-num" style="color:var(--amber)" id="lap-count-menunggu">0</div><div class="ans-lbl" style="color:var(--amber)">Menunggu Verifikasi</div></div>
        <div class="an-stat"><div class="ans-num" style="color:var(--green)" id="lap-count-verified">0</div><div class="ans-lbl" style="color:var(--green)">Diverifikasi</div></div>
        <div class="an-stat"><div class="ans-num" style="color:var(--red)" id="lap-count-rejected">0</div><div class="ans-lbl" style="color:var(--red)">Ditolak</div></div>
      </div>
      <div class="full-card">
        <div class="card-hdr">
          <div class="card-title">
            <div class="card-icon" style="background:var(--amber-l);color:var(--amber)">
              <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>
            </div>
            Laporan dari Warga
          </div>
          <div style="display:flex;gap:7px;align-items:center">
            <select id="laporan-filter-status" onchange="renderTableLaporan()" style="padding:6px 10px;border-radius:var(--r3);border:1.5px solid var(--border);background:var(--bg);font-family:inherit;font-size:11px;font-weight:600;color:var(--text-2);cursor:pointer">
              <option value="">Semua Status</option>
              <option value="menunggu">Menunggu</option>
              <option value="diverifikasi">Diverifikasi</option>
              <option value="ditolak">Ditolak</option>
            </select>
            <button class="tbl-add" style="background:var(--blue-l);color:var(--blue);border:none;padding:6px 11px;border-radius:var(--r3);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px" onclick="muatLaporanWarga();showToast('Memperbarui...','ok')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
              Refresh
            </button>
          </div>
        </div>
        <div class="tbl-scroll">
          <table>
            <thead><tr><th>Ref</th><th>Nama KK</th><th>Pelapor</th><th>Tipe</th><th>Alamat</th><th>Tanggal</th><th>Status</th><th>Aksi</th></tr></thead>
            <tbody id="laporan-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<!-- ═══ MODALS ═══ -->
<div id="modal-overlay" onclick="if(event.target===this)closeAllModals()">

  <!-- Modal: Rumah Ibadah -->
  <div class="modal" id="modal-ri" style="display:none">
    <div class="modal-hdr">
      <div class="modal-title">
        <div class="mt-icon" style="background:var(--blue-l);color:var(--blue)">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.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>
        <span id="ri-modal-title">Tambah Rumah Ibadah</span>
      </div>
      <button class="modal-close" onclick="closeModal('modal-ri')">&#10005;</button>
    </div>
    <div class="modal-body">
      <input type="hidden" id="ri_id">
      <div class="ff"><label>Nama Lengkap Tempat Ibadah *</label><input type="text" id="ri_nama" placeholder="cth. Masjid Al-Ikhlas"></div>
      <div class="ff"><label>Kategori *</label><select id="ri_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>Alamat / Lokasi</label><input type="text" id="ri_alamat" placeholder="cth. Jl. Merdeka No. 12"></div>
      <div class="ff"><label>Nama PIC / Pengurus</label><input type="text" id="ri_pic" placeholder="Nama ketua pengurus"></div>
      <div class="ff-divider"><span>Koordinat &amp; Radius</span></div>
      <div class="row-2">
        <div class="ff"><label>Latitude *</label><input type="text" id="ri_lat" placeholder="-0.0263"></div>
        <div class="ff"><label>Longitude *</label><input type="text" id="ri_lng" placeholder="109.3242"></div>
      </div>
      <div class="ff-hint" style="margin-bottom:8px">Salin dari Google Maps (cth: -0.0548, 109.3494)</div>
      <div class="slider-block">
        <div class="sb-row"><div class="sb-lbl">Radius Jangkauan</div><div class="sb-val" id="ri-radius-val">2 km</div></div>
        <input type="range" id="ri_radius" min="500" max="5000" step="100" value="2000"
          oninput="document.getElementById('ri-radius-val').textContent=(this.value>=1000?(this.value/1000)+' km':this.value+' m');updatePresets(this.value)">
        <div class="preset-row">
          <button class="preset" onclick="setPreset(500)">500m</button>
          <button class="preset" onclick="setPreset(1000)">1 km</button>
          <button class="preset on" onclick="setPreset(2000)">2 km</button>
          <button class="preset" onclick="setPreset(3000)">3 km</button>
          <button class="preset" onclick="setPreset(5000)">5 km</button>
        </div>
      </div>
    </div>
    <div class="modal-foot">
      <button class="btn-cncl" onclick="closeModal('modal-ri')">Batal</button>
      <button class="btn-save bs-blue" onclick="saveRI()">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
        Simpan Data
      </button>
    </div>
  </div>

  <!-- Modal: Warga Miskin -->
  <div class="modal" id="modal-wm" style="display:none;width:500px">
    <div class="modal-hdr">
      <div class="modal-title">
        <div class="mt-icon" style="background:var(--amber-l);color:var(--amber)">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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"/></svg>
        </div>
        <span id="wm-modal-title">Tambah Data Warga</span>
      </div>
      <button class="modal-close" onclick="closeModal('modal-wm')">&#10005;</button>
    </div>
    <div class="modal-body">
      <input type="hidden" id="wm_id">
      <div class="ff-divider"><span>Identitas Kepala Keluarga</span></div>
      <div class="row-2">
        <div class="ff"><label>Nama KK *</label><input type="text" id="wm_nama_kk" placeholder="Nama lengkap KK"></div>
        <div class="ff"><label>Jumlah Anggota</label><input type="number" id="wm_jumlah" placeholder="4" min="1"></div>
      </div>
      <div class="ff"><label>Alamat Lengkap *</label><input type="text" id="wm_alamat" placeholder="Nama jalan, gang, nomor rumah"></div>
      <div class="row-2">
        <div class="ff"><label>Pekerjaan</label><input type="text" id="wm_pekerjaan" placeholder="cth. Buruh Harian"></div>
        <div class="ff"><label>Pendidikan Terakhir</label><select id="wm_pendidikan"><option value="">— Pilih —</option><option>Tidak Sekolah</option><option>SD</option><option>SMP</option><option>SMA</option><option>D3</option><option>S1</option></select></div>
      </div>
      <div class="row-2">
        <div class="ff"><label>Tanggal Lahir</label><input type="date" id="wm_tgl_lahir"></div>
        <div class="ff"><label>Jaminan Sosial</label><select id="wm_jaminan"><option value="">— Pilih —</option><option>Tidak Ada</option><option>BPJS Kesehatan</option><option>KIS</option><option>BPJS Ketenagakerjaan</option></select></div>
      </div>
      <div class="ff"><label>Riwayat Penyakit / Disabilitas</label><input type="text" id="wm_penyakit" placeholder="Opsional"></div>
      <div class="ff-divider"><span>Klasifikasi Warga</span></div>
      <div class="ff">
        <div class="check-grid">
          <label class="check-item"><input type="checkbox" id="wm_k_fakir"> Fakir Miskin</label>
          <label class="check-item"><input type="checkbox" id="wm_k_dhuafa"> Dhuafa</label>
          <label class="check-item"><input type="checkbox" id="wm_k_lansia"> Janda / Lansia</label>
          <label class="check-item"><input type="checkbox" id="wm_k_yatim"> Yatim Piatu</label>
          <label class="check-item"><input type="checkbox" id="wm_k_bencana"> Korban Bencana</label>
          <label class="check-item"><input type="checkbox" id="wm_k_disab"> Disabilitas</label>
        </div>
      </div>
      <div class="ff-divider"><span>Koordinat Lokasi</span></div>
      <div class="row-2">
        <div class="ff"><label>Latitude *</label><input type="text" id="wm_lat" placeholder="-0.0263"></div>
        <div class="ff"><label>Longitude *</label><input type="text" id="wm_lng" placeholder="109.3242"></div>
      </div>
    </div>
    <div class="modal-foot">
      <button class="btn-cncl" onclick="closeModal('modal-wm')">Batal</button>
      <button class="btn-save bs-green" onclick="saveWM()">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
        Simpan Data
      </button>
    </div>
  </div>

  <!-- Modal: Bantuan -->
  <div class="modal" id="modal-bantuan" style="display:none">
    <div class="modal-hdr">
      <div class="modal-title">
        <div class="mt-icon" style="background:var(--green-l);color:var(--green)">
          <svg width="16" height="16" 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>
        </div>
        <span id="bantuan-modal-title">Catat Distribusi Bantuan</span>
      </div>
      <button class="modal-close" onclick="closeModal('modal-bantuan')">&#10005;</button>
    </div>
    <div class="modal-body">
      <input type="hidden" id="hb_id">
      <div class="ff"><label>Penerima Bantuan *</label><select id="hb_warga_id"><option value="">— Pilih Warga Penerima —</option></select></div>
      <div class="row-2">
        <div class="ff">
          <label>Jenis Bantuan *</label>
          <select id="hb_jenis_id">
            <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="7">Peralatan Rumah Tangga</option>
            <option value="8">Bahan Bangunan</option>
            <option value="9">Hewan Ternak</option>
            <option value="5">Lainnya</option>
          </select>
        </div>
        <div class="ff"><label>Tanggal Distribusi *</label><input type="date" id="hb_tgl"></div>
      </div>
      <div class="ff"><label>Penyalur / Sumber *</label><select id="hb_penyalur"><option value="">— Pilih Penyalur —</option></select></div>
      <div class="ff"><label>Nilai / Deskripsi Singkat *</label><input type="text" id="hb_deskripsi" placeholder="cth: Rp 500.000 / Paket Sembako"></div>
      <div class="ff"><label>Keterangan Tambahan</label><textarea id="hb_catatan" placeholder="Catatan operasional (opsional)..."></textarea></div>
    </div>
    <div class="modal-foot">
      <button class="btn-cncl" onclick="closeModal('modal-bantuan')">Batal</button>
      <button class="btn-save bs-green" onclick="saveBantuan()">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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>
        Simpan Log
      </button>
    </div>
  </div>

  <!-- Modal: Detail Donasi -->
  <div class="modal" id="modal-donasi-detail" style="display:none">
    <div class="modal-hdr">
      <div class="modal-title">
        <div class="mt-icon" style="background:var(--teal-l);color:var(--teal)">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="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>
        </div>
        <span id="don-modal-title">Detail Donasi</span>
      </div>
      <button class="modal-close" onclick="closeModal('modal-donasi-detail')">&#10005;</button>
    </div>
    <div class="modal-body">
      <div class="donasi-detail-box" id="don-detail-box"><!-- filled by JS --></div>
      <div class="ff">
        <label>Catatan Konfirmasi / Penolakan</label>
        <textarea id="don-catatan-konfirmasi" placeholder="Tulis alasan atau catatan (opsional)..." style="min-height:56px"></textarea>
      </div>
    </div>
    <div class="modal-foot">
      <button class="btn-cncl" onclick="closeModal('modal-donasi-detail')">Tutup</button>
      <button class="btn-save" style="background:var(--red);flex:0.7" id="btn-tolak-donasi" onclick="aksiDonasi('Ditolak')">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        Tolak
      </button>
      <button class="btn-save bs-teal" id="btn-konfirmasi-donasi" onclick="aksiDonasi('Dikonfirmasi')">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        Konfirmasi
      </button>
    </div>
  </div>
  <!-- Modal: Tolak Laporan -->
  <div class="modal" id="modal-tolak-laporan" style="display:none;max-width:360px;">
    <div class="modal-hdr">
      <div class="modal-title">
        <div class="mt-icon" style="background:var(--red-l);color:var(--red)">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </div>
        Tolak Laporan Warga
      </div>
      <button class="modal-close" onclick="closeModal('modal-tolak-laporan')">&#10005;</button>
    </div>
    <div class="modal-body">
      <input type="hidden" id="tolak_laporan_id">
      <div class="ff">
        <label>Alasan Penolakan (Akan dilihat pelapor)</label>
        <textarea id="tolak_catatan" placeholder="Tulis alasan penolakan..." style="min-height:80px;"></textarea>
      </div>
    </div>
    <div class="modal-foot">
      <button class="btn-cncl" onclick="closeModal('modal-tolak-laporan')">Batal</button>
      <button class="btn-save bs-red" onclick="eksekusiTolakLaporan()">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        Tolak Laporan
      </button>
    </div>
  </div>

</div>

<!-- Confirm -->
<div id="confirm-overlay" onclick="if(event.target===this)closeConfirm()" style="display:none;position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(4px);z-index:9500;align-items:center;justify-content:center">
  <div class="confirm-box">
    <div class="cb-icon-wrap">
      <div class="cb-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="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 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
      </div>
    </div>
    <div class="cb-title" id="confirm-title">Hapus Data Ini?</div>
    <div class="cb-sub" id="confirm-sub">Data yang dihapus tidak dapat dikembalikan.</div>
    <div class="cb-btns">
      <button class="btn-cncl" style="flex:1" onclick="closeConfirm()">Batal</button>
      <button class="btn-save bs-red" style="flex:1" onclick="doDelete()">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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"/></svg>
        Ya, Hapus
      </button>
    </div>
  </div>
</div>

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

<script>
let ibData=[],miData=[],logData=[],donasiData=[];
let isEditRI=false,isEditWM=false,isEditBantuan=false;
let _dashKat='all',_dashSearch='';
let _activeDonasi=null;
let _donFilterJenis='';

/* ─── JENIS DONASI MAP ─── */
const JENIS_DONASI_MAP = {
  'Uang Tunai':              { cls:'jb-tunai',     icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="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>' },
  'Sembako':                 { cls:'jb-sembako',   icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>' },
  'Bantuan Kesehatan':       { cls:'jb-kesehatan', icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>' },
  'Bantuan Pendidikan':      { cls:'jb-pendidikan',icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>' },
  'Pakaian':                 { cls:'jb-pakaian',   icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.38 3.46L16 2a4 4 0 01-8 0L3.62 3.46a2 2 0 00-1.34 2.23l.58 3.57a1 1 0 00.99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 002-2V10h2.15a1 1 0 00.99-.84l.58-3.57a2 2 0 00-1.34-2.23z"/></svg>' },
  'Peralatan Rumah Tangga':  { cls:'jb-peralatan', icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>' },
  'Bahan Bangunan':          { cls:'jb-bangunan',  icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>' },
  'Hewan Ternak':            { cls:'jb-ternak',    icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="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>' },
  'Lainnya':                 { cls:'jb-lainnya',   icon:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>' },
};

function getJenisBadge(jenis){
  const j=JENIS_DONASI_MAP[jenis]||JENIS_DONASI_MAP['Lainnya'];
  return `<span class="jenis-badge ${j.cls}">${j.icon} ${jenis||'—'}</span>`;
}

/* ─── MINI MAP ─── */
const miniMap=L.map('mini-map',{zoomControl:false,dragging:true,scrollWheelZoom:false}).setView([-0.0548,109.3494],12);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(miniMap);
let miniLyI=L.layerGroup().addTo(miniMap),miniLyM=L.layerGroup().addTo(miniMap);

function renderMiniMap(){
  miniLyI.clearLayers();miniLyM.clearLayers();
  let bounds=[];
  ibData.forEach(d=>{
    const lat=parseFloat(d.lat),lng=parseFloat(d.lng);if(isNaN(lat)||isNaN(lng))return;
    L.circle([lat,lng],{color:'#2563EB',fillColor:'#2563EB',fillOpacity:.1,radius:parseInt(d.radius),weight:1}).addTo(miniLyI);
    L.circleMarker([lat,lng],{radius:5,color:'#1D4ED8',fillColor:'#fff',fillOpacity:1,weight:2}).addTo(miniLyI);
    bounds.push([lat,lng]);
  });
  miData.forEach(d=>{
    const lat=parseFloat(d.lat),lng=parseFloat(d.lng);if(isNaN(lat)||isNaN(lng)||lat===0||lng===0)return;
    const inside=isInsideAnyCircle(lat,lng);const color=inside?'#10B981':'#EF4444';
    L.circleMarker([lat,lng],{radius:3,color,fillColor:color,fillOpacity:.8,weight:1}).addTo(miniLyM);
    bounds.push([lat,lng]);
  });
  if(bounds.length>0)miniMap.fitBounds(bounds,{padding:[20,20]});
}

/* ─── HAVERSINE ─── */
function haversine(la1,ln1,la2,ln2){
  const R=6371000,dLat=(la2-la1)*Math.PI/180,dLng=(ln2-ln1)*Math.PI/180;
  const a=Math.sin(dLat/2)**2+Math.cos(la1*Math.PI/180)*Math.cos(la2*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=>haversine(lat,lng,parseFloat(ib.lat),parseFloat(ib.lng))<=parseInt(ib.radius));
}

/* ─── FETCH ALL DATA ─── */
async function muatDataDashboard(){
  try{
    const [rRI, rWM, rDist, rDon] = await Promise.all([
      fetch('api_ibadah.php?aksi=tampil'),
      fetch('api_kemiskinan.php?aksi=tampil'),
      fetch('api_distribusi.php?aksi=global'),
      fetch('api_donasi.php?aksi=tampil')
    ]);
    ibData = await rRI.json();
    miData = await rWM.json();
    const rawDon = await rDon.json();
    donasiData = Array.isArray(rawDon) ? rawDon : [];

    const distResult = await rDist.json();
    const jenisMap = {
      '1':'Uang Tunai','2':'Sembako','3':'Bantuan Kesehatan',
      '4':'Bantuan Pendidikan','5':'Lainnya','6':'Pakaian',
      '7':'Peralatan Rumah Tangga','8':'Bahan Bangunan','9':'Hewan Ternak'
    };
    
    logData = (distResult.log_distribusi || []).map(d => ({
        id: d.id,
        warga_id: d.warga_id,
        nama_kk: d.nama_kk,
        jenis_bantuan: jenisMap[d.jenis_id] || 'Bantuan',
        tanggal: d.tanggal_distribusi,
        sumber_bantuan: d.nama_penyalur,
        satuan_custom: d.satuan_custom,
        catatan: d.catatan,
        lat: d.lat,
        lng: d.lng
    }));

    populateDropdowns();
    renderDashStats();
    renderDashIbadahList();
    renderTableRI();renderTableWM();renderTableBantuan();
    renderActivityFeed();renderBlindSpots();
    renderTabWarga();renderTabBantuan();renderTabAnalisis();
    renderTabDonasi();
    renderTableDonasi();
    renderMiniMap();
  }catch(err){
    console.error(err);showToast('Gagal menyinkronkan data','err');
  }
}

/* ─── DROPDOWNS ─── */
function populateDropdowns(){
  const wSel=document.getElementById('hb_warga_id');
  wSel.innerHTML='<option value="">— Pilih Warga Penerima —</option>';
  miData.forEach(m=>wSel.innerHTML+=`<option value="${m.id}">${m.nama_kk}</option>`);
  const pSel=document.getElementById('hb_penyalur');
  pSel.innerHTML='<option value="">— Pilih Penyalur —</option>';
  ibData.forEach(ib=>pSel.innerHTML+=`<option value="${ib.nama_tempat}">${ib.nama_tempat}</option>`);
  pSel.innerHTML+=`<option value="Donatur Pribadi / Anonim">Donatur Anonim</option>`;
  pSel.innerHTML+=`<option value="Lainnya">Lainnya</option>`;
}

/* ─── DASHBOARD STATS ─── */
function renderDashStats(){
  const totalRI=ibData.length,totalWM=miData.length;
  let covered=0;
  miData.forEach(d=>{if(parseFloat(d.lat)!==0&&parseFloat(d.lng)!==0&&isInsideAnyCircle(parseFloat(d.lat),parseFloat(d.lng)))covered++;});
  const pct=totalWM>0?(covered/totalWM)*100:0;
  const totalDon=donasiData.length;
  const menunggu=donasiData.filter(d=>d.status==='Menunggu'||!d.status).length;

  document.getElementById('badge-ri').textContent=totalRI;
  document.getElementById('badge-wm').textContent=totalWM;
  document.getElementById('badge-donasi').textContent=menunggu||totalDon;
  document.getElementById('dash-total-ri').textContent=totalRI;
  document.getElementById('dash-total-wm').textContent=totalWM;
  document.getElementById('dash-cov-pct').textContent=Math.round(pct)+'%';
  document.getElementById('dash-total-donasi').textContent=totalDon;

  document.getElementById('ds-ri').textContent=totalRI;
  document.getElementById('ds-wm').textContent=totalWM;
  document.getElementById('ds-covered').textContent=covered;
  document.getElementById('ds-blind').textContent=totalWM-covered;
  document.getElementById('ms-covered').textContent=covered+' KK';
  document.getElementById('ms-blind').textContent=(totalWM-covered)+' KK';
  document.getElementById('ms-ibadah').textContent=totalRI;
  document.getElementById('cov-pct2').textContent=Math.round(pct)+'%';
  document.getElementById('cov-bar2').style.width=Math.min(pct,100)+'%';
  document.getElementById('an-terjangkau').textContent=covered;
  document.getElementById('an-blindspot').textContent=totalWM-covered;
  document.getElementById('an-ibadah').textContent=totalRI;

  const confirmed=donasiData.filter(d=>d.status==='Dikonfirmasi').length;
  let totalNilai=0;
  donasiData.forEach(d=>{
    if(d.status==='Dikonfirmasi'&&d.jenis_donasi==='Uang Tunai'){
      const num=parseInt((d.nilai||'').replace(/\D/g,''));
      if(!isNaN(num))totalNilai+=num;
    }
  });
  const setEl=(id,v)=>{const el=document.getElementById(id);if(el)el.textContent=v;};
  setEl('don-total-num',totalDon);setEl('don-menunggu-num',menunggu);setEl('don-confirmed-num',confirmed);
  setEl('don-nilai-total','Rp '+totalNilai.toLocaleString('id-ID'));
  setEl('dtab-total',totalDon);setEl('dtab-menunggu',menunggu);setEl('dtab-dikonfirmasi',confirmed);
}

/* ─── DONASI STATUS CHIP ─── */
function donasiStatusChip(status){
  if(status==='Dikonfirmasi')return'<span class="chip chip-green">Dikonfirmasi</span>';
  if(status==='Ditolak')return'<span class="chip chip-red">Ditolak</span>';
  return'<span class="chip chip-amber">Menunggu</span>';
}

/* ─── TAB DONASI (dashboard) ─── */
function renderTabDonasi(){
  const container=document.getElementById('tab-donasi-list');
  if(!donasiData.length){
    container.innerHTML='<div style="text-align:center;padding:20px;color:var(--text-3);font-size:12px">Belum ada donasi masuk.</div>';
    return;
  }
  const latest=[...donasiData].sort((a,b)=>new Date(b.tanggal||0)-new Date(a.tanggal||0)).slice(0,8);
  container.innerHTML=latest.map(d=>`
    <div class="donasi-item status-${(d.status||'menunggu').toLowerCase().replace(' ','-')}"
      onclick="bukaDetailDonasi(${d.id})">
      <div class="di-avatar" style="background:var(--teal-l);color:var(--teal)">
        ${(JENIS_DONASI_MAP[d.jenis_donasi]||JENIS_DONASI_MAP['Lainnya']).icon}
      </div>
      <div style="flex:1;min-width:0">
        <div class="di-name">${d.nama_donatur||'Anonim'}</div>
        <div class="di-meta">${d.jenis_donasi||'—'} · ${d.tanggal||'—'}<br>→ ${d.disalurkan_ke||'Belum ditentukan'}</div>
      </div>
      <div>
        <div class="di-amount">${d.jenis_donasi==='Uang Tunai'?'Rp '+(d.nilai||'—'):d.nilai||'—'}</div>
        <div class="di-amount-sub">${donasiStatusChip(d.status)}</div>
      </div>
    </div>
  `).join('');
}

/* ─── FILTER DONASI JENIS ─── */
function filterDonasiJenis(jenis, el){
  _donFilterJenis=jenis;
  document.querySelectorAll('.don-filter-chip').forEach(c=>c.classList.remove('active'));
  el.classList.add('active');
  renderTableDonasi();
}

/* ─── TABLE DONASI (full view) ─── */
function renderTableDonasi(){
  const tbody=document.getElementById('donasi-tbody');
  const filterStatus=document.getElementById('don-filter-status')?.value||'';
  let data=donasiData;
  if(filterStatus)data=data.filter(d=>(d.status||'Menunggu')===filterStatus);
  if(_donFilterJenis)data=data.filter(d=>(d.jenis_donasi||'')===_donFilterJenis);
  if(!data.length){tbody.innerHTML='<tr><td colspan="8" class="empty-tbl">Belum ada data donasi</td></tr>';return;}
  tbody.innerHTML=data.map(d=>`
    <tr>
      <td style="color:var(--text-3);font-size:11px">${d.id}</td>
      <td>
        <strong>${d.nama_donatur||'Anonim'}</strong>
        <br><span style="font-size:10px;color:var(--text-3)">${d.kontak||'—'}</span>
      </td>
      <td>${getJenisBadge(d.jenis_donasi)}</td>
      <td>
        <strong style="color:var(--teal)">${d.jenis_donasi==='Uang Tunai'?'Rp '+(d.nilai||'—'):d.nilai||'—'}</strong>
        <br><span style="font-size:10px;color:var(--text-3)">${d.keterangan||''}</span>
      </td>
      <td style="font-size:11px">${d.disalurkan_ke||'—'}</td>
      <td style="font-size:11px">${d.tanggal||'—'}</td>
      <td>${donasiStatusChip(d.status||'Menunggu')}</td>
      <td>
        <div class="act-btns">
          <button class="act-btn ab-view" title="Detail" onclick="bukaDetailDonasi(${d.id})">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          ${(d.status||'Menunggu')==='Menunggu'?`
            <button class="act-btn ab-ok" title="Konfirmasi" onclick="konfirmasiCepat(${d.id},'Dikonfirmasi')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
            <button class="act-btn ab-del" title="Tolak" onclick="konfirmasiCepat(${d.id},'Ditolak')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
          `:''}
          <button class="act-btn ab-del" title="Hapus" onclick="confirmDelete('donasi',${d.id})">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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"/></svg>
          </button>
        </div>
      </td>
    </tr>
  `).join('');
}

/* ─── BUKA DETAIL DONASI ─── */
function bukaDetailDonasi(id){
  const d=donasiData.find(x=>x.id==id);if(!d)return;
  _activeDonasi=d;
  document.getElementById('don-modal-title').textContent='Detail Donasi #'+d.id;
  document.getElementById('don-detail-box').innerHTML=`
    <div class="ddb-row"><span class="ddb-label">Nama Donatur</span><span class="ddb-value">${d.nama_donatur||'Anonim'}</span></div>
    <div class="ddb-row"><span class="ddb-label">Kontak</span><span class="ddb-value">${d.kontak||'—'}</span></div>
    <div class="ddb-row"><span class="ddb-label">Jenis Donasi</span><span class="ddb-value">${getJenisBadge(d.jenis_donasi)}</span></div>
    <div class="ddb-row"><span class="ddb-label">Nilai / Jumlah</span><span class="ddb-value" style="color:var(--teal)">${d.jenis_donasi==='Uang Tunai'?'Rp '+(d.nilai||'—'):d.nilai||'—'}</span></div>
    <div class="ddb-row"><span class="ddb-label">Disalurkan ke</span><span class="ddb-value">${d.disalurkan_ke||'Belum ditentukan'}</span></div>
    <div class="ddb-row"><span class="ddb-label">Tanggal</span><span class="ddb-value">${d.tanggal||'—'}</span></div>
    <div class="ddb-row"><span class="ddb-label">Status</span><span class="ddb-value">${donasiStatusChip(d.status||'Menunggu')}</span></div>
    <div class="ddb-row"><span class="ddb-label">Keterangan</span><span class="ddb-value">${d.keterangan||'—'}</span></div>
  `;
  document.getElementById('don-catatan-konfirmasi').value='';
  const sudahProses=(d.status==='Dikonfirmasi'||d.status==='Ditolak');
  document.getElementById('btn-konfirmasi-donasi').style.display=sudahProses?'none':'flex';
  document.getElementById('btn-tolak-donasi').style.display=sudahProses?'none':'flex';
  openModal('modal-donasi-detail');
}

/* ─── AKSI KONFIRMASI / TOLAK ─── */
function aksiDonasi(status){
  if(!_activeDonasi)return;
  const fd=new FormData();
  fd.append('id',_activeDonasi.id);
  fd.append('status',status);
  fd.append('catatan',document.getElementById('don-catatan-konfirmasi').value);
  fetch('api_donasi.php?aksi=update_status',{method:'POST',body:fd})
    .then(r=>r.text())
    .then(txt=>{
      if(txt.includes('Sukses')){
        showToast(status==='Dikonfirmasi'?'Donasi dikonfirmasi':'Donasi ditolak', status==='Dikonfirmasi'?'ok':'err');
        closeAllModals();muatDataDashboard();
      } else showToast('Gagal memperbarui status','err');
    });
}

/* ─── KONFIRMASI CEPAT ─── */
function konfirmasiCepat(id,status){
  const fd=new FormData();fd.append('id',id);fd.append('status',status);fd.append('catatan','');
  fetch('api_donasi.php?aksi=update_status',{method:'POST',body:fd})
    .then(r=>r.text())
    .then(txt=>{
      if(txt.includes('Sukses')){showToast(status==='Dikonfirmasi'?'Dikonfirmasi':'Ditolak','ok');muatDataDashboard();}
      else showToast('Gagal','err');
    });
}

/* ─── IBADAH LIST ─── */
function renderDashIbadahList(){
  const container=document.getElementById('dash-ibadah-list');
  const filtered=ibData.filter(d=>{
    const matchKat=_dashKat==='all'||d.kategori===_dashKat;
    const matchSearch=!_dashSearch||d.nama_tempat.toLowerCase().includes(_dashSearch)||d.alamat.toLowerCase().includes(_dashSearch)||(d.pic||'').toLowerCase().includes(_dashSearch);
    return matchKat&&matchSearch;
  });
  if(!filtered.length){container.innerHTML='<div style="text-align:center;padding:28px 16px;color:var(--text-3);font-size:12px">Tidak ada data ditemukan</div>';return;}
  container.innerHTML=filtered.map((d,i)=>{
    const radStr=d.radius>=1000?(d.radius/1000).toFixed(1)+' km':d.radius+' m';
    const wmInCircle=miData.filter(m=>haversine(parseFloat(m.lat),parseFloat(m.lng),parseFloat(d.lat),parseFloat(d.lng))<=parseInt(d.radius)).length;
    const circlePct=miData.length>0?Math.round(wmInCircle/miData.length*100):0;
    return `
      <div class="tracking-card${i===0?' active-card':''}" onclick="selectIbadah(${d.id},this)">
        <div class="tc-header">
          <div class="tc-id">ID: <span>#${String(d.id).padStart(6,'0')}</span></div>
          <div class="tc-header-right">
            <span class="status-pill sp-blue">${d.kategori||'Masjid'}</span>
            <button class="tc-more" onclick="event.stopPropagation();editRI(${d.id})">&#8943;</button>
          </div>
        </div>
        <div class="tc-progress"><div class="tc-progress-fill" style="width:${circlePct}%"></div></div>
        <div class="tc-timeline">
          <div class="tl-row">
            <div class="tl-date" style="font-size:9px;color:var(--text-3);width:52px">${d.alamat.substring(0,12)}…</div>
            <div class="tl-left"><div class="tl-dot filled"></div><div class="tl-line"></div></div>
            <div class="tl-label">${d.nama_tempat}</div>
            <div class="tl-time">${radStr}</div>
          </div>
          <div class="tl-row">
            <div class="tl-date" style="font-size:9px;color:var(--text-3);width:52px">Cakupan</div>
            <div class="tl-left"><div class="tl-dot filled"></div><div class="tl-line"></div></div>
            <div class="tl-label" style="color:var(--blue);font-size:11px">${wmInCircle} warga terjangkau</div>
            <div class="tl-time" style="color:var(--blue);font-weight:700">${circlePct}%</div>
          </div>
          <div class="tl-row">
            <div class="tl-date" style="font-size:9px;color:var(--text-3);width:52px">PIC</div>
            <div class="tl-left"><div class="tl-dot empty"></div></div>
            <div class="tl-label" style="color:var(--text-3);font-size:11px">${d.pic||'—'}</div>
            <div class="tl-time">—</div>
          </div>
        </div>
      </div>
    `;
  }).join('');
}
function selectIbadah(id,el){
  document.querySelectorAll('.tracking-card').forEach(c=>c.classList.remove('active-card'));
  el.classList.add('active-card');
  const d=ibData.find(x=>x.id==id);
  if(d)document.getElementById('detail-name').innerHTML=`<span>${d.nama_tempat}</span>`;
}
function filterDashList(val){_dashSearch=val.toLowerCase();renderDashIbadahList();}
function filterDashKat(kat,el){
  _dashKat=kat;
  document.querySelectorAll('#dash-filter-row .filter-chip').forEach(c=>c.classList.remove('active'));
  el.classList.add('active');
  renderDashIbadahList();
}

/* ─── RENDER TABS ─── */
function renderTabWarga(){
  const c=document.getElementById('tab-warga-list');
  if(!miData.length){c.innerHTML='<div style="text-align:center;padding:22px;color:var(--text-3);font-size:12px">Belum ada data warga</div>';return;}
  c.innerHTML=miData.slice(0,20).map(d=>{
    const inside=isInsideAnyCircle(parseFloat(d.lat),parseFloat(d.lng));
    return`<div class="warga-mini"><div class="wm-av"><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 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div><div style="flex:1"><div class="wm-name">${d.nama_kk}</div><div class="wm-sub">${d.alamat} · ${d.jumlah_anggota||0} jiwa</div></div><span class="chip ${inside?'chip-green':'chip-red'}">${inside?'Terjangkau':'Blind Spot'}</span><button class="act-btn ab-edit" style="margin-left:5px" onclick="editWM(${d.id})"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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></button></div>`;
  }).join('');
}
function renderTabBantuan(){
  const c=document.getElementById('tab-bantuan-list');
  if(!logData.length){c.innerHTML='<div style="text-align:center;padding:22px;color:var(--text-3);font-size:12px">Belum ada log bantuan</div>';return;}
  c.innerHTML=logData.slice(0,15).map(d=>`
    <div class="af-item"><div class="af-dot" style="background:var(--green-l);color:var(--green)"><svg width="12" height="12" 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></div>
    <div style="flex:1"><div class="af-text">Distribusi <b>${d.jenis_bantuan}</b> → ${d.nama_kk}</div><div class="af-meta">${d.tanggal} · ${d.sumber_bantuan}</div></div></div>
  `).join('');
}
function renderTabAnalisis(){
  const uncovered=miData.filter(d=>parseFloat(d.lat)!==0&&!isInsideAnyCircle(parseFloat(d.lat),parseFloat(d.lng)));
  const clusters=[];const visited=new Set();
  uncovered.forEach((p,i)=>{
    if(visited.has(i))return;const cl=[p];visited.add(i);
    uncovered.forEach((q,j)=>{if(!visited.has(j)&&haversine(parseFloat(p.lat),parseFloat(p.lng),parseFloat(q.lat),parseFloat(q.lng))<=600){cl.push(q);visited.add(j);}});
    clusters.push(cl);
  });
  const c=document.getElementById('tab-analisis-content');
  if(!clusters.length){c.innerHTML='<div style="text-align:center;padding:22px;color:var(--green);font-size:12px;font-weight:700">Tidak ada zona blind spot!</div>';return;}
  c.innerHTML=clusters.map((cl,i)=>{
    const cLat=cl.reduce((s,p)=>s+parseFloat(p.lat),0)/cl.length;
    const cLng=cl.reduce((s,p)=>s+parseFloat(p.lng),0)/cl.length;
    const prio=cl.length>=5?'Kritis':cl.length>=3?'Tinggi':'Sedang';
    const chipCls=cl.length>=3?'chip-red':'chip-amber';
    return`<div style="background:var(--bg);border-radius:var(--r3);padding:9px 11px;margin-bottom:5px;display:flex;align-items:center;gap:9px">
      <div style="width:30px;height:30px;border-radius:50%;background:var(--red-l);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--red);flex-shrink:0">${cl.length}</div>
      <div style="flex:1"><div style="font-size:12px;font-weight:700;color:var(--text)">Klaster ${i+1}</div><div style="font-size:10px;color:var(--text-3);margin-top:1px;font-family:monospace">${cLat.toFixed(4)}, ${cLng.toFixed(4)}</div></div>
      <span class="chip ${chipCls}">${prio}</span>
    </div>`;
  }).join('');
}

/* ─── TABLES FULL ─── */
function renderTableRI(){
  const tbody=document.getElementById('ri-tbody');let html='';
  ibData.forEach(d=>{
    const radStr=d.radius>=1000?(d.radius/1000).toFixed(1)+' km':d.radius+' m';
    html+=`<tr><td style="color:var(--text-3);font-size:11px">${d.id}</td><td><strong>${d.nama_tempat}</strong><br><span style="font-size:10px;color:var(--text-3)">${d.kategori||''}</span></td><td style="font-size:11px;color:var(--text-2)">${d.alamat}</td><td>${d.pic||'—'}</td><td><span class="chip chip-blue">${radStr}</span></td><td><div class="act-btns"><button class="act-btn ab-edit" onclick="editRI(${d.id})"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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></button><button class="act-btn ab-del" onclick="confirmDelete('ri',${d.id})"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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"/></svg></button></div></td></tr>`;
  });
  tbody.innerHTML=html||'<tr><td colspan="6" class="empty-tbl">Belum ada data Rumah Ibadah</td></tr>';
}
function renderTableWM(){
  const tbody=document.getElementById('wm-tbody');let html='';
  miData.forEach(d=>{
    const inside=isInsideAnyCircle(parseFloat(d.lat),parseFloat(d.lng));
    let kl=[];
    if(d.is_fakir_miskin==1)kl.push('Fakir');if(d.is_dhuafa==1)kl.push('Dhuafa');if(d.is_lansia_tunggal==1)kl.push('Lansia');if(d.is_anak_yatim==1)kl.push('Yatim');if(d.is_korban_bencana==1)kl.push('Bencana');if(d.is_disabilitas==1)kl.push('Disab');
    html+=`<tr><td style="color:var(--text-3);font-size:11px">${d.id}</td><td><strong>${d.nama_kk}</strong><br><span style="font-size:10px;color:var(--text-3)">${d.alamat}</span></td><td>${d.pekerjaan||'—'}</td><td style="text-align:center"><span class="chip chip-blue">${d.jumlah_anggota||0} jiwa</span></td><td><span class="chip chip-amber">${kl.join(', ')||'Umum'}</span></td><td><span class="chip ${inside?'chip-green':'chip-red'}">${inside?'Terjangkau':'Blind Spot'}</span></td><td><div class="act-btns"><button class="act-btn ab-edit" onclick="editWM(${d.id})"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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></button><button class="act-btn ab-del" onclick="confirmDelete('wm',${d.id})"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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"/></svg></button></div></td></tr>`;
  });
  tbody.innerHTML=html||'<tr><td colspan="7" class="empty-tbl">Belum ada data Warga Miskin</td></tr>';
}
function renderTableBantuan(){
  const tbody=document.getElementById('bantuan-tbody');let html='';
  logData.forEach(d=>{
    html+=`<tr><td style="color:var(--text-3);font-size:11px">${d.id}</td><td><strong>${d.nama_kk}</strong></td><td><span class="chip chip-green">${d.jenis_bantuan}</span></td><td style="font-size:11px">${d.tanggal}</td><td>${d.sumber_bantuan}</td><td style="font-size:11px;color:var(--text-2)">${d.satuan_custom||d.catatan||'—'}</td><td><div class="act-btns"><button class="act-btn ab-edit" onclick="editBantuan(${d.id})"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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></button><button class="act-btn ab-del" onclick="confirmDelete('bantuan',${d.id})"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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"/></svg></button></div></td></tr>`;
  });
  tbody.innerHTML=html||'<tr><td colspan="7" class="empty-tbl">Belum ada Log Bantuan</td></tr>';
}
function renderActivityFeed(){
  const feed=document.getElementById('dash-activity-feed');
  if(!logData||!logData.length){feed.innerHTML='<div style="padding:14px;text-align:center;font-size:11px;color:var(--text-3)">Belum ada aktivitas.</div>';return;}
  feed.innerHTML=logData.slice(0,5).map(d=>`
    <div class="af-item"><div class="af-dot" style="background:var(--amber-l);color:var(--amber)"><svg width="12" height="12" 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></div>
    <div><div class="af-text">Distribusi ${d.jenis_bantuan} ke <b>${d.nama_kk}</b></div><div class="af-meta">${d.tanggal} · ${d.sumber_bantuan}</div></div></div>
  `).join('');
}
function renderBlindSpots(){
  const tbody=document.getElementById('blindspot-tbody');
  const uncovered=miData.filter(d=>parseFloat(d.lat)!==0&&!isInsideAnyCircle(parseFloat(d.lat),parseFloat(d.lng)));
  const clusters=[];const visited=new Set();
  uncovered.forEach((p,i)=>{if(visited.has(i))return;const cl=[p];visited.add(i);uncovered.forEach((q,j)=>{if(!visited.has(j)&&haversine(parseFloat(p.lat),parseFloat(p.lng),parseFloat(q.lat),parseFloat(q.lng))<=600){cl.push(q);visited.add(j);}});clusters.push(cl);});
  document.getElementById('an-kritis').textContent=clusters.length;
  document.getElementById('ms-cluster').textContent=clusters.length;
  let html='';
  clusters.forEach((c,i)=>{
    const cLat=c.reduce((s,p)=>s+parseFloat(p.lat),0)/c.length;const cLng=c.reduce((s,p)=>s+parseFloat(p.lng),0)/c.length;
    const prio=c.length>=5?'Kritis':c.length>=3?'Tinggi':'Sedang';
    html+=`<tr><td>Klaster ${i+1}</td><td style="font-size:10px;font-family:monospace">${cLat.toFixed(4)}, ${cLng.toFixed(4)}</td><td style="text-align:center"><span style="font-weight:800;color:var(--red)">${c.length} KK</span></td><td><span class="chip ${c.length>=3?'chip-red':'chip-amber'}">${prio}</span></td></tr>`;
  });
  tbody.innerHTML=html||'<tr><td colspan="4" class="empty-tbl">Tidak ada zona blind spot terdeteksi.</td></tr>';
}

/* ─── CRUD ─── */
function resetFormRI(){['ri_id','ri_nama','ri_pic','ri_alamat','ri_lat','ri_lng'].forEach(id=>document.getElementById(id).value='');document.getElementById('ri_kategori').value='Masjid';setPreset(2000);document.getElementById('ri-modal-title').textContent='Tambah Rumah Ibadah';}
function editRI(id){const d=ibData.find(x=>x.id==id);if(!d)return;isEditRI=true;document.getElementById('ri-modal-title').textContent='Edit Rumah Ibadah';document.getElementById('ri_id').value=d.id;document.getElementById('ri_nama').value=d.nama_tempat;document.getElementById('ri_kategori').value=d.kategori||'Masjid';document.getElementById('ri_pic').value=d.pic;document.getElementById('ri_alamat').value=d.alamat;document.getElementById('ri_lat').value=d.lat;document.getElementById('ri_lng').value=d.lng;setPreset(d.radius);openModal('modal-ri');}
function saveRI(){const fd=new FormData();const id=document.getElementById('ri_id').value;fd.append('nama_tempat',document.getElementById('ri_nama').value);fd.append('kategori',document.getElementById('ri_kategori').value);fd.append('pic',document.getElementById('ri_pic').value);fd.append('alamat',document.getElementById('ri_alamat').value);fd.append('radius',document.getElementById('ri_radius').value);let url='';if(isEditRI){fd.append('id',id);url='api_ibadah.php?aksi=update';}else{fd.append('lat',document.getElementById('ri_lat').value);fd.append('lng',document.getElementById('ri_lng').value);url='api_ibadah.php?aksi=simpan';}fetch(url,{method:'POST',body:fd}).then(r=>r.text()).then(txt=>{if(txt.includes('Sukses')){showToast('Rumah ibadah disimpan','ok');closeAllModals();muatDataDashboard();}else showToast('Gagal: '+txt,'err');});}

function resetFormWM(){['wm_id','wm_nama_kk','wm_jumlah','wm_alamat','wm_pekerjaan','wm_tgl_lahir','wm_penyakit','wm_lat','wm_lng'].forEach(id=>document.getElementById(id).value='');document.getElementById('wm_pendidikan').value='';document.getElementById('wm_jaminan').value='';['fakir','dhuafa','lansia','yatim','bencana','disab'].forEach(x=>document.getElementById('wm_k_'+x).checked=false);document.getElementById('wm-modal-title').textContent='Tambah Data Warga';}
function editWM(id){const d=miData.find(x=>x.id==id);if(!d)return;isEditWM=true;document.getElementById('wm-modal-title').textContent='Edit Data Warga';document.getElementById('wm_id').value=d.id;document.getElementById('wm_nama_kk').value=d.nama_kk;document.getElementById('wm_jumlah').value=d.jumlah_anggota;document.getElementById('wm_alamat').value=d.alamat;document.getElementById('wm_pekerjaan').value=d.pekerjaan;document.getElementById('wm_pendidikan').value=d.pendidikan_terakhir;document.getElementById('wm_tgl_lahir').value=d.tanggal_lahir;document.getElementById('wm_jaminan').value=d.kepemilikan_jaminan;document.getElementById('wm_penyakit').value=d.riwayat_penyakit;document.getElementById('wm_lat').value=d.lat;document.getElementById('wm_lng').value=d.lng;document.getElementById('wm_k_fakir').checked=(d.is_fakir_miskin==1);document.getElementById('wm_k_dhuafa').checked=(d.is_dhuafa==1);document.getElementById('wm_k_lansia').checked=(d.is_lansia_tunggal==1);document.getElementById('wm_k_yatim').checked=(d.is_anak_yatim==1);document.getElementById('wm_k_bencana').checked=(d.is_korban_bencana==1);document.getElementById('wm_k_disab').checked=(d.is_disabilitas==1);openModal('modal-wm');}
function saveWM(){const fd=new FormData();const id=document.getElementById('wm_id').value;['nama_kk:wm_nama_kk','jumlah_anggota:wm_jumlah','alamat:wm_alamat','pekerjaan:wm_pekerjaan','pendidikan_terakhir:wm_pendidikan','tanggal_lahir:wm_tgl_lahir','kepemilikan_jaminan:wm_jaminan','riwayat_penyakit:wm_penyakit'].forEach(pair=>{const[k,v]=pair.split(':');fd.append(k,document.getElementById(v).value);});['fakir:is_fakir_miskin','dhuafa:is_dhuafa','lansia:is_lansia_tunggal','yatim:is_anak_yatim','bencana:is_korban_bencana','disab:is_disabilitas'].forEach(pair=>{const[k,v]=pair.split(':');fd.append(v,document.getElementById('wm_k_'+k).checked?1:0);});let url='';if(isEditWM){fd.append('id',id);url='api_kemiskinan.php?aksi=update';}else{fd.append('lat',document.getElementById('wm_lat').value);fd.append('lng',document.getElementById('wm_lng').value);url='api_kemiskinan.php?aksi=simpan';}fetch(url,{method:'POST',body:fd}).then(r=>r.text()).then(txt=>{if(txt.includes('Sukses')){showToast('Warga berhasil disimpan','ok');closeAllModals();muatDataDashboard();}else showToast('Gagal: '+txt,'err');});}

function resetFormBantuan(){document.getElementById('hb_id').value='';document.getElementById('hb_warga_id').value='';document.getElementById('hb_jenis_id').value='1';document.getElementById('hb_tgl').value=new Date().toISOString().split('T')[0];document.getElementById('hb_penyalur').value='';document.getElementById('hb_deskripsi').value='';document.getElementById('hb_catatan').value='';document.getElementById('bantuan-modal-title').textContent='Catat Distribusi Bantuan';}
function editBantuan(id){const d=logData.find(x=>x.id==id);if(!d)return;isEditBantuan=true;document.getElementById('bantuan-modal-title').textContent='Edit Log Bantuan';document.getElementById('hb_id').value=d.id;document.getElementById('hb_warga_id').value=d.warga_id;const jMap={'Uang Tunai':'1','Sembako':'2','Bantuan Kesehatan':'3','Bantuan Pendidikan':'4','Pakaian':'6','Peralatan Rumah Tangga':'7','Bahan Bangunan':'8','Hewan Ternak':'9','Lainnya':'5'};document.getElementById('hb_jenis_id').value=jMap[d.jenis_bantuan]||'5';document.getElementById('hb_tgl').value=d.tanggal;document.getElementById('hb_penyalur').value=d.sumber_bantuan;document.getElementById('hb_deskripsi').value=d.satuan_custom||'';document.getElementById('hb_catatan').value=d.catatan||'';openModal('modal-bantuan');}
function saveBantuan(){const fd=new FormData();const id=document.getElementById('hb_id').value;fd.append('warga_id',document.getElementById('hb_warga_id').value);fd.append('jenis_id',document.getElementById('hb_jenis_id').value);fd.append('tanggal_distribusi',document.getElementById('hb_tgl').value);fd.append('nama_penyalur',document.getElementById('hb_penyalur').value);fd.append('deskripsi_bantuan',document.getElementById('hb_deskripsi').value);fd.append('catatan',document.getElementById('hb_catatan').value);let url=isEditBantuan?'api_kemiskinan.php?aksi=update_bantuan':'api_kemiskinan.php?aksi=simpan_bantuan';if(isEditBantuan)fd.append('id',id);fetch(url,{method:'POST',body:fd}).then(r=>r.text()).then(txt=>{if(txt.includes('Sukses')){showToast('Log bantuan disimpan','ok');closeAllModals();muatDataDashboard();}else showToast('Gagal: '+txt,'err');});}

let _delTarget=null;
function confirmDelete(type,id){_delTarget={type,id};document.getElementById('confirm-overlay').style.display='flex';}
function closeConfirm(){document.getElementById('confirm-overlay').style.display='none';_delTarget=null;}
function doDelete(){
  if(!_delTarget)return;const fd=new FormData();fd.append('id',_delTarget.id);
  let url='';
  if(_delTarget.type==='ri')url='api_ibadah.php?aksi=hapus';
  if(_delTarget.type==='wm')url='api_kemiskinan.php?aksi=hapus';
  if(_delTarget.type==='bantuan')url='api_kemiskinan.php?aksi=hapus_bantuan';
  if(_delTarget.type==='donasi')url='api_donasi.php?aksi=hapus';
  fetch(url,{method:'POST',body:fd}).then(r=>r.text()).then(txt=>{if(txt.includes('Sukses')){showToast('Data dihapus','ok');closeConfirm();muatDataDashboard();}else showToast('Gagal menghapus','err');});
}

/* ─── VIEW / TAB SWITCHING ─── */
function switchView(name,el){
  document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(n=>n.classList.remove('active'));
  document.getElementById('view-'+name).classList.add('active');
  if(el)el.classList.add('active');
  const titles={'dashboard':['Dashboard','Ringkasan Pemetaan Sosial'],'rumah-ibadah':['Rumah Ibadah','Manajemen Data Fasilitas'],'warga-miskin':['Warga Miskin','Manajemen Data Penduduk'],'bantuan':['Log Bantuan','Transparansi Distribusi'],'donasi':['Log Donasi','Donasi dari Pengguna'],'analisis':['Analisis Spasial','Blind Spot & Coverage'], 'verifikasi-laporan':['Verifikasi Laporan','Laporan Warga Menunggu Tindakan Admin']};
  const t=titles[name]||['Dashboard','Ringkasan'];
  document.getElementById('tb-title').textContent=t[0];
  document.getElementById('tb-sub').textContent=t[1];
}
function switchDashTab(name,el){
  document.querySelectorAll('.tab-pane').forEach(p=>p.classList.remove('active'));
  document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
  document.getElementById('tab-'+name).classList.add('active');
  el.classList.add('active');
}

/* ─── MODAL HELPERS ─── */
function openModal(id){document.getElementById('modal-overlay').classList.add('open');document.getElementById(id).style.display='flex';}
function closeModal(id){document.getElementById(id).style.display='none';if(!Array.from(document.querySelectorAll('.modal')).some(m=>m.style.display!=='none'))document.getElementById('modal-overlay').classList.remove('open');}
function closeAllModals(){document.querySelectorAll('.modal').forEach(m=>m.style.display='none');document.getElementById('modal-overlay').classList.remove('open');}

/* ─── SLIDER / PRESETS ─── */
function setPreset(val){const sl=document.querySelector('.slider-block input[type="range"]');if(sl){sl.value=val;document.getElementById('ri-radius-val').textContent=val>=1000?(val/1000)+' km':val+' m';updatePresets(val);}}
function updatePresets(val){const map={500:'500m',1000:'1 km',2000:'2 km',3000:'3 km',5000:'5 km'};document.querySelectorAll('.preset').forEach(p=>{p.classList.toggle('on',p.textContent.trim()===(map[parseInt(val)]||''));});}

/* ─── TABLE FILTER ─── */
function filterTable(tbodyId,text){const tbody=document.getElementById(tbodyId);if(!tbody)return;tbody.querySelectorAll('tr').forEach(tr=>{tr.style.display=(!text||tr.textContent.toLowerCase().includes(text.toLowerCase()))?'':'none';});}

/* ─── TOAST ─── */
function showToast(msg,type){const t=document.getElementById('toast');t.textContent=msg;t.className='show '+(type||'');clearTimeout(t._tid);t._tid=setTimeout(()=>t.className='',2800);}

/* ─── INIT ─── */
window.addEventListener('load',()=>{
  muatDataDashboard();
  muatLaporanWarga();
  document.getElementById('hb_tgl').value=new Date().toISOString().split('T')[0];
});

// ─── LAPORAN WARGA ───────────────────────────────────────────────────────────
let laporanData = [];

async function muatLaporanWarga() {
    try {
        const r = await fetch('api_laporan_warga.php?aksi=tampil');
        laporanData = await r.json();
        renderTableLaporan();
        // Update stats
        const menunggu = laporanData.filter(l => l.status === 'menunggu').length;
        const verified = laporanData.filter(l => l.status === 'diverifikasi').length;
        const rejected = laporanData.filter(l => l.status === 'ditolak').length;
        const setEl = (id, v) => { const el = document.getElementById(id); if(el) el.textContent = v; };
        setEl('lap-count-menunggu', menunggu);
        setEl('lap-count-verified', verified);
        setEl('lap-count-rejected', rejected);
        // Badge di sidebar
        const badge = document.getElementById('badge-laporan-dashboard');
        if(badge) {
            badge.textContent = menunggu;
            badge.style.display = menunggu > 0 ? 'flex' : 'none';
        }
    } catch(err) {
        console.error('Gagal muat laporan:', err);
    }
}

function renderTableLaporan() {
    const tbody = document.getElementById('laporan-tbody');
    if(!tbody) return;
    const filterStatus = document.getElementById('laporan-filter-status')?.value || '';
    let data = laporanData;
    if(filterStatus) data = data.filter(l => l.status === filterStatus);
    if(!data.length) {
        tbody.innerHTML = '<tr><td colspan="8" class="empty-tbl">Tidak ada laporan' + (filterStatus ? ' dengan status ini' : '') + '</td></tr>';
        return;
    }
    const stCfg = {
        'menunggu':     { chip:'chip-amber', label:'Menunggu' },
        'diverifikasi': { chip:'chip-green', label:'Diverifikasi' },
        'ditolak':      { chip:'chip-red',   label:'Ditolak' }
    };
    tbody.innerHTML = data.map(l => {
        const st      = stCfg[l.status] || stCfg['menunggu'];
        const tglStr  = l.created_at ? new Date(l.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric'}) : '—';
        const tipeLbl = l.tipe_laporan === 'diri_sendiri'
            ? '<span class="chip chip-blue">Diri Sendiri</span>'
            : '<span class="chip chip-gray">Orang Lain</span>';
        const actionBtns = l.status === 'menunggu'
            ? `<button class="act-btn ab-ok" title="Verifikasi" onclick="verifikasiLaporan(${l.id})">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
               </button>
               <button class="act-btn ab-del" title="Tolak" onclick="bukaModalTolakLaporan(${l.id})">
                <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>`
            : '<span style="font-size:10px;color:var(--text-3)">—</span>';
        return `<tr>
            <td style="color:var(--text-3);font-size:11px">#${String(l.id).padStart(6,'0')}</td>
            <td><strong>${l.nama_kk}</strong></td>
            <td style="font-size:11px">${l.nama_pelapor || '—'}</td>
            <td>${tipeLbl}</td>
            <td style="font-size:11px;color:var(--text-2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l.alamat}</td>
            <td style="font-size:11px">${tglStr}</td>
            <td><span class="chip ${st.chip}">${st.label}</span></td>
            <td><div class="act-btns">${actionBtns}</div></td>
        </tr>`;
    }).join('');
}

function verifikasiLaporan(id) {
    if(!confirm('Verifikasi laporan ini? Data warga akan otomatis masuk ke peta.')) return;
    const fd = new FormData();
    fd.append('id', id);
    fetch('api_laporan_warga.php?aksi=verifikasi', { method:'POST', body:fd })
        .then(r => r.json())
        .then(res => {
            if(res.status === 'sukses') {
                showToast('✅ Diverifikasi! Titik warga masuk ke peta.', 'ok');
                muatLaporanWarga();
                muatDataDashboard();
            } else {
                showToast('❌ ' + res.pesan, 'err');
            }
        })
        .catch(() => showToast('❌ Gagal menghubungi server.', 'err'));
}

function bukaModalTolakLaporan(id) {
    document.getElementById('tolak_laporan_id').value = id;
    document.getElementById('tolak_catatan').value    = '';
    openModal('modal-tolak-laporan');
}

function eksekusiTolakLaporan() {
    const id      = document.getElementById('tolak_laporan_id').value;
    const catatan = document.getElementById('tolak_catatan').value.trim();
    const fd = new FormData();
    fd.append('id', id);
    fd.append('catatan_admin', catatan);
    fetch('api_laporan_warga.php?aksi=tolak', { method:'POST', body:fd })
        .then(r => r.json())
        .then(res => {
            if(res.status === 'sukses') {
                showToast('Laporan ditolak.', 'ok');
                closeModal('modal-tolak-laporan');
                muatLaporanWarga();
            } else {
                showToast('❌ ' + res.pesan, 'err');
            }
        })
        .catch(() => showToast('❌ Gagal.', 'err'));
}
</script>
</body>
</html>