<div
  class="accordion mb-3"
  ngbAccordion
  id="changeType"
  [id]="'changeType' + index"
>
  <div
    class="accordion-item border-0"
    ngbAccordionItem
    [collapsed]="true"
    style="background: #eef0fd"
  >
    <h2 class="accordion-header" ngbAccordionHeader>
      <button
        class="accordion-button fw-bolder"
        ngbAccordionButton
        style="background: #eef0fd"
      >
        Segmen Jalan {{ index + 1 }}
      </button>
    </h2>
    <div class="accordion-collapse collapse show" ngbAccordionCollapse>
      <div class="accordion-body" ngbAccordionBody>
        <ng-template>
          <div class="data-pelapor">
            <div
              class="content bg-light px-4 py-3"
              *ngIf="show && statusLaporan === 'PROG'"
            >
              <div class="d-flex" style="align-items: center">
                <i class="bi bi-gear me-2"></i>
                <div style="color: #1b1d21">Sistem Rekomendasi</div>
              </div>
              <div class="ms-0 ms-lg-4 ms-md-4 mt-2">
                <button
                  class="btn btn-outline-primary my-2"
                  (click)="fetchImageAndDisplay()"
                  [disabled]="isLoading"
                >
                  <i class="bi bi-lightbulb"></i>
                  Gunakan AI
                </button>
                <div
                  class="my-3 d-lg-flex d-md-flex align-items-center"
                  *ngIf="isLoading"
                >
                  <div
                    class="spinner-border text-primary me-3 py-auto"
                    role="status"
                  >
                    <span class="visually-hidden">Loading...</span>
                  </div>
                  <div class="loading-information">
                    <h6 class="font-weight-bold">
                      Proses validasi kerusakan...
                    </h6>
                    <p class="text-body-tertiary">
                      Tunggu sebentar lagi, dalam proses validasi gambar
                      kerusakan jalan.
                    </p>
                  </div>
                </div>
                <div class="recomend" *ngIf="showRecommend">
                  <p
                    class="text-body-tertiary text-justify"
                    style="text-align: justify"
                  >
                    Jenis kerusakan dan tipe kerusakan berdasarkan gambar
                    tersebut yang benar adalah :
                  </p>
                  <div
                    class="d-block d-lg-flex d-md-flex d-sm-flex mb-2 mb-lg-0 mb-md-0 mb-sm-0"
                  >
                    <span style="color: #1b1d21">Jenis Kerusakan :&nbsp;</span>
                    <span class="text-body-tertiary">{{ type_predict }}</span>
                  </div>
                  <div
                    class="d-block d-lg-flex d-md-flex d-sm-flex mb-2 mb-lg-0 mb-md-0 mb-sm-0"
                  >
                    <span style="color: #1b1d21"
                      >Tingkat Kerusakan :&nbsp;</span
                    >
                    <span class="text-body-tertiary">{{ level_predict }}</span>
                  </div>
                </div>
              </div>
              <div
                class="d-block d-lg-flex d-md-flex d-sm-flex ms-0 ms-lg-4 ms-md-4 my-3"
                *ngIf="showRecommend"
              >
                <div
                  class="me-3 text-primary fw-bolder text-left"
                  style="cursor: pointer"
                  (click)="changeDetailBasedOnRecommendation()"
                >
                  Ganti Data Sekarang
                </div>
                <div
                  class="secondary-text fw-bolder text-left"
                  style="cursor: pointer"
                  (click)="laterRecomend()"
                >
                  Nanti
                </div>
              </div>
            </div>
            <div class="row py-3 fw-medium d-md-flex">
              <div class="col-md-3 text-body-tertiary">Jenis Kerusakan</div>
              <div class="col-md-8">{{ segmenType }}</div>
              <div class="col-md-1" *ngIf="isPNGL()">
                <i
                  *ngIf="statusLaporan === 'PROG'"
                  id="changeType"
                  [id]="'changeType' + index"
                  class="bi bi-pencil-square"
                  style="
                    width: 24px;
                    height: 24px;
                    color: black;
                    cursor: pointer;
                  "
                  (click)="onType(segmentData.id)"
                ></i>
              </div>
            </div>
            <div class="row py-3 fw-medium">
              <div class="col-md-3 text-body-tertiary">Tingkat Kerusakan</div>
              <div class="col-md-6">{{ segmenLevel }}</div>
            </div>
            <div class="row py-3 fw-medium">
              <div class="col-md-3 text-body-tertiary">Nama</div>
              <div class="col-md-6">{{ segmentData?.segmen?.name }}</div>
            </div>
            <div class="row py-3 fw-medium">
              <div class="col-md-3 text-body-tertiary">
                Latitude & Longitude
              </div>
              <div class="col-md-8">
                <span>
                  [
                  {{ coordinates[1] }}
                  ] ,
                </span>
                <br class="d-lg-none d-md-none d-sm-none" />
                <span>
                  [
                  {{ coordinates[0] }}
                  ]
                </span>
              </div>
            </div>
            <div class="row py-3 fw-medium">
              <div class="col-md-3 text-body-tertiary">Panjang</div>
              <div class="col-md-6">
                {{
                  segmentData.segmen.length
                    ? (segmentData.segmen.length | number : "1.2-2")
                    : "-"
                }}
                m
              </div>
            </div>
            <div class="row py-3 fw-medium">
              <div class="col-md-3 text-body-tertiary">Foto</div>
              <div class="col-md-6 d-flex gap-2">
                <div *ngFor="let photo of segmentData.photos">
                  <app-lightbox
                    class="d-flex rounded-2 me-2"
                    [data]="photo"
                    style="cursor: pointer"
                  >
                  </app-lightbox>
                </div>
              </div>
            </div>
            <div>
              <!-- <div class="row py-3">
                <div class="col-md-9">
                  <h5 class="fw-semibold mb-2">Estimasi Kebutuhan Material</h5>
                </div>
                <div class="col-md-3 d-flex justify-content-end">
                  <i
                    class="bi bi-pencil-square"
                    style="
                      width: 24px;
                      height: 24px;
                      color: black;
                      cursor: pointer;
                    "
                  ></i>
                </div>
              </div>
              <div class="row py-3 fw-medium">
                <div class="col-md-3 text-body-tertiary">Batu Koral</div>
                <div class="col-md-6">-</div>
              </div> -->
              <app-map
                [allowDragging]="true"
                [showOption]="false"
                [showStatus]="false"
                [polylineData]="segmentData"
              ></app-map>
            </div>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
</div>
