<?php
$batas       = 10;
$halaman     = isset($_GET['halaman']) ? (int)$_GET['halaman'] : 1;
$halaman_awal = ($halaman > 1) ? ($halaman * $batas) - $batas : 0;
$previous    = $halaman - 1;
$next        = $halaman + 1;

$where = '';
if ((isset($_GET['go']) || isset($_POST['go'])) && !empty($_GET['cari'] ?? $_POST['cari'] ?? '')) {
  $cari = mysqli_real_escape_string($koneksi, $_GET['cari'] ?? $_POST['cari']);
  $where = " WHERE kategori LIKE '%$cari%'";
}

$count_query = "SELECT COUNT(*) as total FROM tb_kat$where";
$count_result = mysqli_query($koneksi, $count_query);
$count_row = mysqli_fetch_assoc($count_result);
$jumlah_data = $count_row['total'];
$total_halaman = ceil($jumlah_data / $batas);

$data_kat = mysqli_query($koneksi, "SELECT * FROM tb_kat$where ORDER BY id DESC LIMIT $halaman_awal, $batas");

// Collect all rows first for modals
$rows = [];
while ($r = mysqli_fetch_assoc($data_kat)) { $rows[] = $r; }

foreach ($rows as $pro): ?>
<tr>
  <td><?= $i++; ?></td>
  <td><strong><?= htmlspecialchars($pro['kategori']); ?></strong></td>
  <td>
    <div class="action-buttons">
      <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#hapus-kat<?= $pro['id'] ?>" title="Hapus">
        <i class="fas fa-trash-alt"></i>
      </button>
      <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#edit-kat<?= $pro['id'] ?>" title="Edit">
        <i class="fas fa-edit"></i>
      </button>
    </div>
  </td>
</tr>
<?php endforeach; ?>

<?php
// Render all modals OUTSIDE the table (prevents td overflow clipping issues)
foreach ($rows as $pro): ?>

<!-- Modal Hapus Kategori -->
<form action="" method="POST" id="form-hapus-kat<?= $pro['id'] ?>">
  <input type="hidden" name="id" value="<?= $pro['id'] ?>">
  <input type="hidden" name="hapus" value="1">
  <div class="modal fade" id="hapus-kat<?= $pro['id'] ?>" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="fas fa-exclamation-triangle" style="color:#DC2626;margin-right:8px;"></i>Hapus Kategori</h5>
          <button type="button" class="close" data-bs-dismiss="modal"><span>&times;</span></button>
        </div>
        <div class="modal-body">
          <p style="color:var(--text-secondary);margin-bottom:12px;">Apakah Anda yakin ingin menghapus kategori ini?</p>
          <div class="modal-detail-row">
            <div class="modal-detail-label">Nama Kategori</div>
            <div class="modal-detail-value"><?= htmlspecialchars($pro['kategori']) ?></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-danger"><i class="fas fa-trash-alt"></i> Hapus</button>
        </div>
      </div>
    </div>
  </div>
</form>

<!-- Modal Edit Kategori -->
<div class="modal fade" id="edit-kat<?= $pro['id'] ?>" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-edit" style="color:var(--primary);margin-right:8px;"></i>Edit Kategori</h5>
        <button type="button" class="close" data-bs-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <form action="" method="POST" id="form-edit-kat<?= $pro['id'] ?>">
          <input type="hidden" name="id" value="<?= $pro['id'] ?>">
          <div class="form-group">
            <label>Nama Kategori</label>
            <input type="text" class="form-control" name="kategori" value="<?= htmlspecialchars($pro['kategori']) ?>">
          </div>
          <div class="modal-footer" style="padding:0;margin-top:16px;border:none;">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
            <button type="submit" name="edit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<?php endforeach; ?>
