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


<div class="row row-deck">

  <!-- Cron command -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{ 'Cron Job Setup Command' | translate }}</h4>
      </div>
      <div class="card-body pt-0">
        <label><small><i>( {{
              croncommanddata == 'php artisan schedule:work' ?
              'Copy the provided command, paste this command in your terminal and enter, it will automatically run the commands.' :
              'Copy the provided command, log in to your cPanel server, look for "Cron Jobs," and click on it. You will see "Common Settings" selection dropdown then you select "Once Per Minute(* * * * *)" and also you see an input field for entering commands; paste the command there and click on Add New Cron Job.' | translate
              }})</i></small></label>
        <div class="form-group mb-0">
          <div class="input-group">
            <input type="text" class="form-control liveChatScriptLink" name="mail_username" readonly id="mail_username"
              [value]="croncommanddata" autocomplete="off">
            <button class="btn btn-primary p-2 liveChatScriptLinkCopyBtn" ngxClipboard [cbContent]="croncommanddata">
              <i class="fa fa-clone" data-bs-toggle="tooltip" title="" data-bs-original-title="fa fa-clone"
                aria-label="fa fa-clone"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- App Title & Logos -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'App Title and Logos' | translate | titlecase}}</h4>
      </div>
      <form #FormData="ngForm" (ngSubmit)="AppTitleandLogos(FormData, 'apptitle')">
        <div class="card-body">
          <input type="hidden" [ngModel]="ResponceProfile?.title['id']" class="form-control" name="id" Value="">
          <div class="row">
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <label class="form-label">{{'Title' | translate | titlecase}} <span class="text-red">*</span></label>
                <input required [(ngModel)]="ResponceProfile?.title.title" type="text" class="form-control" name="title"
                  value="Title" [class.is-invalid]="title.invalid && title.touched" #title="ngModel">
                @if((title.invalid && title.touched) || title.dirty){
                <div>
                  @if(title.errors?.['required']){
                  <small class="text-danger">{{'Title is required' |
                    translate}}</small>
                  }
                </div>
                }
              </div>
            </div>

            <div class="col-xl-6 col-xxl-4 col-sm-12 col-lg-12">
              <div class="spfileupload">
                <div class="row">
                  <div class="col-xl-7 col-lg-9 col-md-9 col-sm-9">
                    <div class="form-group">
                      <div>
                        <label class="form-label fs-16">{{'Upload Light-Logo' |
                          translate}}</label>
                        <div class="input-group file-browser">
                          <input #lightlogo ngModel class="form-control" name="image" type="file"
                            (change)="image($event)">
                        </div>
                        <small class="text-muted"><i>{{'The file size should not be more than' |
                            translate}} 5 {{'MB' | translate | titlecase}}</i></small>
                      </div>
                    </div>
                  </div>
                  <div class="col-xl-5 col-lg-3 col-md-3 col-sm-3">
                    <div class="file-image-1 ms-auto sprukologoss">
                      <div class="product-image sprukologoimages">
                        <img [src]="Src" class="br-5" alt="" loading="lazy" decoding="async">
                        @if(ResponceProfile?.title?.image){
                        <button aria-label="delete" type="button"
                          (click)="businesslogodelete(ResponceProfile?.title?.id,'logo1', lightlogo)"
                          class="btn ticketnotedelete border-white text-gray logosdelete">
                          <i class="feather feather-x"></i>
                        </button>
                        }
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6 col-xxl-4 col-sm-12 col-lg-12">
              <div class="spfileupload">
                <div class="row">
                  <div class="col-xl-7 col-lg-9 col-md-9 col-sm-9">
                    <div class="form-group">
                      <div>
                        <label class="form-label fs-16">{{'Upload Dark-Logo' |
                          translate}}</label>
                        <div class="input-group file-browser">
                          <input #darklogo ngModel class="form-control " name="image1" type="file"
                            (change)="image1($event)">
                        </div>
                        <small class="text-muted"><i>{{'The file size should not be more than' |
                            translate}} 5 {{'MB' | translate | titlecase}}</i></small>
                      </div>
                    </div>
                  </div>
                  <div class="col-xl-5 col-lg-3 col-md-3 col-sm-3">
                    <div class="file-image-1 ms-auto">
                      <div class="product-image sprukologoimages">
                        <img [src]="Src1" class="br-5" alt="" loading="lazy" decoding="async">
                        @if(ResponceProfile?.title?.image1){
                        <button aria-label="delete" type="button"
                          (click)="businesslogodelete(ResponceProfile?.title?.id,'logo2', darklogo)"
                          class="btn ticketnotedelete border-white text-gray logosdelete">
                          <i class="feather feather-x"></i>
                        </button>
                        }
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6 col-xxl-4 col-sm-12 col-lg-12">
              <div class="spfileupload">
                <div class="row">
                  <div class="col-xl-7 col-lg-9 col-md-9 col-sm-9">
                    <div class="form-group">
                      <div>
                        <label class="form-label fs-16">{{'Upload Light-Icon' |
                          translate}}</label>
                        <div class="input-group file-browser">
                          <input #darkicon ngModel class="form-control " name="image2" type="file"
                            (change)="image2($event)">
                        </div>
                        <small class="text-muted"><i>{{'The file size should not be more than' |
                            translate}} 5 {{'MB' | translate | titlecase}}</i></small>
                      </div>
                    </div>
                  </div>
                  <div class="col-xl-5 col-lg-3 col-md-3 col-sm-3">
                    <div class="file-image-1 ms-auto">
                      <div class="product-image sprukologoimages">
                        <img [src]="Src2" class="br-5" alt="" loading="lazy" decoding="async">
                        @if(ResponceProfile?.title?.image2){
                        <button aria-label="delete" type="button"
                          (click)="businesslogodelete(ResponceProfile?.title?.id,'logo3', darkicon)"
                          class="btn ticketnotedelete border-white text-gray logosdelete">
                          <i class="feather feather-x"></i>
                        </button>
                        }
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6 col-xxl-4 col-sm-12 col-lg-12">
              <div class="spfileupload">
                <div class="row">
                  <div class="col-xl-7 col-lg-9 col-md-9 col-sm-9">
                    <div class="form-group">
                      <div>
                        <label class="form-label fs-16">{{'Upload Dark-Icon' |
                          translate}}</label>
                        <div class="input-group file-browser">
                          <input #lighticon ngModel class="form-control " name="image3" type="file"
                            (change)="image3($event)">
                        </div>
                        <small class="text-muted"><i>{{'The file size should not be more than' |
                            translate}} 5 {{'MB' | translate | titlecase}}</i></small>
                      </div>

                    </div>
                  </div>
                  <div class="col-xl-5 col-lg-3 col-md-3 col-sm-3">
                    <div class="file-image-1 ms-auto">
                      <div class="product-image sprukologoimages">
                        <img [src]="Src3" class="br-5" alt="" loading="lazy" decoding="async">
                        @if(ResponceProfile?.title?.image3){
                        <button aria-label="delete" type="button"
                          (click)="businesslogodelete(ResponceProfile?.title?.id,'logo4', lighticon)"
                          class="btn ticketnotedelete border-white text-gray logosdelete">
                          <i class="feather feather-x"></i>
                        </button>
                        }
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6 col-xxl-4 col-sm-12 col-lg-12">
              <div class="spfileupload">
                <div class="row">
                  <div class="col-xl-7 col-lg-9 col-md-9 col-sm-9">
                    <div class="form-group">
                      <div>
                        <label class="form-label fs-16">{{'Upload Favicon' | translate | titlecase}}</label>
                        <div class="input-group file-browser">
                          <input #favicon ngModel class="form-control " name="image4" type="file"
                            (change)="image4($event)">
                        </div>
                        <small class="text-muted"><i>{{'The file size should not be more than' |
                            translate}} 5 {{'MB' | translate | titlecase}}</i></small>
                      </div>
                    </div>
                  </div>
                  <div class="col-xl-5 col-lg-3 col-md-3 col-sm-3">
                    <div class="file-image-1 ms-auto">
                      <div class="product-image sprukologoimages">
                        <img [src]="Src4" class="br-5" alt="" loading="lazy" decoding="async">
                        @if(ResponceProfile?.title?.image4){
                        <button aria-label="delete" type="button"
                          (click)="businesslogodelete(ResponceProfile?.title?.id,'logo5', favicon)"
                          class="btn ticketnotedelete border-white text-gray logosdelete">
                          <i class="feather feather-x"></i>
                        </button>
                        }
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="col-md-12 card-footer ">
          <div class="form-group float-end">
            <button [disabled]="FormData.invalid || sendingResponse['apptitle']" type="submit"
              class="btn btn-secondary">{{'Save Changes' | translate | titlecase}}
              @if(sendingResponse['apptitle']){
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- End App Title & Logos -->


  <!-- Custom pages -->

  <div class="col-xxl-6 col-xl-12 col-lg-12 col-md-6">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Set URL' | translate | titlecase}}</h4>
      </div>
      <!-- @csrf -->
      <form #urlset="ngForm" (ngSubmit)="UrlSet(urlset, 'urlSet')">
        <div class="card-body">
          <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12">
              <div class="form-group ">
                <label for="" class="form-label">{{'Terms of service URL' | translate | titlecase}}<span
                    class="text-red"> *</span></label>
                <input required [ngModel]="setting?.terms_url" class="form-control" name="terms_url" type="url" value=""
                  placeholder="https://www.***.**" #terms_url="ngModel"
                  [class.is-invalid]="terms_url.invalid && terms_url.touched">
                @if((terms_url.invalid && terms_url.touched) || terms_url.dirty){
                <div>
                  @if(terms_url.errors?.['required']){
                  <small class="text-danger">{{'Terms of service URL is required' | translate | titlecase}}</small>}
                </div>
                }
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-12 card-footer ">
          <div class="form-group float-end ">
            <button [disabled]="urlset.invalid || sendingResponse['urlSet']" type="submit"
              class="btn btn-secondary">{{'Save Changes' | translate | titlecase}}
              @if(sendingResponse['urlSet']){
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- End Custom pages -->

  <!-- Color Setting -->
  <div class="col-xxl-6 col-xl-12 col-lg-12 col-md-6">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Color Setting' | translate | titlecase}}</h4>
      </div>
      <form #ColorSetting="ngForm" (ngSubmit)="colorSetting(ColorSetting, 'colorSetting')">
        <div class="card-body">
          <div class="row">
            <div class="col-xl-6 col-lg-6">
              <div class="form-group ">
                <label for="theme_color" class="form-label">{{'Primary Color' | translate | titlecase}}<span
                    class="text-red"> *</span></label>
                <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                  (click)="primaryColorToggle=!primaryColorToggle">
                  <input type="text" [ngModel]="colorprimary" required [style.background]="colorprimary"
                    name="theme_color" class="color-picker-tag" [cpAlphaChannel]="'disabled'"
                    [(cpToggle)]="primaryColorToggle" [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]"
                    [cpOutputFormat]="'hex'" [(colorPicker)]="colorprimary" (cpSliderDragEnd)="primaryColor($event)"
                    #ignoredPrimaryInput #primaryColorModel="ngModel"
                    [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                  {{colorprimary}}
                </div>
                @if((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty){
                <div>
                  @if(primaryColorModel.errors?.['required']){
                  <small class="text-danger">{{'Primary Color is required' | translate | titlecase}}</small>
                  }
                </div>
                }

              </div>
            </div>
            <div class="col-xl-6 col-lg-6">
              <div class="form-group ">
                <label for="theme_color_dark" class="form-label">{{'Secondary Color' | translate | titlecase}}<span
                    class="text-red"> *</span></label>
                <div class="form-control d-flex align-items-center gap-1" #ignoredSecondaryButton
                  (click)="secondaryColorToggle=!secondaryColorToggle">
                  <input type="text" [ngModel]="colorsecondary" required [style.background]="colorsecondary"
                    name="theme_color_dark" class="color-picker-tag" [cpAlphaChannel]="'disabled'"
                    [(cpToggle)]="secondaryColorToggle"
                    [cpIgnoredElements]="[ignoredSecondaryButton, ignoredSecondaryInput]" #ignoredSecondaryInput
                    [cpOutputFormat]="'hex'" [(colorPicker)]="colorsecondary" (cpSliderDragEnd)="secondaryColor($event)"
                    #secondaryColormodel="ngModel"
                    [class.is-invalid]="secondaryColormodel.invalid && secondaryColormodel.touched">
                  {{colorsecondary}}
                </div>
                @if((secondaryColormodel.invalid && secondaryColormodel.touched) || secondaryColormodel.dirty){
                <div>
                  @if(secondaryColormodel.errors?.['required']){
                  <small class="text-danger">{{'Secondary Color is required' | translate | titlecase}}</small>
                  }
                </div>
                }

              </div>
            </div>
          </div>
        </div>
        <div class="col-md-12 card-footer ">
          <div class="form-group float-end ">
            <button [disabled]="ColorSetting.invalid || sendingResponse['colorSetting']" type="submit"
              class="btn btn-secondary">{{'Save Changes' | translate | titlecase}}
              @if(sendingResponse['colorSetting']){
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }
            </button>
          </div>
        </div>
      </form>
      <!-- </form> -->
    </div>
  </div>
  <!-- Color Setting -->

  <!-- Global Language Setting -->
  <div class="col-xl-6 col-lg-6 col-md-6">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Global Language Setting' | translate | titlecase}}</h4>
      </div>
      <form #GlobalLanguageSetting="ngForm"
        (ngSubmit)="globalLanguageSetting(GlobalLanguageSetting.value, 'globalLanguageSetting')">
        <div class="card-body">
          <div class="form-group mb-4">
            <label class="form-label">{{'Select Language' | translate | titlecase}}</label>
            <ng-select #default_langselect [items]="languagesList" [searchable]="false" class="form-control"
              [(ngModel)]="selectedLanguage" bindLabel="languagename" bindValue="languagecode" name="default_lang"
              id="input-default_lang" [virtualScroll]="true" [loading]="!languagesList" (open)="dropdownSearch()">
              <ng-template ng-header-tmp>
                <div style="display:flex;">
                  <input #filterInput class="form-control" type="text"
                    (input)="default_langselect.filter($any($event.target).value)" />
                  <i [hidden]="filterInput.value.length === 0" class="material-icons"
                    (click)="default_langselect.filter(''); filterInput.value = ''">close</i>
                </div>
              </ng-template>
            </ng-select>
          </div>
          @if(localStorageLang){
          <span class="text-muted"> {{'You have already stored' | translate | titlecase}} "{{localStorageLang |
            uppercase}}" {{'in localStorage' | translate | titlecase}} </span>
          }
        </div>
        <div class="col-md-12 card-footer ">
          <div class="form-group float-end ">
            <button [disabled]="sendingResponse['globalLanguageSetting']" type="submit"
              class="btn btn-secondary">{{'Save Changes' |
              translate}}
              @if(sendingResponse['globalLanguageSetting']){<i class="fa fa-spinner fa-spin mx-1"></i>}</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Global Language Setting -->

  <!-- Date and Time Format -->
  <div class="col-xl-6 col-lg-6 col-md-6">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Global Date and Time Format' | translate | titlecase}}</h4>
      </div>
      <form #GlobalDateTimeFormat="ngForm"
        (ngSubmit)="globalDateTimeFormat(GlobalDateTimeFormat.value, 'globalDateTimeFormat')">
        <div class="card-body">
          <div class="row">
            <div class="col-xl-6 col-lg-6 ">
              <div class="form-group mb-4">
                <label class="form-label">{{'Select Date Format' | translate | titlecase}}</label>
                <ng-select #date_formatselect [items]="dateList" [searchable]="false" class="form-control"
                  [ngModel]="setting?.date_format" bindLabel="value" bindValue="value" name="date_format"
                  [virtualScroll]="true" [loading]="!dateList" (open)="dropdownSearch()">
                  <ng-template ng-header-tmp>
                    <div style="display:flex;">
                      <input #filterInput class="form-control" type="text"
                        (input)="date_formatselect.filter($any($event.target).value)" />
                      <i [hidden]="filterInput.value.length === 0" class="material-icons"
                        (click)="date_formatselect.filter(''); filterInput.value = ''">close</i>
                    </div>
                  </ng-template>
                </ng-select>
              </div>
            </div>
            <div class="col-xl-6 col-lg-6 ">
              <div class="form-group mb-4">
                <label class="form-label">{{'Select Time Format' | translate | titlecase}}</label>
                <ng-select #time_formatselect [items]="timeList" [searchable]="false" class="form-control"
                  [ngModel]="setting?.time_format" bindLabel="name" bindValue="value" name="time_format"
                  [virtualScroll]="true" [loading]="!timeList" (open)="dropdownSearch()">
                  <ng-template ng-header-tmp>
                    <div style="display:flex;">
                      <input #filterInput class="form-control" type="text"
                        (input)="time_formatselect.filter($any($event.target).value)" />
                      <i [hidden]="filterInput.value.length === 0" class="material-icons"
                        (click)="time_formatselect.filter(''); filterInput.value = ''">close</i>
                    </div>
                  </ng-template>
                </ng-select>
              </div>
            </div>

          </div>
        </div>
        <div class="col-md-12 card-footer ">
          <div class="form-group float-end ">
            <button [disabled]="sendingResponse['globalDateTimeFormat']" type="submit" class="btn btn-secondary">{{'Save
              Changes' |
              translate}}
              @if(sendingResponse['globalDateTimeFormat']){
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }
            </button>
          </div>
        </div>
      </form>
      <!-- </form> -->
    </div>
  </div>
  <!-- Date and Time Format -->

  <!-- Start Week Days -->
  <div class="col-xl-6 col-lg-6 col-md-6">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'First Day of the Week' | translate | titlecase}}</h4>
      </div>
      <form #FirstDayoftheWeek="ngForm" (ngSubmit)="firstDayoftheWeek(FirstDayoftheWeek.value, 'firstDayoftheWeek')">
        <div class="card-body">
          <div class="form-group mb-4">
            <label class="form-label">{{'Select Day' | translate | titlecase}}</label>
            <ng-select #start_weekselect [items]="weekList" [searchable]="false" class="form-control"
              ngModel="{{setting?.start_week}}" bindLabel="name" bindValue="value" name="start_week"
              id="input-start_week" [virtualScroll]="true" [loading]="!weekList" (open)="dropdownSearch()">
              <ng-template ng-header-tmp>
                <div style="display:flex;">
                  <input #filterInput class="form-control" type="text"
                    (input)="start_weekselect.filter($any($event.target).value)" />
                  <i [hidden]="filterInput.value.length === 0" class="material-icons"
                    (click)="start_weekselect.filter(''); filterInput.value = ''">close</i>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-md-12 card-footer ">
          <div class="form-group float-end ">
            <button [disabled]="sendingResponse['firstDayoftheWeek']" type="submit" class="btn btn-secondary">{{'Save
              Changes' |
              translate}}
              @if(sendingResponse['firstDayoftheWeek']){<i class="fa fa-spinner fa-spin mx-1"></i>}</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Start Week Days -->

  <!-- TimeZones -->
  <div class="col-xl-6 col-lg-6 col-md-6">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Global Timezones' | translate | titlecase}}</h4>
      </div>
      <form #GlobalTimezones="ngForm" (ngSubmit)="globalTimezones(GlobalTimezones.value, 'globalTimezones')">
        <div class="card-body">
          <div class="form-group mb-4">
            <label class="form-label">{{'Select Global Timezones' | translate | titlecase}}</label>
            <ng-select class="form-control timezoneWrapp" [items]="timezones" #select
              [placeholder]="'Select Timezone' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false"
              [searchable]="true" dropdownPosition="auto" bindValue="name" name="timezones" [(ngModel)]="timezone"
              (ngModelChange)="timeZoneChanged($event)">
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item}}</span></div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-md-12 card-footer ">
          <div class="form-group float-end ">
            <button [disabled]="sendingResponse['globalTimezones']" type="submit" class="btn btn-secondary">{{'Save
              Changes' |
              translate}}@if(sendingResponse['globalTimezones']){<i class="fa fa-spinner fa-spin mx-1"></i>}</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- End TimeZone -->
  <!-- Contact us email -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Contact Us' | translate | titlecase}}</h4>
      </div>
      <form #contactus="ngForm" (ngSubmit)="contact(contactus, 'contact')">
        <div class="switch_section my-0 ps-3">
          <div class="switch-toggle d-flex d-md-max-block mt-4 mb-3">
            <span class="onoffswitch2">
              <input type="checkbox" name="CONTACT_ENABLE" id="contact"
                class=" toggle-class onoffswitch2-checkbox enablemenus"
                [ngModel]="setting?.CONTACT_ENABLE == 'yes' ? true : false"
                [checked]="setting?.CONTACT_ENABLE == 'yes' ? true : false" #contactemail>
              <label for="contact" class="toggle-class onoffswitch2-label"></label>
            </span>
            <label class="form-label ps-3 ps-md-max-0">{{'Enable Contact Us' | translate | titlecase}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you enable this setting, the "Contact Us" option will
                appear in the application’s landing page.' | translate | titlecase}})</i></small>
          </div>
        </div>
        <div class="card-body pt-2 pt-0 pb-3">
          <div class="form-group d-flex d-md-max-block mb-0">
            <label class="form-label">{{'Enter Contact us Email' | translate | titlecase}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>({{'Enter an email address to receive contact-us form
                details.' | translate | titlecase}})</i></small>
          </div>
          <div class="">
            <input type="email" placeholder="admin@example.com" name="contact_form_mail" class="form-control" required
              pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}" [ngModel]="setting?.contact_form_mail" #c_email="ngModel"
              [class.is-invalid]="c_email.invalid && c_email.touched">@if ((c_email.invalid && c_email.touched) ||
            c_email.dirty) {
            <div>
              @if (c_email.errors?.['required']) {
              <small class="text-danger">
                {{'Email address is required' | translate}}</small>
              }
              @if (c_email.errors?.['pattern']) {
              <small class="text-danger">{{'Please check Email Format' | translate}}</small>
              }
            </div>
            }
          </div>
        </div>
        <div class="col-md-12 card-footer ">
          <div class="form-group float-end ">
            <button [disabled]="sendingResponse['contact']" type="submit" class="btn btn-secondary">{{'Save Changes' |
              translate | titlecase}}
              @if(sendingResponse['contact']){<i class="fa fa-spinner fa-spin mx-1"></i>}</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- End Contact us email -->

  <!-- Two Factor Authentication -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title">{{"Two Factor Authentication Settings" | translate | titlecase}}</h4>
      </div>
      <form #twoFactor="ngForm" (ngSubmit)="twoFactorAuthentication(twoFactor, 'twofactorDisable')">
        <div class="card-body">
          <div class="">
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <a class="onoffswitch2">
                      <input type="checkbox" id="emp_google_two_fact" name="Employe_google_two_fact" value="on"
                        class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.Employe_google_two_fact=='on' ? true : false"
                        [ngModel]="setting?.Employe_google_two_fact=='on' ? true : false"
                        [value]="setting?.Employe_google_two_fact=='on' ? true : false">
                      <label for="emp_google_two_fact" class="toggle-class onoffswitch2-label"></label>
                    </a>
                    <div class="ps-3">
                      <label class="form-label">{{'Enable Employee Google Two Factor Authentication' | translate |
                        titlecase}}<small class="text-muted "> <i> ({{'If you enable this setting, the application
                            "employees" will be able to use "Google Two Factor Authentication" for login into our
                            appliation.' | translate | titlecase}})</i></small></label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <a class="onoffswitch2">
                      <input type="checkbox" id="emp_email_two_fact" name="Employe_email_two_fact" value="on"
                        class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.Employe_email_two_fact =='on' ? true : false"
                        [ngModel]="setting?.Employe_email_two_fact =='on' ? true : false"
                        [value]="setting?.Employe_email_two_fact =='on' ? true : false">
                      <label for="emp_email_two_fact" class="toggle-class onoffswitch2-label"></label>
                    </a>
                    <div class="ps-3">
                      <label class="form-label">{{'Enable Employee Email Two Factor Authentication'| translate}}<small
                          class="text-muted "> <i> ({{'If you enable this setting, the application "employees" will be
                            able to use "Email Two Factor Authentication" for login into our appliation.'|
                            translate}})</i></small></label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <a class="onoffswitch2">
                      <input type="checkbox" id="cust_google_two_fact" name="Customer_google_two_fact" value="on"
                        class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.Customer_google_two_fact=='on' ? true : false"
                        [ngModel]="setting?.Customer_google_two_fact=='on' ? true : false"
                        [value]="setting?.Customer_google_two_fact=='on' ? true : false">
                      <label for="cust_google_two_fact" class="toggle-class onoffswitch2-label"></label>
                    </a>
                    <div class="ps-3">
                      <label class="form-label">{{'Enable Customer Google Two Factor Authentication' | translate |
                        titlecase}}<small class="text-muted "> <i> ({{'If you enable this setting, the application
                            "customers" will be able to use "Google Two Factor Authentication" for login into our
                            appliation.' | translate | titlecase}})</i></small></label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <a class="onoffswitch2">
                      <input type="checkbox" id="cust_email_two_fact" name="Customer_email_two_fact" value="on"
                        class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.Customer_email_two_fact=='on' ? true : false"
                        [ngModel]="setting?.Customer_email_two_fact=='on' ? true : false"
                        [value]="setting?.Customer_email_two_fact=='on' ? true : false">
                      <label for="cust_email_two_fact" class="toggle-class onoffswitch2-label"></label>
                    </a>
                    <div class="ps-3">
                      <label class="form-label">{{'Enable Customer Email Two Factor Authentication' | translate |
                        titlecase}}<small class="text-muted"> <i> ({{'If you enable this setting, the application "
                            customers" will be able to use "Email Two Factor Authentication" for login into our
                            appliation.' | translate | titlecase}})</i></small></label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="form-group float-end">
            <button type="submit" [disabled]="sendingResponse['twofactorDisable']" class="btn btn-secondary">{{'Save
              Changes' | translate | titlecase}}
              @if(sendingResponse['twofactorDisable']){<i class="fa fa-spinner fa-spin mx-1"></i>
              }</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Two Factor Authentication -->


  <!-- Security Settings -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Security settings' | translate}}</h4>
      </div>
      <form #securitySetting="ngForm" (ngSubmit)="securitySettingFn(securitySetting, 'security')">
        <div class="card-body">
          <div class="">
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <a class="onoffswitch2">
                      <input type="checkbox" id="inspectDisable" name="inspectDisable" value="on"
                        class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.['inspectDisable'] == 'on' ? true : false"
                        [ngModel]="setting?.['inspectDisable'] == 'on' ? true : false">
                      <label for="inspectDisable" class="toggle-class onoffswitch2-label"></label>
                    </a>
                    <div class="ps-3">
                      <label class="form-label">{{'Right-Click Protection' | translate}}<small class="text-muted ">
                          <i> ({{'This setting prevents users from accessing the right-click context menu on the
                            application.' | translate}})</i></small></label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <a class="onoffswitch2">
                      <input type="checkbox" id="selectDisabled" name="selectDisabled" value="on"
                        class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.['selectDisabled'] == 'on' ? true : false"
                        [ngModel]="setting?.['selectDisabled'] == 'on' ? true : false">
                      <label for="selectDisabled" class="toggle-class onoffswitch2-label"></label>
                    </a>
                    <div class="ps-3">
                      <label class="form-label">{{'Text Selection Prevention' | translate}}<small class="text-muted ">
                          <i> ({{'This setting disables the ability for users to select and copy text from your
                            application.' | translate}})</i></small></label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="form-group float-end">
            <button type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Security Settings -->

  <!-- Inactive Customer Auto Logout -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title">{{ 'Session Timeout Settings' | translate }}</h4>
      </div>
      <form #sessionForm="ngForm" (ngSubmit)="sessionFn(sessionForm, 'session')">
        <div class="card-body">
          <!--Customer Profile Delete Notify-->
          <div class="border-bottom">
            <div class="col-sm-12 col-md-12">
              <div class="form-group ">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <a class="onoffswitch2">
                      <input type="checkbox" id="myonoffswitchadminautologout" name="admin_users_inactive_auto_logout"
                        value="on" class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.['admin_users_inactive_auto_logout'] == 'on'"
                        [ngModel]="setting?.['admin_users_inactive_auto_logout'] == 'on'">
                      <label for="myonoffswitchadminautologout" class="toggle-class onoffswitch2-label"></label>
                    </a>
                    <div class="ps-3">
                      <label class="form-label">{{ 'Enable Admin Panel Users Session Timeout' | translate }}<small
                          class="text-muted ">
                          <i> ({{ 'If you enable this setting, admin panel users will be automatically logged out based
                            on their session time (set in minutes) below. This feature helps enhance security and
                            privacy for admin panel users.' | translate }})</i></small></label>

                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 ms-7 ps-3 ">
              <div class="form-group d-flex d-md-max-block ">
                <input type="number" maxlength="2" class="form-control wd-5 w-lg-max-30 ms-2 "
                  name="admin_users_inactive_auto_logout_time"
                  [ngModel]="setting?.['admin_users_inactive_auto_logout_time']" [min]="1">
                <label class="form-label mt-2 ms-2">{{ 'Session Timeout In Minutes' | translate }}</label>
              </div>
            </div>
          </div>
          <div class="">
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <a class="onoffswitch2">
                      <input type="checkbox" id="myonoffswitchautologout" name="customer_inactive_auto_logout"
                        value="on" class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.['customer_inactive_auto_logout'] == 'on'"
                        [ngModel]="setting?.['customer_inactive_auto_logout'] == 'on'">
                      <label for="myonoffswitchautologout" class="toggle-class onoffswitch2-label"></label>
                    </a>
                    <div class="ps-3">
                      <label class="form-label">{{ 'Enable Customer Dashboard Session Timeout' | translate }}<small
                          class="text-muted ">
                          <i> ({{ 'If you enable this setting, customers will be automatically logged out based on their
                            session time (set in minutes) below. This feature helps enhance security and privacy for
                            customers.' | translate }})</i></small></label>

                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 ms-7 ps-3 ">
              <div class="form-group d-flex d-md-max-block">
                <input type="number" maxlength="2" class="form-control wd-5 w-lg-max-30 ms-2 "
                  name="customer_inactive_auto_logout_time" [ngModel]="setting?.['customer_inactive_auto_logout_time']"
                  [min]="1">
                <label class="form-label mt-2 ms-2">{{ 'Session Timeout In Minutes' | translate}}</label>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="form-group float-end">
            <button type="submit" class="btn btn-secondary">{{ 'Save' | translate }}</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Inactive Customer Auto Logout -->

  <!-- Customer/Guest Delete -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Inactive Customer/Guest Delete ' | translate | titlecase}}</h4>
      </div>
      <form #cgdelete="ngForm" (ngSubmit)="customerprofiledelete(cgdelete, 'customprofile')">

        <div class="card-body">
          <!--Customer Profile Delete Notify-->
          <div class="border-bottom">
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <span class="onoffswitch2">
                      <input type="checkbox" id="myonoffswitch18" name="customer_inactive_notify"
                        class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.customer_inactive_notify == 'on' ? true : false"
                        [ngModel]="setting?.customer_inactive_notify == 'on' ? true : false">
                      <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
                    </span>
                    <div class="ps-3">
                      <label class="form-label">{{'Customer Profile Auto Delete Enable' |
                        translate}}</label>
                      <small class="text-muted ">
                        <i>({{'If you enable this ticket setting, inactive customers will receive an email after the
                          time period specified below (Inactive Months) stating that their account has been unused since
                          then and will be deleted automatically after the specified (Customer Delete Days).' |
                          translate | titlecase}})</i></small>
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <div class="col-sm-12 col-md-12">
              <div class="form-group d-flex d-md-max-block">
                <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7 ps-3  "
                  name="customer_inactive_notify_month" [min]="1" [value]="setting?.customer_inactive_notify_date"
                  [ngModel]="setting?.customer_inactive_notify_date">
                <label class="form-label mt-2 ms-2">{{'Inactive Months' | translate | titlecase}}</label>
              </div>

            </div>
            <div class="col-sm-12 col-md-12">
              <div class="form-group d-flex d-md-max-block">
                <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7" [min]="1"
                  name="customer_inactive_days" [value]="setting?.customer_inactive_week_date"
                  [ngModel]="setting?.customer_inactive_week_date">
                <label class="form-label  mt-2 ms-2">{{'Customer Delete Days' | translate | titlecase}}</label>
              </div>

            </div>
          </div>
          <div>
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <span class="onoffswitch2">
                      <input type="checkbox" id="guestdelete" name="guest_inactive_notify"
                        class=" toggle-class onoffswitch2-checkbox"
                        [checked]="setting?.guest_inactive_notify == 'on' ? true : false"
                        [ngModel]="setting?.guest_inactive_notify == 'on' ? true : false">
                      <label for="guestdelete" class="toggle-class onoffswitch2-label"></label>
                    </span>
                    <div class="ps-3">
                      <label class="form-label">{{'Guest Profile Auto Delete Enable' |
                        translate}}</label>
                      <small class="text-muted ">
                        <i>
                          ({{'If you enable this ticket setting, inactive guests will receive an email after the time
                          period specified below (Inactive Months) stating that their account has been unused since then
                          and will be deleted automatically after the specified (Guest Delete Days).' | translate |
                          titlecase}})</i></small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12">
              <div class="form-group d-flex d-md-max-block">
                <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7 ps-3  "
                  name="guest_inactive_notify_month" [value]="setting?.guest_inactive_notify_date"
                  [ngModel]="setting?.guest_inactive_notify_date" [min]="1">
                <label class="form-label mt-2 ms-2">{{'Inactive Months' | translate | titlecase}}</label>
              </div>
            </div>
            <div class="col-sm-12 col-md-12">
              <div class="form-group d-flex d-md-max-block">
                <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7"
                  name="guest_inactive_days" [value]="setting?.guest_inactive_week_date"
                  [ngModel]="setting?.guest_inactive_week_date" [min]="1">
                <label class="form-label  mt-2 ms-2">{{'Guest Delete Days' | translate | titlecase}}</label>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="form-group float-end">
            <button [disabled]="sendingResponse['customprofile']" type="submit" class="btn btn-secondary">{{'Save
              Changes' |
              translate}}@if (sendingResponse['customprofile']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Customer/Guest Delete -->


  <!-- Switches -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'App Global Settings' | translate | titlecase}}</h4>
      </div>
      <form #GlobalSettingsModel="ngForm">
        <div class="card-body">
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="sprukoadminp" id="sprukoadminp"
                  class="toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.SPRUKOADMIN_P == 'on' ? true : false"
                  [ngModel]="setting?.SPRUKOADMIN_P == 'on' ? true : false"
                  [value]="setting?.SPRUKOADMIN_P == 'on' ? true : false">
                <label for="sprukoadminp" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Enable Personal Setting For Admin Panel'|
                translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>
                  ({{'If you disable this setting, the "Personal Setting" with the "Switch to Dark-Mode" option will
                  disappear from the Admin panel on the profile page.' |
                  translate}})</i></small>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="sprukocustp" id="sprukoadminc"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.SPRUKOADMIN_C == 'on' ? true : false"
                  [ngModel]="setting?.SPRUKOADMIN_C == 'on' ? true : false"
                  [value]="setting?.SPRUKOADMIN_C == 'on' ? true : false">
                <label for="sprukoadminc" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Enable Dark Mode Switch For All Customer’s' |
                translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>
                  ({{'If you enable this setting, it will appear on all customer panels on the profile page with the
                  "Switch to Dark-Mode" option. And global "Dark-Mode" settings will not apply to existing users of the
                  customers panel.' | translate | titlecase}})</i></small>
            </div>
          </div>

          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="darkmode" id="darkmode"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.DARK_MODE == '1' ? true : false"
                  [ngModel]="setting?.DARK_MODE == '1' ? true : false"
                  [value]="setting?.DARK_MODE == '1' ? true : false">
                <label for="darkmode" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Enable Dark-Mode Globally' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>
                  ({{'If you enable this setting, the whole application will convert into "Dark-Mode" except for the
                  users that are permitted with "Personal Settings."' |
                  translate}})</i></small>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="status" id="myonoffswitch1"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.REGISTER_POPUP == 'yes' ? true : false"
                  [ngModel]="setting?.REGISTER_POPUP == 'yes' ? true : false"
                  [value]="setting?.REGISTER_POPUP == 'yes' ? true : false">
                <label for="myonoffswitch1" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Enable Popup Register/Login' |
                translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you enable this setting, only customers can access
                  the registration and login forms with the “popup modal”.' | translate}})</i></small>
            </div>
          </div>


          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="registerdisable" id="REGISTER_DISABLE"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.REGISTER_DISABLE == 'off' ? true : false"
                  [ngModel]="setting?.REGISTER_DISABLE == 'off' ? true : false"
                  [value]="setting?.REGISTER_DISABLE == 'off' ? true : false">
                <label for="REGISTER_DISABLE" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Disable Register' | translate | titlecase}}</label>
              <a aria-label="edit" href="javascript:void(0);" class="ps-1 sprukologindisable"><i (click)="open(content)"
                  class="feather feather-edit-2"></i></a>
              <small class="text-muted ps-2 ps-md-max-0"><i>
                  ({{'If you enable this setting, "Register" options will disappear from the application in the header
                  section, and new visitors wont be able to register. Only existing customers can open a ticket.' |
                  translate | titlecase}})</i></small>
            </div>
          </div>

          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">

              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="logindisable" id="login_disable"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.login_disable == 'on' ? true : false"
                  [ngModel]="setting?.login_disable == 'on' ? true : false"
                  [value]="setting?.login_disable == 'on' ? true : false">
                <label for="login_disable" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Login Disable' | translate | titlecase}}</label><a
                aria-label="edit" href="javascript:void(0);" class="ps-1 sprukologindisable"><i (click)="open(content)"
                  class="feather feather-edit-2"></i></a>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you "Enable" this setting, customers cannot login to
                  their dashboard.' | translate | titlecase}})</i></small>
            </div>
          </div>

          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="googledisable" id="GOOGLEFONT_DISABLE"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.GOOGLEFONT_DISABLE == 'on' ? true : false"
                  [ngModel]="setting?.GOOGLEFONT_DISABLE == 'on' ? true : false"
                  [value]="setting?.GOOGLEFONT_DISABLE == 'on' ? true : false">
                <label for="GOOGLEFONT_DISABLE" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Disable Google Font' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you enable this setting, "Google Font" will not apply
                  to the whole application or site.' | translate | titlecase}})</i></small>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="forcessl" id="FORCE_SSL"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.FORCE_SSL == 'on' ? true : false"
                  [ngModel]="setting?.FORCE_SSL == 'on' ? true : false"
                  [value]="setting?.FORCE_SSL == 'on' ? true : false">
                <label for="FORCE_SSL" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Enable Force SSL (https)' |
                translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you enable this setting, it will make your web
                  application secure using "force SSL" when it is not secure, even if your domain is certified with an
                  SSL certificate.' | translate | titlecase}})</i></small>
            </div>
          </div>

          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="knowledgeForm(GlobalSettingsModel)">
                <input type="checkbox" name="KNOWLEDGE_ENABLE" id="myonoffswitch12"
                  class=" toggle-class onoffswitch2-checkbox enablemenus"
                  [checked]="setting?.KNOWLEDGE_ENABLE == 'yes' ? true : false"
                  [ngModel]="setting?.KNOWLEDGE_ENABLE == 'yes' ? true : false"
                  [value]="setting?.KNOWLEDGE_ENABLE == 'yes' ? true : false">
                <label for="myonoffswitch12" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Enable Knowledge' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you disable this setting, the "Knowledge" option will
                  disappear from the application in the header section.' |
                  translate}})</i></small>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="knowledgeForm(GlobalSettingsModel)">
                <input type="checkbox" name="FAQ_ENABLE" id="faqs"
                  class=" toggle-class onoffswitch2-checkbox enablemenus"
                  [checked]="setting?.FAQ_ENABLE == 'yes' ? true : false"
                  [ngModel]="setting?.FAQ_ENABLE == 'yes' ? true : false"
                  [value]="setting?.FAQ_ENABLE == 'yes' ? true : false">
                <label for="faqs" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Enable Faq' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you disable this setting, the "faq" option will
                  disappear from the application in the header section.' |
                  translate}})</i></small>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">

              <span class="onoffswitch2" (change)="profileuser(GlobalSettingsModel)">
                <input type="checkbox" name="PROFILE_USER_ENABLE" id="myonoffswitch123"
                  class=" toggle-class onoffswitch2-checkbox"
                  [checked]="setting?.PROFILE_USER_ENABLE == 'yes' ? true : false"
                  [ngModel]="setting?.PROFILE_USER_ENABLE == 'yes' ? true : false"
                  [value]="setting?.PROFILE_USER_ENABLE == 'yes' ? true : false">
                <label for="myonoffswitch123" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Enable Customer Profile Image Upload' |
                translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you disable this setting, the "Upload Image" option
                  will disappear from the customers profile page, and they wont be able to upload their profile
                  picture.' | translate | titlecase}})</i></small>
            </div>

          </div>

          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">

              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="envatoon" id="envato_on"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.ENVATO_ON == 'on' ? true : false"
                  [ngModel]="setting?.ENVATO_ON == 'on' ? true : false"
                  [value]="setting?.ENVATO_ON == 'on' ? true : false">
                <label for="envato_on" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Envato On' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you disable this Envato switch, the "Envato" option
                  will disappear from the application’s side menu.' |
                  translate}})</i></small>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="article_count" id="article_count"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.article_count == 'on' ? true : false"
                  [ngModel]="setting?.article_count == 'on' ? true : false"
                  [value]="setting?.article_count == 'on' ? true : false">
                <label for="article_count" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Article Count Enable' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you disable this setting, article views count will
                  disappear in the "Article" view page.' | translate | titlecase}})</i></small>
            </div>
          </div>

          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="defaultsocialloginon" id="only_social_logins"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.only_social_logins == 'on' ? true : false"
                  [ngModel]="setting?.only_social_logins == 'on' ? true : false"
                  [value]="setting?.only_social_logins == 'on' ? true : false">
                <label for="only_social_logins" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Default Social Logins' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you enable this setting, social login form will appear to customer’s by default. They cannot access normal login form' | translate |
                  titlecase}})</i></small>
            </div>
          </div>

          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="defaultloginon" id="defaultlogin_on"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.defaultlogin_on == 'on' ? true : false"
                  [ngModel]="setting?.defaultlogin_on == 'on' ? true : false"
                  [value]="setting?.defaultlogin_on == 'on' ? true : false">
                <label for="defaultlogin_on" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Default Login' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you enable it will be a login page is default' |
                  translate | titlecase}})</i></small>
            </div>
          </div>

          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">

              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="sidemenustyle" id="sidemenu_icon_style"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.sidemenu_icon_style == 'on' ? true : false"
                  [ngModel]="setting?.sidemenu_icon_style == 'on' ? true : false"
                  [value]="setting?.sidemenu_icon_style == 'on' ? true : false">
                <label for="sidemenu_icon_style" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Sidemenu Icon Style' | translate | titlecase}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you "Enable" this setting, the whole application sidemenu will be converted into "Sidemenu Icon Style".' |
                  translate}})</i></small>
            </div>
          </div>

          <!-- Customer Profile Delete Enable -->
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">

              <span class="onoffswitch2" (change)="GlobalSettings(GlobalSettingsModel)">
                <input type="checkbox" name="custdeleteprofile" id="cust_profile_delete_enable"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [checked]="setting?.cust_profile_delete_enable == 'on' ? true : false"
                  [ngModel]="setting?.cust_profile_delete_enable == 'on' ? true : false"
                  [value]="setting?.cust_profile_delete_enable == 'on' ? true : false">
                <label for="cust_profile_delete_enable" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Customer Account Delete On/off' |
                translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you "Enable" this setting, customers can "Delete" their account permanently.' | translate | titlecase}})</i></small>
            </div>
          </div>
          <!-- End Customer Profile Delete Enable -->

          <!-- Customer Email Update Enable -->
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span (change)="GlobalSettings(GlobalSettingsModel)" class="onoffswitch2">
                <input type="checkbox" name="cust_email_update" id="cust_email_update"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister" value="yes"
                  [ngModel]="setting?.cust_email_update == 'on' ? true : false"
                  [checked]="setting?.cust_email_update == 'on' ? true : false">
                <label for="cust_email_update" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{ 'Customer Email Update Permission' | translate | titlecase
                }}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{ 'If you "Enable" this setting, customers can "Update" their email address.' | translate | titlecase }})</i></small>
            </div>
          </div>
          <!-- End Customer Email Update  Enable -->


          <!-- Customer Mobile Number Update Enable -->
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span (change)="GlobalSettings(GlobalSettingsModel)" class="onoffswitch2">
                <input type="checkbox" name="cust_mobile_update" id="cust_mobile_update"
                  class=" toggle-class onoffswitch2-checkbox sprukoregister" value="yes"
                  [ngModel]="setting?.cust_mobile_update == 'on' ? true : false"
                  [checked]="setting?.cust_mobile_update == 'on' ? true : false">
                <label for="cust_mobile_update" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{ 'Customer Mobile Number Update Permission'| translate |
                titlecase }}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{ 'If you "Enable" this setting, customers can "Update" their Mobile Number.'| translate | titlecase }})</i></small>
            </div>
          </div>
          <!-- End Customer Mobile Number Update  Enable -->

          <!-- End Customer Mobile Number Update  Enable -->
          <!-- Admin panel members translate button -->
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2">
                <input (change)="GlobalSettings(GlobalSettingsModel)" type="checkbox" name="emp_google_translate"
                  id="emp_google_translate" class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [ngModel]="setting?.emp_google_translate == 'on' ? true : false"
                  [checked]="setting?.emp_google_translate == 'on' ? true : false" value="yes" />
                <label for="emp_google_translate" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Google Translate permission for employees' |
                translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you "Enable" this setting, employees can use google translate plugin for translating text in ticket page' | translate }})</i></small>
            </div>
          </div>
          <!-- End Admin panel members translate button -->
          <!-- Customers translate button -->
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2">
                <input (change)="GlobalSettings(GlobalSettingsModel)" type="checkbox" name="cust_google_translate"
                  id="cust_google_translate" class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [ngModel]="setting?.cust_google_translate == 'on' ? true : false"
                  [checked]="setting?.cust_google_translate == 'on' ? true : false" value="yes" />
                <label for="cust_google_translate" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Google Translate permission for customers' |
                translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you "Enable" this setting, customers can use google translate plugin for translating text in ticket page' | translate }})</i></small>
            </div>
          </div>
          <!-- End Customers translate button -->
          <!-- Customers translate button -->
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block mt-4">
              <span class="onoffswitch2">
                <input (change)="GlobalSettings(GlobalSettingsModel)" type="checkbox" name="cust_email_verification"
                  id="cust_email_verification" class=" toggle-class onoffswitch2-checkbox sprukoregister"
                  [ngModel]="setting?.cust_email_verification == 'on' ? true : false"
                  [checked]="setting?.cust_email_verification == 'on' ? true : false" value="yes" />
                <label for="cust_email_verification" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Customer email verification' | translate}}</label>
              <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you "Enable" this setting, when a new customer registered, email veification link will be sent to that registered mail id' | translate }})</i></small>
            </div>
          </div>
          <!-- End Customers translate button -->
        </div>
      </form>
    </div>
  </div>
  <!-- End switches-->


  <!-- Invoice address setting  -->
  <div class="col-lg-12">
    <div class="card custom-card">
      <div class="card-header">
        <div class="card-title flex-fill">{{ 'Invoice Address Settings' | translate }}</div>
      </div>
      <form id="invoiceSetting" #invoiceSetting="ngForm"
        (ngSubmit)="invoiceSettingFn(invoiceSetting, 'invoiceSetting')">
        <div class="card-body">
          <div class="row gy-3">
            <div class="col-md-12">
              <label class="form-label">{{ 'Company Full Name' | translate }} <span class="text-danger">*</span></label>
              <input name="companyName" type="text" class="form-control " [placeholder]="'Company Name' | translate"
                [ngModel]="setting?.companyName">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'Street Address' | translate }} <span class="text-danger">*</span></label>
              <input name="addressLine1" type="text" class="form-control " [placeholder]="'Street Address' | translate"
                [ngModel]="setting?.addressLine1">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'Address Line 2' | translate }}</label>
              <input name="addressLine2" type="text" class="form-control " [placeholder]="'Address Line 2' | translate"
                [ngModel]="setting?.addressLine2">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'City' | translate }} <span class="text-danger">*</span></label>
              <input name="cityName" type="text" class="form-control " [placeholder]="'Enter City Name' | translate"
                [ngModel]="setting?.cityName">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'State' | translate }} <span class="text-danger">*</span></label>
              <input name="stateName" type="text" class="form-control " [placeholder]="'Enter State Name' | translate"
                [ngModel]="setting?.stateName">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'Zip/Postal Code' | translate }} <span class="text-danger">*</span></label>
              <input name="zipPostalCode" type="text" class="form-control "
                [placeholder]="'Enter Zip/Postal Code' | translate" [ngModel]="setting?.zipPostalCode">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'Country' | translate }} <span class="text-danger">*</span></label>
              <input name="countryName" type="text" class="form-control "
                [placeholder]="'Enter Country Name' | translate" [ngModel]="setting?.countryName">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'Tax Name' | translate }} </label>
              <input name="taxName" type="text" class="form-control " [placeholder]="'GST / VAT' | translate "
                [ngModel]="setting?.taxName">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'Tax %' | translate }} </label>
              <input name="taxPercent" type="text" class="form-control "
                [placeholder]="'Enter Tax Percentage' | translate" [ngModel]="setting?.taxPercent">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'TAX Id' | translate }} </label>
              <input name="taxId" type="text" class="form-control " [placeholder]="'Enter Tax Id' | translate"
                [ngModel]="setting?.taxId">
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ 'Invoice Id Starting Number' | translate }} </label>
              <input name="customInvoiceId" type="number" class="form-control "
                [placeholder]="'Enter a number' | translate" [ngModel]="setting?.customInvoiceId">
            </div>
          </div>
        </div>
      </form>
      <div class="card-footer">
        <div class="float-end">
          <button type="submit" form="invoiceSetting" class="btn btn-secondary">{{ 'Save Changes' | translate
            }}</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer Copyright Text -->
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Footer Copyright Text' | translate | titlecase}}</h4>
      </div>
      <form #FooterCopyrightText="ngForm" (ngSubmit)="footerCopyrightText(FooterCopyrightText.value, 'footerText')">
        <input type="hidden" name="id" value="1">
        <div class="card-body">

          <angular-editor [config]="toolbar" #description="ngModel" [ngModel]="ResponceProfile?.footertext?.copyright"
            [class.is-invalid]="description.invalid && description.touched" class="form-control"
            [placeholder]="'footer text' | translate | titlecase" name="copyright"></angular-editor>
          @if (description.errors?.['maxLength']) {
          <div class="limit-error">
            {{ description.errors?.['maxLength'].actualLength }}/{{ description.errors?.['maxLength'].maxLength }} {{'
            exceeded the limit' | translate}}
          </div>
          }
        </div>
        <div class="card-footer">
          <div class="form-group float-end ">
            <button [disabled]="sendingResponse['footerText']" type="submit" class="btn btn-secondary">{{'Save Changes'
              |
              translate}}@if (sendingResponse['footerText']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Footer Copyright Text -->
</div>


<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="card-title">{{"Login/Register Disable Statement" | translate}}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <form #FormData="ngForm" (ngSubmit)="ChangeTheValues(FormData, 'editmodel')">
    <div class="modal-body">
      <div class="form-group">
        <label class="form-label">{{'Name' | translate | titlecase}} <span class="text-red">*</span></label>
        <input required ngModel="{{setting?.login_disable_statement}}" type="text" class="form-control" name="name"
          id="name" value="{{setting?.login_disable_statement}}"
          [class.is-invalid]="nameField.invalid && nameField.touched" #nameField="ngModel">
        @if ((nameField.invalid && nameField.touched) || nameField.dirty) {
        <div>
          @if (nameField.errors?.['required']) {
          <small class="text-danger">{{'Name is required' |
            translate}}</small>
          }
        </div>
        }

      </div>
    </div>
    <div class="modal-footer">
      <a (click)="modal.dismiss('Cross click')" class="btn btn-outline-danger">Close</a>
      <button type="submit" [disabled]="FormData.invalid || sendingResponse['editmodel']" class="btn btn-secondary"
        id="sprukologin" (click)="modal.dismiss('Cross click')">{{'Save' |
        translate}}@if (sendingResponse['editmodel']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
    </div>
  </form>
</ng-template>