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

<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Captcha Enable/Disable' | translate}}</h4>
        <div class="card-options card-header-styles mt-sm-max-2 position-relative">
          <small class="me-1 mt-1">{{'Captcha Disable' | translate}}</small>
          <div class="float-end mt-0">
              <div class="switch-toggle">
                  <span class="onoffswitch2">
                  <input type="radio" (change)="captchaEnableDisable($event.target, manual, google)" name="CAPTCHATYPE" id="myonoffswitch181" class=" toggle-class onoffswitch2-checkbox sprukocaptcha" value="off" [checked]="responce?.CAPTCHATYPE == 'off' ? true : false">
                  <label for="myonoffswitch181" class="toggle-class onoffswitch2-label"></label>
                  </span>
              </div>
          </div>
      </div>
      </div>
        <div class="card-body" >
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block">
              <span class="onoffswitch2">
                <input #manual (change)="captchaEnableDisable($event.target)" type="radio"  name="CAPTCHATYPE" id="myonoffswitch180" class=" toggle-class onoffswitch2-checkbox sprukocaptcha" value="manual"
                [checked]="responce?.CAPTCHATYPE == 'manual' ? true : false"
                >
                <label for="myonoffswitch180" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Manual Captcha Enable' | translate}}</label>
              <small class="text-muted ps-1 ps-md-max-0"><i>{{'This setting will enable the "Manual" captcha.' | translate}}</i></small>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex d-md-max-block">
              <span class="onoffswitch2">
                <input #google (change)="captchaEnableDisable($event.target)" type="radio"  name="CAPTCHATYPE" id="myonoffswitch182" class=" toggle-class onoffswitch2-checkbox sprukocaptcha" value="google"
                [checked]="responce?.CAPTCHATYPE == 'google' ? true : false"
                >
                <label for="myonoffswitch182" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Google Captcha Enable' | translate}}</label>
              <small class="text-muted ps-1 ps-md-max-0"><i>{{'This setting will enable the "Google" captcha.' | translate}}</i></small>
            </div>
          </div>
        </div>
    </div>
  </div>
