<!-- content -->
<div class="rounded-3 p-4 bg-white">
  <h5 class="fw-semibold mb-4">Data Laporan</h5>

  <!-- actions -->
  <div
    class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3"
    [ngClass]="
      dataSourceTotal > 0 ? 'justify-content-between' : 'justify-content-end'
    "
  >
    <div
      class="form-group has-search d-flex align-items-center"
      *ngIf="dataSourceTotal > 0"
    >
      <i
        class="bi bi-search form-control-feedback mx-auto ms-3"
        style="color: black"
      ></i>
      <input
        style="background: #f2f2f2; height: 48px"
        class="form-control border-0 form-control"
        type="text"
        placeholder="Cari data..."
        [formControl]="searchForm"
        [readonly]="dataSourceLength === 0 && queries.filter && !queries.search"
      />
    </div>
    <div ngbDropdown>
      <button
        *ngIf="dataSourceTotal > 0"
        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 class="dropdown-item" ngbDropdownItem (click)="applyFilter('')">
          Semua
        </button>
        <button ngbDropdownItem (click)="applyFilter('PROG')" *ngIf="isPNGL()">
          Dalam Proses
        </button>
        <button ngbDropdownItem (click)="applyFilter('FOLUP')">
          Ditindak Lanjuti
        </button>
        <button ngbDropdownItem (click)="applyFilter('RPR')">Perbaikan</button>
        <button ngbDropdownItem (click)="applyFilter('FIXED')">
          Selesai Perbaikan
        </button>
        <button ngbDropdownItem (click)="applyFilter('RJT')" *ngIf="isPNGL()">
          Ditolak
        </button>
        <button ngbDropdownItem (click)="applyFilter('DONE')">Selesai</button>
      </div>
    </div>
  </div>

  <!-- no data -->
  <p *ngIf="dataSourceTotal == 0" class="text-body-tertiary">
    <i class="bi bi-exclamation-circle"></i> Belum ada data.
  </p>

  <!-- search result -->
  <p
    *ngIf="dataSourceTotal > 0 && dataSourceLength === 0 && queries.search"
    class="text-body-tertiary"
  >
    <i class="bi bi-search"></i> Tidak ada hasil pencarian
  </p>
  <!-- table -->
  <ng-container *ngIf="dataSourceTotal > 0 && dataSourceLength > 0">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Tanggal</th>
            <th>No Tiket</th>
            <th>Nama Pelapor</th>
            <th>Status</th>
            <th>Lihat Maps</th>
            <th>Lokasi</th>
            <th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let d of dataSource; let i = index">
            <td>{{ d.created_at | date : "dd/MM/yyyy" }}</td>
            <td>{{ d.no_ticket }}</td>
            <td>{{ d.user.fullname }}</td>
            <td>
              <small
                [ngClass]="{
                  'bg-primary': d.status_report.id === 'PROG',
                  'bg-warning': d.status_report.id === 'FOLUP',
                  'bg-danger': d.status_report.id === 'RJT',
                  'bg-info': d.status_report.id === 'RPR',
                  'bg-secondary': d.status_report.id === 'FIXED',
                  'bg-success': d.status_report.id === 'DONE',
                  'text-nowrap text-white text-center rounded-2 px-2 py-2': true,
                  'd-block': true
                }"
              >
                {{
                  d.status_report.id === "DONE"
                    ? "Selesai"
                    : d.status_report.name
                }}
              </small>
            </td>
            <td>
              <a
                class="text-nowrap"
                href="https://www.google.com/maps/search/?api=1&query={{
                  parsing(d.segmens[d.segmens.length - 1].segmen.center_point)
                    .coordinates[1]
                }},{{
                  parsing(d.segmens[d.segmens.length - 1].segmen.center_point)
                    .coordinates[0]
                }}&zoom=15&markers={{
                  parsing(d.segmens[d.segmens.length - 1].segmen.center_point)
                    .coordinates[1]
                }},{{
                  parsing(d.segmens[d.segmens.length - 1].segmen.center_point)
                    .coordinates[0]
                }}"
                target="_blank"
              >
                {{
                  "[" +
                    parsing(d.segmens[d.segmens.length - 1].segmen.center_point)
                      .coordinates.reverse()
                      .join(", ") +
                    "]"
                }}
              </a>
            </td>
            <td>
              {{
                d.segmens.length > 0
                  ? d.segmens[d.segmens.length - 1].segmen.name
                  : "-"
              }}
            </td>
            <td class="">
              <div class="d-flex">
                <button
                  class="btn btn-outline-primary me-2"
                  type="button"
                  (click)="goToDetail(d.id)"
                >
                  Detail
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- pagination -->
    <div
      class="d-flex align-items-center justify-content-between gap-3 flex-wrap"
    >
      <div class="w-auto d-flex align-items-center gap-2">
        <span>Item per halalaman</span>
        <select class="form-select w-auto" (change)="onPageSizeChange($event)">
          <option
            *ngFor="let p of pageSizeOptions"
            [value]="p"
            [selected]="p === queryLimit"
          >
            {{ p }}
          </option>
        </select>
        <span>dari {{ dataSourceLength }}</span>
      </div>

      <ngb-pagination
        [collectionSize]="dataSourceLength"
        [(page)]="queryPage"
        [maxSize]="5"
        [pageSize]="queryLimit"
        [rotate]="true"
        [ellipses]="false"
        [boundaryLinks]="false"
        [directionLinks]="true"
        class="mb-n3"
        (pageChange)="onPaginateChange($event)"
      ></ngb-pagination>
    </div>
  </ng-container>
</div>
