<admin-page-header [title]="'LiveChat Agent Report Details'" ></admin-page-header>

<!--Reports List-->
<div class="row">
  <div class="col-xl-3 col-lg-4 col-md-12">
    <div class="card user-pro-list overflow-hidden">
      <div class="card-body">
        <div class="user-pic text-center">
          <img [src]="users?.profileimage || './assets/images/user-profile.png'" class="avatar avatar-xxl brround" alt="" loading="lazy" decoding="async">
          <div class="pro-user mt-3">
            <h5 class="pro-user-username text-dark mb-1 fs-16">{{users?.name}}</h5>
            <h6 class="pro-user-desc text-muted fs-12">{{users?.email}}</h6>
            @if (users?.roles?.length) {
              <h6 class="pro-user-desc text-muted fs-12">{{users?.roles[0].name}}</h6>
            }
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title"> {{'Personal Details' | translate}}</h4>
      </div>
      <div class="card-body px-0 pb-0">
        <div class="table-responsive tr-lastchild">
          <table class="table mb-0 table-information">
            <tbody>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Employee ID' | translate}}:</span>
                </td>
                <td class="py-2 ps-4">{{users?.empid}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Name' | translate}}: </span>
                </td>
                <td class="py-2 ps-4">{{users?.name}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Role Name' | translate}}: </span>
                </td>
                <td class="py-2 ps-4">
                  @if (users?.roles?.length) {
                    {{users?.roles[0].name}}
                  }

                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Email' | translate}}: </span>
                </td>
                <td class="py-2 ps-4">{{users?.email}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Phone' | translate}}: </span>
                </td>
                <td class="py-2 ps-4">{{users?.phone}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Languages' | translate}}: </span>
                </td>
                <td class="py-2 ps-4">
                  <ul class="custom-ul">
                    @if (users?.languagues) {
                      @for (value of users?.languagues.split(','); track value) {
                        <li class="tag mb-1 me-1">
                          {{value}}
                        </li>
                      }
                    }
                  </ul>
                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50">{{'Skills' | translate}}: </span>
                </td>
                <td class="py-2 ps-4">
                  <ul class="custom-ul">
                    @if (users?.skills) {
                      @for (value of users?.skills.split(','); track value) {
                        <li class="tag mb-1 me-1">
                          {{value}}
                        </li>
                      }
                    }
                  </ul>
                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Location' | translate}}: </span>
                </td>
                <td class="py-2 ps-4">{{users?.country}}</td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
  <div class="col-xl-9 col-lg-8 col-md-12">
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Livechat Agent View Reports' | translate}}</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-vcenter text-nowrap table-bordered w-100 dataTable" 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="id"> {{'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>

              <!-- 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" class="ng-rating" [starTemplate]="t"  [max]="5" [readonly]="true"></ngb-rating>
                  </div>
                </td>

              </ng-container>
              <!-- Ticket Comment Column -->
              <ng-container matColumnDef="problemRectifiedt">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="ticketdata?.[0]?.ratingcomment"> {{'Ticket Comment' | translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                  {{row?.problemRectified}}
                </td>

              </ng-container>
              <!-- Ticket Customer Column -->
              <ng-container matColumnDef="feedBackData">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="ticketdata?.[0]?.customer?.username"> {{'Ticket Customer' | translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                 {{row?.feedBackData}}
                </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; let i = index">
                  <div class="btn-group">
                    @if (row?.ticketdata?.length) {
                      <button type="button" aria-label="Delete" [disabled]="sendingResponse['deleteagentReview'+i]" class="action-btns1 delete-report"
                        (click)="deleteagentReview(row.id, 'deleteagentReview'+i)" [ngbTooltip]="'Delete' | translate">
                        <i class="feather feather-trash-2 text-danger"></i>
                        @if (sendingResponse['deleteagentReview'+i]) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                        }
                      </button>
                    } @else {
                      ~
                    }
                  </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 showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]" (page)="onPaginateTable()"
              aria-label="Select page of users">
            </mat-paginator>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Reports List-->