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


<!-- Customer List -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0 d-sm-max-flex flex-wrap">
      <h4 class="card-title">{{'Customers List' | translate}}</h4>
      <div class="card-options mt-sm-max-2 d-flex flex-wrap">
        @if (permission?.includes('Customers Create')) {
          <a routerLink="/admin/customer/create" class="btn btn-success me-3 mb-1"><i class="feather feather-user-plus me-1"></i>{{'Add Customer' | translate}}</a>
        }

        @if (permission?.includes('Customers Importlist')) {
          <a routerLink="/admin/customer/import-list" class="btn btn-info me-3 mb-1"><i class="feather feather-download me-1"></i>{{'Import Customer List' | translate}}</a>
        }
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive spruko-delete">
        <div class="table-options">
          <div class="custom-buttons">
            @if (permission?.includes('Customers Delete')) {
              <button type="button" [disabled]="sendingResponse['massDelCust']" (click)="deleteMassCustomers('massDelCust')" id="massdelete" class="btn btn-outline-light btn-sm mb-4 "><i class="fe fe-trash"></i>{{'Delete' |
              translate}}@if (sendingResponse['massDelCust']) {
              <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 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>
          <!-- 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>

          <!-- name Column -->
          <ng-container matColumnDef="name">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="username">
              {{ "Name" | translate }}
            </th>
            <td mat-cell *matCellDef="let row">
              @if (permission?.includes('Customers Login')) {
                <div>
                  <h5 class="d-inline">{{row.username?.slice(0,40)}}</h5>
                  @if (row?.voilated == 'on') {
                    <span class="badge badge-danger-light mx-1"><i class="fa fa-exclamation-triangle text-danger"></i> {{'Violation' | translate}}</span>
                  }
                  <a class="float-end" href="javascript:;" (click)="customerAdminLogin(row.enc_id)">
                    <span class="badge badge-success text-white f-12">{{'Login as' | translate}}</span>
                  </a>
                </div>
                <small class="fs-12 text-muted">
                  <span class="font-weight-normal1">{{row.email?.slice(0,40)}}</span>
                </small>
              } @else {
                <div>
                  <h5>{{row.username?.slice(0,40)}}</h5>
                </div>
                @if (row?.voilated == 'on') {
                  <span class="badge badge-danger-light mx-1"><i class="fa fa-exclamation-triangle text-danger"></i> {{'Violation' | translate}}</span>
                }
                <small class="fs-12 text-muted">
                  <span class="font-weight-normal1">{{row.email?.slice(0,40)}}</span>
                </small>
              }

            </td>
          </ng-container>
          <!-- User Type Column -->
          <ng-container matColumnDef="usertype">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="userType">
              {{ "User Type" | translate }}
            </th>
            <td mat-cell *matCellDef="let row">
              {{row.userType | translate}}
            </td>
          </ng-container>
          <!-- Verification Column -->
          <ng-container matColumnDef="verification">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="verified">
              {{ "Verification" | translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              @if (row.verified == '1') {
                {{'Verified' | translate}}
              } @else {
                {{'Unverified' | translate}}
              }
            </td>
          </ng-container>
          <!-- Register Date Column -->
          <ng-container matColumnDef="registerdate">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="created_at">
              {{ "Register Date" | translate }}
            </th>
            <td mat-cell *matCellDef="let row">
              {{row.created_at | date: dateformat}}
            </td>
          </ng-container>

          <!-- status Column -->
          <ng-container matColumnDef="status">
            <th scope="col" class="w-5" mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ "Status" | translate }}
            </th>
            <td mat-cell *matCellDef="let row">
              @if (row.status == 1) {
                <span class="badge badge-success">{{'Active' | translate}}</span>
              } @else {
                <span class="badge badge-danger">{{'Inactive' | 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; let i = index">
              <div class="btn-group">
                @if (permission?.includes('Customers Edit')) {
                  <button type="button" aria-label="edit" routerLink="/admin/customer/edit/{{row.enc_id}}" class="action-btns1" [ngbTooltip]="'Edit' | translate">
                    <i class="feather feather-edit text-primary"></i>
                  </button>
                }
                @if (permission?.includes('Customers Delete')) {
                  <button type="button" aria-label="delete" [disabled]="sendingResponse['DelCust'+i]" (click)="deleteCustomer(row, 'DelCust'+i)" href="javascript:void(0)" class="action-btns1" id="show-delete"
                    [ngbTooltip]="'Delete' | translate">
                    <i class="feather feather-trash-2 text-danger"></i>@if (sendingResponse['DelCust'+i]) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              }

              @if (row?.tickets_count > 0) {
                <a aria-label="view" routerLink="/admin/customer/tickethistory/{{row?.enc_id}}" class="action-btns1" [ngbTooltip]="'Tickets History' | translate">
                  <i class="feather-rotate-ccw text-primary"></i>
                </a>
              }

              @if (row?.verified != 1 && row?.userType == 'Customer') {
                <a aria-label="resend" href="javascript:void(0)" (click)="resendEmail(row)" id="resendverification" class="action-btns1"
                  [ngbTooltip]="'Send Verification Link' | translate">
                  <i class="feather feather-link text-primary"></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>

    </div>
  </div>
  <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>
<!-- End Customer List -->