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

<!--Category List -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0 d-sm-flex d-block">
      <h4 class="card-title">{{'Category List' | translate}}</h4>
      <div class="card-options mt-sm-max-2 d-sm-flex d-block">
        @if (permission?.includes('Category Create')) {
          <a href="javascript:void(0)" (click)="createCategoryModel(createCategory)" class="btn btn-secondary me-3 mb-sm-0 mb-2" id="create-new-testimonial">{{'Add Category' |
          translate}}</a>
        }

        @if (setting?.ENVATO_ON == 'on') {
          <button type="button" (click)="assignEnvato(envatoAssign)" class="btn btn-info mb-sm-0 mb-2" id="envatoapiassign">{{'Envato Api Assign' |
          translate}}</button>
        }
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive spruko-delete">
        <div class="table-options">
          <div class="custom-buttons">
            @if (permission?.includes('Category Delete')) {
              <button type="button" [disabled]="sendingResponse['massDelCat']" id="massdelete" (click)="massDeleteCategory('massDelCat')"
                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['massDelCat']) {
                <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="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">
                
                @if (permission?.includes('Category Delete') && !row?.groupscategoryc.length) {
                  <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="categoryname">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'Category Name' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                {{row?.name}}
              </td>

            </ng-container>

            <!-- ticketknowledge Column -->
            <ng-container matColumnDef="ticketknowledge">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="display"> {{'Ticket/Knowledge' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                {{row?.display}}
              </td>

            </ng-container>

            <!-- assigntogroups Column -->
            <ng-container matColumnDef="assigntogroups">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Assign To Groups' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                @if ((row?.display == 'ticket' || row?.display == 'both' || row?.display == 'all') && permission?.includes('Category Assign To Groups')) {
                  <a href="javascript:void(0)" (click)="GroupAssignModel(row, groupAssign )" id="assigneds{{row?.id}}" class="badge badge-pill badge-info mt-2"
                    [ngbTooltip]="'Assignto group' | translate">
                    {{row?.groupscategoryc.length}}
                  </a>
                } @else {
                  ~
                }
              </td>
            </ng-container>

            <!-- assignedpriority Column -->
            <ng-container matColumnDef="assignedpriority">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="priority"> {{'Assigned Priority' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                @if (row?.priority !== null) {
                                    <span [ngClass]="[row?.priority == 'Low' ? 'badge-success-light' : '',
                                    row?.priority == 'High' ? 'badge-danger-light' : '', 
                                    row?.priority == 'Critical' ? 'badge-danger-dark' : '', 
                                    row?.priority !== 'Critical' && row?.priority !== 'High' && row?.priority !== 'Low' ? 'badge-warning-light' : '',
                                    ]" class="badge ">
                    {{row?.priority | translate}}
                  </span>
                } @else {
                  ~
                }
              </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" (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('Category Edit')) {
                    <button type="button" aria-label="edit" class="action-btns1" (click)="editCategoriesDetails(editModal, row)"><i class="feather feather-edit text-primary"
                    [ngbTooltip]="'Edit' | translate"></i></button>
                  }
                  @if (permission?.includes('Category Delete') && !row?.groupscategoryc.length) {
                    <button type="button" aria-label="delete" [disabled]="sendingResponse['catDel'+i]" (click)="deleteCategories(row, 'catDel'+i)"
                      class="action-btns1 delete-category" id="show-delete"><i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>@if (sendingResponse['catDel'+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>
<!-- List Category List -->


<!-- // Category model start -->
<ng-template #createCategory let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Create Category' | translate}}</h5>
    <a href="javascript:;" class="btn-close" (click)="modal.dismiss('Cross click')"></a>
  </div>
  <div class="modal-body">
    <form #categorycreate="ngForm" (ngSubmit)="categoryCreate(categorycreate.value, 'createCat')">

      <div class="form-group">
        <div class="row">
          <div class="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-9">
            <input type="text" class="form-control" name="name" #name="ngModel" required [ngModel]="newCategory['name']">
            @if ((name['touched'] || categorycreate.submitted) && name.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-3">
            <label class="form-label text-nowrap">{{'View On' | translate}} <span class="text-red">*</span> :</label>
          </div>
          <div class="col-9 custom-controls-stacked d-md-flex  d-md-max-block">
            <label class="custom-control form-radio success me-4">
              <input type="radio" class="custom-control-input display" #display="ngModel" required [ngModel]="newCategory['display']" id="display" name="display" value="all"
                (click)="priorityFn('all')">
              <span class="custom-control-label">{{'View On All' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input type="radio" class="custom-control-input display" #display="ngModel" required [ngModel]="newCategory['display']" id="display1" name="display" value="ticket"
                (click)="priorityFn('ticket')">
              <span class="custom-control-label">{{'View On Tickets' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input type="radio" class="custom-control-input display" #display="ngModel" required [ngModel]="newCategory['display']" id="display2" name="display" value="knowledge"
                (click)="priorityFn('knowledge')">
              <span class="custom-control-label">{{'View On Knowledge' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input type="radio" class="custom-control-input display" #display="ngModel" required [ngModel]="newCategory['display']" id="display3" name="display" value="emailToTicket"
                (click)="priorityFn('emailToTicket')">
              <span class="custom-control-label">{{'View On Email To Ticket' | translate}}</span>
            </label>
          </div>
          @if ((display['touched'] || categorycreate.submitted) && display.errors?.['required']) {
            <span id="displayError" class="text-danger  alert-message">
              {{'View On is required' | translate}}
            </span>
          }
        </div>
      </div>

      @if (Priority) {
        <div id="priority_hide">
          <div class="form-group">
            <div class="row">
              <div class="col-3">
                <label class="form-label">{{'Choose Priority :' | translate}}</label>
              </div>
              <div class="col-9 custom-controls-stacked d-md-flex  d-md-max-block">
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input" [ngModel]="newCategory['priority']" name="priority" value="Low">
                  <span class="custom-control-label">{{'Low' | translate}}</span>
                </label>
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input " [ngModel]="newCategory['priority']" name="priority" value="Medium">
                  <span class="custom-control-label">{{'Medium' | translate}}</span>
                </label>
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input " [ngModel]="newCategory['priority']" name="priority" value="High">
                  <span class="custom-control-label">{{'High' | translate}}</span>
                </label>
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input" [ngModel]="newCategory['priority']" name="priority" value="Critical">
                  <span class="custom-control-label">{{'Critical' | translate}}</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      }

      <div class="form-group">
        <div class="row">
          <div class="col-3">
            <label class="form-label text-nowrap pe-1 me-6">{{'Status :' | translate}}</label>
          </div>
          <div class="col-9">
            <span class="onoffswitch2">
              <input type="checkbox" [ngModel]="newCategory['status']" name="status" id="myonoffswitchstatus" class=" toggle-class onoffswitch2-checkbox" value="newCategory['status']"
                [checked]="newCategory['status'] == '1'? true : false">
              <label for="myonoffswitchstatus" 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 [disabled]="sendingResponse['createCat']" type="submit" class="btn btn-secondary" id="btnsave">{{'Save' |
          translate}}@if (sendingResponse['createCat']) {
          <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 Category' | translate}}</h5>
    <a href="javascript:;" class="btn-close" (click)="modal.dismiss('Cross click')"></a>
  </div>
  <div class="modal-body">
    <form #editCategory="ngForm" (ngSubmit)="categoryEdit(editCategory, 'editCat')">

      <input type="hidden" name="testimonial_id" [ngModel]="newCategory['id']">
      <div class="form-group">
        <div class="row">
          <div class="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-9">
            <input type="text" class="form-control" name="name" #name="ngModel" required [ngModel]="newCategory['name']">
            @if ((name['touched'] || editCategory.submitted) && name.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-3">
            <label class="form-label text-nowrap">{{'View On' | translate}}: <span class="text-red">*</span></label>
          </div>
          <div class="col-9 custom-controls-stacked d-md-flex  d-md-max-block">
            <label class="custom-control form-radio success me-4">
              <input type="radio" class="custom-control-input display" #display="ngModel" required [ngModel]="newCategory['display']" name="display" value="all"
                (click)="priorityFn('all')">
              <span class="custom-control-label">{{'View On All' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input type="radio" class="custom-control-input display" #display="ngModel" required [ngModel]="newCategory['display']" name="display" value="ticket"
                (click)="priorityFn('ticket')">
              <span class="custom-control-label">{{'View On Tickets' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input type="radio" class="custom-control-input display" #display="ngModel" required [ngModel]="newCategory['display']" name="display" value="knowledge"
                (click)="priorityFn('knowledge')">
              <span class="custom-control-label">{{'View On Knowledge' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input type="radio" class="custom-control-input display" #display="ngModel" required [ngModel]="newCategory['display']" id="display3" name="display" value="emailToTicket"
                (click)="priorityFn('emailToTicket')">
              <span class="custom-control-label">{{'View On Email To Ticket' | translate}}</span>
            </label>
          </div>
          @if ((display['touched'] || editCategory.submitted) && display.errors?.['required']) {
            <span class="text-danger  alert-message">
              {{'View On is required' | translate}}
            </span>
          }
        </div>
      </div>

      @if (Priority) {
        <div>
          <div class="form-group">
            <div class="row">
              <div class="col-3">
                <label class="form-label">{{'Choose Priority :' | translate}}</label>
              </div>
              <div class="col-9 custom-controls-stacked d-md-flex  d-md-max-block">
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input" [ngModel]="newCategory['priority']" name="priority" value="Low">
                  <span class="custom-control-label">{{'Low' | translate}}</span>
                </label>
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input " [ngModel]="newCategory['priority']" name="priority" value="Medium">
                  <span class="custom-control-label">{{'Medium' | translate}}</span>
                </label>
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input " [ngModel]="newCategory['priority']" name="priority" value="High">
                  <span class="custom-control-label">{{'High' | translate}}</span>
                </label>
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input " [ngModel]="newCategory['priority']" name="priority" value="Critical">
                  <span class="custom-control-label">{{'Critical' | translate}}</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      }

      <div class="form-group">
        <div class="row">
          <div class="col-3">
            <label class="form-label text-nowrap pe-1 me-6">{{'Status :' | translate}}</label>
          </div>
          <div class="col-9">
            <span class="onoffswitch2">
              <input type="checkbox" [ngModel]="newCategory['status'] == '1'? true : false" name="status" id="myonoffswitchstatusEdit" class=" toggle-class onoffswitch2-checkbox"
                [checked]="newCategory['status'] == '1'? true : false">
              <label for="myonoffswitchstatusEdit" 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]="editCategory.invalid || sendingResponse['editCat']" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['editCat']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Category model end -->

<!-- Add Envato Api Modal-->
<ng-template #envatoAssign let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Envato Assign' | translate}}</h5>
    <a href="javascript:;" class="btn-close" (click)="modal.dismiss('Cross click')"></a>
  </div>
  <div class="modal-body">
    <form #envatoAssign="ngForm" (ngSubmit)="envatoAssignFn(envatoAssign.value, 'envatoAssign')">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">{{'Select category' | translate}} </label>
          <div class="custom-controls-stacked d-md-flex">
            <ng-select class="form-control" [items]="envatoAssiged?.['category']" #select [placeholder]="'Select category' | translate" [loading]="!envatoAssiged?.['category']"
              [virtualScroll]="true" bindLabel="name" [multiple]="true" [searchable]="true" dropdownPosition="auto" bindValue="id" name="assigned_user_id"
              [ngModel]="envatoAssiged?.['categoryenvato']">
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item.name}}</span></div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <input type="hidden" name="envato_enable" value="1" ngModel>
      </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]="sendingResponse['envatoAssign']" class="btn btn-secondary">{{'Save' |
          translate}}@if (sendingResponse['envatoAssign']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- End  Add Envato Api Modal  -->
<!-- Add group Api Modal-->
<ng-template #groupAssign let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'AssignTo Groups' | translate}}</h5>
    <a href="javascript:;" class="btn-close" (click)="modal.dismiss('Cross click')"></a>
  </div>
  <div class="modal-body">
    <form #groupAssign="ngForm" (ngSubmit)="GroupAssignFn(groupAssign, 'GroupAssignFn')">
      <div class="modal-body">
        <div class="custom-controls-stacked d-md-flex">
          <ng-select class="form-control" [items]="assignGroup?.['table_data']" #select [placeholder]="'Select Group' | translate" [virtualScroll]="true" bindLabel="groupname"
            [loading]="!assignGroup?.['table_data']" [multiple]="true" [searchable]="true" dropdownPosition="auto" bindValue="id" name="group_id" [(ngModel)]="groupAssiged">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item.groupname}}</span></div>
            </ng-template>
          </ng-select>
        </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]="sendingResponse['GroupAssignFn']" class="btn btn-secondary">{{'Save' |
          translate}}@if (sendingResponse['GroupAssignFn']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- End  Add group Api Modal  -->

