<?php

/**
 * @var array $priorities
 */
?>
<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">Prioritas Tiket</h3>
          <small class="text-muted">
            Total <?= count($priorities) ?> prioritas
          </small>
        </div>
        <?php if (empty($priorities)): ?>
          <form
            method="post"
            action="<?= url('INIT_PRIORITAS') ?>">
            <button
              type="submit"
              class="btn btn-primary">
              <i class="bi bi-database-fill-add me-1"></i>
              Inisialisasi Prioritas
            </button>
          </form>
        <?php endif; ?>
      </div>
      <?php if (empty($priorities)): ?>
        <div class="text-center py-5">
          <i class="bi bi-exclamation-circle fs-1 text-warning"></i>
          <h5 class="mt-3">
            Prioritas belum tersedia
          </h5>
          <p class="text-muted mb-0">
            Klik tombol <strong>Inisialisasi Prioritas</strong>
            untuk membuat data default
            <strong>HIGH</strong>,
            <strong>MEDIUM</strong>,
            dan
            <strong>LOW</strong>.
          </p>
        </div>
      <?php else: ?>
        <!-- Design 3 -->
        <div class="d-flex flex-column gap-3">
          <?php foreach ($priorities as $priority): ?>
            <?php
            $color = match ($priority->getNamaPrioritas()) {
              'HIGH'   => 'danger',
              'MEDIUM' => 'warning',
              'LOW'    => 'success',
              default  => 'secondary'
            };

            $icon = match ($priority->getNamaPrioritas()) {
              'HIGH'   => 'bi-arrow-up-circle-fill',
              'MEDIUM' => 'bi-dash-circle-fill',
              'LOW'    => 'bi-arrow-down-circle-fill',
              default  => 'bi-flag-fill'
            };

            ?>
            <div class="card shadow-sm border-0">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div class="d-flex align-items-center">
                    <div
                      class="rounded-circle bg-<?= $color ?> bg-opacity-10 text-<?= $color ?> d-flex align-items-center justify-content-center"
                      style="width:60px;height:60px;">
                      <i class="bi <?= $icon ?> fs-3"></i>
                    </div>
                    <div class="ms-3">
                      <div class="d-flex align-items-center gap-2 mb-1">
                        <h5 class="mb-0">
                          <?= htmlspecialchars($priority->getNamaPrioritas()) ?>
                        </h5>
                        <span class="badge text-bg-<?= $color ?>">
                          Level <?= $priority->getLevel() ?>
                        </span>
                      </div>
                      <small class="text-muted">
                        <?= htmlspecialchars($priority->getDeskripsi()) ?>
                      </small>
                    </div>
                  </div>
                  <button
                    type="button"
                    class="btn btn-outline-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#priorityModal"
                    data-id="<?= $priority->getId() ?>"
                    data-name="<?= htmlspecialchars($priority->getNamaPrioritas()) ?>"
                    data-level="<?= $priority->getLevel() ?>"
                    data-description="<?= htmlspecialchars($priority->getDeskripsi()) ?>">
                    <i class="bi bi-pencil me-1"></i>
                    Edit
                  </button>
                </div>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </div>
  </div>
</div>
<!-- Modal Edit -->
<div class="modal fade" id="priorityModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="priorityForm" method="POST">
        <div class="modal-header">
          <h5 class="modal-title" id="priorityModalLabel"></h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal">
          </button>
        </div>
        <div class="modal-body">
          <input
            type="hidden"
            id="id"
            name="id">
          <div class="mb-3">
            <label class="form-label">Nama Prioritas</label>
            <input
              type="text"
              class="form-control"
              id="namaPrioritas"
              name="namaPrioritas"
              readonly>
          </div>
          <div class="mb-3">
            <label class="form-label">Level</label>
            <input
              type="number"
              class="form-control"
              id="level"
              name="level"
              readonly>
          </div>
          <div class="mb-3">
            <label class="form-label">Deskripsi</label>
            <textarea
              class="form-control"
              id="deskripsi"
              name="deskripsi"
              rows="3"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-light border"
            data-bs-dismiss="modal">
            Batal
          </button>
          <button
            class="btn btn-primary">
            Simpan
          </button>
        </div>
      </form>
    </div>
  </div>
</div>