<admin-page-header [title]="'Custom Field'"></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">{{'Custom Field Lists' | translate}}</h4>
      <div class="card-options mt-sm-max-2">
        @if (permission?.includes('CustomField Create')) {
          <button type="button" (click)="createCustomfieldModel(createCF)" id="addcustomfield" class="btn btn-success me-3"><i class="feather feather-user-plus"></i> {{'Add Custom Field'|
        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('CustomField Delete')) {
            <button type="button" [disabled]="sendingResponse['massDelCf']" (click)="massDeleteCustomfield('massDelCf')" id="massdelete" 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['massDelCf']) {
              <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> {{'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>

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

          </ng-container>

          <!-- Field Type Column -->
          <ng-container matColumnDef="fieldtype">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="fieldtypes"> {{'Field Type' | translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              {{row?.fieldtypes}}
            </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">
              <label class="custom-switch form-switch mb-0">
                <input #ele type="checkbox" name="status" id="myonoffswitch{{row?.id}}" value="1" (change)="Customfieldstatus(row?.id ,ele)"
                  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('CustomField Edit')) {
                  <button aria-label="view" class="action-btns1" (click)="editCustomfieldDetails(editModal, row)"><i class="feather feather-edit text-primary"
                  [ngbTooltip]="'View' | translate"></i></button>
                }
                @if (permission?.includes('CustomField Delete')) {
                  <button type="button" aria-label="Delete" [disabled]="sendingResponse['cfDel'+i]" (click)="deleteCustomfield(row, 'cfDel'+i)" class="action-btns1 delete-Custom field" id="show-delete"><i
                  class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                  @if (sendingResponse['cfDel'+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>


<!-- // Custom field model start -->
<ng-template #createCF let-modal>
  <div class="modal-header">
    <h4 class="card-title">{{'New Custom Field' | translate}}</h4>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #Customfieldcreate="ngForm" (ngSubmit)="editOrCreateCustomfield(Customfieldcreate, 'cfCreate')">
      <input type="hidden" name="customfieldopen_id" id="customfieldopen_id" [ngModel]="customfieldopenId">
      <div class="modal-body pb-0">
        <div class="form-group ">
          <label for="" class="form-label">{{'Label field name' | translate}} <span class="text-red">*</span></label>
          <input type="text" class="form-control" id="sprukofieldname" name="sprukofieldname" #sprukofieldname="ngModel"
            [class.is-invalid]="sprukofieldname.invalid && sprukofieldname.touched" required ngModel>
          @if ((sprukofieldname.invalid && sprukofieldname.touched) || sprukofieldname.dirty) {
            <div>
              @if (sprukofieldname.errors?.['required']) {
                <small class="text-danger">{{'Field Name is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label for="" class="form-label"> {{'Field label type' | translate}}</label>

          <ng-select class="form-control" [items]="fieldOptionList" #select [placeholder]="'Select Label type' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false" [loading]="!fieldOptionList" [searchable]="true" dropdownPosition="auto" bindValue="id" name="sprukofieldtype" [(ngModel)]="selectedOpt">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item}}</span></div>
            </ng-template>
          </ng-select>
        </div>
        @if (selectedOpt == 'checkbox' || selectedOpt == 'select' || selectedOpt == 'radio' ) {
          <div class="form-group sprukofieldopen">
            <label for="" class="form-label mb-0">{{'Field options' | translate}} <span class="text-red">*</span> </label>
            <small class="text-muted mb-2 d-block">( {{'You have to add the comma-separated values. Duplicate values will be removed on submission' |
            translate}})</small>
            <textarea name="optionsfields" #fieldOpt="ngModel" [class.is-invalid]="fieldOpt.invalid && fieldOpt.touched" required ngModel class="form-control" id="optionsfields" cols="30"
            rows="5" placeholder="a,k,n"></textarea>
            @if ((fieldOpt.invalid && fieldOpt.touched) || fieldOpt.dirty) {
              <div>
                @if (fieldOpt.errors?.['required']) {
                  <small class="text-danger">{{'Field options is required' | translate}}</small>
                }
              </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">{{'View On' | translate}}<span class="text-red">*</span></label>
            </div>
            <div class="col-xl-10 col-lg-10 col-md-9 col-sm-9 col-9 custom-controls-stacked d-md-flex  d-md-max-block">
              <label class="custom-control form-radio success me-4">
                <input #viewOnField="ngModel" [class.is-invalid]="viewOnField.invalid && viewOnField.touched" required type="radio" class="custom-control-input display" id="display"
                  name="display" value="both" ngModel>
                <span class="custom-control-label">{{'Both' | translate}}</span>
              </label>
              <label class="custom-control form-radio success me-4">
                <input #viewOnField="ngModel" [class.is-invalid]="viewOnField.invalid && viewOnField.touched" required type="radio" class="custom-control-input display" id="display1"
                  name="display" value="createticket" ngModel>
                <span class="custom-control-label">{{'Create Tickets' | translate}}</span>
              </label>
              <label class="custom-control form-radio success me-4">
                <input #viewOnField="ngModel" [class.is-invalid]="viewOnField.invalid && viewOnField.touched" required type="radio" class="custom-control-input display" id="display2"
                  name="display" value="registerform" ngModel>
                <span class="custom-control-label">{{'Register' | translate}}</span>
              </label>
              @if ((viewOnField.invalid && viewOnField.touched) || viewOnField.dirty) {
                <div>
                  @if (viewOnField.errors?.['required']) {
                    <small class="text-danger">{{'View On is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="d-flex mt-5">
              <span class="onoffswitch2">
                <input type="checkbox" name="requiredfields" id="requiredfields" class=" toggle-class onoffswitch2-checkbox" ngModel>
                <label for="requiredfields" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-2">{{'Required field' | translate}}</label>
            </div>
          </div>
        </div>
        @if (selectedOpt == 'email' || selectedOpt == 'text' || selectedOpt == 'textarea') {
          <div class="form-group sprukoprivacyfield">
            <div class="switch_section">
              <div class="d-flex mt-4">
                <span class="onoffswitch2">
                  <input type="checkbox" name="privacyfields" id="privacyfields" class=" toggle-class onoffswitch2-checkbox" ngModel>
                  <label for="privacyfields" class="toggle-class onoffswitch2-label"></label>
                </span>
                <label class="form-label ps-2">{{'Privacy' | translate}}
                  <small class="text-muted">({{'If you select this option, the content in the field will be encrypted.' | translate}})
                  </small>
                </label>
              </div>
            </div>
          </div>
        }
        <div class="form-group">
          <div class="switch_section">
            <div class="d-flex mt-2">
              <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>
              <label class="form-label ps-2">{{'Status' | translate}}</label>
            </div>
          </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]="Customfieldcreate.invalid || sendingResponse['cfCreate']" class="btn btn-secondary" id="btnsave">{{'Save' | translate}}@if (sendingResponse['cfCreate']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Custom field model end -->
<ng-template #editModal let-modal>
  <div class="modal-header">
    <h4 class="card-title">{{'Edit Custom Field' | translate}}</h4>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #Customfieldedit="ngForm" (ngSubmit)="editOrCreateCustomfield(Customfieldedit, 'cfEdit')">
      <input type="hidden" name="customfieldopen_id" [ngModel]="CustomfieldObj['customfieldopenId']">
      <div class="modal-body pb-0">
        <div class="form-group ">
          <label for="" class="form-label">{{'Label field name' | translate}} <span class="text-red">*</span></label>
          <input type="text" class="form-control" name="sprukofieldname" #sprukofieldname="ngModel"
            [class.is-invalid]="sprukofieldname.invalid && sprukofieldname.touched" required [ngModel]="CustomfieldObj['sprukofieldname']">
          @if ((sprukofieldname.invalid && sprukofieldname.touched) || sprukofieldname.dirty) {
            <div>
              @if (sprukofieldname.errors?.['required']) {
                <small class="text-danger">{{'Field Name is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label for="" class="form-label"> {{'Field label type' | translate}}</label>

          <ng-select class="form-control" [items]="fieldOptionList" [loading]="!fieldOptionList" #select [placeholder]="'Select Label type' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false"
            [searchable]="true" dropdownPosition="auto" bindValue="id" name="sprukofieldtype" [(ngModel)]="selectedOpt">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item}}</span></div>
            </ng-template>
          </ng-select>
        </div>
        @if (selectedOpt == 'checkbox' || selectedOpt == 'select' || selectedOpt == 'radio' ) {
          <div class="form-group sprukofieldopen">
            <label for="" class="form-label mb-0">{{'Field options' | translate}} <span class="text-red">*</span> </label>
            <small class="text-muted mb-2 d-block">( {{'You have to add the comma-separated values. Duplicate values will be removed on submission' |
            translate}})</small>
            <textarea name="optionsfields" required #fieldOpt="ngModel" [class.is-invalid]="fieldOpt.invalid && fieldOpt.touched" [ngModel]="CustomfieldObj['optionsfields']"
            class="form-control" cols="30" rows="5" placeholder="a,k,n"></textarea>
            @if ((fieldOpt.invalid && fieldOpt.touched) || fieldOpt.dirty) {
              <div>
                @if (fieldOpt.errors?.['required']) {
                  <small class="text-danger">{{'Field options is required' | translate}}</small>
                }
              </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">{{'View On' | translate}}<span class="text-red">*</span></label>
            </div>
            <div class="col-xl-10 col-lg-10 col-md-9 col-sm-9 col-9 custom-controls-stacked d-md-flex  d-md-max-block">
              <label class="custom-control form-radio success me-4">
                <input required #viewOnField="ngModel" [class.is-invalid]="viewOnField.invalid && viewOnField.touched" type="radio" class="custom-control-input display"
                  name="display" value="both" [ngModel]="CustomfieldObj['display']">
                <span class="custom-control-label">{{'Both' | translate}}</span>
              </label>
              <label class="custom-control form-radio success me-4">
                <input required #viewOnField="ngModel" [class.is-invalid]="viewOnField.invalid && viewOnField.touched" type="radio" class="custom-control-input display"
                  name="display" value="createticket" [ngModel]="CustomfieldObj['display']">
                <span class="custom-control-label">{{'Create Tickets' | translate}}</span>
              </label>
              <label class="custom-control form-radio success me-4">
                <input required #viewOnField="ngModel" [class.is-invalid]="viewOnField.invalid && viewOnField.touched" type="radio" class="custom-control-input display"
                  name="display" value="registerform" [ngModel]="CustomfieldObj['display']">
                <span class="custom-control-label">{{'Register' | translate}}</span>
              </label>
              @if ((viewOnField.invalid && viewOnField.touched) || viewOnField.dirty) {
                <div>
                  @if (viewOnField.errors?.['required']) {
                    <small class="text-danger">{{'View On is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="d-flex mt-5">
              <span class="onoffswitch2">
                <input type="checkbox" name="requiredfields" id="requiredfields" class=" toggle-class onoffswitch2-checkbox" [ngModel]="CustomfieldObj['requiredfields']" [checked]="CustomfieldObj['requiredfields'] == '1' ? true : false">
                <label for="requiredfields" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-2">{{'Required field' | translate}}</label>
            </div>
          </div>
        </div>
        @if (selectedOpt == 'email' || selectedOpt == 'text' || selectedOpt == 'textarea') {
          <div class="form-group sprukoprivacyfield">
            <div class="switch_section">
              <div class="d-flex mt-4">
                <span class="onoffswitch2">
                  <input type="checkbox" id="privacyfields" name="privacyfields" class=" toggle-class onoffswitch2-checkbox" [ngModel]="CustomfieldObj['privacyfields']" [checked]="CustomfieldObj['privacyfields'] == '1' ? true : false">
                  <label for="privacyfields" class="toggle-class onoffswitch2-label"></label>
                </span>
                <label class="form-label ps-2">{{'Privacy' | translate}}
                  <small class="text-muted">({{'If you select this option, the content in the field will be encrypted.' | translate}})
                  </small>
                </label>
              </div>
            </div>
          </div>
        }
        <div class="form-group">
          <div class="switch_section">
            <div class="d-flex mt-2">
              <span class="onoffswitch2">
                <input type="checkbox" name="status" id="status" class=" toggle-class onoffswitch2-checkbox" [ngModel]="CustomfieldObj['status']"
                  [checked]="CustomfieldObj['status'] == '1' ? true : false">
                <label for="status" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-2">{{'Status' | translate}}</label>
            </div>
          </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]="Customfieldedit.invalid || sendingResponse['cfEdit']" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['cfEdit']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>