<?php

/**
 * @var array $categories
 */
?>
<div class="container">
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
          <h3 class="mb-0">Daftar Kategori Tiket</h3>
          <small class="text-muted">
            Total <?= count($categories) ?> kategori tiket
          </small>
        </div>
        <button
          type="button"
          class="btn btn-primary"
          data-bs-toggle="modal"
          data-bs-target="#categoryModal">
          <i class="bi bi-plus"></i>
          Tambah Kategori Tiket
        </button>
      </div>
      <?php if (empty($categories)): ?>
        <div class="text-center py-5 text-muted">
          <i class="bi bi-tags fs-1"></i>
          <p class="mt-2 mb-0">Belum ada data kategori tiket.</p>
        </div>
      <?php endif; ?>
      <?php foreach ($categories as $category): ?>
        <div class="card shadow-sm mb-3">
          <div class="card-body d-flex justify-content-between align-items-start">
            <div>
              <h6 class="mb-1">
                <i class="bi bi-tags me-2 text-primary"></i>
                <?= htmlspecialchars($category->getNamaKategori()) ?>
              </h6>
              <?php if ($category->getDeskripsi()): ?>
                <small class="text-muted">
                  <?= htmlspecialchars($category->getDeskripsi()) ?>
                </small>
              <?php else: ?>
                <small class="text-muted fst-italic">
                  Tidak ada deskripsi
                </small>
              <?php endif; ?>
            </div>
            <div class="d-flex gap-2">
              <button
                type="button"
                class="btn btn-outline-primary btn-sm"
                data-bs-toggle="modal"
                data-bs-target="#categoryModal"
                data-id="<?= $category->getId() ?>"
                data-name="<?= htmlspecialchars($category->getNamaKategori()) ?>"
                data-description="<?= htmlspecialchars($category->getDeskripsi()) ?>">
                <i class="bi bi-pencil"></i>
              </button>
              <button
                type="button"
                class="btn btn-danger btn-sm"
                data-bs-toggle="modal"
                data-bs-target="#categoryDeleteConfirmationModal"
                data-id="<?= $category->getId() ?>"
                data-name="<?= htmlspecialchars($category->getNamaKategori()) ?>">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>
<!-- Modal Tambah / Ubah -->
<div
  class="modal fade"
  id="categoryModal"
  tabindex="-1"
  aria-labelledby="categoryModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form
        id="categoryForm"
        method="POST"
        action="<?= url('TAMBAH_KATEGORI') ?>">
        <div class="modal-header">
          <h5
            class="modal-title"
            id="categoryModalLabel">
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal">
          </button>
        </div>
        <div class="modal-body">
          <input
            type="hidden"
            name="id"
            id="id">
          <div class="mb-3">
            <label class="form-label">
              Nama Kategori
              <span class="text-danger">*</span>
            </label>
            <input
              type="text"
              class="form-control"
              name="namaKategori"
              id="namaKategori"
              maxlength="100"
              placeholder="Contoh: Hardware"
              required>
            <div class="form-text">
              Nama kategori harus unik.
            </div>
          </div>
          <div>
            <label class="form-label">
              Deskripsi
            </label>
            <textarea
              class="form-control"
              name="deskripsi"
              id="deskripsi"
              rows="3"
              placeholder="Masukkan deskripsi singkat (opsional)"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-light border"
            data-bs-dismiss="modal">
            Batal
          </button>
          <button
            type="submit"
            class="btn btn-primary">
            <i class="bi bi-check-lg"></i>
            Simpan
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- Modal Delete -->
<div
  class="modal fade"
  id="categoryDeleteConfirmationModal"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="categoryDeleteConfirmationModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1
          class="modal-title fs-5"
          id="categoryDeleteConfirmationModalLabel">
          Hapus Kategori
        </h1>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal">
        </button>
      </div>
      <div class="modal-body">
        <p>
          Apakah Anda yakin ingin menghapus kategori
          <strong id="deleteCategoryName"></strong>?
        </p>
        <form
          action="<?= url('HAPUS_KATEGORI') ?>"
          method="post">
          <input
            type="hidden"
            name="id"
            id="deleteCategoryId">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal">
            Batal
          </button>
          <button
            type="submit"
            class="btn btn-danger">
            Hapus
          </button>
        </form>
      </div>
    </div>
  </div>
</div>