
<div class="dashboardtabledata table-responsive">
  <!--Dashboard List-->
  <div class="table-options">
    <div class="custom-buttons">
      @if (permission && permission.includes('Ticket Delete')) {
        <button type="button" [disabled]="sendingResponse['massDelTic']" id="massdelete" (click)="deleteMassEmployee('massDelTic')"
          class="btn btn-outline-light btn-sm mb-4 me-2 d-inline-flex align-items-center"><i class="fe fe-trash me-1"></i><span>{{'Delete'|
        translate}}</span>@if (sendingResponse['massDelTic']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
      }</button>
    }
    <button aria-label="refresh" type="button" id="refreshdata" [ngbTooltip]="'Refresh' | translate" (click)="refreshTable()" class="btn btn-outline-light btn-sm mb-4">
      <i class="fe fe-refresh-cw"></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 ticketdeleterow dataTable " mat-table [dataSource]="tableDataSource" 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>
    <!-- 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">
        @if (row?.ticketnote.length) {
          <div class="ribbon ribbon-top-right text-warning">
            <span class="bg-warning text-white">{{'Note'| translate}}</span>
          </div>
        }
        @if (row?.ticketdraft.length) {
          <div class="ribbon ribbon-top-right1 text-secondary">
            <span class="bg-secondary text-white">{{'Draft'| 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>
        }
        @if (permission && permission['includes']('Ticket Edit')) {
          <a routerLink="/admin/ticket-view/{{row.enc_ticket_id}}" href="javascript:;" class="fs-14 d-block font-weight-semibold">{{row?.subject}}</a>
        } @else {
          <a href="javascript:;" class="fs-14 d-block font-weight-semibold">{{row?.subject}}</a>
        }
        <ng-template #subject>
          <a href="javascript:;" class="fs-14 d-block font-weight-semibold">{{row?.subject}}</a>
        </ng-template>

        <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: settimezone}}</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>

