<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
  <div><h2 style="font-size:1.2rem;font-weight:700">📦 Manajemen Kategori Bantuan</h2></div>
  <button class="btn btn-primary" onclick="App.showModal('modal-tambah')">➕ Tambah Kategori</button>
</div>

<div class="card">
  <div class="card-body no-pad">
    <div class="table-wrap">
      <table>
        <thead><tr><th>#</th><th>Nama</th><th>Deskripsi</th><th>Satuan</th><th>Status</th><th>Aksi</th></tr></thead>
        <tbody>
          <?php foreach($data as $i=>$k): ?>
          <tr>
            <td class="text-xs text-muted"><?= $i+1 ?></td>
            <td style="font-weight:600"><?= e($k['nama']) ?></td>
            <td class="text-sm text-muted"><?= e($k['deskripsi']??'') ?></td>
            <td><span class="badge badge-blue"><?= e($k['satuan']??'—') ?></span></td>
            <td><?= $k['is_active'] ? '<span class="badge badge-green">Aktif</span>' : '<span class="badge badge-gray">Nonaktif</span>' ?></td>
            <td>
              <button class="btn btn-ghost btn-sm" onclick='openEdit(<?= json_encode($k) ?>)'>✏️ Edit</button>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Modal Tambah -->
<div class="modal-overlay" id="modal-tambah">
  <div class="modal">
    <div class="modal-header"><h3>➕ Tambah Kategori Bantuan</h3><button class="modal-close" onclick="App.hideModal('modal-tambah')">✕</button></div>
    <form method="POST" action="<?= APP_URL ?>/admin/kategori-bantuan/store">
      <?= csrfField() ?>
      <div class="modal-body">
        <div class="form-group"><label class="form-label">Nama Kategori <span class="required">*</span></label>
          <input type="text" name="nama" class="form-control" required></div>
        <div class="form-group"><label class="form-label">Deskripsi</label>
          <textarea name="deskripsi" class="form-control" rows="2"></textarea></div>
        <div class="form-group"><label class="form-label">Satuan</label>
          <input type="text" name="satuan" class="form-control" placeholder="paket / kg / rupiah"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-tambah')">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Edit -->
<div class="modal-overlay" id="modal-edit">
  <div class="modal">
    <div class="modal-header"><h3>✏️ Edit Kategori</h3><button class="modal-close" onclick="App.hideModal('modal-edit')">✕</button></div>
    <form method="POST" id="edit-form">
      <?= csrfField() ?>
      <div class="modal-body">
        <div class="form-group"><label class="form-label">Nama <span class="required">*</span></label>
          <input type="text" name="nama" id="edit-nama" class="form-control" required></div>
        <div class="form-group"><label class="form-label">Deskripsi</label>
          <textarea name="deskripsi" id="edit-deskripsi" class="form-control" rows="2"></textarea></div>
        <div class="form-row cols-2">
          <div class="form-group"><label class="form-label">Satuan</label>
            <input type="text" name="satuan" id="edit-satuan" class="form-control"></div>
          <div class="form-group"><label class="form-label">Status</label>
            <select name="is_active" id="edit-is_active" class="form-control">
              <option value="1">Aktif</option><option value="0">Nonaktif</option>
            </select></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-edit')">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan</button>
      </div>
    </form>
  </div>
</div>

<script>
function openEdit(k) {
  document.getElementById('edit-nama').value = k.nama;
  document.getElementById('edit-deskripsi').value = k.deskripsi||'';
  document.getElementById('edit-satuan').value = k.satuan||'';
  document.getElementById('edit-is_active').value = k.is_active;
  document.getElementById('edit-form').action = '<?= APP_URL ?>/admin/kategori-bantuan/' + k.id + '/update';
  App.showModal('modal-edit');
}
</script>
