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

<!--Testimonial Section-->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <form #testimonialSection="ngForm" (ngSubmit)="testimonialSectionUpdate(testimonialSection, 'testimonialSection')">
      <div class="card-header border-0 d-sm-max-flex gap-3">
        <h4 class="card-title">{{'Testimonial 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="testimonialcheck" id="testimonialchecks" class=" toggle-class onoffswitch2-checkbox" [value]="basic?.testimonialcheck"
                  [checked]="basic?.testimonialcheck === 'on'" [ngModel]="basic?.testimonialcheck == 'on'">
                <label for="testimonialchecks" 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">
              <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
              @if (!loading) {
                <input required type="text" class="form-control" name="testimonialtitle" #title="ngModel" [class.is-invalid]="title.invalid && title.touched"
                  [value]="basic?.testimonialtitle" [ngModel]="basic?.testimonialtitle">
                @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="testimonialsub" [value]="basic?.testimonialsub" [ngModel]="basic?.testimonialsub">
              }
              @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]="testimonialSection.invalid || sendingResponse['testimonialSection'] || loading" class="btn btn-secondary">{{'Save Changes' | translate}}
            @if (sendingResponse['testimonialSection'] || loading) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<!--End Testimonial Section-->

<!--Testimonial 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">{{'Testimonial List' | translate}}</h4>
      <div class="card-options mt-sm-max-2">
        @if (permission?.includes('Testimonial Create')) {
          <a (click)="createModelPopup(addTestimonialmodal)" href="javascript:void(0)" class="btn btn-secondary me-3" id="create-new-testimonial">{{'Add Testimonial' | 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('Testimonial Delete')) {
              <button type="button" [disabled]="sendingResponse['testimonialDelete']" (click)="massDeletetestimonials('testimonialDelete')" id="massdeletenotify"
                class="btn btn-outline-light btn-sm mb-4 "><i class="fe fe-trash"></i>
                {{'Delete' | translate}}
                @if (sendingResponse['testimonialDelete']) {
                  <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 " 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>

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

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

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




  <!-- // add Testimonial to agent modal start -->
  <ng-template #addTestimonialmodal let-modal>
    <div class="modal-header">
      <h5 class="modal-title">{{'Add Testimonial' |translate }}</h5>
      <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
      </button>
    </div>
    <div class="modal-body">
      <form #addTestimonialData="ngForm" (ngSubmit)="addTestimonial(addTestimonialData, 'addTestimonial')">
        <input type="hidden" name="testimonial_id" id="testimonial_id" ngModel>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">{{'Name' | translate}} <span class="text-red">*</span></label>
            <input #nameRef="ngModel" [class.is-invalid]="nameRef.invalid && nameRef.touched" required type="text" class="form-control" name="name" id="name" ngModel>
          </div>
          @if ((nameRef.invalid && nameRef.touched) || nameRef.dirty) {
            <div>
              @if (nameRef.errors?.['required']) {
                <small class="text-danger">{{'Name is required' | translate}}</small>
              }
            </div>
          }
          <div class="form-group">
            <label class="form-label">{{'Description' | translate}} <span class="text-red">*</span></label>
            <textarea #description="ngModel" [class.is-invalid]="description.invalid && description.touched" required class="form-control" name="description" id="description"
            ngModel></textarea>
          </div>
          @if ((description.invalid && description.touched) || description.dirty) {
            <div>
              @if (description.errors?.['required']) {
                <small class="text-danger">{{'Description is required' | translate}}</small>
              }
            </div>
          }
          <div class="form-group">
            <label class="form-label">{{'Designation' | translate}} <span class="text-red">*</span></label>
            <input #designation="ngModel" type="text" class="form-control" name="designation" id="designation" required ngModel>
          </div>
          @if ((designation.invalid && designation.touched) || designation.dirty) {
            <div>
              @if (designation.errors?.['required']) {
                <small class="text-danger">{{'Designation is required' | translate}}</small>
              }
            </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]="addTestimonialData.invalid || sendingResponse['addTestimonial']" class="btn btn-secondary" id="btnsave">{{'Save' | translate}}
            @if (sendingResponse['addTestimonial']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
        </div>
      </form>
    </div>
  </ng-template>
  <!-- // add Testimonial to agent modal end -->
  <!-- // edit Testimonial to agent modal start -->
  <ng-template #editTestimonialmodal let-modal>
    <div class="modal-header">
      <h5 class="modal-title">{{'Edit Testimonial' | translate}}</h5>
      <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
      </button>
    </div>
    <div class="modal-body">
      <form #editTestimonialData="ngForm" (ngSubmit)="editTestimonial(editTestimonialData, 'editTestimonial')">
        <input type="hidden" name="testimonial_id" [ngModel]="pagesModel.testimonialId">
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">{{'Name' | translate}} <span class="text-red">*</span></label>
            <input #nameRef="ngModel" [class.is-invalid]="nameRef.invalid && nameRef.touched" required type="text" class="form-control" name="name" [value]="pagesModel.name"
              [ngModel]="pagesModel.name">
            @if ((nameRef.invalid && nameRef.touched) || nameRef.dirty) {
              <div>
                @if (nameRef.errors?.['required']) {
                  <small class="text-danger">{{'Name is required' | translate}}</small>
                }
              </div>
            }
          </div>
          <div class="form-group">
            <label class="form-label">{{'Description' | translate}} <span class="text-red">*</span></label>
            <textarea #description="ngModel" [class.is-invalid]="description.invalid && description.touched" required class="form-control" name="description" [value]="pagesModel.description"
            [ngModel]="pagesModel.description"></textarea>
            @if ((description.invalid && description.touched) || description.dirty) {
              <div>
                @if (description.errors?.['required']) {
                  <small class="text-danger">{{'Description is required' | translate}}</small>
                }
              </div>
            }
          </div>
          <div class="form-group">
            <label class="form-label">{{'Designation' | translate}} <span class="text-red">*</span> </label>
            <input #designation="ngModel" type="text" class="form-control" name="designation" required [value]="pagesModel.designation" [ngModel]="pagesModel.designation">
          </div>
          @if ((designation.invalid && designation.touched) || designation.dirty) {
            <div>
              @if (designation.errors?.['required']) {
                <small class="text-danger">{{'Designation is required' | translate}}</small>
              }
            </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" class="btn btn-outline-danger" (click)="modal.dismiss('Cross click')">{{'Close' |
          translate}}</button>
          <button type="submit" [disabled]="editTestimonialData.invalid || sendingResponse['editTestimonial']" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['editTestimonial']) {
            <i
            class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
        </div>
      </form>
    </div>
  </ng-template>
  <!-- // edit Testimonial to agent modal end -->