<div class="accordion mb-3" ngbAccordion>
  <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 }}
        <i
          class="bi bi-check2-circle"
          style="color: green"
          *ngIf="checkFoto()"
        ></i>
      </button>
    </h2>
    <div class="accordion-collapse collapse show" ngbAccordionCollapse>
      <div class="accordion-body" ngbAccordionBody>
        <ng-template>
          <div class="upload-foto">
            <div class="row py-3 fw-medium align-items-stretch">
              <div class="col-md-2 text-body-tertiary">Foto Sesudah</div>
              <span
                class="col-md-6"
                *ngIf="isPNGL() && imageFiles.length === 0"
              >
                Belum ada foto
              </span>
              <div class="col-md-6">
                <div>
                  <button
                    *ngIf="
                      !isPNGL() &&
                      status_report.id !== 'FIXED' &&
                      status_report.id !== 'DONE'
                    "
                    class="btn btn-outline-primary px-5 py-2 mb-2"
                    style="padding: 0.375rem 0.75rem; cursor: pointer"
                    (click)="open(content)"
                  >
                    Upload Gambar
                  </button>
                  <div class="uploader-wrapper">
                    <ng-template #content style="margin: auto">
                      <ngx-awesome-uploader
                        id="fileInput"
                        [id]="'fileInput' + index"
                        #uploader
                        [adapter]="adapter"
                        [fileMaxCount]="3"
                        [fileMaxSize]="7"
                        [uploadType]="'multi'"
                        [fileExtensions]="['jpg', 'jpeg', 'png']"
                        [accept]="'.jpg, .png .jpeg'"
                        (validationError)="onValidationError($event)"
                        (uploadSuccess)="uploadSuccess($event)"
                        (removeSuccess)="onRemoveSuccess($event)"
                        (fileAdded)="onFileAdded($event)"
                        [showPreviewContainer]="true"
                        [customValidator]="myCustomValidator"
                      >
                      </ngx-awesome-uploader>
                      <div class="dropzoneTemplate d-flex flex-row-reverse">
                        <button
                          [disabled]="!isUploadSuccessful"
                          type="button"
                          class="btn btn-primary my-2 me-4 mt-2"
                          (click)="closeModal()"
                        >
                          Oke
                        </button>
                      </div>
                    </ng-template>
                  </div>
                  <ng-template
                    #myItemTemplate
                    let-fileItem="fileItem"
                    let-uploadProgress="uploadProgress"
                  >
                    <div class="d-flex align-items-center">
                      <img
                        class="rounded-2"
                        style="width: 50px; height: 50px"
                        src="{{ fileItem.uploadResponse.data?.abs_path }}"
                        alt="{{ fileItem.fileName }}"
                      />
                      <div class="ms-2">
                        <p
                          style="
                            font-size: 15px;
                            color: #74809d;
                            margin: 0;
                            line-height: 1.1;
                            margin-bottom: 2px;
                          "
                        >
                          File Name: {{ fileItem.fileName }}
                        </p>
                        <p style="font-size: 14px; color: #74809d; margin: 0">
                          File Size: {{ fileItem.file.size }}
                        </p>
                      </div>
                    </div>
                  </ng-template>
                </div>
                <div class="col-md-10 d-flex">
                  <div *ngFor="let d of imageFiles; let i = index">
                    <div style="display: flex; align-items: flex-start">
                      <app-lightbox [data]="d" class="me-2"></app-lightbox>
                      <span
                        *ngIf="
                          !isPNGL() &&
                          status_report.id !== 'FIXED' &&
                          status_report.id !== 'DONE'
                        "
                        style="
                          cursor: pointer;
                          width: 19px;
                          height: 19px;
                          margin-top: 0.1rem;
                          margin-left: 0.1rem;
                          background-color: #b4b4b3;
                        "
                        class="d-flex align-items-center justify-content-center position-absolute rounded-circle ms-1 mt-1"
                      >
                        <i
                          (click)="removeFile(i)"
                          class="bi bi-trash-fill text-danger"
                          style="font-size: 14px"
                        ></i>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row py-3 fw-medium align-items-start">
              <div class="col-md-2 text-body-tertiary">Keterangan</div>
              <div
                class="col-md-10"
                *ngIf="isPNGL() || !isPNGL() || status_report.id !== 'FIXED'"
              >
                <ng-container *ngFor="let tes of note">
                  {{ tes.note ? tes.note : "-" }}
                </ng-container>
              </div>
              <div
                class="col-md-10"
                *ngIf="
                  !isPNGL() &&
                  status_report.id !== 'DONE' &&
                  status_report.id !== 'FIXED'
                "
              >
                <textarea
                  [disabled]="status_report.id === 'FOLUP'"
                  style="width: 100%"
                  class="form-control w-full"
                  id="textAreaExample1"
                  rows="4"
                  name="note"
                  [(ngModel)]="form.note"
                  [readonly]="
                    isPNGL() ||
                    status_report.id == 'DONE' ||
                    status_report.id == 'FIXED'
                  "
                  [placeholder]="
                    !isPNGL() && status_report.id == 'FIXED'
                      ? ''
                      : 'Masukan deskripsi keadaan sekarang..'
                  "
                ></textarea>
              </div>
            </div>
            <div
              class="d-flex justify-content-end"
              *ngIf="
                !isPNGL() &&
                status_report.id !== 'FIXED' &&
                status_report.id !== 'DONE'
              "
            >
              <button
                [disabled]="imageFiles.length == 0"
                class="btn btn-primary"
                type="submit"
                (click)="onSubmit()"
              >
                Submit
              </button>
            </div>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
</div>
