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

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0 d-md-max-block">
      <h4 class="card-title  mb-md-max-2">{{'Employees List' | translate}}</h4>
      <div class="card-options  d-md-max-block">
        @if (permission?.includes('Employee Create')) {
          <a routerLink="/admin/manage-roles/create-employee" class="btn btn-success me-3  mb-md-max-2 mw-12"><i class="feather feather-user-plus"></i> {{'Add Employee' | translate}}</a>
        }
        @if (permission?.includes('Employee Importlist')) {
          <a routerLink="/admin/manage-roles/employee-upload-list" class="btn btn-info me-3  mb-md-max-2 mw-12"><i class="feather feather-download"></i> {{'Import Employees 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('Employee Delete')) {
            <button type="button" [disabled]="sendingResponse['massDeleteEmp']" (click)="deleteMassEmployee('massDeleteEmp')" id="massdelete"
              class="btn btn-outline-light btn-sm mb-4 d-inline-flex align-items-center"><i class="fe fe-trash me-1"></i>
              {{'Delete'
              | translate}}@if (sendingResponse['massDeleteEmp']) {
              <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="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>
          <!-- Checkbox Column -->
          <ng-container matColumnDef="select">
            <th scope="col" mat-header-cell class="wpx-40 text-center" *matHeaderCellDef>
              @if (permission?.includes('Employee Delete')) {
                <mat-checkbox (change)="$event ? toggleAllRows() : null" [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
                </mat-checkbox>
              } @else {
                <mat-checkbox disabled>
                </mat-checkbox>
              }
            </th>
            <td mat-cell class="wpx-40 text-center" *matCellDef="let row">
              @if (Auth != row?.id && row?.id != 1) {
                @if (permission?.includes('Employee Delete')) {
                  <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                    [aria-label]="checkboxLabel(row)">
                  </mat-checkbox>
                } @else {
                  <mat-checkbox disabled [checked]="selection.isSelected(row)">
                  </mat-checkbox>
                }
              }
            </td>
          </ng-container>

          <!-- employeename Column -->
          <ng-container matColumnDef="employeename">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'Employee Name'| translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              <div>
                <a href="javascript:;" class="h5">{{row?.name?.slice(0, 40)}}</a>

              </div>
              <small class="fs-12 text-muted"> <span class="font-weight-normal1">{{row?.email?.slice(0,40)}}</span></small>
            </td>
          </ng-container>

          <!-- roles Column -->
          <ng-container matColumnDef="roles">
            <th scope="col" mat-header-cell *matHeaderCellDef> {{'Role'| translate}} </th>
            <td mat-cell *matCellDef="let row">
              @if (row?.roles.length) {
                <span>{{row?.roles?.[0]?.name?.slice(0, 40) }}</span>
              } @else {
                ~
              }
            </td>
          </ng-container>

          <!-- registerdate 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">
              <span class="badge badge-success-light">{{row?.created_at |
              date:'mediumDate'}}</span>
            </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; let i = index">
              @if (permission?.includes('Employee Edit')) {
                @if (Auth == 1) {
                  @if (Auth != row?.id) {
                    <label class="custom-switch form-switch mb-0">
                      <input [disabled]="sendingResponse['empEditStatus'+i]" type="checkbox" name="status" id="myonoffswitch{{row?.id}}" value="{{row?.status | translate}}"
                        (click)="statusEmployee(row.enc_id, row?.status, 'empEditStatus'+i)" class="custom-switch-input tswitch" [checked]="row?.status == 1 ? true : false">
                      <span class="custom-switch-indicator"></span>@if (sendingResponse['empEditStatus'+i]) {
                      <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                  </label>
                }
              } @else {
                @if (Auth != row?.id && row?.roles.length && row?.roles?.[0]?.name != 'superadmin') {
                  @if (permission?.includes('Employee Status')) {
                    <label class="custom-switch form-switch mb-0">
                      <input type="checkbox" name="status" id="myonoffswitch{{row?.id}}" value="{{row?.status | translate}}" class="custom-switch-input tswitch"
                        [checked]="row?.status == 1 ? 'true' : 'false'">
                      <span class="custom-switch-indicator"></span>
                    </label>
                  }
                }
              }
            }
          </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?.includes('Employee Edit')) {
                @if (Auth == '1' ) {
                  <button type="button" routerLink="/admin/manage-roles/edit-employee/{{row.enc_id}}" class="action-btns1" [ngbTooltip]="'Edit' | translate"><i
                  class="feather feather-edit text-primary"></i></button>
                } @else {
                  @if (row?.id != 1  && row?.roles?.[0]?.name != 'superadmin') {
                    <button type="button" routerLink="/admin/manage-roles/edit-employee/{{row.enc_id}}" class="action-btns1" [ngbTooltip]="'Edit' | translate"><i
                    class="feather feather-edit text-primary"></i></button>
                  }
                }
              }
              @if (permission?.includes('Employee Delete')) {
                @if (Auth == '1') {
                  @if (Auth != row?.id) {
                    <button type="button" [disabled]="sendingResponse['empEdit'+i]" class="action-btns1" id="show-delete" (click)="deleteEmployee(row?.enc_id, 'empEdit'+i)"
                      placement="top" [ngbTooltip]="'Delete' | translate"><i class="feather feather-trash-2 text-danger"></i>@if (sendingResponse['empEdit'+i]) {
                      <i
                      class="fa fa-spinner fa-spin mx-1"></i>
                    }</button>
                  }
                } @else {
                  @if (row?.id != 1 && row?.id != Auth && row?.roles?.[0]?.name != 'superadmin') {
                    <button type="button" [disabled]="sendingResponse['empEdit'+i]" class="action-btns1" id="show-delete" (click)="deleteEmployee(row?.enc_id, 'empEdit'+i)"
                      placement="top" [ngbTooltip]="'Delete' | translate"><i class="feather feather-trash-2 text-danger"></i>@if (sendingResponse['empEdit'+i]) {
                      <i
                      class="fa fa-spinner fa-spin mx-1"></i>
                    }</button>
                  }
                }
              }
              @if (permission?.includes('Reset Password')) {
                @if (Auth == '1') {
                  <button type="button" class="action-btns1" (click)="resetPopup(content, row?.enc_id)" id="reset-password" [ngbTooltip]="'Reset Password' | translate"><i
                  class="feather feather-lock text-info"></i></button>
                } @else {
                  @if (row?.id != 1 && row?.roles?.[0]?.name != 'superadmin') {
                    <button type="button" class="action-btns1" id="reset-password" (click)="resetPopup(content, row?.enc_id)" [ngbTooltip]="'Reset Password' | translate"><i
                    class="feather feather-lock text-info"></i></button>
                  }
                }
              }
            </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>
  </div>
</div>
</div>
</div>

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{'Change Password' | translate}}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #resetpswd="ngForm" (ngSubmit)="resetPassword(resetpswd, 'resetPswd')">
      <input type="hidden" name="sprukopasswordreset_id" class="sprukopasswordreset_id" [ngModel]="employeeId">

      <div class="modal-body p-0">
        <div class="form-group">
          <label class="form-label">{{'Password' | translate}}</label>
          <div class="input-group flex-nowrap">
            <input [type]="pswd ? 'password' : 'text'" class="form-control sprukopsdauto w-sm-auto w-100" [(ngModel)]="newPassword" name="resetpassword" #password="ngModel"
              [class.is-invalid]="password.invalid && password.touched" [placeholder]="'Password' | translate">
            <div class="input-group-text p-0">
              <button (click)="this.pswd = !this.pswd;" type="button" aria-label="show" class="btn btn-light-2  sprukovisipsd">
                <i class="fe" [ngClass]="{'fe-eye': pswd, 'fe-eye-off' : !pswd}"></i>
              </button>
              <button type="button" class="btn btn-light-2   br-br-5 br-tr-5 sprukogenratepsd" (click)="generatePswd()">{{'Generate Password' | translate}}</button>
            </div>
            @if ((password.invalid && password.touched) || password.dirty) {
              <div>
                @if (password.errors?.['required']) {
                  <small class="text-danger">{{'Password is required' | translate}}</small>
                }
              </div>
            }
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button [disabled]="sendingResponse['resetPswd'] || resetpswd.invalid" type="submit" class="btn btn-secondary">{{'Save' | translate}}@if (sendingResponse['resetPswd']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>