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

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <form #faqForm="ngForm" (ngSubmit)="faqSection(faqForm, 'faqSection')">
      <div class="card-header border-0 d-sm-max-flex">
        <h4 class="card-title">{{'FAQ’s 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="faqcheck" id="faqchecks" class=" toggle-class onoffswitch2-checkbox" value="on" [checked]="basic?.faqcheck == 'on' ? true : false" ngModel>
                <label for="faqchecks" 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 " id="testimonial_id" name="id" [value]="basic?.id" [ngModel]="basic?.id">
            <div class="form-group">
              <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
              @if (!loading) {
                <input required #title="ngModel" [class.is-invalid]="title.invalid && title.touched" type="text" class="form-control" name="faqtitle" [value]="basic?.faqtitle"
                  [ngModel]="basic?.faqtitle">
                @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="faqsub" [value]="basic?.faqsub" [ngModel]="basic?.faqsub">
              }
              @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]="faqForm.invalid || sendingResponse['faqSection'] || loading" class="btn btn-secondary" >{{'Save Changes' | translate}}
            @if (sendingResponse['faqSection'] || loading ) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card overflow-hidden ">
    <div class="card-header border-0 d-sm-max-flex">
      <h4 class="card-title">{{'FAQ’s' | translate}}</h4>
      <div class="card-options mt-sm-max-2">
        @if (permission?.includes('FAQs Create')) {
          <a (click)="createModelPopup(addFaqsmodel)" href="javascript:void(0)" class="btn btn-secondary me-3" id="create-new-post">{{'Add FAQ' | 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('FAQs Delete')) {
              <button type="button" [disabled]="sendingResponse['faqDelete']" (click)="massDeletefaqss('faqDelete')" id="massdeletenotify" class="btn btn-outline-light btn-sm mb-4 "><i class="fe fe-trash"></i>
              {{'Delete'
              |
              translate}}
              @if (sendingResponse['faqDelete']) {
                <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>

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

            </ng-container>
            <!-- Answer Column -->
            <ng-container matColumnDef="answer">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="answer"> {{'Answer' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                <span [innerHTML]="sanitizeHtml(row?.answer.slice(0, 50))"></span>
              </td>

            </ng-container>
            <!-- Faq Category Column -->
            <ng-container matColumnDef="faqcategory">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="faqcategory.faqcategoryname"> {{'Faq Category' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                @if (row.faqcat_id && row.faqcategory) {
                  {{row.faqcategory.faqcategoryname}}
                } @else {
                  ~
                }
              </td>

            </ng-container>
            <!-- Privacy Mode Column -->
            <ng-container matColumnDef="privacymode">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Privacy Mode' | translate}}
              </th>
              <td mat-cell *matCellDef="let row; let i = index">
                @if (permission?.includes('FAQs Edit')) {
                  <label class="custom-switch form-switch mb-0">
                    <input [disabled]="sendingResponse['privateMode'+i]" type="checkbox" name="privatemode" (click)="privateModeUpdate(row, 'privateMode'+i)" id="privatemode{{row.id}}" value="1"
                      class="custom-switch-input tswitch1" [checked]="row.privatemode == '1' ? true : false">
                    <span class="custom-switch-indicator"></span>
                    @if (sendingResponse['privateMode'+i]) {
                      <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                  </label>
                }
              </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('FAQs Edit')) {
                  <label class="custom-switch form-switch mb-0">
                    <input [disabled]="sendingResponse['faqEdit'+i]" type="checkbox" name="status" (click)="statusUpdate(row, 'faqEdit'+i)" id="myonoffswitch{{row.id}}" value="1"
                      class="custom-switch-input tswitch" [checked]="row.status == '1' ? true : false">
                    <span class="custom-switch-indicator"></span>
                    @if (sendingResponse['faqEdit'+i]) {
                      <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                  </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('FAQs Edit')) {
                    <button type="button" aria-label="edit" (click)="editModelPopup(editFaqModel, row)" class="action-btns1">
                      <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate"></i>
                    </button>
                  }
                  @if (permission?.includes('FAQs Delete')) {
                    <button type="button" aria-label="delete" [disabled]="sendingResponse['delFaq'+i]" (click)="deleteFaqs(row, 'delFaq'+i)" class="action-btns1" id="delete-testimonial">
                      <i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                      @if (sendingResponse['delFaq'+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>


<!-- // add Faq to agent modal start -->
<ng-template #addFaqsmodel let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Add Faqs'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #addFaqsData="ngForm" (ngSubmit)="addFaqs(addFaqsData, 'addFaqs')">
      <input type="hidden" name="faq_id" id="faq_id" ngModel>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">{{'Question' | translate}} <span class="text-red">*</span></label>
          <input type="text" class="form-control" [placeholder]="'FAQ Question' | translate" name="question" id="question" autofocus required #question="ngModel"
            [class.is-invalid]="question.invalid && question.touched" ngModel>
          @if ((question.invalid && question.touched) || question.dirty) {
            <div>
              @if (question.errors?.['required']) {
                <small class="text-danger">{{'Question is required' | translate}}</small>
              }
            </div>
          }
        </div>

        <div class="form-group">
          <label class="form-label">{{'Answer' | translate}} <span class="text-red">*</span></label>
          <angular-editor [config]="toolbar" #answer="ngModel" [ngModel]="pagesModel.answer" [class.is-invalid]="answer.invalid && answer.touched" required class="form-control"
          [placeholder]="'FAQ Answer' | translate" name="answer"></angular-editor>
          @if (answer.errors?.['maxLength']) {
            <div class="limit-error">
              {{ answer.errors?.['maxLength'].actualLength }}/{{ answer.errors?.['maxLength'].maxLength }} {{' exceeded the limit' | translate}}
            </div>
          }
          @if ((answer.invalid && answer.touched) || answer.dirty) {
            <div>
              @if (answer.errors?.['required']) {
                <small class="text-danger">{{'Answer is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Select Faq Category' | translate}} <span class="text-red">*</span></label>
          <ng-select class="form-control" required #category="ngModel" [class.is-invalid]="category.invalid && category.touched" [items]="faqcategoryList" #select [loading]="!faqcategoryList" [placeholder]="'Select Faq Category' | translate" [virtualScroll]="true" bindLabel="faqcategoryname" [multiple]="false" [searchable]="true" dropdownPosition="auto"
            bindValue="id" name="faqcat_name" [ngModel]="null">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item?.faqcategoryname}}</span></div>
            </ng-template>
          </ng-select>
          @if ((category.invalid && category.touched) || category.dirty) {
            <div>
              @if (category.errors?.['required']) {
                <small class="text-danger">{{'Category is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex mt-4">
              <label class="form-label pe-2">{{'Status' | translate}}</label>
              <span class="onoffswitch2">
                <input type="checkbox" name="status" id="status" class=" toggle-class onoffswitch2-checkbox" ngModel>
                <label for="status" class="toggle-class onoffswitch2-label"></label>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="custom-control form-checkbox">
            <input type="checkbox" class="custom-control-input" name="privatemode" id="privatemode" ngModel>
            <span class="custom-control-label">{{'Privacy Mode' | translate}}</span>
          </label>
        </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]="addFaqsData.invalid || sendingResponse['addFaqs']" class="btn btn-secondary" id="btnsave">{{'Save' | translate}}
          @if (sendingResponse['addFaqs']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
          }
        </button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // add Faq to agent modal end -->
<!-- // edit Faq to agent modal start -->
<ng-template #editFaqModel let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Edit Faqs'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #editFaqsData="ngForm" (ngSubmit)="editFaqs(editFaqsData, 'editFaqs')">
      <input type="hidden" name="faq_id" [ngModel]="pagesModel.id">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">{{'Question' | translate}} <span class="text-red">*</span></label>
          <input type="text" class="form-control" [placeholder]="'FAQ Question' | translate" name="question" autofocus #question="ngModel"
            [class.is-invalid]="question.invalid && question.touched" required [ngModel]="pagesModel.question">
          @if ((question.invalid && question.touched) || question.dirty) {
            <div>
              @if (question.errors?.['required']) {
                <small class="text-danger">{{'Question is required' | translate}}</small>
              }
            </div>
          }
        </div>

        <div class="form-group">
          <label class="form-label">{{'Answer' | translate}} <span class="text-red">*</span></label>
          <angular-editor [config]="toolbar" #answer="ngModel" [ngModel]="pagesModel.answer" [class.is-invalid]="answer.invalid && answer.touched" required class="form-control"
          [placeholder]="'FAQ Answer' | translate" name="answer"></angular-editor>
          @if (answer.errors?.['maxLength']) {
            <div class="limit-error">
              {{ answer.errors?.['maxLength'].actualLength }}/{{ answer.errors?.['maxLength'].maxLength }} {{' exceeded the limit' | translate}}
            </div>
          }
          @if ((answer.invalid && answer.touched) || answer.dirty) {
            <div>
              @if (answer.errors?.['required']) {
                <small class="text-danger">{{'Answer is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Select Faq Category' | translate}} <span class="text-red">*</span></label>
          <ng-select class="form-control" #category="ngModel" [class.is-invalid]="category.invalid && category.touched" required [items]="faqcategoryList" #select [loading]="!faqcategoryList" [placeholder]="'Select Faq Category' | translate" [virtualScroll]="true" bindLabel="faqcategoryname" [multiple]="false" [searchable]="true" dropdownPosition="auto"
            bindValue="id" name="faqcat_name" [ngModel]="pagesModel.faqcatName">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item?.faqcategoryname}}</span></div>
            </ng-template>
          </ng-select>
          @if ((category.invalid && category.touched) || category.dirty) {
            <div>
              @if (category.errors?.['required']) {
                <small class="text-danger">{{'Category is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex mt-4">
              <label class="form-label pe-2">{{'Status' | translate}}</label>
              <span class="onoffswitch2">
                <input type="checkbox" name="status" id="editstatus" class=" toggle-class onoffswitch2-checkbox" [value]="pagesModel['status']" [ngModel]="pagesModel['status']">
                <label for="editstatus" class="toggle-class onoffswitch2-label"></label>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="custom-control form-checkbox">
            <input type="checkbox" class="custom-control-input" name="privatemode" [ngModel]="pagesModel.privatemode">
            <span class="custom-control-label">{{'Privacy Mode' | translate}}</span>
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-danger" (click)="modal.dismiss('Cross click')">{{'Close' |
        translate}}</button>
        <button type="submit" [disabled]="editFaqsData.invalid || sendingResponse['editFaqs']" class="btn btn-secondary">{{'Update' | translate}}
          @if (sendingResponse['editFaqs']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
          }
        </button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // edit Faq to agent modal end -->