<admin-page-header [title]="'Trashed Tickets'"></admin-page-header>

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Trashed Tickets' | translate}}</h4>
    </div>
    <div class="card-body">
      <div class="table-responsive spruko-delete">
        <div class="">
        </div>
        <div class="table-options">
          <div class="custom-buttons">
            @if (permission?.includes('Ticket Delete')) {
              <button type="button" (click)="massDeleteTicketPermanent('massDeleteTicketPermanent')" [disabled]="sendingResponse['massDeleteTicketPermanent']" id="massdelete" class="btn btn-outline-light btn-sm mb-4 ticketdeleterow me-2"><i
              class="fe fe-trash"></i>
              {{'Delete' | translate}}@if (sendingResponse['massDeleteTicketPermanent']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }</button>
          }
          <button type="button" (click)="massRestoreDelete('massRestoreDelete')" [disabled]="sendingResponse['massRestoreDelete']" id="massrestore" class="btn btn-outline-light btn-sm mb-4 ticketdeleterow"><i
          class="feather feather-rotate-ccw"></i> {{'Restore' | translate}}@if (sendingResponse['massRestoreDelete']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </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 w-100 dataTable " mat-table [dataSource]="dataSource" matSort>

        <!-- Sno Column -->
        <ng-container matColumnDef="id">
          <th scope="col" mat-header-cell class="wpx-40 text-center" *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>
        <!-- Checkbox Column -->
        <ng-container matColumnDef="select">
          <th scope="col" mat-header-cell class="wpx-40 text-center" *matHeaderCellDef>
            <mat-checkbox (change)="$event ? toggleAllRows() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"
              [aria-label]="checkboxLabel()">
            </mat-checkbox>
          </th>
          <td mat-cell class="wpx-40 text-center" *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
              [aria-label]="checkboxLabel(row)">
            </mat-checkbox>
          </td>
        </ng-container>

        <!-- ticketdetails Column -->
        <ng-container matColumnDef="ticketdetails">
          <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="subject"> {{'Ticket Details' | translate}}
          </th>
          <td mat-cell *matCellDef="let row" class="overflow-hidden ticket-details">
            {{row?.ticketdetails}}
            @if (row?.ticketnote.length) {
              <div class="ribbon ribbon-top-right text-warning">
                <span class="bg-warning text-white">{{'Note'| translate}}</span>
              </div>
            }
            @if (row?.overduestatus) {
              <div class="ribbon ribbon-top-right1 text-danger">
                <span class="bg-danger text-white">{{row?.overduestatus | translate}}</span>
              </div>
            }

            <a routerLink="/admin/trashed-tickets/view/{{row?.id}}" class="fs-14 d-block font-weight-semibold">{{row?.subject}}</a>

            <ul class="fs-13 font-weight-normal d-flex custom-ul">
              <li class="pe-2 text-muted">#{{row?.ticket_id}}</li>
              <li class="px-2 text-muted"><i class="fe fe-calendar me-1 fs-14"></i>
            {{row?.created_at  | custtimezone : setting?.date_format : undefined : timezone ?? 'UTC' }}</li>

            @if (row?.priority) {
                                        <li [ngClass]="[row?.priority == 'Low' ? 'preference-low' : '',
                                            row?.priority == 'High' ? 'preference-high' : '',
                                            row?.priority == 'Critical' ? 'preference-critical' : '',
                                            row?.priority == 'Medium' ? 'preference-medium' : '']" class="ps-5 pe-2 preference " placement="top" [ngbTooltip]="'Priority' | translate">
              {{row?.priority | translate}}</li>
            } @else {
              ~
            }
            @if (row?.category_id) {
              @if (row?.category_id) {
                <li class="px-2 text-muted" placement="top" [ngbTooltip]="'Category' | translate"><i class="fe fe-grid me-1 fs-14"></i>{{row?.category?.name}}</li>
              } @else {
                ~
              }
            } @else {
              ~
            }

            @if (!row?.enc_last_reply) {
              <li class="px-2 text-muted" placement="top" [ngbTooltip]="'Last Replied' | translate"><i class="fe fe-clock me-1 fs-14"></i>{{row?.created_at |
            dateAgo : timezone}}</li>
          } @else {
            <li class="px-2 text-muted" placement="top" [ngbTooltip]="'Last Replied' | translate"><i class="fe fe-clock me-1 fs-14"></i>{{row?.enc_last_reply | dateAgo : timezone}}</li>
          }


          @if (row?.purchasecodesupport) {
            @if (row?.purchasecodesupport?.toLowerCase()== 'supported' || row?.purchasecodesupport == 'true') {
              <li class="px-2 text-success font-weight-semibold">{{'Support Active' |
                translate}}
              </li>
            }
            @if (row?.purchasecodesupport?.toLowerCase()== 'expired') {
              <li class="px-2 text-danger-dark font-weight-semibold">{{'Support Expired' |
              translate}}</li>
            }
          }
        </ul>
      </td>

    </ng-container>

    <!-- user Column -->
    <ng-container matColumnDef="user">
      <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="cust.username"> {{'User' | translate}} </th>
      <td mat-cell *matCellDef="let row">
        @if (row?.cust) {
          {{row?.cust.username}}
        }@if (row?.cust?.voilated == 'on') {
          <i class="fa fa-exclamation-triangle text-danger"></i>
      }
      </td>
    </ng-container>

    <!-- status Column -->
    <ng-container matColumnDef="status">
      <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Status' | translate}} </th>
      <td mat-cell *matCellDef="let row">
        @if (row?.status !== null) {
                                    <span [ngClass]="[row?.status == 'New' ? 'badge-burnt-orange' : '',
                                        row?.status == 'Re-Open' ? 'badge-teal' : '',
                                        row?.status == 'Inprogress' ? 'badge-info' : '',
                                        row?.status == 'On-Hold' ? 'badge-warning' : '',
                                        row?.status == 'Closed' ? 'badge-danger' : '',
                                        row?.status == 'Suspend' ? 'badge-danger' : '',
                                                                ]" class="badge ">{{row?.status | translate}}
          </span>
        } @else {
          ~
        }
      </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>
          <button type="button" aria-label="view" class="action-btns1" x routerLink="/admin/trashed-tickets/view/{{row.id}}"><i class="feather feather-eye text-info"
          [ngbTooltip]="'View' | translate"></i></button>
          <button type="button" aria-label="Delete"  [disabled]="sendingResponse['deleteTicketPermanent'+i]" (click)="deleteTicketPermanent(row, 'deleteTicketPermanent'+i)" class="action-btns1" id="show-delete"><i class="feather feather-trash-2 text-danger"
          [ngbTooltip]="'Delete' | translate"></i>@if (sendingResponse['deleteTicketPermanent'+i]) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
        <button type="button" aria-label="restore"  [disabled]="sendingResponse['restoreDelete'+i]" (click)="restoreDelete(row, 'restoreDelete'+i)" class="action-btns1" id="show-restore"><i class="feather feather-rotate-ccw text-success"
        [ngbTooltip]="'Restore' | translate"></i>@if (sendingResponse['restoreDelete'+i]) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
      }</button>
    </div>
  </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="row?.ticketviolation == 'on' ? 'bg-danger-transparent' : ''"></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 (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length" [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize"  [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

</div>
</div>
</div>
</div>
</div>