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

<!-- Groups List-->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0 d-sm-flex">
      <h4 class="card-title">{{'Groups List' | translate}}</h4>
      <div class="card-options d-sm-flex d-block">
        @if (permission?.includes('Groups Create')) {
          <a (click)="createGroupModel(createGroupContent)" class="btn btn-secondary me-3 mt-sm-0 mt-2"><i
          class="feather feather-users"></i> {{'Add Group' | translate}}</a>
        }

        @if (permission?.includes('Category Access')) {
          <a routerLink="/admin/categories/main-categories" class="btn btn-success me-3 mt-sm-0 mt-2"><i class="feather feather-cpu"></i>
        {{'Category Assign' | 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('Groups Delete')) {
            <button type="button" aria-label="button" [disabled]="sendingResponse['massDelGroup']" (click)="massDeleteGroups('massDelGroup')" id="massdeletenotify"
              class="btn btn-outline-light btn-sm mb-4 "><i class="fe fe-trash"></i> {{'Delete'
              | translate}}
              @if (sendingResponse['massDelGroup']) {
                <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="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>
                <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>

            <!-- Group name Column -->
            <ng-container matColumnDef="groupname">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="groupname"> {{'Group Name' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                {{row?.groupname.slice(0, 40)}}
              </td>

            </ng-container>

            <!-- count Column -->
            <ng-container matColumnDef="count">
              <th scope="col" mat-header-cell *matHeaderCellDef> {{'Count' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                <span class="badge badge-info">{{row?.groupsuser.length}}</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>
                  @if (permission?.includes('Groups Edit')) {
                    <button type="button" aria-label="button"  class="action-btns1"
                      (click)="editGroupDetails(editModal, row)"><i
                    class="feather feather-edit text-primary" [ngbTooltip]="'View' | translate"></i>
                  </button>
                }

                @if (permission?.includes('Groups Delete')) {
                  <button type="button" aria-label="button" [disabled]="sendingResponse['groupDel'+i]" (click)="deleteGroup(row, 'groupDel'+i)"
                    class="action-btns1 delete-category" id="show-delete"><i
                  class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                  @if (sendingResponse['groupDel'+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;"></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>

<!-- End Groups List-->



<!-- // Category model start -->
<ng-template #createGroupContent let-modal>
  <div class="modal-header">
    <h4 class="card-title">{{'Create Group' | translate}}</h4>
    <button type="button" aria-label="button" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #groupcreate="ngForm" (ngSubmit)="createGroup(groupcreate, 'createGroup')">
      <div class="form-group">
        <div class="row">
          <div class="col-xl-2 col-lg-2 col-md-3 col-sm-3 col-3">
            <label class="form-label d-flex align-items-center">{{'Name' | translate}} <span
            class="text-red ms-1">*</span> </label>
          </div>
          <div class="col-xl-10 col-lg-10 col-md-9 col-sm-9 col-9">

            <input type="text" class="form-control" name="groupname" #groupname="ngModel" required
              [ngModel]="groupObj['groupname']">
            @if ((groupname['touched'] || groupcreate.submitted) && groupname.errors?.['required']) {
              <span class="text-danger  alert-message"
                >
                {{'groupname is required' | translate}}
              </span>
            }
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-xl-2 col-lg-2 col-md-3 col-sm-3 col-3">
            <label class="form-label">{{'Select Employees' | translate}} <span
            class="text-red ms-1">*</span></label>
          </div>
          <div class="col-xl-10 col-lg-10 col-md-9 col-sm-9 col-9">
            <div class="custom-controls-stacked d-md-flex">
              <ng-select required class="form-control" [loading]="!employeeUserData" [items]="employeeUserData" #select [placeholder]="'Select Employee' | translate" [virtualScroll]="true"
                bindLabel="name" [multiple]="true" [searchable]="true" dropdownPosition="auto"
                bindValue="id" name="user_id" [ngModel]="null">
                <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>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
        translate}}</a>
        <button type="submit" [disabled]="groupcreate.invalid || sendingResponse['createGroup']" class="btn btn-secondary">{{'Save' | translate}}@if (sendingResponse['createGroup']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Category model end -->
<ng-template #editModal let-modal>
  <div class="modal-header">
    <h4 class="card-title">{{'Edit Group' | translate}}</h4>
    <button type="button" aria-label="button" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #groupedit="ngForm" (ngSubmit)="editGroup(groupedit, 'editGroup')">
      <input type="hidden" name="id" [ngModel]="groupObj['id']">
      <div class="form-group">
        <div class="row">
          <div class="col-xl-2 col-lg-2 col-md-3 col-sm-3 col-3">
            <label class="form-label d-flex align-items-center">{{'Name' | translate}} <span
            class="text-red ms-1">*</span> </label>
          </div>
          <div class="col-xl-10 col-lg-10 col-md-9 col-sm-9 col-9">

            <input type="text" class="form-control" name="groupname" #groupname="ngModel" required
              [ngModel]="groupObj['groupname']">
            @if ((groupname['touched'] || groupedit.submitted) && groupname.errors?.['required']) {
              <span class="text-danger  alert-message"
                >
                {{'groupname is required' | translate}}
              </span>
            }
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-xl-2 col-lg-2 col-md-3 col-sm-3 col-3">
            <label class="form-label">{{'Select Employees' | translate}} <span
            class="text-red ms-1">*</span></label>
          </div>
          <div class="col-xl-10 col-lg-10 col-md-9 col-sm-9 col-9">
            <div class="custom-controls-stacked d-md-flex">
              <ng-select required class="form-control"  [loading]="!employeeUserData"
                [items]="employeeUserData" #select [placeholder]="'Select Employee' | translate" [virtualScroll]="true"
                bindLabel="name" [multiple]="true" [searchable]="true" dropdownPosition="auto"
                bindValue="id" name="user_id" [ngModel]="groupObj['userId']">
                <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>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
        translate}}</a>
        <button type="submit" [disabled]="groupedit.invalid || sendingResponse['editGroup']" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['editGroup']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>