<?php
// monitoring.php — Admin monitoring kemiskinan view
?>
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
  <div><h2 style="font-size:1.2rem;font-weight:700">👥 Monitoring Data Kemiskinan</h2>
    <p class="text-muted text-sm"><?= count($warga) ?> warga aktif terdata dalam sistem</p></div>
</div>

<!-- Peta -->
<div class="card" style="margin-bottom:20px">
  <div class="card-header"><span class="card-icon">🗺</span><h3>Peta Persebaran Seluruh Warga Miskin</h3></div>
  <div class="card-body no-pad" style="position:relative">
    <div id="mon-map" style="height:360px"></div>
    <div class="map-legend">
      <h4>Legenda</h4>
      <div class="map-legend-item"><div class="map-legend-dot legend-dot-ekstrem"></div> Miskin Ekstrem</div>
      <div class="map-legend-item"><div class="map-legend-dot legend-dot-miskin"></div> Miskin</div>
      <div class="map-legend-item"><div class="map-legend-dot legend-dot-rentan"></div> Rentan Miskin</div>
      <div class="map-legend-item"><div class="map-legend-dot legend-dot-blind"></div> Blind Spot</div>
    </div>
  </div>
</div>

<!-- Search + Table -->
<div class="filters-bar"><input type="text" id="search-mon" class="form-control" placeholder="🔍 Cari nama, NIK..." style="max-width:300px"></div>

<div class="card">
  <div class="card-body no-pad">
    <div class="table-wrap">
      <table id="table-mon">
        <thead><tr><th>#</th><th>Nama</th><th>Wilayah</th><th>Status Kemiskinan</th><th>Prioritas</th><th>Penghasilan</th><th>Tgn</th><th>Rumah Ibadah</th><th>Ket</th></tr></thead>
        <tbody>
          <?php foreach($warga as $i=>$w): ?>
          <tr>
            <td class="text-xs text-muted"><?= $i+1 ?></td>
            <td>
              <div style="font-weight:600;font-size:0.875rem"><?= e($w['nama']) ?></div>
              <div class="text-xs text-muted"><?= $w['nik'] ? 'NIK: '.e($w['nik']) : '' ?></div>
            </td>
            <td class="text-sm"><?= e($w['kecamatan']) ?> › <?= e($w['kelurahan']) ?></td>
            <td><?php $sc=['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
              <span class="badge <?= $sc[$w['status_kemiskinan']]??'badge-gray' ?>"><?= e($w['status_kemiskinan']) ?></span></td>
            <td><?php $pc=['Tinggi'=>'badge-red','Sedang'=>'badge-yellow','Rendah'=>'badge-green']; ?>
              <span class="badge <?= $pc[$w['level_prioritas']]??'badge-gray' ?>"><?= e($w['level_prioritas']) ?></span>
              <div class="text-xs text-muted"><?= $w['skor_prioritas'] ?>/100</div></td>
            <td class="text-sm"><?= formatRupiah($w['penghasilan_bulanan']??0) ?></td>
            <td class="text-sm text-center"><?= $w['jumlah_tanggungan'] ?></td>
            <td class="text-sm"><?= e($w['rumah_ibadah_nama']??'—') ?></td>
            <td>
              <?php if($w['is_blind_spot']): ?><span class="badge badge-purple" title="Blind Spot">⚠</span><?php endif; ?>
              <?php if($w['is_lansia']): ?><span class="badge badge-orange" title="Lansia">👴</span><?php endif; ?>
              <?php if($w['is_disabilitas']): ?><span class="badge badge-blue" title="Disabilitas">♿</span><?php endif; ?>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  App.initTableSearch('search-mon','table-mon');
  const map = GISMap.init('mon-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
  const data = await App.fetchJSON('<?= APP_URL ?>/admin/api/peta');
  if(data) {
    GISMap.addRILayer(data.rumah_ibadah||[]);
    GISMap.addWargaLayer(data.warga||[]);
    GISMap.autoFitBounds();
  } else {
    GISMap.autoFitBounds(true);
  }
});
</script>
