<div class="bg-white p-4 rounded-3">
  <div
    class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3"
  >
    <h5 class="fw-semibold">Ringkasan Total Laporan</h5>
    <div class="d-flex">
      <div ngbDropdown>
        <button
          class="btn no-caret fw-normal"
          id="filterDropdown"
          ngbDropdownToggle
          style="background-color: #eef0fd"
        >
          Filter
          <i class="ms-4 bi bi-funnel"></i>
        </button>
        <div ngbDropdownMenu aria-labelledby="filterDropdown">
          <button ngbDropdownItem>Kuartal 1</button>
          <button ngbDropdownItem>Kuartal 2</button>
          <button ngbDropdownItem>Kuartal 3</button>
          <button ngbDropdownItem>Kuartal 4</button>
          <button ngbDropdownItem>Bulan Sekarang</button>
          <button ngbDropdownItem>Tahun Sekarang</button>
        </div>
      </div>
      <span class="mx-3 my-auto">/</span>
      <form class="row row-cols-sm-auto">
        <div class="col-12">
          <div class="input-group" style="background-color: #eef0fd">
            <input
              (click)="d.toggle()"
              class="form-control"
              placeholder="yyyy-mm-dd"
              name="dp"
              [(ngModel)]="model"
              ngbDatepicker
              #d="ngbDatepicker"
              autocomplete="off"
            />
            <button
              class="btn btn-outline-secondary bi bi-calendar2"
              (click)="d.toggle()"
              type="button"
            ></button>
          </div>
        </div>
      </form>
      <button class="ms-3 btn btn-primary">Submit</button>
    </div>
  </div>

  <p *ngIf="count == null" class="text-body-tertiary">
    <i class="bi bi-exclamation-circle"></i> Belum ada data.
  </p>

  <div class="row g-3" *ngIf="count">
    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Total Laporan</h4>
          <h6 class="h4">
            {{ count["Semua Laporan"] ? count["Semua Laporan"] : "-" }}
          </h6>
        </div>
        <span class="flex-shrink-0 bg-info px-2 py-1 text-white rounded-2">
          <i class="bi bi-database"></i>
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Dalam Proses</h4>
          <h6 class="h4">
            {{ count["Dalam Proses"] ? count["Dalam Proses"] : "-" }}
          </h6>
        </div>
        <span class="flex-shrink-0 bg-primary px-2 py-1 text-white rounded-2">
          <i class="bi bi-clipboard"></i>
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Ditindak Lanjuti</h4>
          <h6 class="h4">
            {{ count["Ditindak Lanjuti"] ? count["Ditindak Lanjuti"] : "-" }}
          </h6>
        </div>
        <span
          class="d-flex flex-column justify-content-center align-items-center bg-warning px-2 py-2 rounded-2"
        >
          <img src="assets/images/loader.svg" alt="" />
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Perbaikan</h4>
          <h6 class="h4">
            {{ count["Perbaikan"] ? count["Perbaikan"] : "-" }}
          </h6>
        </div>
        <span
          class="flex-shrink-0 px-2 py-1 text-white rounded-2"
          style="background-color: #3697ff"
        >
          <i class="bi bi-arrow-clockwise"></i>
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Tertolak</h4>
          <h6 class="h4">
            {{ count["Ditolak"] ? count["Ditolak"] : "-" }}
          </h6>
        </div>
        <span class="flex-shrink-0 px-2 py-1 text-white rounded-2 bg-danger">
          <i class="bi bi-x"></i>
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Selesai</h4>
          <h6 class="h4">
            {{
              count["Laporan Selesai & Sudah Divalidasi"]
                ? count["Laporan Selesai & Sudah Divalidasi"]
                : "-"
            }}
          </h6>
        </div>
        <span class="flex-shrink-0 bg-success px-2 py-1 text-white rounded-2">
          <i class="bi bi-check-lg"></i>
        </span>
      </div>
    </div>
  </div>
</div>
