<!-- page title -->
<h4 class="mb-4 fw-bold">Jadwal Perbaikan</h4>

<!-- content -->
<div class="rounded-3 p-4 bg-white">
  <!-- 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="position-absolute bi bi-search form-control-feedback mx-auto ms-3"
        style="color: black"
      ></i>
      <input
        style="background: #f2f2f2; height: 48px; padding-left: 3rem"
        *ngIf="dataSourceTotal > 0"
        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
        class="btn btn-outline-primary no-caret"
        id="filterDropdown"
        ngbDropdownToggle
      >
        <i class="bi bi-funnel me-2"></i>Urutkan
      </button>
      <div ngbDropdownMenu aria-labelledby="filterDropdown">
        <button ngbDropdownItem (click)="applyFilter('terbaru')">
          Terbaru
        </button>
        <button ngbDropdownItem (click)="applyFilter('terlama')">
          Terlama
        </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"
    class="text-body-tertiary"
  >
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Tanggal Perbaikan</th>
            <th>No Tiket</th>
            <th>Lokasi</th>
            <th>Nama Pelapor</th>
            <th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let d of dataSource">
            <td>
              {{ d.date_start | date : "dd/MM/yyyy"
              }}{{ d.date_end ? "-" + (d.date_end | date : "dd/MM/yyyy") : "" }}
            </td>
            <td>{{ d.report.no_ticket }}</td>
            <td>
              {{
                d.report.segmens.length > 0
                  ? d.report.segmens[d.report.segmens.length - 1].segmen.name
                  : "-"
              }}
            </td>

            <td>{{ d.report.user.fullname }}</td>
            <td>
              <div class="d-flex">
                <button
                  class="btn btn-outline-primary me-2"
                  type="button"
                  (click)="goToMap(d.id)"
                >
                  Peta
                </button>
                <button
                  [disabled]="
                    d.report.status_id === 'DONE' ||
                    d.report.status_id === 'RJT' ||
                    d.report.status_id === 'FIXED'
                  "
                  class="btn btn-outline-primary me-2"
                  type="button"
                  (click)="onUpdateSchedule(d, d.id)"
                >
                  Ubah
                </button>
                <button
                  *ngIf="isPNGL()"
                  class="btn btn-outline-primary"
                  type="button"
                  (click)="onDeleteData(d.id, d.report.user.fullname)"
                >
                  Hapus
                </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>
