<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 Bantuan</h2>
    <p class="text-muted text-sm"><?= count($data) ?> penyaluran pada bulan <?= e($bulan) ?></p>
  </div>
  <form method="GET" style="display:flex;gap:8px;align-items:center">
    <label class="text-sm">Bulan:</label>
    <input type="month" name="bulan" class="form-control" value="<?= e($bulan) ?>" onchange="this.form.submit()">
  </form>
</div>

<!-- Stats Bulan Ini -->
<div class="stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:20px">
  <div class="stat-card"><div class="stat-card-icon green">📦</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= count($data) ?></div><div class="stat-card-label">Total Penyaluran</div></div>
  </div>
  <div class="stat-card"><div class="stat-card-icon blue">👥</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= count(array_unique(array_column($data,'id_warga'))) ?></div><div class="stat-card-label">Warga Terbantu</div></div>
  </div>
  <div class="stat-card"><div class="stat-card-icon orange">⛪</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= count(array_unique(array_column($data,'id_rumah_ibadah'))) ?></div><div class="stat-card-label">Rumah Ibadah Aktif</div></div>
  </div>
  <div class="stat-card"><div class="stat-card-icon purple">📊</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= count($perKategori) ?></div><div class="stat-card-label">Jenis Bantuan</div></div>
  </div>
</div>

<!-- Chart + Tabel -->
<div style="display:grid;grid-template-columns:1fr 280px;gap:20px;margin-bottom:20px">
  <div class="card">
    <div class="card-header"><span class="card-icon">📋</span><h3>Daftar Penyaluran Bantuan</h3></div>
    <div class="card-body no-pad">
      <div class="filters-bar" style="margin:0;border:none;border-bottom:1px solid var(--clr-border);border-radius:0">
        <input type="text" id="search-bantuan" class="form-control" placeholder="🔍 Cari nama warga..." style="max-width:280px">
      </div>
      <div class="table-wrap">
        <table id="table-bantuan">
          <thead>
            <tr><th>Kode</th><th>Warga</th><th>Kategori</th><th>Jumlah</th><th>Rumah Ibadah</th><th>Wilayah</th><th>Tanggal</th></tr>
          </thead>
          <tbody>
            <?php foreach($data as $b): ?>
            <tr>
              <td><code style="font-size:0.72rem;background:#f1f5f9;padding:1px 5px;border-radius:3px"><?= e($b['kode_bantuan']) ?></code></td>
              <td style="font-weight:600;font-size:0.875rem"><?= e($b['warga']) ?></td>
              <td><span class="badge badge-green"><?= e($b['kategori']) ?></span></td>
              <td class="text-sm">
                <?= $b['jumlah'] ? ($b['satuan']==='rupiah' ? formatRupiah($b['jumlah']) : number_format($b['jumlah']).' '.$b['satuan']) : '—' ?>
              </td>
              <td class="text-sm"><?= e($b['rumah_ibadah']) ?></td>
              <td class="text-xs text-muted"><?= e($b['kecamatan']) ?></td>
              <td class="text-xs text-muted"><?= formatTanggal($b['tanggal_penyaluran']) ?></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <?php if(empty($data)): ?>
      <div class="empty-state"><div class="empty-state-icon">📭</div><h3>Tidak ada penyaluran</h3><p>Belum ada bantuan yang disalurkan pada periode ini</p></div>
      <?php endif; ?>
    </div>
  </div>

  <!-- Donut per Kategori -->
  <div class="card">
    <div class="card-header"><span class="card-icon">🥧</span><h3>Per Kategori</h3></div>
    <div class="card-body">
      <div class="chart-wrap" style="height:200px"><canvas id="chart-kategori"></canvas></div>
      <div style="margin-top:12px">
        <?php foreach($perKategori as $k): ?>
        <div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f1f5f9;font-size:0.8rem">
          <span><?= e($k['nama']) ?></span>
          <strong><?= number_format($k['jumlah']) ?></strong>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  App.initTableSearch('search-bantuan','table-bantuan');
  Charts.donut('chart-kategori',
    <?= json_encode(array_column($perKategori,'nama')) ?>,
    <?= json_encode(array_column($perKategori,'jumlah')) ?>
  );
});
</script>
