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

<!-- Feature Box Section -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <form #featiureSection="ngForm" (ngSubmit)="featureSectionUpdate(featiureSection, 'featureSectionUpdate')">

      <div class="card-header border-0 d-sm-max-flex">
        <h4 class="card-title">{{'Feature Box Section' | translate}}</h4>
        <div class="card-options card-header-styles mt-sm-max-2 position-relative">
          <small class="me-1 mt-1">{{'Show Section' | translate}}</small>
          <div class="float-end mt-0">
            <div class="switch-toggle">
              <span class="onoffswitch2">
                <input type="checkbox" name="featurecheck" id="featureboxs" [checked]="basic?.featurecheck == 'on' ? true : false"
                  [value]="basic?.featurecheck" [ngModel]="basic?.featurecheck == 'on'"
                  class=" toggle-class onoffswitch2-checkbox" >
                <label for="featureboxs" class="toggle-class onoffswitch2-label"></label>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-sm-12 col-md-12">
            <input type="hidden" class="form-control " name="id" [value]="basic?.id" [ngModel]="basic?.id">
            <div class="form-group star-mark">
              <label class="form-label">{{'Title' | translate}} <span class="text-danger">*</span></label>
              @if (!loading) {
                <input  #title="ngModel" [class.is-invalid]="title.invalid && title.touched" required type="text" class="form-control" name="featuretitle" [value]="basic?.featuretitle" [ngModel]="basic?.featuretitle">
                @if ((title.invalid && title.touched) || title.dirty) {
                  <div>
                    @if (title.errors?.['required']) {
                      <small class="text-danger">{{'Title is required' | translate}}</small>
                    }
                  </div>
                }
              }
              @if (loading) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </div>
          </div>
          <div class="col-sm-12 col-md-12">
            <div class="form-group">
              <label class="form-label">{{'Subtitle' | translate}}</label>
              @if (!loading) {
                <input  type="text" class="form-control" name="featuresub" [value]="basic?.featuresub" [ngModel]="basic?.featuresub">
              }
              @if (loading) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 card-footer ">
        <div class="form-group float-end">
          <button type="submit" [disabled]="featiureSection.invalid || sendingResponse['featureSectionUpdate'] || loading" class="btn btn-secondary">{{'Save Changes' | translate}}
            @if (sendingResponse['featureSectionUpdate'] || loading) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- End Feature Box Section -->

