<!-- header -->
<div
  class="d-lg-flex d-md-flex d-sm-flex align-items-start justify-content-between gap-3 mb-3"
>
  <div>
    <div class="d-flex align-items-center gap-2 mb-2">
      <button
        class="btn btn-sm bg-transparent"
        type="button"
        (click)="onBack()"
      >
        <i class="bi bi-arrow-left"></i>
      </button>
      <h5 class="mb-0 fw-bold">Detail Laporan</h5>
    </div>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item small">
          <a routerLink="../" class="text-decoration-none">Data Laporan</a>
        </li>
        <li class="breadcrumb-item active small" aria-current="page">Detail</li>
      </ol>
    </nav>
  </div>
  <div class="">
    <div class="text-right d-flex justify-content-end">
      <button
        class="btn btn-outline-primary me-2 xs:text-wrap"
        (click)="onDownload()"
      >
        Export PDF
      </button>

      <button
        *ngIf="isPNGL()"
        class="btn btn-danger me-2 xs:text-wrap"
        type="button"
        (click)="reportReject()"
        [disabled]="
          reportDetails?.status_report?.id === 'RJT' ||
          reportDetails?.status_report?.id === 'FOLUP' ||
          reportDetails?.status_report?.id === 'DONE' ||
          reportDetails?.status_report?.id === 'RPR' ||
          reportDetails?.status_report?.id === 'FIXED'
        "
      >
        Tolak Laporan
      </button>
      <div *ngIf="reportDetails?.status_report?.id === 'PROG'">
        <button
          *ngIf="isPNGL() && showButtonCompleted"
          style="max-width: fit-content"
          class="btn btn-primary text-right xs:text-wrap"
          type="button"
          (click)="goToFollowUp()"
        >
          Tindak Lanjuti
        </button>
      </div>
    </div>
  </div>
</div>

<div
  class="px-4 py-3 rounded-3 mb-3"
  *ngIf="
    reportDetails?.status_report?.id === 'PROG' &&
    reportDetails?.survey_status === false &&
    reportDetails?.assign_survey_to === null
  "
  style="background-color: #dee1fd"
>
  <div class="d-flex" style="align-items: center">
    <i class="bi bi-info-circle me-2"></i>
    <div class="fw-bold">Survei</div>
  </div>
  <div class="ms-0 ms-lg-4 ms-md-4 mt-2">
    <div class="recomend">
      <p class="text-body-tertiary text-justify" style="text-align: justify">
        Kondisi jalan membutuhkan survey untuk menindak lanjuti laporan,
        silahkan klik tombol survey untuk memberikan tugas kepada surveyor.
      </p>
    </div>
  </div>
  <div class="d-block d-lg-flex d-md-flex d-sm-flex ms-0 ms-lg-4 ms-md-4">
    <button
      class="btn text-primary"
      style="background-color: #eef0fd"
      (click)="onCreateSurveyor()"
    >
      Survei Sekarang
    </button>
  </div>
</div>

<div
  class="alert alert-warning"
  *ngIf="
    reportDetails?.survey === null && reportDetails?.assign_survey_to !== null
  "
>
  <div class="d-flex">
    <i class="bi bi-info-circle me-2"></i>
    <div class="alert-text">
      Laporan <span class="fw-bold"> sedang</span> disurvei
      <!-- oleh      {{ reportDetails?.assign_survey_to }} -->
    </div>
  </div>
</div>

<div
  class="alert alert-success"
  *ngIf="
    reportDetails?.survey_status === true &&
    reportDetails?.status_report?.id === 'PROG'
  "
