D1041231092-webgis-povertymap/app/views/verifikator/warga.php

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
  <div>
    <h2 style="font-size:1.2rem;font-weight:700">Data Warga Miskin</h2>
    <p class="text-muted text-sm">Kelurahan: <strong><?= e(Auth::user()['kelurahan_nama'] ?? '-') ?></strong> · <?= count($data) ?> warga terdata</p>
  </div>
  <a href="<?= APP_URL ?>/verifikator/warga/tambah" class="btn btn-primary">➕ Tambah Warga</a>
</div>

<!-- Filter -->
<div class="tabs">
  <?php $levels = ['semua'=>'Semua','Tinggi'=>'🔥 Prioritas Tinggi','Sedang'=>'⚡ Sedang','Rendah'=>'✅ Rendah']; ?>
  <?php foreach ($levels as $l => $label): ?>
  <a href="?level=<?= $l ?>" class="tab-btn <?= $level===$l?'active':'' ?>"><?= $label ?></a>
  <?php endforeach; ?>
</div>

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

<!-- PETA -->
<div class="card" style="margin-bottom:20px">
  <div class="card-header"><span class="card-icon">🗺</span><h3>Peta Warga Kelurahan</h3></div>
  <div class="card-body no-pad">
    <div id="warga-map" style="height:280px"></div>
  </div>
</div>

<!-- TABLE -->
<div class="card">
  <div class="card-body no-pad">
    <div class="table-wrap">
      <table id="table-warga">
        <thead>
          <tr>
            <th>#</th><th>Nama / NIK</th><th>Status Kemiskinan</th><th>Prioritas</th>
            <th>Penghasilan</th><th>Tanggungan</th><th>Rumah Ibadah</th><th>Ket.</th><th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($data as $i => $w): ?>
          <tr>
            <td class="text-xs text-muted"><?= $i+1 ?></td>
            <td>
              <div style="font-weight:600"><?= e($w['nama']) ?></div>
              <div class="text-xs text-muted"><?= $w['nik'] ? 'NIK: '.e($w['nik']) : '<em>NIK belum diisi</em>' ?></div>
            </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 style="margin-top:4px">
                <div class="priority-bar" style="width:80px">
                  <div class="priority-bar-fill <?= strtolower($w['level_prioritas'])==='tinggi'?'high':(strtolower($w['level_prioritas'])==='sedang'?'medium':'low') ?>"
                       style="width:<?= min(100,$w['skor_prioritas']) ?>%"></div>
                </div>
              </div>
              <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'] ?> orang</td>
            <td class="text-sm"><?= e($w['rumah_ibadah'] ?? '—') ?></td>
            <td>
              <?php if ($w['is_blind_spot']): ?>
              <span class="badge badge-purple" title="Tidak dalam radius rumah ibadah">⚠ Blind</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>
            <td>
              <a href="<?= APP_URL ?>/verifikator/warga/<?= $w['id'] ?>" class="btn btn-ghost btn-sm">Detail</a>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
    <?php if (empty($data)): ?>
    <div class="empty-state"><div class="empty-state-icon">👥</div><h3>Belum ada data warga</h3></div>
    <?php endif; ?>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  App.initTableSearch('search-warga','table-warga');

  const map = GISMap.init('warga-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 14);
  const warga = <?= json_encode(array_map(fn($w) => [
    'id'=>$w['id'],'nama'=>$w['nama'],'lat'=>(float)$w['lat'],'lng'=>(float)$w['lng'],
    'status_kemiskinan'=>$w['status_kemiskinan'],'level_prioritas'=>$w['level_prioritas'],
    'is_blind_spot'=>$w['is_blind_spot'],'kelurahan'=>$w['kelurahan']??''
  ], array_filter($data, fn($w) => $w['lat'] && $w['lng']))) ?>;

  if (warga.length) {
    GISMap.addWargaLayer(warga, w => {
      window.location.href = '<?= APP_URL ?>/verifikator/warga/' + w.id;
    });
    GISMap.autoFitBounds();
  } else {
    GISMap.autoFitBounds(true);
  }
});
</script>