<admin-page-header [title]="'Ticket Reports'" ></admin-page-header>

<div class="col-xl-12 col-md-12 col-lg-12">
  <div class="card">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Reports'}}</h4>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <div class="table-options">
          <div class="custom-buttons">
          </div>
          <mat-form-field  class="pull-right">
            <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate" #input>
          </mat-form-field>
        </div>
        <div>
          @if (isloader) {
            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
          }
          <table class="table table-bordered border-bottom text-nowrap ticketdeleterow w-100 dataTable no-footer dtr-inline"
            mat-table [dataSource]="dataSource" matSort>

            <!-- Sno Column -->
            <ng-container matColumnDef="sno">
              <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Sl.No' | translate}}
              </th>
              <td mat-cell *matCellDef="let row; let i = index" class="wpx-40 text-center"> {{i + 1 + (paginator.pageIndex * paginator.pageSize)}}
              </td>
            </ng-container>

            <!-- name Column -->
            <ng-container matColumnDef="name">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'Name' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                <div class="media mt-0 align-items-center">
                    <img [src]="row?.profileimage || './assets/images/user-profile.png'"
                      class="avatar avatar-md rounded-circle me-3 my-auto" alt="" loading="lazy" decoding="async">
                  <div class="media-body">
                    <div class="d-flex align-items-center">
                      <div class="mt-0">
                        @if (row?.roles[0]?.length == null) {
                          <h5 class="mb-0 fs-13 font-weight-sembold text-dark">{{row?.name}}
                          </h5>
                          <small class="fs-12 text-muted"><span
                            class="font-weight-normal1"><b>({{row?.roles[0].name}})</b></span></small>
                          } @else {
                            <h5 class="mb-0 fs-13 font-weight-sembold text-dark">{{row?.name}}
                            </h5>
                          }
                        </div>
                      </div>
                    </div>
                  </div>
                </td>

              </ng-container>
              <!-- Rating Column -->
              <ng-container matColumnDef="rating">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="rating"> {{'Rating' | translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                  <div class="allemployeerating pt-1">
                    <ng-template #t let-fill="fill">
                      <span class="profilerating" [class.full]="fill === 100">
                        <span class="ratingstar" [style.width.%]="fill">&#x2605;</span>&#x2605;
                      </span>
                    </ng-template>
                    <ngb-rating [rate]="row?.rating"  [max]="5" [readonly]="true" [starTemplate]="t" ></ngb-rating>
                  </div>
                </td>

              </ng-container>
              <!-- Overall Rating Column -->
              <ng-container matColumnDef="overallrating">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="overallcount"> {{'Overall Rating' | translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                  {{row?.overallcount}}
                </td>

              </ng-container>
              <!-- Total Answered Ticket Column -->
              <ng-container matColumnDef="totalansweredticket">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="comentticketss"> {{'Total Answered Ticket' |
                  translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                  {{row?.comentticketss}}
                </td>

              </ng-container>


              <!-- Actions Column -->
              <ng-container matColumnDef="actions">
                <th scope="col" mat-header-cell *matHeaderCellDef> {{'Actions' | translate}} </th>
                <td mat-cell *matCellDef="let row">
                  <div class="btn-group">
                    <a aria-label="View" href="javascript:void(0)" routerLink="/admin/reports/employeedetails/{{row?.id}}"
                      routerLinkActive="router-link-active" class="action-btns1">
                      <i class="feather feather-eye text-primary" [ngbTooltip]="'View' | translate"></i>
                    </a>
                  </div>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr class="ticket-details-row"  mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

              <!-- Row shown when there is no matching data. -->
              <tr class="mat-row" *matNoDataRow>
                @if (!input.value.length) {
                  <td class="mat-cell text-center" colspan="12">
                    {{'No data Found'| translate}}
                  </td>
                } @else {
                  <td class="mat-cell text-center" colspan="12"> {{'No data matching the filter'| translate}} " {{input.value}} " </td>
                }
              </tr>
            </table>
            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]" (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length" [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize" >
            </mat-paginator>
          </div>
        </div>
      </div>
    </div>
  </div>