@if(googleCaptcha){
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Google Re-Captcha Setting' | translate}}</h4>
      </div>
      <form #FormData="ngForm" (ngSubmit)="GoogleReCaptchaSetting(FormData.value, 'googleRecaptcha')">
        <div class="card-body" >
          <div class="row">
            <div class="col-sm-12 col-md-12 ">
              <div class="form-group">
                <label class="form-label">{{'Site Key' | translate}}</label>
                <input ngModel="{{responce?.GOOGLE_RECAPTCHA_KEY}}" type="text" class="form-control"  name="googlerecaptchakey" [placeholder]="'Site key' | translate" value="">
              </div>
            </div>
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <label class="form-label">{{'Secret Key' | translate}}</label>
                <input ngModel="{{responce?.GOOGLE_RECAPTCHA_SECRET}}" type="text" class="form-control" name="googlerecaptchasecret" [placeholder]="'Secret Key' | translate" value="">
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer ">
          <div class="form-group float-end">
            <button [disabled]="sendingResponse['googleRecaptcha']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}
              @if(sendingResponse['googleRecaptcha']){
                <i class="fa fa-spinner fa-spin mx-1"></i>
              } 
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
}
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Captcha Setting in Forms' | translate}}</h4>
      </div>
      <div class="card-body">
        <div class="switch_section">
          <div class="switch-toggle d-flex mt-4 d-md-max-block">
            <span class="onoffswitch2">
              <input type="checkbox" name="RECAPTCH_ENABLE_CONTACT" id="myonoffswitch12" class=" toggle-class onoffswitch2-checkbox" (change)="ContactForm($event)"
              [checked]="responce?.RECAPTCH_ENABLE_CONTACT == 'yes' ? true : false"
              [ngModel]="responce?.RECAPTCH_ENABLE_CONTACT == 'yes' ? true : false"
              [value]="responce?.RECAPTCH_ENABLE_CONTACT == 'yes' ? true : false"
              >
              <label for="myonoffswitch12" class="toggle-class onoffswitch2-label" ></label>
            </span>
            <label class="form-label ps-3 ps-md-max-0">{{'Enable On Contact Form' | translate}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>{{'If you enable this captcha setting feature, it will appear on the "Contact Form".' | translate}}</i></small>
          </div>
        </div>
        <div class="switch_section">
          <div class="switch-toggle d-flex mt-4 d-md-max-block">
            <span class="onoffswitch2">
              <input ngModel type="checkbox" name="RECAPTCH_ENABLE_REGISTER" id="myonoffswitch1" class=" toggle-class onoffswitch2-checkbox" (change)="RegisterForm($event)"
              [checked]="responce?.RECAPTCH_ENABLE_REGISTER == 'yes' ? true : false"
              [ngModel]="responce?.RECAPTCH_ENABLE_REGISTER == 'yes' ? true : false"
              [value]="responce?.RECAPTCH_ENABLE_REGISTER == 'yes' ? true : false"
              >
              <label for="myonoffswitch1" class="toggle-class onoffswitch2-label" ></label>
            </span>
            <label class="form-label ps-3 ps-md-max-0">{{'Enable On Register Form' | translate}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>{{'If you enable this captcha setting feature, it will appear on the "Register Form".' | translate}}</i></small>
          </div>
        </div>
        <div class="switch_section">
          <div class="switch-toggle d-flex mt-4 d-md-max-block">
            <span class="onoffswitch2">
              <input ngModel type="checkbox" name="RECAPTCH_ENABLE_LOGIN" id="myonoffswitch11" class=" toggle-class onoffswitch2-checkbox" (change)="LoginForm($event)"
              [checked]="responce?.RECAPTCH_ENABLE_LOGIN == 'yes' ? true : false"
              [ngModel]="responce?.RECAPTCH_ENABLE_LOGIN == 'yes' ? true : false"
              [value]="responce?.RECAPTCH_ENABLE_LOGIN == 'yes' ? true : false"
              >
              <label for="myonoffswitch11" class="toggle-class onoffswitch2-label" ></label>
            </span>
            <label class="form-label ps-3 ps-md-max-0">{{'Enable On Login Form' | translate}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>{{'If you enable this captcha setting feature, it will appear on the "Login Form"' | translate}}.</i></small>
          </div>
        </div>
        <div class="switch_section">
          <div class="switch-toggle d-flex mt-4 d-md-max-block">
            <span class="onoffswitch2">
              <input ngModel type="checkbox" name="RECAPTCH_ENABLE_GUEST" id="myonoffswitch112" class=" toggle-class onoffswitch2-checkbox" (change)="GuestTicket($event)"
              [checked]="responce?.RECAPTCH_ENABLE_GUEST == 'yes' ? true : false"
              [ngModel]="responce?.RECAPTCH_ENABLE_GUEST == 'yes' ? true : false"
              [value]="responce?.RECAPTCH_ENABLE_GUEST == 'yes' ? true : false"
              >
              <label for="myonoffswitch112" class="toggle-class onoffswitch2-label" ></label>
            </span>
            <label class="form-label ps-3 ps-md-max-0">{{'Enable On Guest Ticket' | translate}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>{{'If you enable this captcha setting feature, it will appear on the "Guest Ticket"' | translate}}.</i></small>
          </div>
        </div>
        <div class="switch_section">
          <div class="switch-toggle d-flex mt-4 d-md-max-block">
            <span class="onoffswitch2">
              <input ngModel type="checkbox" name="RECAPTCH_ENABLE_ADMIN_LOGIN" id="myonoffswitch1102" class=" toggle-class onoffswitch2-checkbox" (change)="AdminLoginForm($event)"
              [checked]="responce?.RECAPTCH_ENABLE_ADMIN_LOGIN == 'yes' ? true : false"
              [ngModel]="responce?.RECAPTCH_ENABLE_ADMIN_LOGIN == 'yes' ? true : false"
              [value]="responce?.RECAPTCH_ENABLE_ADMIN_LOGIN == 'yes' ? true : false"
              >
              <label for="myonoffswitch1102" class="toggle-class onoffswitch2-label" ></label>
            </span>
            <label class="form-label ps-3 ps-md-max-0">{{'Enable On Admin Login Form' | translate}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>{{'If you enable this captcha setting feature, it will appear on the "Admin Login Form"' | translate}}.</i></small>
          </div>
        </div>
      </div>
    </div>
  </div>
  