<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">Lokasi Perbaikan</h5>
    </div>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item small">
          <a routerLink="../../" class="text-decoration-none">Data Perbaikan</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
        *ngIf="
          !isPNGL() && detailSchedule?.report?.status_report?.id !== 'DONE'
        "
        style="max-width: fit-content"
        class="btn btn-success text-right me-2"
        type="button"
        ngbAutofocus
        (click)="onUpdateDonePerbaikan()"
        [disabled]="
          detailSchedule?.report?.status_report?.id === 'PROG' ||
          detailSchedule?.report?.status_report?.id === 'FOLUP' ||
          detailSchedule?.report?.status_report?.id === 'DONE' ||
          detailSchedule?.report?.status_report?.id === 'FIXED' ||
          isButtonDisabled
        "
      >
        Sudah Diperbaiki
      </button>
      <button
        *ngIf="
          (isPNGL() || detailSchedule?.report?.status_report?.id === 'FOLUP') &&
          detailSchedule?.report?.status_report?.id !== 'DONE'
        "
        style="max-width: fit-content"
        class="btn btn-info text-right me-2"
        type="button"
        ngbAutofocus
        (click)="onUpdatePerbaikan()"
        [disabled]="
          (isPNGL() && detailSchedule?.report?.status_report?.id === 'FOLUP') ||
          (isPNGL() && detailSchedule?.report?.status_report?.id === 'RPR') ||
          (isPNGL() && detailSchedule?.report?.status_report?.id === 'DONE') ||
          (isPNGL() && isButtonDisabled)
        "
      >
        {{ isPNGL() ? "Perbaiki Lagi" : "Perbaiki" }}
      </button>
      <button
        *ngIf="isPNGL()"
        style="max-width: fit-content"
        class="btn btn-success text-right"
        type="button"
        (click)="reportCompleted()"
        [disabled]="
          detailSchedule?.report?.status_report?.id === 'PROG' ||
          detailSchedule?.report?.status_report?.id === 'FOLUP' ||
          detailSchedule?.report?.status_report?.id === 'DONE' ||
          detailSchedule?.report?.status_report?.id === 'RPR' ||
          isButtonDisabled
        "
      >
        Selesai
      </button>
    </div>
    <div *ngIf="isPNGL()">
      <div
        class="d-flex justify-content-between calendar bg-white p-2 rounded-2 mt-2"
      >
        <span>
          <i class="bi bi-calendar" style="color: blue"></i>
          <span class="small ms-2">Tanggal perbaikan</span>
        </span>
        <div>
          <span class="date small ms-xs-1 ms-md-4 ms-lg-4">
            {{ detailSchedule?.date_start | date : "dd/MM/yyyy"
            }}{{
              detailSchedule?.date_end
                ? "-" + (detailSchedule?.date_end | date : "dd/MM/yyyy")
                : ""
            }}
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="p-4 rounded-3 bg-white">
  <div
    class="alert text-white"
    role="alert"
    style="background: #ffab00"
    *ngIf="!isPNGL() && detailSchedule?.report?.status_report?.id === 'RPR'"
  >
    <i class="bi bi-exclamation-circle me-2"></i>Silahkan Upload foto selesai
    perbaikan sebagai bukti telah dilakukan perbaikan jalan..
  </div>

  <ngb-alert
    *ngIf="!isPNGL() && detailSchedule?.report?.status_report?.id === 'FIXED'"
    class="text-black my-auto d-flex align-items-center mb-3"
    [dismissible]="false"
    type="dark"
    style="background: #dee1fd; height: 46px"
  >
    <i class="bi bi-exclamation-circle me-2"></i>
    Data sedang divalidasi oleh admin
  </ngb-alert>

  <app-map
    [allowDragging]="true"
    [showOption]="false"
    [showStatus]="false"
    [perbaikanSegmen]="id"
  ></app-map>
  <div>
    <div class="row py-3 my-4 fw-medium">
      <div class="col-md-2 text-body-tertiary">Segment Jalan</div>
      <div class="col-lg-10 col-md-10 col-sm">
        <div class="d-lg-flex d-md-flex d-sm-flex">
          <div
            class="py-1"
            *ngFor="let segmen of detailSchedule?.report.segmens"
          >
            <button
              class="btn bg-primary text-white rounded-2 py-1 me-2"
              placement="bottom"
              ngbTooltip="Lihat Detail"
              (click)="onAction(segmen)"
              style="cursor: pointer"
              type="button"
            >
              {{ segmen?.segmen.name || "-" }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <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">{{ detailSchedule?.report.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">{{ detailSchedule?.report.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">{{ detailSchedule?.report.user.email }}</div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">Lokasi</div>
      <div class="col-md-6">
        {{
          detailSchedule?.report.segmens.length > 0
            ? detailSchedule?.report.segmens[
                detailSchedule?.report.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">{{ detailSchedule?.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
          [ngClass]="{
            'bg-primary': detailSchedule?.report?.status_report?.id === 'PROG',
            'bg-warning': detailSchedule?.report?.status_report?.id === 'FOLUP',
            'bg-danger': detailSchedule?.report?.status_report?.id === 'RJT',
            'bg-info': detailSchedule?.report?.status_report?.id === 'RPR',
            'bg-success': detailSchedule?.report?.status_report?.id === 'DONE',
            'bg-secondary':
              detailSchedule?.report?.status_report?.id === 'FIXED',
            'text-nowrap text-white text-center rounded-2 px-2 py-2': true
          }"
          style="max-width: fit-content"
        >
          {{
            detailSchedule?.report?.status_report.id === "DONE"
              ? "Selesai"
              : detailSchedule?.report?.status_report.name
          }}
        </small>
      </div>
    </div>
    <div class="row py-3 fw-medium">
      <div class="col-md-2 text-body-tertiary">Tanggal Diperbaiki</div>
      <div class="col-md-6">
        {{ detailSchedule?.created_at | date : "dd/MM/yyyy" }}
      </div>
    </div>
  </div>
  <hr class="mb-4 border-dark-subtle" />
  <h5 class="fw-semibold mb-2" *ngIf="!isPNGL()">Data Laporan</h5>
  <div>
    <div
      class=""
      *ngFor="let segmen of detailSchedule?.report?.segmens; let i = index"
    >
      <app-upload-image
        [detailedSegment]="segmen"
        [index]="i"
        [status_report]="detailSchedule.report.status_report"
      >
      </app-upload-image>
    </div>
  </div>
</div>
