<?php

/**
 * @var array $summary
 */
?>

<div class="row g-3 mb-4">

  <!-- SLA Achievement -->
  <div class="col-xl-3 col-md-6">
    <div class="card shadow-sm border-0 h-100">
      <div class="card-body">

        <div class="d-flex justify-content-between align-items-start">
          <div>
            <small class="text-muted text-uppercase fw-semibold">
              SLA Berhasil Terpenuhi
            </small>

            <h2 class="fw-bold text-success mt-2 mb-1">
              <?= $summary["completedTicket"]["percentage"] ?>%
            </h2>

          </div>

          <div
            class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center"
            style="width:60px;height:60px;">
            <i class="bi bi-check-circle fs-4 text-success"></i>
          </div>
        </div>

        <div class="progress mt-3" style="height:6px;">
          <div class="progress-bar bg-success"
            style="width: <?= $summary["completedTicket"]["percentage"] ?>%">
          </div>
        </div>

        <small class="text-muted">
          <?= $summary["completedTicket"]["completed"] ?> dari
          <?= $summary["completedTicket"]["total"] ?> tiket memenuhi SLA
        </small>

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

  <!-- Within SLA -->
  <div class="col-xl-3 col-md-6">
    <div class="card shadow-sm border-0 h-100">
      <div class="card-body">

        <div class="d-flex justify-content-between">

          <div>
            <small class="text-muted text-uppercase fw-semibold">
              Masih dalam SLA
            </small>

            <h2 class="fw-bold text-success mt-2">
              <?= $summary["withinSla"] ?>
            </h2>

            <small class="text-muted">
              Tiket masih dalam SLA
            </small>
          </div>
          <div
            class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center"
            style="width:60px;height:60px;">
            <i class="bi bi-shield-check fs-4 text-success"></i>
          </div>

        </div>

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

  <!-- Near SLA -->
  <div class="col-xl-3 col-md-6">
    <div class="card shadow-sm border-0 h-100">
      <div class="card-body">

        <div class="d-flex justify-content-between">

          <div>
            <small class="text-muted text-uppercase fw-semibold">
              SLA Hampir Habis
            </small>

            <h2 class="fw-bold text-warning mt-2">
              <?= $summary["nearSla"] ?>
            </h2>

            <small class="text-muted">
              Deadline &lt; 15%
            </small>
          </div>

          <div
            class="rounded-circle bg-warning bg-opacity-10 d-flex align-items-center justify-content-center"
            style="width:60px;height:60px;">
            <i class="bi bi-clock-history fs-4 text-warning"></i>
          </div>

        </div>

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

  <!-- Breached -->
  <div class="col-xl-3 col-md-6">
    <div class="card shadow-sm border-0 h-100">
      <div class="card-body">

        <div class="d-flex justify-content-between">

          <div>
            <small class="text-muted text-uppercase fw-semibold">
              SLA Terlampaui
            </small>

            <h2 class="fw-bold text-danger mt-2">
              <?= $summary["overSla"] ?>
            </h2>

            <small class="text-danger">
              Perlu tindakan segera
            </small>
          </div>

          <div
            class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center"
            style="width:60px;height:60px;">
            <i class="bi bi-exclamation-triangle fs-4 text-danger"></i>
          </div>

        </div>

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

</div>