>
  <div class="d-flex">
    <i class="bi bi-check2-all me-2"></i>
    <div class="alert-text">
      Laporan <span class="fw-bold"> sudah</span> disurvei
      <!-- oleh      {{ reportDetails?.survey?.id }} -->
    </div>
  </div>
  <button
    type="button"
    class="btn btn-sm btn-outline-info mt-2"
    (click)="collapse.toggle()"
    [attr.aria-expanded]="!isCollapsed"
    aria-controls="collapseExample"
  >
    Lihat hasil
  </button>
  <div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed">
    <div *ngIf="reportDetails?.survey?.photos">
      <div *ngFor="let photo of reportDetails?.survey?.photos">
        <div class="my-2">
          <app-lightbox
            [data]="photo"
            style="
              cursor: pointer;
              width: 90px !important;
              height: 90px !important;
            "
          ></app-lightbox>
        </div>
      </div>
    </div>
    <div class="row py-1 fw-medium">
      <div class="col-md-2 text-body-tertiary">Tingkat Kerusakan</div>
      <div class="col-md-6">
        {{ reportDetails?.survey?.tingkat_kerusakan }}
      </div>
    </div>
    <div class="row py-1 fw-medium">
      <div class="col-md-2 text-body-tertiary">Tipe Kerusakan</div>
      <div class="col-md-6">{{ reportDetails?.survey?.tipe_kerusakan }}</div>
    </div>
    <div class="row py-1 fw-medium">
      <div class="col-md-2 text-body-tertiary">Kedalaman Lubang</div>
      <div class="col-md-6">
        {{ reportDetails?.survey?.kedalaman_lubang }}
      </div>
    </div>
    <div class="row py-1 fw-medium">
      <div class="col-md-2 text-body-tertiary">Panjang Kerusakan</div>
      <div class="col-md-6">
        {{ reportDetails?.survey?.length }} <span>m</span>
      </div>
    </div>
    <div class="row py-1 fw-medium">
      <div class="col-md-2 text-body-tertiary">Lebar Kerusakan</div>
      <div class="col-md-6">
        {{ reportDetails?.survey?.width }} <span>m</span>
      </div>
    </div>
    <div class="row py-1 fw-medium">
      <div class="col-md-2 text-body-tertiary">Estimasi Kebutuhan Material</div>
      <div class="col-md-6">{{ reportDetails?.survey?.jenis_material }}</div>
    </div>
    <div class="row py-1 fw-medium">
      <div class="col-md-2 text-body-tertiary">Keterangan Material</div>
      <div class="col-md-6">
        {{
          reportDetails?.survey?.masukan_material
            ? reportDetails?.survey?.masukan_material
            : "-"
        }}
      </div>
    </div>
    <div class="row py-1 fw-medium">
      <div class="col-md-2 text-body-tertiary">Catatan</div>
      <div class="col-md-6">
        {{ reportDetails?.survey?.note ? reportDetails?.survey?.note : "-" }}
      </div>
    </div>
  </div>
</div>

<div class="p-4 rounded-3 bg-white">
  <div *ngIf="reportDetails">
    <h5 class="fw-semibold mb-2">Data Pelapor</h5>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">No. Tiket</div>
      <div class="col-md-6">{{ reportDetails.no_ticket }}</div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">Nama</div>
      <div class="col-md-6">{{ reportDetails.user.fullname }}</div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">Email</div>
      <div class="col-md-6">{{ reportDetails.user.email }}</div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">No. HP</div>
      <div class="col-md-6">{{ reportDetails.user.phone }}</div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">Lokasi</div>
      <div class="col-md-6">
        {{
          reportDetails.segmens.length > 0
            ? reportDetails.segmens[reportDetails.segmens.length - 1].segmen
                .name
            : "-"
        }}
      </div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">Keterangan</div>
      <div class="col-md-10">
        {{ reportDetails.note }}
      </div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">Status Laporan</div>
      <div class="col-md-6 d-flex align-items-center">
        <small
          style="max-width: fit-content"
          [ngClass]="{
            'bg-primary': reportDetails.status_report.id === 'PROG',
            'bg-warning': reportDetails.status_report.id === 'FOLUP',
            'bg-info': reportDetails.status_report.id === 'RPR',
            'bg-success': reportDetails.status_report.id === 'DONE',
            'bg-secondary': reportDetails.status_report.id === 'FIXED',
            'bg-danger': reportDetails.status_report.id === 'RJT',
            'text-nowrap text-white rounded-2 px-2 py-1': true
          }"
        >
          {{
            reportDetails.status_report.id === "DONE"
              ? "Selesai"
              : reportDetails.status_report.name
          }}
        </small>
      </div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">Tanggal Dilaporkan</div>
      <div class="col-md-6">
        {{ reportDetails.created_at | date : "dd/MM/yyyy" }}
      </div>
    </div>
    <div
      class="row py-3 fw-medium"
      *ngIf="reportDetails.status_report.id === 'DONE'"
    >
      <div class="col-md-2 text-body-tertiary">Review</div>
      <div class="col-md-6">
        {{
          reportDetails.rating !== null && reportDetails.rating?.comment !== ""
            ? reportDetails.rating?.comment
            : "-"
        }}
        <div class="d-flex" *ngIf="reportDetails.rating !== null">
          <div *ngFor="let i of [1, 2, 3, 4, 5]; let index = index">
            <i
              class="bi bi-star-fill mx-1"
              [ngClass]="{
                'text-dark': index >= reportDetails.rating!.rate,
                'text-warning': index < reportDetails.rating!.rate
              }"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr class="mb-4 border-dark-subtle" />
  <h5 class="fw-semibold mb-2">Data Laporan</h5>
  <hr class="mb-4 border-dark-subtle" />
  <div class="" *ngFor="let segmen of reportDetails?.segmens; let i = index">
    <app-segment
      [segmentData]="segmen"
      [index]="i"
      [statusLaporan]="reportDetails?.status_report?.id"
    ></app-segment>
  </div>
</div>
