<div class="p-4 rounded-3 bg-white">
  <h5 class="fw-semibold mb-3">Data Laporan Terbaru</h5>

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

  <ng-container *ngIf="dataSourceTotal > 0">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Tanggal</th>
            <th>No Tiket</th>
            <th>Nama Pelapor</th>
            <th *ngIf="auth.getLoggedUser().role.code !== 'SVEI'">Status</th>
            <th>No. HP</th>
            <th>Lokasi</th>
            <th *ngIf="auth.getLoggedUser().role.code !== 'SVEI'">Aksi</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let d of dataSource">
            <td>
              <ng-container *ngIf="auth.getLoggedUser().role.code === 'SVEI'">
                <td>
                  {{ d.survey_start_date | date : "dd/MM/yyyy"
                  }}{{
                    d.survey_end_date
                      ? "-" + (d.survey_end_date | date : "dd/MM/yyyy")
                      : ""
                  }}
                </td>
              </ng-container>

              <ng-container *ngIf="auth.getLoggedUser().role.code !== 'SVEI'">
                {{ d.created_at | date : "dd/MM/yyyy" }}
              </ng-container>
            </td>
            <td>13978383</td>
            <td>{{ d.user.fullname }}</td>
            <td *ngIf="auth.getLoggedUser().role.code !== 'SVEI'">
              <small
                [ngClass]="{
                  'bg-primary': d.status_report.id === 'PROG',
                  'bg-warning': d.status_report.id === 'FOLUP',
                  'bg-danger': d.status_report.id === 'RJT',
                  'bg-info': d.status_report.id === 'RPR',
                  'bg-success': d.status_report.id === 'DONE',
                  'bg-secondary': d.status_report.id === 'FIXED',
                  'text-nowrap text-white text-center rounded-2 px-2 py-2': true,
                  'd-block': true
                }"
              >
                {{
                  d.status_report.id === "DONE"
                    ? "Selesai"
                    : d.status_report.name
                }}
              </small>
            </td>
            <td>{{ d.user.phone }}</td>
            <td>
              {{
                d.segmens.length > 0
                  ? d.segmens[d.segmens.length - 1].segmen.name
                  : "-"
              }}
            </td>

            <td class="" *ngIf="auth.getLoggedUser().role.code !== 'SVEI'">
              <div class="d-flex">
                <button
                  class="btn btn-outline-primary me-2"
                  type="button"
                  (click)="goToDetail(d.id)"
                >
                  Detail
                </button>
                <button
                  *ngIf="auth.getLoggedUser().role.code === 'SADM'"
                  class="btn btn-outline-primary"
                  (click)="onDeleteData(d.id, d.user.fullname)"
                >
                  Hapus
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </ng-container>
</div>
