<h4 class="mb-4 fw-bold">Jadwal Survey</h4>

<div class="rounded-3 p-4 bg-white">
  <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
        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('terbaru')"
        >
          Terbaru
        </button>
        <button
          class="dropdown-item"
          ngbDropdownItem
          (click)="applyFilter('terlama')"
        >
          Terlama
        </button>
      </div>
    </div>
  </div>

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

  <p
    *ngIf="dataSourceTotal > 0 && dataSourceLength === 0 && queries.search"
    class="text-body-tertiary"
  >
    <i class="bi bi-search"></i> Tidak ada hasil pencarian
  </p>
  <ng-container *ngIf="dataSourceTotal > 0 && dataSourceLength > 0">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Tanggal Survei</th>
            <th>No Tiket</th>
            <th>Lokasi</th>
            <th>Nama Pelapor</th>
            <th>Lihat Maps</th>
            <th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let d of dataSource; let i = index">
            <td class="text-nowrap">
              {{ d.survey_start_date | date : "dd/MM/yyyy"
              }}{{
                d.survey_end_date
                  ? "-" + (d.survey_end_date | date : "dd/MM/yyyy")
                  : ""
              }}
            </td>
            <td>{{ d.no_ticket }}</td>
            <td>
              {{
                d.segmens.length > 0
                  ? d.segmens[d.segmens.length - 1].segmen.name
                  : "-"
              }}
            </td>
            <td>{{ d.user.fullname }}</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 class="">
              <div class="d-flex">
                <button
                  [disabled]="d.survey_status === true"
                  class="btn btn-outline-primary me-2 text-nowrap"
                  type="button"
                  (click)="goToDetail(d.id)"
                >
                  {{ d.survey_status === true ? "Sudah Disurvei" : "Survei" }}
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <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>
