@extends('layouts.login')
@section('title')
All Brands
@endsection
@section('content')
<style>
   .form-check-inline .form-check-input~.invalid-feedback {
      margin-left: 5.5rem;
   }.invalid-feedback {
      margin-left: 1.2rem;
   }#myModalLabel{ color: black !important; }
   form #togglePassword, #toggleConfimPassword {
     margin-right: 7px;
     cursor: pointer;
     float: right;
     margin-top: -25px;
     position: relative;
   }
</style>
@php
     $checkboxNameClass = (old('checkboxName') == 1) ? 'checked': '';
@endphp
<div class="registration-create">
   @if (session('message'))
   <div class="alert alert-success alert-block">
      <strong>{{ session('message')}}</strong>
   </div>
   @endif
   @if (session('error'))
   <div class="alert alert-danger alert-block">
      <strong>{{ session('error')}}</strong>
   </div>
   @endif
   <form id="registrationPageForm" action="{{ route('registration.save') }}" class="registrationPageForm" method="post">
      @csrf
      <div class="col-md-10 offset-md-1">
         <div class="card card-white mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
               <h6 class="m-0 font-weight-normal text-head-color">Registration Page</h6>
            </div>
            <div class="card-body">
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Candidate Name <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm space-remover text-upper copy-paste" placeholder="Enter Candidate name" id="CandidateName" name="CandidateName" value="{{old('CandidateName')}}" maxlength="100" onkeypress="return lettersOnly(event)">
                     @error('CandidateName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Father Name <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm space-remover text-upper copy-paste" placeholder="Enter Father name" id="FatherName" name="FatherName" value="{{old('FatherName')}}" maxlength="100" onkeypress="return lettersOnly(event)">
                     @error('FatherName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Mother Name <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm space-remover text-upper copy-paste" placeholder="Enter Mother name" id="MotherName" name="MotherName" value="{{old('MotherName')}}" maxlength="100" onkeypress="return lettersOnly(event)">
                     @error('MotherName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Gender <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select id="GenderID" class="form-select form-select-sm" name="GenderID" >
                        <option value="">--Select--</option>
                        <option value="4" {{ (old("GenderID") == 4 ? "selected":"") }}>Male</option>
                        <option value="5" {{ (old("GenderID") == 5 ? "selected":"") }}>Female</option>
                        <option value="6" {{ (old("GenderID") == 6 ? "selected":"") }}>Third Gender</option> 
                     </select>
                     @error('GenderID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Date of Birth  <span class="astric-sign">*</span></label>
                  <div class="col-sm-1 form-group" style="padding-right: 1px;">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="day" name="day" >
                        <option value=""> Day</option>
                        @foreach($DobDate as $keyDate=>$valuedate)
                        <option value="{{ $keyDate }}" {{ (old("day") == $keyDate ? "selected":"") }}> {{ $valuedate }}</option>
                        @endforeach
                     </select>
                     @error('day')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
                  <div class="col-sm-2 form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="month" name="month">
                        <option value="">Month</option>
                        @foreach($DobMonth as $keyMonth=>$valueMonth)
                        <option value="{{ $keyMonth }}" {{ (old("month") == $keyMonth ? "selected":"") }}> {{ $valueMonth }}</option>
                        @endforeach
                     </select>
                     @error('month')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
                  <div class="col-sm-2 form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="year" name="year">
                        <option selected="" value="">Year</option>
                        {{--@foreach($DobYear as $keyYear=>$valueYear)
                        <option value="{{ $keyYear }}" {{ (old("year") == $keyYear ? "selected":"") }}> {{ $valueYear }}</option>
                        @endforeach--}}
                     </select>
                     @error('year')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Email Address  <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="email" class="form-control form-control-sm copy-paste" placeholder="Enter Email Address" id="email" name="email"  value="{{old('email')}}" maxlength="50">
                     @error('email')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Confirm Email Address <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="email" class="form-control form-control-sm copy-paste" placeholder="Enter Confirm Email Address" id="confirmMail" name="confirmMail" value="{{old('confirmMail')}}" maxlength="50">
                     @error('confirmMail')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Mobile Number  <span class="astric-sign">*</span></label>
                  <div class="col-sm-1 form-group">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="+91" name="mobileCode" id="mobileCode" value="+91" onkeypress="return blockSpecialChar(event,'numeric')" maxlength="3" readonly="readonly" style="padding: 0.25rem;">
                     @error('mobileCode')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
                  <div class="col-sm-4 form-group">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="Enter Mobile Number" id="mobile" name="mobile" onkeypress="return blockSpecialChar(event,'numeric')" maxlength="10" value="{{old('mobile')}}">
                     @error('mobile')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Confirm Mobile Number  <span class="astric-sign">*</span></label>
                  <div class="col-sm-1 form-group">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="+91" name="confirmMobileCode" id="confirmMobileCode" value="+91" onkeypress="return blockSpecialChar(event,'numeric')" maxlength="3" readonly="readonly"style="padding: 0.25rem;">
                     @error('confirmMobileCode')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
                  <div class="col-sm-4 form-group">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="Enter Confirm Mobile Number" id="confirmMobile" name="confirmMobile" onkeypress="return blockSpecialChar(event,'numeric')" maxlength="10" value="{{old('confirmMobile')}}">
                     @error('confirmMobile')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Alternate Conatct No.</label>
                  <div class="col-sm-1">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="91" name="alternateCode" id="alternateCode" value="+91" onkeypress="return blockSpecialChar(event,'numeric')" maxlength="3" readonly="readonly"style="padding: 0.25rem;">
                  </div>
                  <div class="col-sm-4 form-group">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="Enter Alternate Mobile Number" id="alternateMobile" name="alternateMobile" onkeypress="return blockSpecialChar(event,'numeric')" maxlength="10" value="{{old('alternateMobile')}}">
                     @error('alternateMobile')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Identity Type <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select id="IdentityID" class="form-select form-select-sm" name="IdentityID" >
                        <option value="">--Select--</option>
                        <option value="4" {{ (old("IdentityID") == 4 ? "selected":"") }}>BANK PASSBOOK WITH PHOTOGRAPH</option>
                        <option value="5" {{ (old("IdentityID") == 5 ? "selected":"") }}>DRIVING LICENSE</option>
                        <option value="7" {{ (old("IdentityID") == 7 ? "selected":"") }}>OTHER Valid GOVT. IDENTITY WITH PHOTOGRAPH</option>
                        <option value="1" {{ (old("IdentityID") == 1 ? "selected":"") }}>PAN CARD</option>
                        <option value="6" {{ (old("IdentityID") == 6 ? "selected":"") }}>PASSPORT</option>
                        <option value="3" {{ (old("IdentityID") == 3 ? "selected":"") }}>RATION CARD WITH PHOTOGRAPH</option>
                        <option value="2" {{ (old("IdentityID") == 2 ? "selected":"") }}>VOTER ID</option>
                     </select>
                     @error('IdentityID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Identification Number <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Identification Number" id="IdentityNumber" name="IdentityNumber" value="{{old('IdentityNumber')}}" maxlength="50" onkeypress="return blockSpecialChar(event,'alphanumeric')">
                     @error('IdentityNumber')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                     <div class="text-danger" id="IdentityNumberError"></div>
                  </div>
               </div>
              <!-- Aadhar detail -->
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Aadhar Card<span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select id="IsAadharNumber" class="form-select form-select-sm" name="IsAadharNumber" >
                        <option value="" {{ (old("IsAadharNumber") == "" ? "selected":"") }}>--Select--</option>
                        <option value="1" {{ (old("IsAadharNumber") == "1" ? "selected":"") }}>Yes</option>
                        <option value="0" {{ (old("IsAadharNumber") == "0" ? "selected":"") }}>No</option>
                       
                     </select>
                     @error('IsAadharNumber')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center" style="display: none" id="NameOnAadharDiv">
                  <label class="col-sm-2 col-form-label">Aadhar Name <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm space-remover text-upper copy-paste" placeholder="Enter Aadhar name" id="NameOnAadhar" name="NameOnAadhar" value="{{old('NameOnAadhar')}}" maxlength="100" onkeypress="return lettersOnly(event)">
                     @error('NameOnAadhar')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center" style="display: none" id="AadharNumberDiv">
                  <label class="col-sm-2 col-form-label">Aadhar Number <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Aadhar Number" id="AadharNumber" name="AadharNumber" value="{{old('AadharNumber')}}" maxlength="14" onkeypress="return blockSpecialChar(event,'alphanumeric')">
                     @error('AadharNumber')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Present Address -->
      <!-- <div class="col-md-10 offset-md-1">
         <div class="card card-white mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
               <h6 class="m-0 font-weight-normal text-head-color">Present Address</h6>
            </div>
            <div class="card-body">
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Premises No./Name <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Premises No./Name" id="PremisesName" name="PremisesName" value="{{old('PremisesName')}}" maxlength="150" onkeypress="return blockSpecialChar(event,'alphanumeric')">
                     @error('PremisesName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Sub-Locality(Optional)</label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Sub-Locality" id="SubLocality" name="SubLocality" value="{{old('SubLocality')}}" maxlength="100" onkeypress="return blockSpecialChar(event,'alphanumeric')">
                     @error('SubLocality')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Locality <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Locality" id="Locality" name="Locality" value="{{old('Locality')}}" maxlength="100" onkeypress="return blockSpecialChar(event,'alphanumeric')">
                     @error('Locality')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Country <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="CountryID" id="CountryID">
                        <option selected="" value="">Select </option>
                        <option value="101" {{ (old("CountryID") == 101 ? "selected":"") }}>INDIA</option>
                     </select>
                     @error('CountryID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">State/UT <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="StateUTID" id="StateUTID" onChange="getDistrictByID(this.value);">
                        <option value="">Select</option>
                        @foreach($allState as $state)
                        @php $stateID = $state->ID; @endphp
                        <option value="{{isset($state->ID)? $state->ID :''}}"  {{ (old("StateUTID") == $stateID ? "selected":"") }}>{{isset($state->StateName)? $state->StateName :''}}</option>
                        @endforeach
                     </select>
                     @error('StateUTID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">District <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="DistrictID" id="DistrictID">
                        <option selected="" value="">Select </option>
                     </select>
                     @error('DistrictID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Pin Code  <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="Enter PinCode" id="PinCode" name="PinCode" onkeypress="return blockSpecialChar(event,'numeric')" minlength="6" maxlength="6" value="{{old('PinCode')}}">
                     @error('PinCode')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
            </div>
         </div>
      </div> -->
      <!-- Permanent Address -->
      <!-- <div class="col-md-10 offset-md-1">
         <div class="card card-white mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
               <h6 class="m-0 font-weight-normal text-head-color">Permanent Address</h6>
            </div>
            <div class="card-body">
               <div class="row mb-3 justify-content-center">
                  <div class="mb-3 field-flexCheckDefault">
                     <div class="form-check">
                        <input type="checkbox" id="is_permanent" class="chk1" name="checkboxName" value="1" {{ $checkboxNameClass }}>
                        Same as present address
                        <div class="invalid-feedback"></div>
                     </div>
                  </div>
                  @error('checkboxName')
                  <div class="text-danger">{{ $message }}</div>
                  @enderror
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Premises No./Name <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Premises No./Name" id="PermanentPremisesName" name="PermanentPremisesName" value="{{old('PermanentPremisesName')}}" maxlength="150" onkeypress="return blockSpecialChar(event,'alphanumeric')">
                     @error('PermanentPremisesName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Sub-Locality(Optional)</label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Sub-Locality" id="PermanentSubLocality" name="PermanentSubLocality" value="{{old('PermanentSubLocality')}}" maxlength="100" onkeypress="return blockSpecialChar(event,'alphanumeric')">
                     @error('PermanentSubLocality')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Locality <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Locality" id="PermanentLocality" name="PermanentLocality" value="{{old('PermanentLocality')}}" maxlength="100" onkeypress="return blockSpecialChar(event,'alphanumeric')">
                     @error('PermanentLocality')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Country <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="PermanentCountryID" id="PermanentCountryID">
                        <option selected="" value="">Select </option>
                        <option value="101" {{ (old("PermanentCountryID") == 101 ? "selected":"") }}>INDIA</option>
                     </select>
                     @error('PermanentCountryID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">State/UT <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="PermanentStateUTID" id="PermanentStateUTID"  onChange="getPermanentDistrictByID(this.value);">
                        <option value="">Select</option>
                        @foreach($allState as $state)
                        @php $statePID = $state->ID; @endphp
                        <option value="{{isset($state->ID)? $state->ID :''}}" {{ (old("PermanentStateUTID") == $statePID ? "selected":"") }} >{{isset($state->StateName)? $state->StateName :''}}</option>
                        @endforeach
                     </select>
                     @error('PermanentStateUTID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">District <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="PermanentDistrictID" id="PermanentDistrictID">
                        <option selected="" value="">Select </option>
                     </select>
                     @error('PermanentDistrictID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Pin Code  <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="Enter PinCode" id="PermanentPinCode" name="PermanentPinCode" onkeypress="return blockSpecialChar(event,'numeric')" minlength="6" maxlength="6" value="{{old('PermanentPinCode')}}">
                     @error('PermanentPinCode')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
            </div>
         </div>
      </div> -->
      <!-- choose password -->
      <div class="col-md-10 offset-md-1">
         <div class="card card-white mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
               <h6 class="m-0 font-weight-normal text-head-color">Choose Password</h6>
            </div>
            <div class="card-body">
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Letters: At least one upper case letter [A-Z], At least one lower case letter [a-z]. Numbers: At least one number [0-9], Special Characters: At least one symbol [@$!%*#?&amp;_] Password Length: Minimum 8 characters.">Password <i class="fa fa-info-circle"></i> <span class="astric-sign">*</span> </label>
                  <div class="col-sm-5 form-group">
                     
                     <input type="password" class="form-control form-control-sm copy-paste" placeholder="Enter password" id="password" name="password"  value=""><i class='fa fa-eye-slash toggle-password' id='togglePassword'></i>
                     @error('password')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Confirm Password <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="password" class="form-control form-control-sm copy-paste" placeholder="Enter Confirm Password" id="confirmPassword" name="confirmPassword"><i class='fa fa-eye-slash toggle-password' id='toggleConfimPassword'></i>
                     @error('confirmPassword')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Security Question <span class="astric-sign">*</span></label>
                  <div class="col-sm-5  form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="SecurityQuestionID" id="SecurityQuestionID">
                        <option selected="" value="">Select </option>
                        @foreach($SecurityQuestionAll as $question)
                        @php $questionID = $question->ID;@endphp
                        <option value="{{isset($question->ID)? $question->ID :''}}"  {{ (old("SecurityQuestionID") == $questionID ? "selected":"") }}>{{isset($question->Question)? $question->Question :''}}</option>
                        @endforeach
                     </select>
                     @error('SecurityQuestionID')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Security Answer  <span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm text-upper copy-paste" placeholder="Enter Security Answer" id="SecurityAnswer" name="SecurityAnswer" onkeypress="return blockSpecialChar(event,'alphanumericspeciaslsome')" maxlength="50" value="{{old('SecurityAnswer')}}">
                     @error('SecurityAnswer')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-10 offset-md-1">
         <div class="card card-white mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
               <h6 class="m-0 font-weight-normal text-head-color">Security Pin</h6>
            </div>
            <div class="card-body">
               <div class="row mb-3 justify-content-center">
                  <label class="col-sm-2 col-form-label">Security PIN as Shown Below<span class="astric-sign">*</span></label>
                  <div class="col-sm-5 form-group">
                     <input type="text" class="form-control form-control-sm copy-paste" placeholder="Enter Security PIN as Shown Below" id="pinValue" name="pinValue">
                     @error('pinValue')
                          <div class="text-danger">{{ $message }}</div>
                     @enderror 
                  </div>
               </div>
               <div class="row mb-3 justify-content-center">
                   <label class="col-sm-2 col-form-label">Security PIN <span class="astric-sign">*</span></label>
                     <div class="col-sm-2 col-form-label captcha_div">
                     <span> {!! captcha_get_html()!!} </span>                  
                     </div>
                     <div class="col-sm-3 col-form-label">
                           <button type="button" class="btn btn-primary" class="reload" id="reload">
                               &#x21bb;
                           </button>
                     </div>
               </div>
               <div class="row mb-3 justify-content-center">
                  <div class="col-sm-7 form-group">
                        <input type="checkbox" class="" id="declarationCheck" name="declarationCheck">
                         <label class="col-form-label">I AGREE</label>
                        @error('declarationCheck')
                           <div class="text-danger">{{ $message }}</div>
                        @enderror 

                        <input type="hidden"  id="isCheckedName" name="IsCheckedName" value="0">
                        <input type="hidden"  id="isCheckedFatherName" name="IsCheckedFatherName" value="0">
                        <input type="hidden"  id="isCheckedMotherName" name="IsCheckedMotherName" value="0">
                        <input type="hidden"  id="isCheckedDOB" name="IsCheckedDOB" value="0">
                        <input type="hidden"  id="isCheckedMobile" name="IsCheckedMobile" value="0">
                        <input type="hidden"  id="isCheckedEmail" name="IsCheckedEmail" value="0">
                        <input type="hidden"  id="isDeclarationCheck" name="IsDeclarationCheck" value="0">
                  </div>
               </div>

                  <div class="row mb-3 justify-content-center">
                     <div class="col-sm-7 form-group">
                        <p>I hereby declare that I am filling up this online application after carefully reading the Detailed Advertisement and fully understanding the provision/procedures mentioned therein. I further declare that all the particulars given by me in this application are true to the best of my knowledge and belief. I agree that my result may be withheld/not declared/ my candidature may stand cancelled, in case it is found at any point in time in future that false information has been furnished in this application. I shall abide by these terms and conditions as well as those laid down in the Detailed Advertisement, Public Notices and Advisories issued by NTA/High Court of Uttarakhand Board regarding this exam time to time.</p>
                     </div>
                  </div>
                  <div class="row mb-3 justify-content-center">
                     <div class="col-sm-3">
                        <button type="button" class="btn btn-sm btn-warning" id="registrationPageSubmitBtn"><i class="ri-save-line float-start me-1"></i> Submit</button> 
                     <!--a href="#" class="btn btn-sm btn-warning float-end"><i class="ri-arrow-left-circle-line float-start me-1"></i> Reset</a--> 
                     </div>
                  </div>

         </div>
      </div>
   </form>

</div>

<!-- Modal -->
<div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog" style="max-width: 95% !important">
      <div class="modal-content">
         <div class="modal-header" style="background: white; justify-content:center">
            <h6 class="modal-title head-color" id="myModalLabel" >Review Page - Online Registration Form</h6>
            <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button> -->
         </div>
         <form id="registration-final-form"  method="post">
            <div class="modal-body">
               <p style="text-align: center;">Review the following particulars carefully. If you would like to change any particulars entered,<br> you may do so by pressing '<span style="color: red;">EDIT REGISTRATION FORM</span>' button or press '<span style="color: green;">SUBMIT and SEND OTP</span>' button.</p>
               <h6 class="head-color">Personal Details</h6>
               <hr class="hrmargin">
               <table class="col-md-12 table-bordered" border="1px">
                  <tbody>
                     <tr>
                        <td class="col-md-3 tdpadding">Candidate Name:</td>
                        <td class="col-md-3 tdpadding" id="candidateName"></td>
                        <td class="col-md-3 tdpadding">Father Name:</td>
                        <td class="col-md-3 tdpadding" id="fatherName"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Mother Name:</td>
                        <td class="col-md-3 tdpadding" id="motherName"></td>
                        <td class="col-md-3 tdpadding">Gender:</td>
                        <td class="col-md-3 tdpadding" id="candidateGenderID"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Date Of Birth</td>
                        <td class="col-md-3 tdpadding" id="dateOfBirth"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Email Address:</td>
                        <td class="col-md-3 tdpadding" id="emailAddress"></td>
                        <td class="col-md-3 tdpadding">Confirm Email Address:</td>
                        <td class="col-md-3 tdpadding" id="confEmailAddress"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Candidate Mobile:</td>
                        <td class="col-md-3 tdpadding" id="candidateMobile"></td>
                        <td class="col-md-3 tdpadding">Candidate Confirm Mobile:</td>
                        <td class="col-md-3 tdpadding" id="candidateConfirmMobile"></td>
                        <td class="col-md-3 tdpadding">Alternate Mobile:</td>
                        <td class="col-md-3 tdpadding" id="candidateAlternateMobile"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Identity Type:</td>
                        <td class="col-md-3 tdpadding" id="identityType"></td>
                        <td class="col-md-3 tdpadding">Identity Number:</td>
                        <td class="col-md-3 tdpadding" id="identityNumber"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Aadhar Card:</td>
                        <td class="col-md-3 tdpadding" id="candidateIsAadharNumber"></td>
                        <td class="col-md-3 tdpadding">Aadhar Name:</td>
                        <td class="col-md-3 tdpadding" id="candidateNameOnAadhar"></td>
                        <td class="col-md-3 tdpadding">Aadhar Number:</td>
                        <td class="col-md-3 tdpadding" id="candidateAadharNumber"></td>
                     </tr>
                  </tbody>
               </table>
               <br>
               <!-- <h6 class="head-color">Present Address</h6>
               <hr class="hrmargin">
               <table class="col-md-12 table-bordered" border="1px">
                  <tbody>
                     <tr>
                        <td class="col-md-3 tdpadding">Premises Name:</td>
                        <td class="col-md-3 tdpadding" id="premisesName"></td>
                        <td class="col-md-3 tdpadding">Sublocality:</td>
                        <td class="col-md-3 tdpadding" id="sublocality"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Locality:</td>
                        <td class="col-md-3 tdpadding" id="locality"></td>
                        <td class="col-md-3 tdpadding">Country:</td>
                        <td class="col-md-3 tdpadding" id="country"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">State Name:</td>
                        <td class="col-md-3 tdpadding" id="stateName"></td>
                        <td class="col-md-3 tdpadding">District Name:</td>
                        <td class="col-md-3 tdpadding" id="districtName"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Pincode:</td>
                        <td class="col-md-3 tdpadding" id="pincode"></td>
                     </tr>
                  </tbody>
               </table>
               <br>
               <h6 class="head-color">Permanent Address</h6>
               <hr class="hrmargin">
               <table class="col-md-12 table-bordered" border="1px">
                  <tbody>
                     <tr>
                        <td class="col-md-3 tdpadding">Premises Name:</td>
                        <td class="col-md-3 tdpadding" id="permanentPremisesName"></td>
                        <td class="col-md-3 tdpadding">Sublocality:</td>
                        <td class="col-md-3 tdpadding" id="permanentSublocality"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Locality:</td>
                        <td class="col-md-3 tdpadding" id="permanentLocality"></td>
                        <td class="col-md-3 tdpadding">Country:</td>
                        <td class="col-md-3 tdpadding" id="permanentCountry"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">State Name:</td>
                        <td class="col-md-3 tdpadding" id="permanentStateName"></td>
                        <td class="col-md-3 tdpadding">District Name:</td>
                        <td class="col-md-3 tdpadding" id="permanentDistrictName"></td>
                     </tr>
                     <tr>
                        <td class="col-md-3 tdpadding">Pincode:</td>
                        <td class="col-md-3 tdpadding" id="permanentPincode"></td>
                     </tr>
                  </tbody>
               </table> -->
               <br>
               <h6 class="head-color">Security Details </h6>
               <hr class="hrmargin">
               <table class="col-md-12 table-bordered" border="1px">
                  <tbody>
                     <tr>
                        <td class="col-md-2 tdpadding">Security Question:</td>
                        <td class="col-md-2 tdpadding" id="SecurityQuestion"></td>
                        <td class="col-md-2 tdpadding">Security Answer:</td>
                        <td class="col-md-2 tdpadding" id="security_answer"></td>
                     </tr>
                  </tbody>
               </table>
               <br>
               <h6 class="head-color">Particulars checklist to be verified</h6>
               <hr class="hrmargin">
               <p class="subheadcolor">Kindly verify all the particulars used below carefully and ensure you have filled correct information. No change will be permitted once the Registration form is submitted at any later stage of the examination. </p>
               <div class="form-group">
                  <div class="col-sm-10">
                     <div class="form-check form-check-inline">
                        <div class="form-check">
                           <input type="checkbox" id="IsCheckedName" class="form-check-input" name="IsCheckedName" value="1" >
                           <label class="form-check-label" for="candidate-IsCheckedName"> Name</label>
                           <div class="invalid-feedback"></div>
                        </div>
                     </div>
                     <div class="form-check form-check-inline">
                        <div class="form-check">
                           <input type="checkbox" id="IsCheckedFatherName" class="form-check-input" name="IsCheckedFatherName" value="1">
                           <label class="form-check-label" for="candidate-IsCheckedFatherName">  Father Name </label>
                           <div class="invalid-feedback"></div>
                        </div>
                     </div>
                     <div class="form-check form-check-inline">
                        <div class="form-check">
                           <input type="checkbox" id="IsCheckedMotherName" class="form-check-input" name="IsCheckedMotherName" value="1">
                           <label class="form-check-label" for="candidate-IsCheckedMotherName">  Mother Name</label>
                           <div class="invalid-feedback"></div>
                        </div>
                     </div>
                     <div class="form-check form-check-inline">
                        <div class="form-check">
                           <input type="checkbox" id="IsCheckedDOB" class="form-check-input" name="IsCheckedDOB" value="1">
                           <label class="form-check-label" for="candidate-IsCheckedDOB">  DOB</label>
                           <div class="invalid-feedback"></div>
                        </div>
                     </div>
                     <div class="form-check form-check-inline">
                        <div class="form-check">
                           <input type="checkbox" id="IsCheckedMobile" class="form-check-input" name="IsCheckedMobile" value="1">
                           <label class="form-check-label" for="candidate-IsCheckedMobile">  Mobile</label>
                           <div class="invalid-feedback"></div>
                        </div>
                     </div>
                     <div class="form-check form-check-inline">
                        <div class="form-check">
                           <input type="checkbox" id="IsCheckedEmail" class="form-check-input" name="IsCheckedEmail" value="1">
                           <label class="form-check-label" for="candidate-IsCheckedEmail">  Email</label>
                           <div class="invalid-feedback"></div>
                        </div>
                     </div>
                     <div class="form-check form-check-inline">
                     </div>
                  </div>
               </div>
               <br>
               <h6 class="head-color">Declaration</h6>
               <div class="form-check form-check-inline">
                  <div class="form-check">
                     <input type="checkbox" id="IsDeclarationCheck" class="form-check-input" name="IsDeclarationCheck" value="1">
                     <label class="form-check-label" for="candidate-IsDeclarationCheck">  I AGREE</label>
                     <div class="invalid-feedback"></div>
                  </div>
               </div>
               <hr class="hrmargin">
               <p align="center">I hereby declare that I am filling up this online application after carefully reading the Detailed Advertisement and fully understanding the provision/procedures mentioned therein. I further declare that all the particulars given by me in this application are true to the best of my knowledge and belief. I agree that my result may be withheld/not declared/ my candidature may stand cancelled, in case it is found at any point in time in future that false information has been furnished in this application. I shall abide by these terms and conditions as well as those laid down in the Detailed Advertisement, Public Notices and Advisories issued by NTA/National Horticulture Board regarding this exam time to time.</p>
               <div class="form-group">
                  <div class="col-md-4 offset-md-5">
                     <div class="form-check">
                     </div>
                  </div>
               </div>
            </div>
            <div class="modal-footer" style="justify-content: center">
               <button type="button" class="btn btn-sm btn-danger close userActivityBtn" id="edit_registration" data-dismiss="modal" data-modulename='Registration' data-activityname='Update'><i class="fa fa-edit"></i> EDIT Registration Form</button>
               <button type="button" class="btn btn-sm btn-primary active bt-bgc" id="final_submit_btn"><i class="ri-save-line float-start me-1"></i> Submit and Send OTP</button>
            </div>

        </form>
   
      </div>
   </div>
</div>
@endsection

@push('js')
<script type="text/javascript">
   $.ajaxSetup({
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       }
   });
</script>
<script>
   $(document).ready(function() {
   
     $('#reload').click(function () {
         $.ajax({
             type: 'GET',
             url: "{{ route('reload-captcha') }}",
             success: function (data) {
                 $(".captcha_div span").html(data.captcha);
             }
         });
     });
   
     jQuery.validator.addMethod("FnoSpace", function(value, element) 
     {
         if(jQuery.trim(value).length < 2){
            return false;
         }else{
            return true;
         }
     }, "Candidate Name must consist of at least 2 characters.");
   
       $.validator.addMethod("checklower", function(value) {
          return /[a-z]/.test(value);
      });
       $.validator.addMethod("checkupper", function(value) {
         return /[A-Z]/.test(value);
       });
       $.validator.addMethod("checkdigit", function(value) {
         return /[0-9]/.test(value);
       });
       $.validator.addMethod("pwcheck", function(value) {
         return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
       });

       $.validator.addMethod("passwordFormat", function(value, element) {
        // Define a regular expression for password format
        var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&!*])[A-Za-z\d@#$%^&!*]{8,}$/;
        return this.optional(element) || passwordRegex.test(value);
      }, "Password is not valid Ex.(Nta@2023).");
  
   
        $(document).on('change', '#IdentityID', function() {
               $('#IdentityNumber').removeClass('is-invalid');
               $('#IdentityNumberError').text('');
        });
      //  identity type value check start
      $('#IdentityNumber').focusout(function()
      {
         var IdentityID  = $('#IdentityID').val();
         var IdentityNumber  = $('#IdentityNumber').val().toUpperCase();
         
         if(IdentityID == 1)
         {
            if (!IdentityNumber.match(/^[A-z]{5}\d{4}[A-Z]{1}$/)) 
            {
               $('#IdentityNumberError').text('Please enter valid PAN Number(example:-BNZAA2318J)');
               $('#IdentityNumber').addClass('is-invalid');
            }
            else
            {
               $('#IdentityNumber').removeClass('is-invalid');
               $('#IdentityNumberError').text('');
            }            
         }
         else if(IdentityID != '')
         {
            if (!IdentityNumber.match(/^(?=.*[a-zA-Z0-9])(?=.*[0-9])[A-Za-z0-9]+.{6,36}$/)) 
            {
               $('#IdentityNumberError').text('Please enter valid Document Issued By Govt Authority Number(example:-Enter character or numeric min 6 , max 36)');
               $('#IdentityNumber').addClass('is-invalid');
            }
            else
            {
               $('#IdentityNumber').removeClass('is-invalid');
               $('#IdentityNumberError').text('');
            }
         }
      });
      // $.validator.addMethod("checkGov", function(value) {
      //     return /^(?=.*[a-zA-Z0-9])(?=.*[0-9])[A-Za-z0-9]+.{6,36}$/.test(value);
      // });
      //  identity type value check end
   
     $("#registrationPageSubmitBtn").click(function (e) 
     {     
         e.preventDefault();
         var form = $("#registrationPageForm");
         form.validate({
             rules: {
                 CandidateName:{
                     required: true,
                     minlength:2,
                 },
                 FatherName:{
                     required: true,
                     minlength:2,
                 },
                 MotherName:{
                     required: true,
                     minlength:2,
                 },
                 GenderID:{
                     required: true,
                 },

                 day:{
                     required: true
                 },
                 month:{
                     required: true
                 },
                 year:{
                     required: true
                 },
                 email:{
                     required: true,
                     email: true
                 },
                 confirmMail:{
                     required: true,
                     equalTo: "#email"
                 },
                 mobileCode:{
                     required: true
                 },
                 mobile:{
                     required: true,
                     maxlength:10,
                     minlength:10,
                     number: true
                 },
                 confirmMobile:{
                     required: true,
                     maxlength:10,
                     minlength:10,
                     number: true,
                     equalTo: "#mobile"
                 },
                
                 IdentityID:{
                     required: true
                 },
                 IdentityNumber:{
                     required: true 
                 },
                 IsAadharNumber:{
                     required: true
                 },
                 NameOnAadhar:{
                     required: true 
                 },
                 AadharNumber:{
                     required: true 
                 },
                 /*PremisesName:{
                     required: true,
                     minlength:3,
                     maxlength:150,
                 },
                 SubLocality:{
                     maxlength:100,
                 },
                 Locality:{
                     required: true,
                     minlength:3,
                     maxlength:150,
                 },
                 CountryID:{
                     required: true
                 },
                 StateUTID:{
                     required: true
                 },
                 DistrictID:{
                     required: true
                 },
                 PinCode:{
                     required: true
                 },
                 PermanentPremisesName:{
                     required: true,
                     minlength:3,
                     maxlength:150,
                 },
                 PermanentSubLocality:{
                     maxlength:100,
                 },
                 PermanentLocality:{
                     required: true,
                     minlength:3,
                     maxlength:150,
                 },
                 PermanentCountryID:{
                     required: true
                 },
                 PermanentStateUTID:{
                     required: true
                 },
                 PermanentDistrictID:{
                     required: true
                 },
                 PermanentPinCode:{
                     required: true
                 },*/
                 password: {
                   required: true,
                   minlength: 8,
                   passwordFormat: true
                },
                confirmPassword: {
                  equalTo: "#password",
                },
                SecurityQuestionID: {
                  required: true,
                },
                SecurityAnswer: {
                  required: true,
                },
                declarationCheck:{
                    required: true
                },
                pinValue:{
                    required: true,
                    remote: {
                        url: '{{route("validate-captcha")}}', 
                        type: "post",
                        data: {
                        captcha: function () {
                           return $("#pinValue").val(); 
                        },
                        _token :'{{csrf_token()}}'
                        }
                     }
                }

            },
             messages: {
                 CandidateName: {
                     required: "Candidate Name cannot be blank.",
                     minlength: "Candidate Name must consist of at least 2 characters."
                 },
                 FatherName: {
                     required: "Father Name cannot be blank.",
                     minlength: "Father Name must consist of at least 2 characters."
                 },
                 MotherName: {
                     required: "Mother Name cannot be blank.",
                     minlength: "Mother Name must consist of at least 2 characters."
                 },
                 GenderID:{
                     required: "Please fill required field.",
                 },
                 day: {
                       required: "Please fill required field."
                 },
                 month: {
                     required: "Please fill required field."
                 },
                 year: {
                     required: "Please fill required field."
                 },
                 email: {
                     required: "Email cannot be blank.",
                     email: "Please enter a valid email address"
                 },
                 confirmMail: {
                     required: "Confirm email cannot be blank.",
                     equalTo: "Confirm email should be same as email."
                 },
                 mobileCode: {
                     required: "Please fill required field."
                 },
                 mobile: {
                     required: "Mobile cannot be blank."
                 },
                 confirmMobile: {
                     required: "Confirm Mobile cannot be blank."
                 },
                 
                 IdentityID: {
                     required: "Identity Type cannot be blank."
                 },
                 IdentityNumber: {
                     required: "Identity Number cannot be blank."
                 },
                 IsAadharNumber:{
                     required: "Please select any one required field."
                 },
                 NameOnAadhar:{
                     required: "Aadhar Name cannot be blank."
                 },
                 AadharNumber:{
                     required: "Aadhar Number cannot be blank." 
                 },
                 /*PremisesName: {
                     required: "Premises No./Name cannot be blank."
                 },
                 Locality: {
                     required: "Locality cannot be blank."
                 },
                 CountryID: {
                     required: "Country cannot be blank."
                 },
                 StateUTID: {
                     required: "State/UT cannot be blank."
                 },
                 DistrictID: {
                     required: "District cannot be blank."
                 },
                 PinCode: {
                     required: "Pin Code cannot be blank."
                 },
                 PermanentPremisesName: {
                     required: "Permanent Premises No./Name cannot be blank."
                 },
                 PermanentLocality: {
                     required: "Permanent Locality cannot be blank."
                 },
                 PermanentCountryID: {
                     required: "Permanent Country cannot be blank."
                 },
                 PermanentStateUTID: {
                     required: "Permanent State/UT cannot be blank."
                 },
                 PermanentDistrictID: {
                     required: "Permanent District cannot be blank."
                 },
                 PermanentPinCode: {
                     required: "Permanent Pin Code cannot be blank."
                 },*/
                 password: {
                     required: "Password cannot be blank.",
                     minlength: "Password should contain at least 8 characters.",
                     pattern: "Password is not valid Ex. (Nta@2023)."
                   },
                 confirmPassword: {
                     equalTo: "Confirm password should be same password"
                 },
                 SecurityQuestionID: {
                   required: "Security Question cannot be blank."
                 },
                 SecurityAnswer: {
                   required: "Security Answer cannot be blank."
                 },
                 declarationCheck: {
                     required: "Please fill required field."
                 },
                 pinValue: {
                     required: "Captcha cannot be blank.",
                     remote: "Please enter valid captcha."
                 },
             },
             errorElement: 'span',
             errorPlacement: function (error, element) {
                 error.addClass('invalid-feedback');
                 element.closest('.form-group').append(error);
             },
             highlight: function (element, errorClass, validClass) {
             $(element).addClass('is-invalid');
             // $(element).focus();
             },
             unhighlight: function (element, errorClass, validClass) {
             $(element).removeClass('is-invalid');
             $(element).addClass('is-valid');
             }
   
         });
         if (form.valid() === true) {
           setPreview();
             // $('#registrationPageForm').submit();
         }  
       
        
     });
   
     
     $("#email").on('blur mouseout', function() {
         if ($("#email").val() != "") {
               $('#email').next('div').remove();
               $('#email').removeClass('text-danger');
               $("#email").removeClass("is-invalid")
               $.ajax({
                   type: 'POST',
                   url: "{{ route('registration.duplicate') }}",
                   data: {
                     email: $("#email").val(),
                    },
                    success: function(response) {
                         var Data = $.parseJSON(response);
                         if (Data.status == 1) {
                             $("#email").addClass("is-invalid").attr("aria-invalid", true);
                            // $("#email").next(".text-danger").html(Data.msg).show();
                             $('#email').after('<div class="text-danger">'+ Data.msg +'</div>');
                             $('#email').focus();
                         } else if (Data.status == 2) {
                           var otp_msg = '';
                            var url= "{{ route('resendVerificationEmail') }}";
                            var otp_msg = "User already exists please <a href='"+ url +"' style='color:green;'>Verify</a> your account.";
                             $("#email").addClass("is-invalid").attr("aria-invalid", true);
                             $('#email').after('<div class="text-danger"></div>');
                             $('#email').after('<div class="text-danger">'+ otp_msg +'</div>');
                             // $('#email').focus();
                         }else{
                          // $('#email').next('div').remove();
                           $("#email").removeClass("is-invalid")
                         }
                         
                     },
               });
             }
         });

         $("#mobile").on('blur mouseout', function() {
            if ($("#mobile").val() != "") {
               $('#mobile').next('div').remove();
               $('#mobile').removeClass('text-danger');
               $("#mobile").removeClass("is-invalid")
                $.ajax({
                   type: 'POST',
                   url: "{{ route('registration.duplicateMobile') }}",
                   data: {
                     mobile: $("#mobile").val(),
                    },
                    success: function(response) {
                        var Data = $.parseJSON(response);
                        console.log(Data);
                        if ((Data.status == 1 || Data.status == 2) ||  Data.is_mobile == 1) {
                            $("#mobile").addClass("is-invalid").attr("aria-invalid", true);
                            $('#mobile').after('<div class="text-danger">'+ Data.msg +'</div>');
                            $('#mobile').focus();
                        }else{
                           $("#mobile").removeClass("is-invalid")
                         }
                    },
                    failure: function(response) {
                        console.log(response);
                    },
                    error: function(response) {
                        console.log(response);
                    },
                });
            }
        });
   
   
       
   
      });
   
   
     function getDistrictByID(val) {
         // alert(val);
         // if (val) {
         $.ajax({
             type: "POST",
             url: "{{ route('getDistrict')}}",
             data: {
                 ID: val,
                 _token: '{{ csrf_token() }}'
             },
             // dataType: 'json',
             success: function(result) {
   
                 $('#DistrictID').html(result);
             }
   
         });
         // } else {
         //     $('select[name="c_city"]').empty();
         // }
     } 
   
     function getPermanentDistrictByID(val) {
         // alert(val);
         // if (val) {
         $.ajax({
             type: "POST",
             url: "{{ route('getDistrict')}}",
             data: {
                 ID: val,
                 _token: '{{ csrf_token() }}'
             },
             // dataType: 'json',
             success: function(result) {
   
                 $('#PermanentDistrictID').html(result);
             }
   
         });
         // } else {
         //     $('select[name="c_city"]').empty();
         // }
     } 
   
     $(document).ready(function() 
     {
         $('#is_permanent').click(function() {
             if ($.trim($('#PremisesName').val()) != '' && $.trim($('#Locality').val()) != '' && $.trim($('#StateUTID').val()) != '' && $.trim($('#DistrictID').val()) != '' && $.trim($('#PinCode').val()) != '') {
                 if ($('#is_permanent').is(":checked")) {
                     $('#PermanentPremisesName').val($('#PremisesName').val());
                     $('#PermanentLocality').val($('#Locality').val());
                     $('#PermanentSubLocality').val($('#SubLocality').val());
                     var country = $('#CountryID option:selected').val();
                     $("#PermanentCountryID").val(country);
                     var state = $('#StateUTID option:selected').val();
                     $("#PermanentStateUTID").val(state);
                     var district = $('#DistrictID option:selected').val();
                     $("#PermanentDistrictID").val(district);
                 var districttxt = $('#DistrictID option:selected').text();
                 $('#PermanentDistrictID').html("<option value=" + district + ">" + districttxt + "</option>");
   
                     $('#PermanentPinCode').val($('#PinCode').val());
                     // $('#PermanentPremisesName').css({
                     //     'pointer-events': 'none',
                     //     'background-color': '#e9ecef',
                     //     'opacity': '1'
                     // });
                     $('#PermanentPremisesName,#PermanentSubLocality,#PermanentLocality,#PermanentCountryID,#PermanentStateUTID,#PermanentDistrictID,#PermanentPinCode').css({
                         'pointer-events': 'none',
                         'background-color': '#e9ecef',
                         'opacity': '1'
                     });
                     if ($("#PremisesName").hasClass("is-invalid")) {
                         $("#PremisesName").removeClass("is-invalid");
                         $("#PremisesName").parent().find('.invalid-feedback').css("display", "none");
                     }
                     if ($("#PermanentStateUTID").hasClass("is-invalid")) {
                         $("#PermanentStateUTID").removeClass("is-invalid");
                         $("#PermanentStateUTID").parent().find('.invalid-feedback').css("display", "none");
                     }
                     if ($("#PermanentDistrictID").hasClass("is-invalid")) {
                         $("#PermanentDistrictID").removeClass("is-invalid");
                         $("#PermanentDistrictID").parent().find('.invalid-feedback').css("display", "none");
                     }
                     if ($("#PermanentPinCode").hasClass("is-invalid")) {
                         $("#PermanentPinCode").removeClass("is-invalid");
                         $("#PermanentPinCode").parent().find('.invalid-feedback').css("display", "none");
                     }
                 } else {
                     $('#PermanentPremisesName').val('');
                     $('#PermanentSubLocality').val('');
                     $('#PermanentLocality').val('');
                     $('#PermanentDistrictID').val('');
                     $('#PermanentStateUTID').val('');
                     $('#PermanentPinCode').val('');
                     $('#PermanentPremisesName,#PermanentSubLocality,#PermanentLocality,#PermanentCountryID,#PermanentStateUTID,#PermanentDistrictID,#PermanentPinCode').css({
                         'pointer-events': '',
                         'background-color': '',
                         'opacity': ''
                     });
                     $("#PremisesName").parent().find('.invalid-feedback').text('');
                     $("#PremisesName").parent().find('.invalid-feedback').css("display", "block");
   
                     $("#PermanentSubLocality").parent().find('.invalid-feedback').text('');
                     $("#PermanentSubLocality").parent().find('.invalid-feedback').css("display", "block");
   
                     $("#PermanentLocality").parent().find('.invalid-feedback').text('');
                     $("#PermanentLocality").parent().find('.invalid-feedback').css("display", "block");
   
                     $("#PermanentCountryID option:selected").removeAttr('selected');
                     $("#PermanentCountryID").parent().find('.invalid-feedback').text('');
                     $("#PermanentCountryID").parent().find('.invalid-feedback').css("display", "block");
   
                     $("#PermanentStateUTID option:selected").removeAttr('selected');
                     $("#PermanentStateUTID").parent().find('.invalid-feedback').text('');
                     $("#PermanentStateUTID").parent().find('.invalid-feedback').css("display", "block");
   
                     $("#PermanentDistrictID option:selected").removeAttr('selected');
                     $("#PermanentDistrictID").parent().find('.invalid-feedback').text('');
                     $("#PermanentDistrictID").parent().find('.invalid-feedback').css("display", "block");
   
                     $("#PermanentPinCode").parent().find('.invalid-feedback').text('');
                     $("#PermanentPinCode").parent().find('.invalid-feedback').css("display", "block");
                 }
             } else {
                 $(this).prop('checked', false);
             }
         });
     });
   
     function setPreview()
     {
       // $('#registrationPageForm').submit();
       $('#myModal').modal('show');
       $("#candidateName").text($("#CandidateName").val().toUpperCase());                
       $("#fatherName").text($("#FatherName").val().toUpperCase());                
       $("#motherName").text($("#MotherName").val().toUpperCase());
       $("#candidateGenderID").text($("#GenderID :selected").text());               
       $("#dateOfBirth"). text($("#day").val()+-+$("#month").val()+-+$("#year").val());                
       $("#emailAddress"). text($("#email").val());
       $("#candidateMobile"). text($("#mobileCode").val()+-+$("#mobile").val());
       $("#candidateConfirmMobile"). text($("#confirmMobileCode").val()+-+$("#confirmMobile").val());
       if($("#alternateMobile").val().length > 1 ){
         $("#candidateAlternateMobile").text($("#alternateCode").val()+-+$("#alternateMobile").val());
       }else{
         $("#candidateAlternateMobile").text('');
       }
       $("#identityType"). text($("#IdentityID :selected").text());
       $("#confEmailAddress").text($("#confirmMail").val());
       $("#identityNumber"). text($("#IdentityNumber").val());

       $("#candidateIsAadharNumber").text($("#IsAadharNumber :selected").text());
       $("#candidateNameOnAadhar").text($("#NameOnAadhar").val());
       $("#candidateAadharNumber").text($("#AadharNumber").val());
       //Presenet address
       /*$("#premisesName").text($("#PremisesName").val().toUpperCase());   
       $("#sublocality").text($("#SubLocality").val().toUpperCase());   
       $("#locality").text($("#Locality").val().toUpperCase());   
       $("#country").text($("#CountryID :selected").text().toUpperCase()); //$("#pr_DistrictID :selected").text()  
       $("#stateName").text($("#StateUTID :selected").text().toUpperCase());   
       $("#districtName").text($("#DistrictID :selected").text().toUpperCase());   
       $("#pincode").text($("#PinCode").val().toUpperCase());   
       //Permanent address
       $("#permanentPremisesName").text($("#PermanentPremisesName").val().toUpperCase());   
       $("#permanentSublocality").text($("#PermanentSubLocality").val().toUpperCase());   
       $("#permanentLocality").text($("#PermanentLocality").val().toUpperCase());   
       $("#permanentCountry").text($("#PermanentCountryID :selected").text().toUpperCase()); //$("#pr_DistrictID :selected").text()  
       $("#permanentStateName").text($("#PermanentStateUTID :selected").text().toUpperCase());   
       $("#permanentDistrictName").text($("#PermanentDistrictID :selected").text().toUpperCase());   
       $("#permanentPincode").text($("#PermanentPinCode").val().toUpperCase());  */ 
       //Account Details data
       $("#SecurityQuestion").text($("#SecurityQuestionID :selected").text().toUpperCase()); 
       $("#security_answer").text($("#SecurityAnswer").val().toUpperCase());
   
   
     }
   
     $('#edit_registration').click(function()
     {
       $('#myModal').modal('hide');
     });
   
     $('#final_submit_btn').click(function (e)
     {
       e.preventDefault();
         var form = $("#registration-final-form");
         form.validate({
             rules: {
               IsCheckedName: {
                     required: true
                 },
               IsCheckedFatherName: {
                     required: true
                 },
               IsCheckedMotherName: {
                     required: true
                 },
               IsCheckedDOB: {
                     required: true
                 },
               IsCheckedMobile: {
                     required: true
                 },
               IsCheckedEmail: {
                     required: true
                 },
               IsDeclarationCheck: {
                     required: true
                 },
               
             },
             messages: {
                 
               IsCheckedName: {
                       required: "Please fill required field."
                 },
               IsCheckedFatherName: {
                     required: "Please fill required field."
                 },
               IsCheckedMotherName: {
                     required: "Please fill required field."
                 },
               IsCheckedDOB: {
                     required: "Please fill required field."
                 },
               IsCheckedMobile: {
                     required: "Please fill required field."
                 },
               IsCheckedEmail: {
                     required: "Please fill required field."
                 },
               IsDeclarationCheck: {
                     required: "Please fill required field."
                 },
                 
             },
             errorElement: 'span',
             errorPlacement: function (error, element) {
                 error.addClass('invalid-feedback');
                 element.closest('.form-group').append(error);
             },
             highlight: function (element, errorClass, validClass) {
             $(element).addClass('is-invalid');
             $(element).focus();
             },
             unhighlight: function (element, errorClass, validClass) {
             $(element).removeClass('is-invalid');
             }
   
         });
         if (form.valid() === true) {
           
             $('#registrationPageForm').submit();
         }     
     });

     $('#IsCheckedName').click(function()
     {
         if ($('#IsCheckedName').is(":checked")) 
         {
            $('#isCheckedName').val(1);
         }
         else
         {
            $('#isCheckedName').val(0);
         }
     });
   

     $('#IsCheckedFatherName').click(function()
     {
         if ($('#IsCheckedFatherName').is(":checked")) 
         {
            $('#isCheckedFatherName').val(1);
         }
         else
         {
            $('#isCheckedFatherName').val(0);
         }
     });


     $('#IsCheckedMotherName').click(function()
     {
         if ($('#IsCheckedMotherName').is(":checked")) 
         {
            $('#isCheckedMotherName').val(1);
         }
         else
         {
            $('#isCheckedMotherName').val(0);
         }
     });

     $('#IsCheckedDOB').click(function()
     {
         if ($('#IsCheckedDOB').is(":checked")) 
         {
            $('#isCheckedDOB').val(1);
         }
         else
         {
            $('#isCheckedDOB').val(0);
         }
     });

     $('#IsCheckedMobile').click(function()
     {
         if ($('#IsCheckedMobile').is(":checked")) 
         {
            $('#isCheckedMobile').val(1);
         }
         else
         {
            $('#isCheckedMobile').val(0);
         }
     });

     $('#IsCheckedEmail').click(function()
     {
         if ($('#IsCheckedEmail').is(":checked")) 
         {
            $('#isCheckedEmail').val(1);
         }
         else
         {
            $('#isCheckedEmail').val(0);
         }
     });

     $('#IsDeclarationCheck').click(function()
     {
         if ($('#IsDeclarationCheck').is(":checked")) 
         {
            $('#isDeclarationCheck').val(1);
         }
         else
         {
            $('#isDeclarationCheck').val(0);
         }
     });

    var StateUTID = $('#StateUTID').val();
    if(StateUTID != ''){
      getDistrictByID(StateUTID);
    }

    var PermanentStateUTID = $('#PermanentStateUTID').val();
    if(PermanentStateUTID != ''){
      getPermanentDistrictByID(PermanentStateUTID);
    }

    
    setTimeout(function() { 
        var DistrictID = "{{ old('DistrictID') }}";
        var PermanentDistrictID = "{{ old('PermanentDistrictID') }}";
        if(DistrictID != ''){
          $('#DistrictID').val(DistrictID);
        }
        if(PermanentDistrictID != ''){
          $('#PermanentDistrictID').val(PermanentDistrictID);
        }
    }, 800);
    
// password eye icon start
   const togglePassword = document.querySelector("#togglePassword");
   const password = document.querySelector("#password");

   togglePassword.addEventListener("click", function () 
   {
        // toggle the type attribute
        const type = password.getAttribute("type") === "password" ? "text" : "password";
        password.setAttribute("type", type);
        
      if(type === 'text')
        {
            // toggle the icon
            this.classList.remove("fa-eye-slash");
            this.classList.toggle("fa-eye");
        }
        else{
                this.classList.remove("fa-eye");
            this.classList.toggle("fa-eye-slash");
        }
   });

   const toggleConfimPassword = document.querySelector("#toggleConfimPassword");
   const ConPassword = document.querySelector("#confirmPassword");
   toggleConfimPassword.addEventListener("click", function () 
   {
        // toggle the type attribute
        const type = ConPassword.getAttribute("type") === "password" ? "text" : "password";
        ConPassword.setAttribute("type", type);
        
      if(type === 'text')
        {
            // toggle the icon
            this.classList.remove("fa-eye-slash");
            this.classList.toggle("fa-eye");
        }
        else
        {
            this.classList.remove("fa-eye");
            this.classList.toggle("fa-eye-slash");
        }
   });
// password eye icon end
function getyear(){
   $('#year').html('');
   var yr=[];
   var yr= yearrange(1978,2001);
   for (var i = 0; i<yr.length; i++) {
      $('#year').append('<option value="'+yr[i]+'" >'+yr[i]+'</option>');
   }
}
getyear();
// if($('#ApplyFor').val()!=''){
//    var aplyforval=$('#ApplyFor').val();
//    getyear(aplyforval);
// }
function yearrange(start, end) {
    var ans = [];
    for (let i = start; i <= end; i++) {
        ans.push(i);
    }
    return ans;
}

  
$(document).on('change', '#IsAadharNumber', function() {
   var aval=$('#IsAadharNumber').val();
   if(aval==1){
      $('#NameOnAadharDiv').show();
      $('#AadharNumberDiv').show();
   }else{
      $('#NameOnAadharDiv').hide();
      $('#AadharNumberDiv').hide();
   }      
});
jQuery(function($) { // DOM ready and $ alias secured
        let aadhaar = "";
        let aadhaarStack = [];
        let maskStack = [];
        let flag = 0;

        $('#AadharNumber').on('input', function(e) {
            let key = e.which || this.value.substr(-1).charCodeAt(0);
            if (this.value.length < aadhaarStack.length) {
                aadhaarStack.pop();
                maskStack.pop();
            } else {
                key = String.fromCharCode(key);
                if (aadhaarStack.filter(i => i !== " ").length <= 27 && !isNaN(key)) {
                    if (aadhaarStack.length > 1 && (aadhaarStack.filter(i => i !== " ").length) % 4 === 0) {
                        aadhaarStack.push(" ");
                        aadhaarStack.push(key);
                        maskStack.push(" ");
                        if (aadhaarStack.filter(i => i !== " ").length > 8) {
                            maskStack.push(key);
                        } else {
                            maskStack.push("X");
                        }
                    } else {
                        aadhaarStack.push(key);
                        if (aadhaarStack.filter(i => i !== " ").length > 8) {
                            maskStack.push(key);
                        } else {
                            maskStack.push("X");
                        }
                    }
                }
            }

            updateUi();
        });

        function updateUi() {
            setTimeout(function() {
                aadhaar = maskStack.join("");
                $('#AadharNumber').val(aadhaar);
            }, 100);
        }
});

</script>
@endpush