<!-- Feature Box 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">
      <h4 class="card-title ">{{'Feature Box List' | translate}}</h4>
      <div class="card-options  mt-sm-max-2">
        @if (permission?.includes('Feature Box Create')) {
          <a href="javascript:void(0)" (click)="createModelPopup(addFeaturemodal)" class="btn btn-secondary me-3" id="create-new-featurebox">{{'Add Feature' | 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('Feature Box Delete')) {
              <button  type="button" aria-label="delete" [disabled]="sendingResponse['massDelFeature']" id="massdeletenotify" (click)="massDeleteFeatures('massDelFeature')" 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['massDelFeature']) {
              <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 no-footer dtr-inline" 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>

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

          </ng-container>
          <!-- Subtitle Column -->
          <ng-container matColumnDef="subtitle">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="subtitle"> {{'Subtitle' | translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              {{row?.subtitle.slice(0, 80)}}
            </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('Feature Box Edit')) {
                  <button  type="button" aria-label="edit" (click)="editModelPopup(editFeaturemodal, row)" class="action-btns1">
                    <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate"></i>
                  </button>
                }

                @if (permission?.includes('Feature Box Delete')) {
                  <button  type="button" aria-label="delete" [disabled]="sendingResponse['featurteDel'+i]" (click)="deleteFeature(row, 'featurteDel'+i)" class="action-btns1" id="delete-testimonial">
                    <i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                    @if (sendingResponse['featurteDel'+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 Feature Box List -->



<!-- // add featurebox to agent modal start -->
<ng-template #addFeaturemodal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Add Featurebox' | translate}}</h5>
    <button  type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #addFeatureData="ngForm" (ngSubmit)="addFeature(addFeatureData, 'addFeature')">
      <input type="hidden" name="featurebox_id" id="featurebox_id">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
          <input #titleCreate="ngModel" [class.is-invalid]="titleCreate.invalid && titleCreate.touched" required type="text" class="form-control" name="title" id="name" ngModel>
          @if ((titleCreate.invalid && titleCreate.touched) || titleCreate.dirty) {
            <div>
              @if (titleCreate.errors?.['required']) {
                <small class="text-danger">{{'Title is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Description' | translate}} <span class="text-red">*</span></label>
          <mat-form-field class="w-100 notfixed">
            <textarea type="text" #descriptionCreate="ngModel" [class.is-invalid]="descriptionCreate.invalid && descriptionCreate.touched" required matInput #message maxlength="255" name="subtitle"
              id="description" class="form-control" ngModel [placeholder]="'Description' | translate">
            </textarea>
            <mat-hint align="end">{{message.value.length}} / 255</mat-hint>
          </mat-form-field>
          @if ((descriptionCreate.invalid && descriptionCreate.touched) || descriptionCreate.dirty) {
            <div>
              @if (descriptionCreate.errors?.['required']) {
                <small class="text-danger">{{'Description is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'URL' | translate}}</label>
          <input type="text" class="form-control mb-4" name="featureboxurl" id="featureboxurl" ngModel>
          <div>
            <input type="checkbox" name="url_checkbox" id="url_checkbox" class="urlcheckall" ngModel>
            <span class="ms-1">{{'Open in a new tab' | translate}}</span>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">{{'Upload Image' | translate}}</label>
          <app-image-upload [setting]="setting" [directTypes]="'jpg,jpeg,png,svg'" [directSize]="10" [maxLength]="1" (onImageUploaded)="onImageUploaded($event)" ></app-image-upload>

          <div class="col-md-10">
            <small class="text-muted"><i>{{'The file size should not be more than' | translate}}10{{'MB' | translate}}</i></small>
            <small class="text-muted"><i>{{'The file types allows' | translate}} jpg,jpeg,png,svg</i></small>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-danger" (click)="modal.dismiss('Cross click')">{{'Close' | translate}}</button>
        <button type="submit" [disabled]="addFeatureData.invalid || sendingResponse['addFeature']" class="btn btn-secondary" id="btnsave">{{'Save' | translate}}@if (sendingResponse['addFeature']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // add featurebox to agent modal end -->
<!-- // edit featurebox to agent modal start -->
<ng-template #editFeaturemodal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Edit Featurebox' | translate}}</h5>
    <button  type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #editFeatureData="ngForm" (ngSubmit)="editFeature(editFeatureData, 'editFeature')">
      <input type="hidden" name="featurebox_id" [ngModel]="pagesModel['featureboxId']">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
          <input #titleedit="ngModel" [class.is-invalid]="titleedit.invalid && titleedit.touched" required type="text" class="form-control" name="title"
            [ngModel]="pagesModel['title']">
          @if ((titleedit.invalid && titleedit.touched) || titleedit.dirty) {
            <div>
              @if (titleedit.errors?.['required']) {
                <small class="text-danger">{{'Title is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Description' | translate}} <span class="text-red">*</span></label>
          <mat-form-field class="w-100 notfixed">
            <textarea  type="text" #descriptionEdit="ngModel" [class.is-invalid]="descriptionEdit.invalid && descriptionEdit.touched" required matInput #message maxlength="255" name="subtitle" class="form-control" [ngModel]="pagesModel['subtitle']" [placeholder]="'Description' | translate">
            </textarea>
            <mat-hint align="end">{{message.value.length}} / 255</mat-hint>
          </mat-form-field>
          @if ((descriptionEdit.invalid && descriptionEdit.touched) || descriptionEdit.dirty) {
            <div>
              @if (descriptionEdit.errors?.['required']) {
                <small class="text-danger">{{'Description is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'URL' | translate}}</label>
          <input type="text" class="form-control mb-4" name="featureboxurl"  [ngModel]="pagesModel['featureboxurl']">
          <div>
            <input type="checkbox" name="url_checkbox" class="urlcheckall" [ngModel]="pagesModel['urlCheckbox']" [checked]="pagesModel['urlCheckbox'] == 'on' ? true : false">
            <span class="ms-1">{{'Open in a new tab' | translate}}</span>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">{{'Upload Image' | translate}}</label>
          <div class="file-browser">
            <app-image-upload [setting]="setting" [directTypes]="'jpg,jpeg,png,svg'" [directSize]="10" [maxLength]="1" (onImageUploaded)="onImageUploaded2($event)" [media]="[pagesModel]"></app-image-upload>
          </div>
          <div class="col-md-10">
            <small class="text-muted"><i>{{'The file size should not be more than' | translate}} 10 {{'MB' | translate}}</i></small>
            <small class="text-muted"><i>{{'The file types allows' | translate}} jpg,jpeg,png,svg</i></small>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button  type="button" aria-label="close" class="btn btn-outline-danger" (click)="modal.dismiss('Cross click')">{{'Close' | translate}}</button>
        <button type="submit" [disabled]="editFeatureData.invalid || sendingResponse['editFeature']" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['editFeature']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // edit featurebox to agent modal end -->