<!-- assignto Column -->
<ng-container matColumnDef="assignto">
  <th scope="col" mat-header-cell *matHeaderCellDef> {{'AssignTo'| translate}}
  </th>
  <td mat-cell *matCellDef="let row; let i = index">

    @if (permission && permission['includes']('Ticket Assign')) {
      @if (row?.status == 'Suspend' || row?.status == 'Closed') {
        <div class="btn-group" ngbDropdown>
          @if (row?.ticketassignmutliples.length && row?.selfassignuser_id == null) {
            @if (row?.ticketassignmutliples.length > 1) {
              <button disabled type="button" aria-label="button" class="btn btn-outline-primary dropdown-toggle btn-sm">{{'Multi Assign'}} <span class="caret"></span></button>
            } @else {
              <button disabled type="button" aria-label="button" class="btn btn-outline-primary dropdown-toggle btn-sm">{{ row?.ticketassignmutliples?.[0]?.toassignuser?.name}} <span class="caret"></span></button>
            }
          } @else {
            @if (!row?.ticketassignmutliples.length && row?.selfassignuser_id != null) {
              <button type="button" disabled class="btn btn-outline-primary" ngbDropdownToggle>{{row?.selfassign?.name}}
                ({{'self' | translate}}) <span class="caret"></span></button>
                <button type="button" disabled class="btn btn-outline-primary" placement="top" [ngbTooltip]="'Unassign' | translate"
                  aria-label="Unassign"><i class="fe fe-x"></i>@if (sendingResponse['multiAss'+i]) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                  }</button>
                } @else {
                  <button type="button" disabled class="btn btn-outline-primary" ngbDropdownToggle>{{'Assign' | translate}}<span class="caret"></span></button>
                }
              }
            </div>
          } @else {
            @if (!row?.ticketassignmutliples?.length && row?.selfassignuser_id == null) {
              <div class="btn-group" ngbDropdown>
                <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm" ngbDropdownToggle>{{'Assign' | translate}} <span
                class="caret"></span></button>
                <ul ngbDropdownMenu role="menu">
                  <li class="dropdown-plus-title">{{'Assign' | translate}} <b aria-hidden="true" class="fa fa-angle-up"></b></li>
                  <li>
                    <button class="btn" type="button" [disabled]="sendingResponse['self'+i]" href="javascript:void(0);"
                      (click)="SelfAssign(row, 'self'+i)">{{'Self Assign' |
                      translate}}@if (sendingResponse['self'+i]) {
                      <i class="fa fa-spinner fa-spin mx-1"></i>
                    }</button>
                  </li>
                  <li>
                    <button class="btn" type="button" href="javascript:void(0)" (click)="AssignTicket(content, row)">
                      {{'Other Assign' | translate}}
                    </button>
                  </li>
                </ul>
              </div>
            } @else {
              <div class="btn-group" ngbDropdown>
                @if (row?.ticketassignmutliples?.length && row?.selfassignuser_id == null) {
                  @if (row?.ticketassignmutliples.length > 1) {
                    <button type="button" aria-label="button" class="btn btn-outline-primary dropdown-toggle btn-sm" ngbDropdownToggle>{{'Multi Assign'}} <span class="caret"></span></button>
                    <a href="javascript:void(0)" class="btn btn-outline-primary btn-sm" (click)="unAssignSelf(row?.enc_id, 'multiAss'+i)"
                      [ngbTooltip]="'Unassign' | translate" aria-label="Unassign"><i class="fe fe-x"></i>
                      @if (sendingResponse['multiAss'+i]) {
                        <i class="fa fa-spinner fa-spin mx-1"></i>
                      }</a>
                    } @else {
                      <button type="button" aria-label="button" class="btn btn-outline-primary dropdown-toggle btn-sm" ngbDropdownToggle>{{ row?.ticketassignmutliples?.[0]?.toassignuser?.name}} <span class="caret"></span></button>
                      <a href="javascript:void(0)" class="btn btn-outline-primary btn-sm" (click)="unAssignSelf(row?.enc_id, 'multiAss'+i)"
                        [ngbTooltip]="'Unassign' | translate" aria-label="Unassign"><i class="fe fe-x"></i>
                        @if (sendingResponse['multiAss'+i]) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                        }</a>
                      }
                    } @else {
                      @if (!row?.ticketassignmutliples?.length && row?.selfassignuser_id != null) {
                        <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm" ngbDropdownToggle>{{row?.selfassign?.name}} ({{'self' |
                          translate}})
                          <span class="caret"></span></button>
                          <button type="button" [disabled]="sendingResponse['unAssign'+i]" href="javascript:void(0)" class="btn btn-outline-primary btn-sm"
                            (click)="unAssignSelf(row?.enc_id, 'unAssign'+i)" [ngbTooltip]="'Unassign' | translate" aria-label="Unassign"><i
                          class="fe fe-x"></i>@if (sendingResponse['unAssign'+i]) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                        }</button>
                      } @else {
                        <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm" ngbDropdownToggle>{{'Assign'}} <span
                        class="caret"></span></button>
                      }
                    }
                    <ul ngbDropdownMenu role="menu">
                      <li class="dropdown-plus-title">{{'Assign' | translate}} <b aria-hidden="true" class="fa fa-angle-up"></b></li>
                      <li>
                        <button class="btn" type="button" [disabled]="sendingResponse['self'+i]" href="javascript:void(0);"
                          (click)="SelfAssign(row, 'self'+i)">{{'Self Assign' |
                          translate}}@if (sendingResponse['self'+i]) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                        }</button>
                      </li>
                      <li>
                        <button class="btn" type="button" href="javascript:void(0)" (click)="AssignTicket(content, row)">{{'Other Assign' |
                        translate}}</button>
                      </li>
                    </ul>
                  </div>
                }
              }
            } @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>
              @if (permission && permission['includes']('Ticket Edit')) {
                @if (true) {
                  <a aria-label="view" (click)="showTicketDetails(row)" href="javascript:;" class="btn btn-sm action-btns"><i class="feather feather-eye text-primary"
                  placement="top" [ngbTooltip]="'View' | translate"></i></a>
                } @else {
                  ~
                }
              }
              @if (permission && permission['includes']('Ticket Delete')) {
                @if (true) {
                  <button aria-label="delete" type="button" [disabled]="sendingResponse['ticketDel'+i]" href="javascript:void(0)"
                    (click)="deleteTicket(row?.enc_id, 'ticketDel'+i)" class="btn btn-sm action-btns" id="show-delete"><i class="feather feather-trash-2 text-danger"
                  placement="top" [ngbTooltip]="'Delete' | translate"></i>@if (sendingResponse['ticketDel'+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;" [ngClass]="{
        'bg-success-transparent': row.replystatus == 'Replied',
        'bg-danger-transparent': row.ticketviolation == 'on'
      }"></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 ?? 1" [pageIndex]="paginator?.pageIndex ?? 1" [pageSize]="paginator?.pageSize ?? 10" [pageSizeOptions]="[10, 25, 50, 100]">
    </mat-paginator>
  </div>
  <!--Dashboard List-->
</div>



<!-- // Assignticket to agent modal start -->
<ng-template #content let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Other Assign'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <form #Otherassign="ngForm" (ngSubmit)="OtherAssign(Otherassign.value, 'otherAssign')">
    <div class="modal-body">
        <div class="custom-controls-stacked d-md-flex">
          <ng-select class="form-control" [items]="userDetails?.table_data" #select [placeholder]="'Select Agent' | translate" [loading]="!userDetails" [virtualScroll]="true" bindLabel="name"
            [multiple]="true" [searchable]="true" dropdownPosition="auto" bindValue="id" name="assigned_user_id" [ngModel]="assignedMem">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item?.name}}({{item?.roles[0]?.name}})</span></div>
            </ng-template>
          </ng-select>
        </div>
        <span id="AssignError" class="text-danger"></span>
    </div>
    <div class="modal-footer">
      <button [disabled]="sendingResponse['otherAssign']" type="submit" class="btn btn-secondary" id="btnsave">{{'Save' |
        translate}}@if (sendingResponse['otherAssign']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
      }</button>
    </div>
  </form>
</ng-template>
<!-- // Assignticket to agent modal end -->
