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

<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-body p-0">
        <div class="d-lg-flex main-settings-layout settings-layout-2">
          <div class="border-end mn-wd-20p">
            <ul ngbNav #nav4="ngbNav" [(activeId)]="active3" class="nav nav-pills nav-settings p-3" orientation="vertical">
              <li [ngbNavItem]="1">
                <a ngbNavLink class="nav-link">
                  <span class="nav-setting-icon">
                    <i class="fa fa-globe"></i>
                  </span>
                  <span class="nav-setting-txt">{{'Front End' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="tab-pane active" id="countryTab">
                    <div class="p-5 border-bottom">
                      <h5 class="mb-0">{{'Country Block/Unblock Setting' | translate}}</h5>
                    </div>
                    <form #CountryForm="ngForm" (ngSubmit)="FrontEnd(CountryForm, 'frontEnd')">
                      <div class="p-5 main-settings-content" id="countrySettings">
                        <input type="hidden" name="_token" value="9WRAl5xV5JYDlj63tsrpkVnla7q5BZnz7O1lis1H" autocomplete="off">
                        <div class="form-group ">
                          <label for="theme_color-input" class="form-label">{{'Countries List' | translate}}</label>
                          <ng-select [placeholder]="'Select Country List' | translate" #select [items]="responce?.countries || undefined" class="form-control" [searchable]="false" [multiple]="true" [(ngModel)]="ForntEndCountriesList" bindLabel="name" bindValue="code" name="countrylist" [virtualScroll]="true" [loading]="!responce?.countries" (open)="dropdownSearch()">
                            <ng-template ng-header-tmp>
                              <div style="display:flex;">
                                <input #filterInput class="form-control" type="text" (input)="select.filter($any($event.target).value)" />
                                <i [hidden]="filterInput.value.length === 0" class="material-icons" (click)="select.filter(''); filterInput.value = ''">close</i>
                              </div>
                            </ng-template>
                          </ng-select>
                        </div>
                        <div class="custom-controls-stacked d-md-flex" >
                          <label class="custom-control form-radio success me-4">
                            <input required  #countryblock="ngModel" [class.is-invalid]="countryblock.invalid && countryblock.touched" type="radio" class="custom-control-input" [ngModel]="responce?.COUNTRY_BLOCKTYPE" name="countryblock" value="block"
                              [checked]="responce?.COUNTRY_BLOCKTYPE == 'block' ? true : false"
                              >
                            <span class="custom-control-label">{{'Blocked Countries' | translate}}</span>
                          </label>
                          <label class="custom-control form-radio success me-4">
                            <input required  #countryblock="ngModel" [class.is-invalid]="countryblock.invalid && countryblock.touched" type="radio" class="custom-control-input" [ngModel]="responce?.COUNTRY_BLOCKTYPE" name="countryblock" value="allow"
                              [checked]="responce?.COUNTRY_BLOCKTYPE == 'allow' ? true : false">
                            <span class="custom-control-label">{{'Allowed Countries' | translate}}</span>
                          </label>
                        </div>
                        @if ((countryblock.invalid && countryblock.touched) || countryblock.dirty) {
                          <div>
                            @if (countryblock.errors?.['required']) {
                              <small class="text-danger">{{'Customer Country is required' | translate}}</small>
                            }
                          </div>
                        }
                      </div>
                      <div class="px-5 py-4 mt-auto border-top">
                        <div class="text-end btn-list">
                          <button [disabled]="sendingResponse['frontEnd'] || CountryForm.invalid" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['frontEnd']) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                          }</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </ng-template>
              </li>
              <li [ngbNavItem]="2">
                <a class="nav-link" ngbNavLink>
                  <span class="nav-setting-icon">
                    <i class="fa fa-shield"></i>
                  </span>
                  <span class="nav-setting-txt">{{'Admin' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="tab-pane active" id="adminTab">
                    <div class="p-5 border-bottom">
                      <h5 class="mb-0">{{'Admin Country Block/Unblock Setting' | translate}}</h5>
                    </div>
                    <form #AdminCountryForm="ngForm" (ngSubmit)="AdminCountryBlock(AdminCountryForm, 'adminCountry')">
                      <input type="hidden" name="_token" value="9WRAl5xV5JYDlj63tsrpkVnla7q5BZnz7O1lis1H" autocomplete="off">
                      <div class="p-5 main-settings-content" id="adminSettings">
                        <div class="form-group ">
                          <label for="theme_color-input" class="form-label">{{'Countries List' | translate}}</label>
                          <ng-select #admincountryselect [placeholder]="'Select Country List' | translate" 
                          appendTo="body" [items]="responce?.countries" class="form-control" [multiple]="true" [searchable]="false" [(ngModel)]="AdminCountryBlockList" bindLabel="name" bindValue="code" name="countrylist" [virtualScroll]="true" [loading]="!responce?.countries" (open)="dropdownSearch()">
                            <ng-template ng-header-tmp>
                              <div style="display:flex;">
                                <input #filterInput class="form-control" type="text" (input)="admincountryselect.filter($any($event.target).value)" />
                                <i [hidden]="filterInput.value.length === 0" class="material-icons" (click)="admincountryselect.filter(''); filterInput.value = ''">close</i>
                              </div>
                            </ng-template>
                          </ng-select>
                        </div>
                        <div class="custom-controls-stacked d-md-flex" >
                          <label class="custom-control form-radio success me-4">
                            <input required  #adminCountry="ngModel" [class.is-invalid]="adminCountry.invalid && adminCountry.touched" type="radio" class="custom-control-input" [ngModel]="responce?.ADMIN_COUNTRY_BLOCKTYPE" name="admincountryblock" value="block"
                              [checked]="responce?.ADMIN_COUNTRY_BLOCKTYPE == 'block' ? true : false">
                            <span class="custom-control-label">{{'Blocked Countries' | translate}}</span>
                          </label>
                          <label class="custom-control form-radio success me-4">
                            <input [ngModel]="responce?.ADMIN_COUNTRY_BLOCKTYPE" required  #adminCountry="ngModel" [class.is-invalid]="adminCountry.invalid && adminCountry.touched" type="radio" class="custom-control-input" name="admincountryblock" value="allow"
                              [checked]="responce?.ADMIN_COUNTRY_BLOCKTYPE == 'allow' ? true : false">
                            <span class="custom-control-label">{{'Allowed Countries' | translate}}</span>
                          </label>
                          @if ((adminCountry.invalid && adminCountry.touched) || adminCountry.dirty) {
                            <div>
                              @if (adminCountry.errors?.['required']) {
                                <small class="text-danger">{{'Admin Country is required' | translate}}</small>
                              }
                            </div>
                          }
                        </div>
                      </div>
                      <div class="px-5 py-4 mt-auto border-top">
                        <div class="text-end btn-list">
                          <button [disabled]="sendingResponse['adminCountry']  || AdminCountryForm.invalid" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['adminCountry']) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                          }</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </ng-template>
              </li>
              <li [ngbNavItem]="3">
                <a class="nav-link" ngbNavLink><span class="nav-setting-icon"><i class="fa fa-ban"></i></span> <span class="nav-setting-txt">DOS</span></a>
                <ng-template ngbNavContent>
                  <div class="tab-pane active" id="dosTab">
                    <div class="p-5 border-bottom">
                      <h5 class="mb-0">{{'DOS Attack Setting' | translate}}</h5>
                    </div>
                    <form #DOSForm="ngForm" (ngSubmit)="DOSAttackSetting(DOSForm, 'dosAttack')">
                      <div class="p-5 main-settings-content" id="dosSettings">
                        <div class="switch_section mt-0">
                          <div class="switch-toggle d-flex d-md-max-block ps-0 ms-0">
                            <span class="onoffswitch2">
                              <input [ngModel]="responce?.DOS_Enable == 'on' ? true : false" type="checkbox" name="dosswitch" id="sprukoadmindosswitch" class=" toggle-class onoffswitch2-checkbox sprukodosswitch"
                                [checked]="responce?.DOS_Enable == 'on' ? true : false"
                                >
                              <label for="sprukoadmindosswitch" class="toggle-class onoffswitch2-label"></label>
                            </span>
                            <label class="form-label ps-3 ps-md-max-0">{{'Enable/Disable' | translate}}</label>
                            <small class="text-muted ps-2 ps-md-max-0"><i>({{"If you enable this setting, it prevents denial-of-service (DoS) attacks on the application." | translate}})</i></small>
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-lg-12">
                            <div class="form-group me-2 ">
                              <div class="d-lg-flex">
                                <div class="row">
                                  <div class="col-lg-12 pe-0">
                                    <div class="d-lg-flex">
                                      <span class="mt-2 px-0 me-2">{{'If there are more than' | translate}}</span>
                                      <input [ngModel]="responce?.IPMAXATTEMPT" type="number" [maxlength]="2" class="w-md-max-20 w-10 form-control " name="ip_max_attempt" value="" autocomplete="off">

                                      <span class="mt-2 ms-2 me-2 ms-md-max-0">{{'attempts in' | translate}}</span>
                                      <input [ngModel]="responce?.IPSECONDS" type="number" [maxlength]="2" class="ms-1 w-10 w-md-max-20 ms-md-max-0 form-control " name="ip_seconds" value="" autocomplete="off">
                                      <span class="mt-2 ms-2 ms-md-max-0">{{'seconds' | translate}}</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class=""></div>
                          <div class="">
                          </div>
                        </div>
                        <div class="custom-controls-stacked d-md-flex" >
                          @if (responce?.CAPTCHATYPE != 'off') {
                            <label class="custom-control form-radio success me-4">
                              <input required  #dosfield="ngModel" [class.is-invalid]="dosfield.invalid && dosfield.touched" type="radio" class="custom-control-input" [ngModel]="responce?.IPBLOCKTYPE" name="ipblocktype" value="captcha"
                                [checked]="responce?.IPBLOCKTYPE == 'captcha' ? true : false"
                                >
                              <span class="custom-control-label">{{'View Captcha' | translate}}</span>
                            </label>
                          }
                          <label class="custom-control form-radio success me-4">
                            <input required  #dosfield="ngModel" [class.is-invalid]="dosfield.invalid && dosfield.touched" type="radio" class="custom-control-input" [ngModel]="responce?.IPBLOCKTYPE" name="ipblocktype" value="block"
                              [checked]="responce?.IPBLOCKTYPE == 'block' ? true : false"
                              >
                            <span class="custom-control-label">{{'Block IP Address' | translate}}</span>
                          </label>
                        </div>
                        @if ((dosfield.invalid && dosfield.touched) || dosfield.dirty) {
                          <div>
                            @if (dosfield.errors?.['required']) {
                              <small class="text-danger">{{'DOS is required' | translate}}</small>
                            }
                          </div>
                        }
                      </div>
                      <div class="px-5 py-4 mt-auto border-top">
                        <div class="text-end btn-list">
                          <button [disabled]="sendingResponse['dosAttack'] || DOSForm.invalid" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['dosAttack']) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                          }</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </ng-template>
              </li>
              <li [ngbNavItem]="4">
                <a class="nav-link" ngbNavLink><span class="nav-setting-icon"><i class="fa fa-envelope"></i></span> <span class="nav-setting-txt">{{'Domain Lists' | translate}}</span></a>
                <ng-template ngbNavContent>
                  <div class="tab-pane active" id="emaildomainTab">
                    <div class="p-5 border-bottom">
                      <h5 class="mb-0">{{'Domain Lists' | translate}}</h5>
                    </div>
                    <form  #DomainListForm="ngForm" (ngSubmit)="DomainLists(DomainListForm, 'domainList')">
                      <div class="p-5 main-settings-content" id="emaildomainSettings">
                        <div class="row">
                          <div class="col-lg-12">
                            <div class="form-group sprukotag">
                              <ng-select  name="emaildomain" [items]="domainList" class="form-control nodropdown" [placeholder]="'Example: test.com' | translate" [addTag]="addTagFn" [hideSelected]="true" [multiple]="true" bindLabel="name" [ngModel]="domainList" [isOpen]="false" [maxSelectedItems]="10">
                              </ng-select>
                            </div>
                          </div>
                        </div>
                        <div class="custom-controls-stacked d-md-flex" >
                          <label class="custom-control form-radio success me-4">
                            <input [ngModel]="responce?.EMAILDOMAIN_BLOCKTYPE" required  #emailBlock="ngModel" [class.is-invalid]="emailBlock.invalid && emailBlock.touched" type="radio" class="custom-control-input" name="emaildomainblock" value="blockemail"
                              [checked]="responce?.EMAILDOMAIN_BLOCKTYPE == 'blockemail' ? true : false"
                              >
                            <span class="custom-control-label">{{'Blocked Email' | translate}}</span>
                          </label>
                          <label class="custom-control form-radio success me-4">
                            <input [ngModel]="responce?.EMAILDOMAIN_BLOCKTYPE" required  #emailBlock="ngModel" [class.is-invalid]="emailBlock.invalid && emailBlock.touched" type="radio" class="custom-control-input" name="emaildomainblock" value="allowemail"
                              [checked]="responce?.EMAILDOMAIN_BLOCKTYPE == 'allowemail' ? true : false"
                              >
                            <span class="custom-control-label">{{'Allowed Email' | translate}}</span>
                          </label>
                          @if ((emailBlock.invalid && emailBlock.touched) || emailBlock.dirty) {
                            <div>
                              @if (emailBlock.errors?.['required']) {
                                <small class="text-danger">{{'Email Block is required' | translate}}</small>
                              }
                            </div>
                          }
                        </div>
                      </div>
                      <div class="px-5 py-4 mt-auto border-top">
                        <div class="text-end btn-list">
                          <button [disabled]="sendingResponse['domainList'] || DomainListForm.invalid" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['domainList']) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                          }</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </ng-template>
              </li>
            </ul>
            <div  class="ml-4"></div>
          </div>
          <div class="flex-1">
            <div [ngbNavOutlet]="nav4"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

