
<div class="row">
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card mb-0">
      <div class="card-header border-0 d-flex">
        <h4 class="card-title">{{'Closed Tickets' | translate}}</h4>

      </div>
      <div class="card-body">
        <div class="table-responsive">
          <div class="dashboardtabledata table-responsive">
            <!--Dashboard List-->
            <div class="table-options">
              <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" mat-table [dataSource]="dataSource" matSort>
                <!-- Sno Column -->
                <ng-container matColumnDef="id">
                  <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>

                <!-- 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">
                    <div class="d-flex align-items-center">
                      <div class="">
                        <a routerLink="/customer/ticket-view/{{row.enc_ticket_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 | date : setting?.date_format : timezone}}
                          </li>


                          @if (row?.priority != null) {
<li class="ps-5 pe-2 preference preference-low" [ngClass]="[
                                                                      row?.priority == 'Low' ? 'preference-low' : '',
                                                                      row?.priority == 'High' ? 'preference-high' : '',
                                                                      row?.priority == 'Critical' ? 'preference-critical' : '',
                                                                      row?.priority == 'Medium' ? 'preference-medium' : ''
                                                                    ]" [ngbTooltip]="'Priority' | translate">
                              {{ row?.priority | translate }}
                            </li>
                          }

                          @if (row?.category_id != null) {
                            @if (row?.category != null) {
                              <li class="px-2 text-muted" [ngbTooltip]="'Category' | translate">
                                <i class="fe fe-grid me-1 fs-14"></i>{{
                                row?.category.name }}
                              </li>
                            }
                          }

                          @if (row?.enc_last_reply == null) {
                            <li class="px-2 text-muted" [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" [ngbTooltip]="'Last Replied' | translate"><i
                          class="fe fe-clock me-1 fs-14"></i>{{row?.enc_last_reply | dateAgo : timezone}}
                        </li>
                      }
                      @if (row?.purchasecodesupport != null) {
                        @if (row?.purchasecodesupport?.toLowerCase() == 'supported' || row?.purchasecodesupport == 'true') {
                          <li class="px-2 text-success font-weight-semibold">{{'Support Active' | translate}}</li>
                        } @else {
                          @if (row?.purchasecodesupport?.toLowerCase() == 'expired') {
                            <li
                            class="px-2 text-danger-dark font-weight-semibold"> {{'Support Expired' | translate}}</li>
                          } 
                        }
                      }
                    </ul>
                  </div>
                </div>
              </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' : '',
                                    row?.status == 'Suspend' ? 'badge-danger' : ''
                                  ]" class="badge">{{ row?.status | translate }}
                  </span>
                } 
              </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>
                  <a aria-label="View" routerLink="/customer/ticket-view/{{row.enc_ticket_id}}" href="javascript:;" class="btn btn-sm action-btns"><i
                  class="feather feather-eye text-primary" placement="top" [ngbTooltip]="'View' | translate"></i></a>
                </div>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr 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>
        <!--Dashboard List-->
      </div>
    </div>
  </div>
</div>
</div>
</div>