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

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0 d-sm-max-flex ">
      <h4 class="card-title">{{'Subcategory List' | translate}}</h4>
      <div class="card-options mt-sm-max-2">
        @if (permission?.includes('Subcategory Create')) {
          <a href="javascript:void(0)" (click)="createCategoryModel(createCategory)" class="btn btn-secondary me-3" id="create-new-subcategory">{{'Add SubCategory'|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('Subcategory Delete')) {
              <button  type="button" aria-label="delete" [disabled]="sendingResponse['massDelSubCat']" id="massdelete" (click)="massDeleteCategory('massDelSubCat')" 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['massDelSubCat']) {
              <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> {{'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>

          <!-- categoryname Column -->
          <ng-container matColumnDef="subcategoryname">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Subcategory Name' | translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              {{row?.subcategoryname}}
            </td>

          </ng-container>

          <!-- ParentCategorylist Column -->
          <ng-container matColumnDef="parentCategorylist">
            <th scope="col" mat-header-cell *matHeaderCellDef> {{'Parent Category list' |
              translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              @if (row?.subcategorylist) {
                @for (item of row.subcategorylist; track item.category_id) {
                  <span class="badge badge-info-light me-1">
                    @for (cat of category; track cat.id) {
                      @if (cat.id === item?.category_id) {
                        {{cat?.name}}
                      }
                    }
                  </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">
              @if (permission?.includes('Category Edit')) {
                <label class="custom-switch form-switch mb-0">
                  <input type="checkbox" name="status" (click)="categorycategoriesStatusChange(row)" id="myonoffswitch{{row?.id}}"
                    [value]="row?.status" 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('Subcategory Edit')) {
                  <button aria-label="edit" class="action-btns1 edit-subcategory" (click)="editCategoriesDetails(editModal, row)"><i class="feather feather-edit text-primary"
                  [ngbTooltip]="'Edit' | translate"></i></button>
                }
                @if (permission?.includes('Subcategory Delete')) {
                  <button  type="button" aria-label="delete" [disabled]="sendingResponse['subCatDel'+i]" (click)="deleteCategories(row, 'subCatDel'+i)" class="action-btns1 delete-subcategory" id="show-delete"><i
                  class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>@if (sendingResponse['subCatDel'+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>


<!-- // Category model start -->
<ng-template #createCategory let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Create Subcategory' | translate}}</h5>
    <button  type="button" aria-label="delete" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #subcategorycreate="ngForm" (ngSubmit)="subcategoryCreate(subcategorycreate, 'subCatCreate')">

      <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="subcategoryname" #subcategoryname="ngModel" required [ngModel]="newCategory['subcategoryname']">
            @if ((subcategoryname['touched'] || subcategorycreate.submitted) && subcategoryname.errors?.['required']) {
              <span class="text-danger  alert-message">
                {{'Name is required' | translate}}
              </span>
            }
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-xl-2 col-md-12">
            <label class="form-label d-flex align-items-center me-6 text-nowrap">{{'Parent Category' | translate}}
            </label>
          </div>
          <div class="col-xl-10 col-md-12">
            <ng-select class="form-control" [items]="allcategories" #select [placeholder]="'Select category' | translate" [virtualScroll]="true" [loading]="!allcategories" bindLabel="name" [multiple]="true" [searchable]="true" dropdownPosition="auto" bindValue="id" name="parent_id" [(ngModel)]="parentId">
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item.name}}</span></div>
              </ng-template>
            </ng-select>
          </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 pe-1 me-6">{{'Status :' | translate}}</label>
          </div>
          <div class="col-xl-10 col-lg-10 col-md-9 col-sm-9 col-9">
            <span class="onoffswitch2">
              <input type="checkbox" [ngModel]="newCategory['status']" name="status" id="myonoffswitch18" class=" toggle-class onoffswitch2-checkbox" value="1">
              <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
            </span>
          </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]="subcategorycreate.invalid || sendingResponse['subCatCreate']" class="btn btn-secondary" id="btnsave">{{'Save' | translate}}@if (sendingResponse['subCatCreate']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Category model end -->
<!-- // Category model start -->
<ng-template #editModal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Edit Subcategory' | translate}}</h5>
    <button  type="button" aria-label="delete" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #editSubCategory="ngForm" (ngSubmit)="subcategoryEdit(editSubCategory, 'subCatEdit')">
      <input type="hidden" name="subcategory_id" [ngModel]="newCategory['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="subcategoryname" #subcategoryname="ngModel" required [ngModel]="newCategory['subcategoryname']">
            @if ((subcategoryname['touched'] || editSubCategory.submitted) && subcategoryname.errors?.['required']) {
              <span class="text-danger  alert-message">
                {{'Name is required' | translate}}
              </span>
            }
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-xl-2 col-md-12">
            <label class="form-label d-flex align-items-center me-6 text-nowrap">{{'Parent Category' | translate}}
            </label>
          </div>
          <div class="col-xl-10 col-md-12">
            <ng-select class="form-control" [items]="allcategories" #select [placeholder]="'Select category' | translate" [virtualScroll]="true" [loading]="!allcategories" bindLabel="name" [multiple]="true" [searchable]="true" dropdownPosition="auto" bindValue="id" name="parent_id" [(ngModel)]="parentId">
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item.name}}</span></div>
              </ng-template>
            </ng-select>
          </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 pe-1 me-6">{{'Status :' | translate}}</label>
          </div>
          <div class="col-xl-10 col-lg-10 col-md-9 col-sm-9 col-9">
            <span class="onoffswitch2">
              <input type="checkbox" [ngModel]="newCategory['status']" name="status" id="myonoffswitch18" class=" toggle-class onoffswitch2-checkbox" value="1">
              <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
            </span>
          </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]="editSubCategory.invalid || sendingResponse['subCatEdit']" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['subCatEdit']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Category model end -->