<?php

/**
 * @var array $statuses
 */
?>
<div class="container">
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h3 class="mb-0">Status Tiket</h3>
          <small class="text-muted">
            Total <?= count($statuses) ?> status
          </small>
        </div>
        <?php if (empty($statuses)): ?>
          <form
            action="<?= url('INIT_STATUS_TIKET') ?>"
            method="POST">
            <button
              type="submit"
              class="btn btn-primary">
              <i class="bi bi-magic"></i>
              Inisialisasi Status
            </button>
          </form>
        <?php endif; ?>
      </div>

      <?php if (empty($statuses)): ?>
        <div class="text-center py-5">
          <i class="bi bi-kanban display-1 text-secondary opacity-50"></i>
          <h5 class="mt-3">
            Belum ada Status Tiket
          </h5>
          <p class="text-muted">
            Klik <strong>Inisialisasi Status</strong>
            untuk membuat status workflow default.
          </p>
        </div>
      <?php else: ?>
        <?php foreach ($statuses as $status): ?>
          <?php
          $color = match ($status->getNamaStatus()) {
            'OPEN'        => 'primary',
            'ASSIGNED'    => 'info',
            'IN PROGRESS' => 'warning',
            'ESCALATED'   => 'danger',
            'SOLVED'      => 'success',
            'CANCELED'    => 'secondary',
            default       => 'light'
          };

          ?>
          <div class="card shadow-sm border-0 mb-3">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-3 mb-2">
                    <span class="badge text-bg-<?= $color ?> fs-6 px-3 py-2">
                      <?= htmlspecialchars($status->getNamaStatus()) ?>
                    </span>
                    <span class="badge bg-light text-dark border">
                      Workflow #<?= $status->getUrutan() ?>
                    </span>
                  </div>
                  <?php if ($status->getDeskripsi()): ?>
                    <small class="text-muted">
                      <?= htmlspecialchars($status->getDeskripsi()) ?>
                    </small>
                  <?php else: ?>
                    <small class="text-muted fst-italic">
                      Tidak ada deskripsi.
                    </small>
                  <?php endif; ?>
                </div>
                <button
                  type="button"
                  class="btn btn-outline-primary btn-sm"

                  data-bs-toggle="modal"
                  data-bs-target="#statusModal"

                  data-id="<?= $status->getId() ?>"
                  data-name="<?= htmlspecialchars($status->getNamaStatus()) ?>"
                  data-order="<?= $status->getUrutan() ?>"
                  data-description="<?= htmlspecialchars($status->getDeskripsi()) ?>">

                  <i class="bi bi-pencil"></i>

                </button>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      <?php endif; ?>

    </div>
  </div>
</div>


<div
  class="modal fade"
  id="statusModal"
  tabindex="-1"
  aria-labelledby="statusModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form
        id="statusForm"
        method="POST"
        action="">
        <div class="modal-header">
          <h5
            class="modal-title"
            id="statusModalLabel">
            <i class="bi bi-kanban me-2"></i>
            Edit Status Ticket
          </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 Status
            </label>
            <input
              type="text"
              class="form-control"
              id="namaStatus"
              name="namaStatus"
              readonly>
            <div class="form-text">
              Nama status merupakan bagian dari workflow sistem dan tidak dapat diubah.
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">
              Urutan Workflow
            </label>
            <input
              type="number"
              class="form-control"
              id="urutan"
              name="urutan"
              min="1"
              required>
          </div>
          <div>
            <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
            type="submit"
            class="btn btn-primary">
            <i class="bi bi-check-lg"></i>
            Simpan
          </button>
        </div>
      </form>
    </div>
  </div>
</div>