<?php

/**
 * @var array $slas
 */
?>
<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">Pengaturan SLA</h3>
          <small class="text-muted">
            Total <?= count($slas) ?> SLA
          </small>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#slaModal">
          <i class="bi bi-plus"></i>
          Tambah SLA
        </button>
      </div>
      <?php if (empty($slas)): ?>
        <div class="text-center py-5 text-muted">
          <i class="bi bi-stopwatch fs-1"></i>
          <p class="mt-2 mb-0">
            Belum ada data SLA.
          </p>
        </div>
      <?php endif; ?>
      <!-- DESIGN SLA -->
      <div class="list-group">
        <?php foreach ($slas as $sla): ?>
          <div class="list-group-item p-4 mb-3 rounded shadow-sm">
            <div class="d-flex justify-content-between align-items-start">
              <div>
                <h5 class="mb-2">
                  <i class="bi bi-stopwatch text-primary"></i>
                  <?= htmlspecialchars($sla->getNamaSla()) ?>
                </h5>
                <p class="text-muted mb-0">
                  <?php if ($sla->getDeskripsi()): ?>
                    <small class="text-muted">
                      <?= htmlspecialchars($sla->getDeskripsi()) ?>
                    </small>
                  <?php else: ?>
                    <small class="text-muted fst-italic">
                      Tidak ada deskripsi
                    </small>
                  <?php endif; ?>
                </p>
              </div>
              <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#slaModal" data-id="<?= $sla->getId() ?>" data-name="<?= htmlspecialchars($sla->getNamaSla()) ?>" data-response="<?= $sla->getWaktuResponJam() ?>" data-resolution="<?= $sla->getWaktuPenyelesaianJam() ?>" data-description="<?= htmlspecialchars($sla->getDeskripsi()) ?>">
                  <i class="bi bi-pencil"></i>
                  Edit
                </button>
                <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#slaDeleteConfirmationModal" data-id="<?= $sla->getId() ?>" data-name="<?= htmlspecialchars($sla->getNamaSla()) ?>">
                  <i class="bi bi-trash"></i>
                  Delete
                </button>
              </div>
            </div>
            <div class="row mt-2 g-3">
              <div class="col-md-6">
                <div class="border rounded p-3 bg-light">
                  <small class="text-muted">
                    <i class="bi bi-clock"></i>
                    Response Time
                  </small>
                  <h3 class="mb-0 mt-2">
                    <?= $sla->getWaktuResponJam() ?>
                    <small class="fs-6">
                      Hour
                    </small>
                  </h3>
                </div>
              </div>
              <div class="col-md-6">
                <div class="border rounded p-3 bg-light">
                  <small class="text-muted">
                    <i class="bi bi-check-circle"></i>
                    Resolution Time
                  </small>
                  <h3 class="mb-0 mt-2">
                    <?= $sla->getWaktuPenyelesaianJam() ?>
                    <small class="fs-6">
                      Hour
                    </small>
                  </h3>
                </div>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="slaModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="slaForm" method="POST" action="<?= url('TAMBAH_SLA') ?>">
        <div class="modal-header">
          <h5 class="modal-title" id="slaModalLabel">
          </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 SLA
              <span class="text-danger">*</span>
            </label>
            <input type="text" class="form-control" id="namaSla" name="namaSla" maxlength="100" required>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">
                Waktu Respon (Jam)
              </label>
              <input type="number" class="form-control" id="waktuResponJam" name="waktuResponJam" min="1" required>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">
                Waktu Penyelesaian (Jam)
              </label>
              <input type="number" class="form-control" id="waktuPenyelesaianJam" name="waktuPenyelesaianJam" min="1" required>
            </div>
          </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 class="btn btn-primary">
            <i class="bi bi-check-lg"></i>
            Simpan
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="slaDeleteConfirmationModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="slaDeleteConfirmationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="slaDeleteConfirmationModalLabel">
          Konfirmasi Hapus SLA
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <p>
          Apakah Anda yakin ingin menghapus SLA:
        </p>
        <h6 class="text-danger" id="deleteSlaName"></h6>
        <p class="text-muted mt-3 mb-0">
          Data yang sudah dihapus tidak dapat dikembalikan.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Batal
        </button>
        <form method="POST" action="<?= url('HAPUS_SLA') ?>">
          <input type="hidden" name="id" id="deleteSlaId">
          <button type="submit" class="btn btn-danger">
            Hapus
          </button>
        </form>
      </div>
    </div>
  </div>
</div>