<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
  <div>
    <h2 style="font-size:1.2rem;font-weight:700">📄 Laporan Tahunan</h2>
    <p class="text-muted text-sm">Rekap penyaluran bantuan tahun <?= $tahun ?></p>
  </div>
  <form method="GET" style="display:flex;gap:8px;align-items:center">
    <label class="text-sm">Tahun:</label>
    <select name="tahun" class="form-control" onchange="this.form.submit()">
      <?php for($y=date('Y');$y>=2020;$y--): ?>
      <option value="<?= $y ?>" <?= $tahun==$y?'selected':'' ?>><?= $y ?></option>
      <?php endfor; ?>
    </select>
    <button type="button" class="btn btn-ghost btn-sm" onclick="window.print()">🖨 Cetak</button>
  </form>
</div>

<!-- Ringkasan -->
<div class="stats-grid" style="grid-template-columns:repeat(3,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"><?= number_format($ringkasan['total_bantuan']??0) ?></div><div class="stat-card-label">Total Penyaluran Bantuan</div></div>
  </div>
  <div class="stat-card"><div class="stat-card-icon blue">👥</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= number_format($ringkasan['total_warga_terbantu']??0) ?></div><div class="stat-card-label">Warga Mendapat Bantuan</div></div>
  </div>
  <div class="stat-card"><div class="stat-card-icon orange">⛪</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= number_format($ringkasan['total_ri_aktif']??0) ?></div><div class="stat-card-label">Rumah Ibadah Aktif</div></div>
  </div>
</div>

<!-- Chart bulanan -->
<div class="card" style="margin-bottom:20px">
  <div class="card-header"><span class="card-icon">📊</span><h3>Grafik Penyaluran Bantuan Bulan per Bulan Tahun <?= $tahun ?></h3></div>
  <div class="card-body"><div class="chart-wrap" style="height:280px"><canvas id="chart-bulanan"></canvas></div></div>
</div>

<!-- Tabel per bulan -->
<div class="card">
  <div class="card-header"><span class="card-icon">📋</span><h3>Rekap per Bulan</h3></div>
  <div class="card-body no-pad">
    <div class="table-wrap">
      <table>
        <thead><tr><th>Bulan</th><th>Bantuan Disalurkan</th><th>Warga Terbantu</th><th>Rata-rata/Warga</th></tr></thead>
        <tbody>
          <?php
          $namaBulan=['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
          $totalBulanan=0; $totalWarga=0;
          foreach($perBulan as $b):
            $totalBulanan+=$b['bantuan'];
            $totalWarga+=$b['warga_terbantu'];
            $avg=$b['warga_terbantu']>0?round($b['bantuan']/$b['warga_terbantu'],1):0;
          ?>
          <tr>
            <td style="font-weight:600"><?= $namaBulan[(int)$b['bulan']] ?></td>
            <td><strong><?= number_format($b['bantuan']) ?></strong></td>
            <td><?= number_format($b['warga_terbantu']) ?> warga</td>
            <td class="text-sm text-muted"><?= $avg ?> kali/warga</td>
          </tr>
          <?php endforeach; ?>
          <!-- Total -->
          <tr style="background:#f0f9ff;font-weight:700">
            <td>TOTAL</td>
            <td><?= number_format($totalBulanan) ?></td>
            <td><?= number_format($totalWarga) ?> (unik)</td>
            <td>—</td>
          </tr>
        </tbody>
      </table>
    </div>
    <?php if(empty($perBulan)): ?>
    <div class="empty-state"><div class="empty-state-icon">📭</div><h3>Tidak ada data</h3><p>Belum ada penyaluran pada tahun <?= $tahun ?></p></div>
    <?php endif; ?>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const bulanData = <?= json_encode($perBulan) ?>;
  const namaBulan = ['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
  Charts.bar('chart-bulanan',
    bulanData.map(b=>namaBulan[parseInt(b.bulan)]),
    [{label:'Bantuan Disalurkan', data:bulanData.map(b=>b.bantuan)},
     {label:'Warga Terbantu', data:bulanData.map(b=>b.warga_terbantu)}]
  );
});
</script>
