<h1 class="h4 fw-bold">Rekapitulasi</h1>
<div class="row gy-4 mt-2 p-2">
  <!-- Count Report -->
  <div class="bg-white p-4 rounded-3">
    <div
      class="d-flex align-items-start justify-content-between gap-3 flex-wrap mb-3"
    >
      <h5 class="fw-semibold d-flex align-items-start">
        Ringkasan Total Laporan
      </h5>
      <form class="d-flex flex-wrap" [formGroup]="formYears">
        <select
          id="years"
          class="form-control me-2"
          style="width: 10rem"
          formControlName="years"
          (click)="getYears()"
        >
          <option disabled selected>Pilih Tahun</option>
          <option *ngFor="let year of years" [value]="year">
            {{ year }}
          </option>
        </select>

        <div ngbDropdown>
          <button
            class="btn no-caret fw-normal"
            id="filterDropdown"
            ngbDropdownToggle
            style="background-color: #eef0fd"
          >
            {{ selectedFilter }}
            <i class="ms-4 bi bi-funnel"></i>
          </button>
          <div ngbDropdownMenu aria-labelledby="filterDropdown">
            <button ngbDropdownItem (click)="quartet(1, 2023)">
              Kuartal 1
            </button>
            <button ngbDropdownItem (click)="quartet(2, 2023)">
              Kuartal 2
            </button>
            <button ngbDropdownItem (click)="quartet(3, 2023)">
              Kuartal 3
            </button>
            <button ngbDropdownItem (click)="quartet(4, 2023)">
              Kuartal 4
            </button>
            <button ngbDropdownItem (click)="getMonthRange()">
              Bulan Sekarang
            </button>
            <button ngbDropdownItem (click)="getYearRange()">
              Tahun Sekarang
            </button>
          </div>
        </div>
        <!-- <span class="mx-3 my-auto">/</span> -->
        <!-- <div class="row row-cols-sm-auto">
          <div class="col-12">
            <div class="input-group" (click)="toggleDatePicker()">
              <input
                id="jadwal"
                class="form-control"
                placeholder="dd/mm/yyyy"
                type="text"
                [readonly]="true"
                [value]="showFormatDate()"
              />
              <span class="input-group-text" style="cursor: pointer">
                <i class="bi bi-calendar4"></i>
              </span>
            </div>

            <ngb-datepicker
              style="background-color: beige; z-index: 100"
              class="position-absolute mt-3 rounded-3"
              #dp
              *ngIf="showDatePicker"
              (dateSelect)="onDateSelection($event)"
              [displayMonths]="1"
              [dayTemplate]="t"
              outsideDays="hidden"
              [weekdays]="false"
            >
            </ngb-datepicker>

            <ng-template #t let-date let-focused="focused">
              <span
                class="custom-day"
                [class.focused]="focused"
                [class.range]="isRange(date)"
                [class.faded]="isHovered(date) || isInside(date)"
                (mouseenter)="hoveredDate = date"
                (mouseleave)="hoveredDate = null"
              >
                {{ date.day }}
              </span>
            </ng-template>
          </div>
        </div> -->
        <!-- <button
          class="ms-3 btn btn-primary"
          [disabled]="form.invalid"
          (click)="submitDate()"
        >
          Submit
        </button> -->
      </form>
    </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>

  <!-- Map -->
  <div
    id="map"
    class="w-100 position-relative rounded-3 overflow-hidden bg-secondary-subtle"
    style="height: 460px"
  >
    <div>
      <div id="status" class="position-absolute z-1 ms-3 mt-3">
        <button
          type="button"
          class="btn btn-light fw-light mb-2"
          (click)="toggleCollapse()"
          aria-controls="collapseExample"
        >
          <i class="bi bi-info-circle me-1 text-primary"></i>
          Info Garis
        </button>
        <ul
          #collapse="ngbCollapse"
          [(ngbCollapse)]="isCollapsed"
          class="list-unstyled d-flex flex-column row-gap-1 rounded-2 bg-white bg-opacity-75 p-3 mb-0"
          [style.width.px]="selectedOption === 'DSS' ? 220 : 190"
          *ngIf="isCollapsed"
        >
          <li
            class="d-flex align-items-center"
            *ngFor="
              let item of selectedOption === 'DSS'
                ? statusDss
                : statusTitikLaporan
            "
          >
            <span
              class="p-1 rounded-circle bg-status me-2"
              [style.backgroundColor]="
                selectedOption === 'DSS'
                  ? getColorByStatusDss(item.status)
                  : getColorByStatusTitikLaporan(item.status)
              "
            ></span>
            <span
              [ngClass]="
                selectedOption === 'DSS'
                  ? getColorByStatusDss(item.status)
                  : getColorByStatusTitikLaporan(item.status)
              "
              class="status-text"
            >
              {{ item.status }}</span
            >
          </li>
        </ul>
      </div>
    </div>

    <div
      id="optionData"
      class="position-absolute z-1 me-3 mt-3 d-flex"
      style="right: 0"
    >
      <div ngbDropdown class="d-inline-block" *ngIf="showOption">
        <button
          type="button"
          class="btn btn-primary me-2"
          id="dropdownBasic1"
          ngbDropdownToggle
        >
          {{ selectedOption }}
        </button>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
          <button
            ngbDropdownItem
            class="py-2 px-2"
            (click)="onOptionChange('DSS')"
          >
            DSS
          </button>
          <button
            ngbDropdownItem
            class="py-2 px-2"
            (click)="onOptionChange('Titik Laporan')"
          >
            Titik Laporan
          </button>
        </div>
      </div>
      <button
        class="btn btn-light"
        (click)="isExpand = !isExpand"
        (click)="toggleFullscreen()"
      >
        <i
          [ngClass]="
            isExpand
              ? 'bi bi-arrows-angle-expand'
              : 'bi bi-arrows-angle-contract'
          "
        ></i>
      </button>
    </div>

    <div
      class="tes position-relative z-0 w-100 h-100"
      leaflet
      [leafletOptions]="mapOptions"
      (leafletMapReady)="initMap($event)"
    ></div>
  </div>

  <!-- Charts -->
  <div class="rounded-3 p-4 bg-white">
    <div
      class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3"
    >
      <h5 class="fw-semibold mb-0">Grafik Laporan</h5>
    </div>
    <apx-chart
      [series]="splineOptions.series"
      [chart]="splineOptions.chart"
      [xaxis]="splineOptions.xaxis"
      [stroke]="splineOptions.stroke"
      [tooltip]="splineOptions.tooltip"
      [dataLabels]="splineOptions.dataLabels"
    ></apx-chart>
  </div>
  <div class="rounded-3">
    <div class="row gap-3">
      <div class="col bg-white rounded-3">
        <div class="p-4 bg-white">
          <div
            class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3"
          >
            <h5 class="fw-semibold mb-0">Level Kerusakan</h5>
            <div ngbDropdown>
              <button
                class="btn no-caret text-primary me-2"
                style="background-color: #eef0fd"
              >
                <i class="bi bi-file-earmark-text text-primary"></i>
                Export PDF
              </button>
              <button
                class="btn no-caret text-primary"
                id="filterDropdown"
                ngbDropdownToggle
                style="background-color: #eef0fd"
              >
                Filter
                <i class="ms-2 bi bi-funnel text-primary"></i>
              </button>
              <div ngbDropdownMenu aria-labelledby="filterDropdown">
                <button ngbDropdownItem>Hari</button>
                <button ngbDropdownItem>Bulan</button>
              </div>
            </div>
          </div>
          <apx-chart
            [series]="pieOptions.series"
            [chart]="pieOptions.chart"
            [labels]="pieOptions.labels"
            [responsive]="pieOptions.responsive"
          ></apx-chart>
        </div>
      </div>
      <div class="col bg-white rounded-3">
        <div class="p-4 bg-white">
          <div
            class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3"
          >
            <h5 class="fw-semibold mb-0">Jenis Kerusakan</h5>
            <div ngbDropdown>
              <button
                class="btn no-caret text-primary me-2"
                style="background-color: #eef0fd"
              >
                <i class="bi bi-file-earmark-text text-primary"></i>
                Export PDF
              </button>
              <button
                class="btn no-caret text-primary"
                id="filterDropdown"
                ngbDropdownToggle
                style="background-color: #eef0fd"
              >
                Filter
                <i class="ms-2 bi bi-funnel text-primary"></i>
              </button>
              <div ngbDropdownMenu aria-labelledby="filterDropdown">
                <button ngbDropdownItem>Hari</button>
                <button ngbDropdownItem>Bulan</button>
              </div>
            </div>
          </div>
          <apx-chart
            [series]="radarOptions.series"
            [chart]="radarOptions.chart"
            [xaxis]="radarOptions.xaxis"
            [title]="radarOptions.title"
          ></apx-chart>
        </div>
      </div>
    </div>
  </div>
</div>
