@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;
    }

    .intruc-table {
        margin-top: 10px;
    }

    .point-table {
        width: 100%;
        border: 1px solid #000;
    }

    .border {
        border: 1px solid #080808;
    }

    #email_error {
        color: red;
        font-size: .875em;
        color: #dc3545 !important;
    }

    table,
    td,
    th {
        border: 1px solid;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    tr .tbl-2 {
        width: 50%;
        padding: 5px 10px;
        text-align: center;
        font-size: 12px;
    }

    tr .tbl-1 {
        text-align: center;
        font-size: 14px;
        letter-spacing: 0.5px;
        padding: 0px 7px 1px;
    }

    .pass-div .form-control.is-invalid,
    .was-validated .form-control:invalid,
    .pass-div .form-control.is-valid,
    .was-validated .form-control:valid {
        background-position: right calc(1.375em + 0.1875rem) center;
    }

    .ui-datepicker-trigger {
        width: 25;
        height: 25;
        float: right;
        margin-top: -28px;
        margin-right: 4px;
    }
</style>
@php
$checkboxNameClass = old('checkboxName') == 1 ? 'checked' : '';
$ApplicationEndDate = config('constants.ApplicationEndDate');
@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
    @php
    $CandidateName = '';
    $dayCal = '';
    $monthCal = '';
    $yearCal = '';
    $genderCal = '';
    @endphp
    <form id="registrationPageForm" action="{{ route('registration.save') }}" autocomplete="off" class="registrationPageForm" method="post">
        @csrf
        @if(!empty($candidatepreregister['ReferenceID']))
        @php
        $CandidateName = $candidatepreregister['AadharName'];
        $DobArray = explode('-',$candidatepreregister['AadharDOB']);
        $dayCal = $DobArray[0];
        $monthCal = $DobArray[1];
        $yearCal = $DobArray[2];
        if($candidatepreregister['AadharGender']=='M'){
        $genderCal = 4;
        }elseif($candidatepreregister['AadharGender']=='F'){
        $genderCal = 5;
        }else{
        $genderCal = 6;
        }

        @endphp
        <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">Aadhaar Details</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Candidate's Name &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['AadharName'] ?? ''}}
                        </div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Candidate's Date of Birth &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['AadharDOB'] ?? ''}}
                        </div>
                    </div>

                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Gender &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            @if($candidatepreregister['AadharGender']=='M') Male
                            @elseif($candidatepreregister['AadharGender']=='F') Female
                            @else Other
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @elseif(isset($candidatepreregister['Digilocker_id']) && ($candidatepreregister['Digilocker_id'] != ''))
        @php
        $CandidateName = $candidatepreregister['Digilocker_CandidateName'];
        $DobArray = explode('-',$candidatepreregister['Digilocker_DOB']);
        $dayCal = $DobArray[0];
        $monthCal = $DobArray[1];
        $yearCal = $DobArray[2];
        if($candidatepreregister['Digilocker_Gender']=='M'){
        $genderCal = 4;
        }elseif($candidatepreregister['Digilocker_Gender']=='F'){
        $genderCal = 5;
        }else{
        $genderCal = 6;
        }

        @endphp
        <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"> Digilocker Details</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Digilocker ID &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['Digilocker_id'] ?? ''}}
                        </div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Candidate's Name &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['Digilocker_CandidateName'] ?? ''}}
                        </div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Candidate's Date of Birth &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['Digilocker_DOB'] ?? ''}}
                        </div>
                    </div>

                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Gender &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            @if($candidatepreregister['Digilocker_Gender']=='M') Male
                            @elseif($candidatepreregister['Digilocker_Gender']=='F') Female
                            @else Other
                            @endif
                        </div>
                    </div>


                </div>
            </div>
        </div>
        @elseif(isset($candidatepreregister['ABC_account_id']) && ($candidatepreregister['ABC_account_id'] != ''))
        @php
        $CandidateName = $candidatepreregister['ABC_CandidateName'];
        $DobArray = explode('-',$candidatepreregister['ABC_DOB']);
        $dayCal = $DobArray[0];
        $monthCal = $DobArray[1];
        $yearCal = $DobArray[2];
        if($candidatepreregister['ABC_Gender']=='Male'){
        $genderCal = 4;
        }elseif($candidatepreregister['ABC_Gender']=='Female'){
        $genderCal = 5;
        }else{
        $genderCal = 6;
        }
        @endphp
        <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">ABC Details</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">ABC ACCOUNT ID &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['ABC_account_id'] ?? ''}}
                        </div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">ABC NAME &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['ABC_CandidateName'] ?? ''}}
                        </div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">ABC GENDER &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['ABC_Gender'] ?? ''}}
                        </div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">ABC DOB &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['ABC_DOB'] ?? ''}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @elseif(isset($candidatepreregister['PassportNumber']) && ($candidatepreregister['PassportNumber'] != ''))

        <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"> Passport Number</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-3 col-form-label text-end">Passport Number &nbsp;&nbsp; : </label>
                        <div class="col-sm-5  col-form-label">
                            {{ $candidatepreregister['PassportNumber'] ?? ''}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @elseif(isset($candidatepreregister['PanCard']) && ($candidatepreregister['PanCard'] != ''))

        <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"> Pan Card Number</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Pan Card Number &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{$candidatepreregister['PanCard'] ?? ''}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @elseif(isset($candidatepreregister['OutsideIndiaPassportNumber']) && ($candidatepreregister['OutsideIndiaPassportNumber'] != ''))

        <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">Non-Indian Passport Number</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label">Non-Indian Passport Number &nbsp;&nbsp; : </label>
                        <div class="col-sm-5 col-form-label">
                            {{ $candidatepreregister['OutsideIndiaPassportNumber'] ?? ''}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @endif

        <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-4 col-form-label text-end">Candidate's 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="{{ isset($CandidateName) ? $CandidateName : old('CandidateName') }}" maxlength="50" onkeypress="return lettersOnly(event)" autocomplete="off">
                            <span style="color:blue;font-size:12px;">Note : Please do not use any prefix such as Shri/ Mr./ Ms./ Dr./ Mrs. Etc.</span>
                            @error('CandidateName')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end"> Father's / Guardian 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="50" autocomplete="off" onkeypress="return lettersOnly(event)">
                            <span style="color:blue;font-size:12px;">Note : Please do not use any prefix such as Shri/ Mr./ Dr. Etc.</span>
                            @error('FatherName')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Mother's / Guardian 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="50" autocomplete="off" onkeypress="return lettersOnly(event)">
                            <span style="color:blue;font-size:12px;">Note : Please do not use any prefix such as Shri/ Mr./ Dr. Etc.</span>
                            @error('MotherName')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Candidate's Date of Birth<span class="astric-sign">*</span></label>
                        <div class="col-sm-5 form-group">
                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="col-sm-4 form-group">
                                        <select class="form-select form-select-sm dobChange" aria-label=".form-select-sm example" id="day" name="day">
                                            <option value=""> Day</option>
                                            @foreach ($DobDate as $keyDate => $valuedate)
                                            <option value="{{ $keyDate }}" {{ $dayCal !=''? ($dayCal == $keyDate ? 'selected' : '') :(old('day') == $keyDate ? 'selected' : '') }}>
                                                {{ $valuedate }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('day')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-sm-4 form-group">
                                        <select class="form-select form-select-sm dobChange" aria-label=".form-select-sm example" id="month" name="month" onchange="lastdayofmonth();">
                                            <option value="">Month</option>
                                            @foreach ($DobMonth as $keyMonth => $valueMonth)
                                            <option value="{{ $keyMonth }}" {{ $monthCal !=''? ($monthCal == $keyMonth ? 'selected' : '') :(old('month') == $keyMonth ? 'selected' : '') }}>
                                                {{ $valueMonth }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('month')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-sm-4 form-group">
                                        <select class="form-select form-select-sm dobChange" aria-label=".form-select-sm example" id="year" name="year" onchange="lastdayofmonth();">
                                            <option selected="" value="">Year</option>
                                            @foreach ($DobYear as $keyYear => $valueYear)
                                            <option value="{{ $keyYear }}" {{ $yearCal !=''? ($yearCal == $keyYear ? 'selected' : '') :(old('year') == $keyYear ? 'selected' : '') }}>
                                                {{ $valueYear }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('year')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <span class='Age' style="color: #00a651 !important;margin-top: -10px;"></span>
                            </div>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Gender <span class="astric-sign">*</span></label>
                        <div class="col-sm-5 form-group">
                            <select id="gender" class="form-select form-select-sm" name="gender">
                                <option value="">--Select--</option>
                                <option value="4" {{ $genderCal != '' ?($genderCal == 4 ? 'selected' : ''):(old('gender') == 4 ? 'selected' : '') }}>Male</option>
                                <option value="5" {{ $genderCal != '' ?($genderCal == 5 ? 'selected' : ''):(old('gender') == 5 ? 'selected' : '') }}>Female</option>
                                <option value="6" {{ $genderCal != '' ?($genderCal == 6 ? 'selected' : ''):(old('gender') == 6 ? 'selected' : '') }}>Third Gender</option>
                            </select>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <!-- sdadfs -->
                    <!-- <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Category <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="CastCategoryID" id="CastCategoryID">
                                <option value="">--Select--</option>
                                @foreach ($CasteCategoryMst as $category)
                                <option value="{{ isset($category->ID) ? $category->ID : '' }}" >
                                    {{ (isset($category->CategoryName) or !empty($category->CategoryName)) ? $category->CategoryName : old('CastCategoryID') }}
                                </option>
                                @endforeach

                            </select>
                        </div>
                        <div class="col-sm-2"></div>
                        @error('CastCategoryID')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div> -->
                    <!-- <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Are you an Ex-Serviceman? <span class="astric-sign">*</span></label>
                        <div class="col-sm-5  form-group">
                            <select class="form-select form-select-sm" name="ExServiceMan" id="ExServiceMan">
                                <option value="">
                                    ---Select---</option>
                                <option value="1">Yes </option>
                                <option value="0"> No </option>
                            </select>
                            @error('ExServiceMan')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div> -->
                    <!-- <div id="joiningleaving">

                        <div class="row mb-3 justify-content-center">
                            <label class="col-sm-4 col-form-label text-end">Date of Joining the Service <span class="astric-sign">*</span></label>
                            <div class="col-sm-5 form-group">
                                <input type="text" class="form-control form-control-sm   date-experience" placeholder="Date of Joining" id="dateofjoining" name="dateofjoining" value="{{ old('dateofjoining') }}" maxlength="50" autocomplete="off" readonly>
                                @error('dateofjoining')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="row mb-3 justify-content-center">
                            <label class="col-sm-4 col-form-label text-end">Date of Leaving the Service <span class="astric-sign">*</span></label>
                            <div class="col-sm-5 form-group">
                                <input type="text" class="form-control form-control-sm  date-experience" placeholder="Date of Leaving" id="dateofleaving" name="dateofleaving" value="" maxlength="50" autocomplete="off" readonly>
                                @error('dateofleaving')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="row mb-3 justify-content-center">
                            <label class="col-sm-4 col-form-label text-end">How many months of experience do you have? (In months)<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="How Many Experience" id="ExServicehowManyExperience" name="ExServicehowManyExperience" value="" maxlength="3" autocomplete="off" onkeypress="return blockSpecialChar(event,'numeric')" readonly="readonly">
                                @error('ExServicehowManyExperience')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </div> -->
                    <!-- <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Are you a regular employee of ? <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="IsGovernmentSevent" id="IsGovernmentSevent">
                                <option value="">
                                    ---Select---</option>
                                <option value="1">
                                    NVS</option>
                                <option value="2">
                                    Central government</option>
                                <option value="3">
                                    State government</option>
                                <option value="4">
                                    Autonomous body</option>
                                <option value="5">
                                    PSU</option>
                                <option value="0">
                                    None of the above </option>
                            </select>
                            @error('IsGovernmentSevent')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div> -->

                    <!-- <div class="row mb-3 justify-content-center" id="howmanyexp">
                        <label class="col-sm-4 col-form-label text-end">How many months of experience do you have? (In months)<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="How Many Experience" id="howManyExperience" name="howManyExperience" value="" maxlength="3" autocomplete="off" onkeypress="return blockSpecialChar(event,'numeric')">
                            @error('howManyExperience')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div> -->

                    <!--new field add-->

                    <!--new field end-->
                    <!-- fqfrqwer -->



                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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" autocomplete="off">
                            @error('email')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span id="email_error" style="display:none;">Wrong email format</span>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Confirm Email Address <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 Confirm Email Address" id="confirmMail" name="confirmMail" value="{{ old('confirmMail') }}" maxlength="50" autocomplete="off">
                            @error('confirmMail')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <div class="text-danger" id="confirmMailError"></div>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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" autocomplete="off">
                            @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') }}" autocomplete="off">
                            @error('mobile')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>

                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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" autocomplete="off">
                            @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 Confirm Mobile Number" id="ConfirmMobileNumber" name="ConfirmMobileNumber" onkeypress="return blockSpecialChar(event,'numeric')" maxlength="10" value="{{ old('ConfirmMobileNumber') }}" autocomplete="off">
                            @error('mobile')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <div class="text-danger" id="ConfirmMobileNumberError"></div>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Alternate Contact 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" autocomplete="off">
                        </div>
                        <div class="col-sm-4 form-group">
                            <input type="text" class="form-control form-control-sm " placeholder="Enter Alternate Mobile Number" id="alternateMobile" name="alternateMobile" onkeypress="return blockSpecialChar(event,'numeric')" maxlength="10" value="{{ old('alternateMobile') }}" autocomplete="off">
                            @error('alternateMobile')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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="8" {{ old('IdentityID') == 8 ? 'selected' : '' }}>AADHAAR NUMBER</option-->
                                <option value="1" {{ old('IdentityID') == 1 ? 'selected' : '' }}>PAN CARD </option>
                                <option value="2" {{ old('IdentityID') == 2 ? 'selected' : '' }}>VOTER ID </option>
                                <option value="3" {{ old('IdentityID') == 3 ? 'selected' : '' }}>RATION CARD WITH PHOTOGRAPH</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="6" {{ old('IdentityID') == 6 ? 'selected' : '' }}>PASSPORT </option> -->
                                <option value="7" {{ old('IdentityID') == 7 ? 'selected' : '' }}>OTHER Valid GOVT. IDENTITY WITH PHOTOGRAPH</option>
                            </select>
                            @error('IdentityID')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Identification Number <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 Identification Number" id="IdentityNumber" name="IdentityNumber" value="{{ old('IdentityNumber') }}" maxlength="30" onkeypress="return blockSpecialChar(event,'alphanumeric')" autocomplete="off">
                            @error('IdentityNumber')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <div class="text-danger" id="IdentityNumberError"></div>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>

                    <!-- PWD -->
                    <!-- <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">If you are a Pwd Candidate, do you have benchmark disability ? <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="PhysicalDisability" id="PhysicalDisability">
                                <option value="{{ isset($question->ID) ? $question->ID : '' }}">---Select---</option>
                                @foreach ($DisabilityPercentage as $DisabilityKey => $DisabilityValue)
                                <option value="{{ isset($DisabilityKey) ? $DisabilityKey : '' }}" >
                                    {{ isset($DisabilityValue) ? $DisabilityValue : old('PhysicalDisability') }}
                                </option>
                                @endforeach
                            </select>
                            @error('PhysicalDisability')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div> -->

                    <!-- <div class="row mb-3 justify-content-center" id="typeDisability">
                        <label class="col-sm-4 col-form-label text-end">Type of Disability<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="DisabilyType" id="DisabilyType">
                                <option value="{{ isset($typedisability->ID) ? $typedisability->ID : '' }}">---Select---
                                </option>
                                @foreach ($typeofdisability as $typedisability)
                                <option value="{{ isset($typedisability->ID) ? $typedisability->ID : '' }}" <?php// (isset($PersonalModel['DisabilyType']) && $typedisability->ID == $PersonalModel['DisabilyType'] or old('DisabilyType')) ? 'selected' : '' ?>>
                                    {{ isset($typedisability->Name) ? $typedisability->Name : old('DisabilyType') }}
                                </option>
                                @endforeach
                            </select>
                            @error('DisabilyType')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div> -->

                    <!-- <div class="row mb-3 justify-content-center" id="bulletinScribe">
                        <label class="col-sm-4 col-form-label text-end">Whether you need scribe/reader<span class="astric-sign">*</span></label>
                        <div class="col-sm-5 form-group">
                            <div class="form-group">
                                <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="NeedScribeR" id="NeedScribeR">
                                    <option value="">---Select---</option>
                                    @foreach ($NeedScribe as $NeedScribeKey => $NeedScribeValue)
                                    <option value="{{ isset($NeedScribeKey) ? $NeedScribeKey : '' }}" <?php// old('NeedScribeR') ? 'selected' : '' ?>>
                                        {{ isset($NeedScribeValue) ? $NeedScribeValue : old('NeedScribeR') }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('NeedScribeR')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div> -->
                    <!-- END PWD -->
                </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-4 col-form-label text-end">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 space-remover copy-paste uncheckedPerA" placeholder="Enter Premises No./Name" id="PremisesName" name="PremisesName" value="{{ old('PremisesName') }}" maxlength="150" autocomplete="off" onkeypress="return blockSpecialChar(event,'characterNumericAndAllowSomespecials')">
                            @error('PremisesName')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Sub-Locality(Optional):</label>
                        <div class="col-sm-5 form-group">
                            <input type="text" class="form-control form-control-sm text-upper space-remover copy-paste uncheckedPerA" placeholder="Enter Sub-Locality" id="SubLocality" name="SubLocality" value="{{ old('SubLocality') }}" maxlength="100" autocomplete="off" onkeypress="return blockSpecialChar(event,'characterNumericAndAllowSomespecials')">
                            @error('SubLocality')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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 space-remover copy-paste uncheckedPerA" placeholder="Enter Locality" id="Locality" name="Locality" value="{{ old('Locality') }}" maxlength="100" autocomplete="off" onkeypress="return blockSpecialChar(event,'characterNumericAndAllowSomespecials')">
                            @error('Locality')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Country <span class="astric-sign">*</span></label>
                        <div class="col-sm-5  form-group">
                            <select class="form-select form-select-sm uncheckedPerA" 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 class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">State <span class="astric-sign">*</span></label>
                        <div class="col-sm-5 form-group">
                            <select class="form-select form-select-sm StateUTID uncheckedPerA" aria-label=".form-select-sm example" name="StateUTID" id="StateUTID">
                                <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 class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">District <span class="astric-sign">*</span></label>
                        <div class="col-sm-5  form-group">
                            <select class="form-select form-select-sm DistrictID uncheckedPerA" 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 class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Pin Code <span class="astric-sign">*</span></label>
                        <div class="col-sm-5 form-group">
                            <input type="text" class="form-control form-control-sm  uncheckedPerA" placeholder="Enter PinCode" id="PinCode" name="PinCode" autocomplete="off" onkeypress="return blockSpecialChar(event,'numeric')" minlength="6" maxlength="6" value="{{ old('PinCode') }}">
                            @error('PinCode')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></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" autocomplete="off" 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-4 col-form-label text-end">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 space-remover copy-paste uncheckedPersent" placeholder="Enter Premises No./Name" id="PermanentPremisesName" name="PermanentPremisesName" value="{{ old('PermanentPremisesName') }}" maxlength="150" autocomplete="off" onkeypress="return blockSpecialChar(event,'characterNumericAndAllowSomespecials')">
                            @error('PermanentPremisesName')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">Sub-Locality(Optional):</label>
                        <div class="col-sm-5 form-group">
                            <input type="text" class="form-control form-control-sm text-upper space-remover copy-paste uncheckedPersent" placeholder="Enter Sub-Locality" id="PermanentSubLocality" name="PermanentSubLocality" value="{{ old('PermanentSubLocality') }}" maxlength="100" autocomplete="off" onkeypress="return blockSpecialChar(event,'characterNumericAndAllowSomespecials')">
                            @error('PermanentSubLocality')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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 space-remover copy-paste uncheckedPersent" placeholder="Enter Locality" id="PermanentLocality" name="PermanentLocality" value="{{ old('PermanentLocality') }}" maxlength="100" autocomplete="off" onkeypress="return blockSpecialChar(event,'characterNumericAndAllowSomespecials')">
                            @error('PermanentLocality')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end"> Country <span class="astric-sign">*</span></label>
                        <div class="col-sm-5  form-group">
                            <select class="form-select form-select-sm uncheckedPersent" 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 class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">State <span class="astric-sign">*</span></label>
                        <div class="col-sm-5 form-group">
                            <select class="form-select form-select-sm PermanentStateUTID uncheckedPersent" aria-label=".form-select-sm example" name="PermanentStateUTID" id="PermanentStateUTID">
                                <option selected="" 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 class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">District <span class="astric-sign">*</span></label>
                        <div class="col-sm-5 form-group">
                            <select class="form-select form-select-sm PermanentDistrictID uncheckedPersent" 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 class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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 uncheckedPersent" placeholder="Enter PinCode" id="PermanentPinCode" name="PermanentPinCode" onkeypress="return blockSpecialChar(event,'numeric')" minlength="6" maxlength="6" autocomplete="off" value="{{ old('PermanentPinCode') }}">
                            @error('PermanentPinCode')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></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 pass-div">
                        <label class="col-sm-4 col-form-label text-end" 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="" maxlength="13"><i class='fa fa-eye-slash toggle-password' id='togglePassword'></i>
                            @error('password')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span style="color:blue;font-size:12px;">Note : 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 and Maximum 13 characters.</span>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center pass-div">
                        <label class="col-sm-4 col-form-label text-end">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 class="text-danger" id="confirmPasswordError"></div>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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 class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-4 col-form-label text-end">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 space-remover 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 class="col-sm-2"></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-4 col-form-label text-end">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" placeholder="Enter Security PIN as Shown Below" id="pinValue" name="pinValue">
                            @error('pinValue')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-2 col-form-labe text-end">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-1 col-form-label">
                            <button type="button" class="btn btn-primary" class="reload" id="reload">
                                &#x21bb;
                            </button>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <div class="col-sm-12">
                            <input type="checkbox" class="form-check-input" id="declarationCheck" name="declarationCheck">
                            <label class="form-check-label" for="candidate-declarationCheck"> I AGREE</label>
                            <div class="invalid-feedback"></div>
                            @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">
                            <p style="text-align: justify;">I hereby declare that all the particulars started in this application form are true to the best of my knowledge and belief. I have read the Information Bulletein for SSS - 2024 and understood the procedures. I shall abide by the terms and conditions thereon.</p>
                        </div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <div class="col-sm-3 text-center">
                            <button type="button" class="btn btn-sm btn-warning" id="registrationPageSubmitBtn"><i class="ri-save-line float-start me-1"></i> Submit</button>
                        </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's Name:</td>
                                <td class="col-md-3 tdpadding" id="candidateName"></td>
                                <td class="col-md-3 tdpadding">Father's Name:</td>
                                <td class="col-md-3 tdpadding" id="fatherName"></td>
                            </tr>
                            <tr>
                                <td class="col-md-3 tdpadding">Mother's Name:</td>
                                <td class="col-md-3 tdpadding" id="motherName"></td>
                                <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">Gender:</td>
                                <td class="col-md-3 tdpadding" id="genderIDp"></td>
                                <!-- <td class="col-md-3 tdpadding">Category Name:</td>
                                <td class="col-md-3 tdpadding" id="CastCategoryIDp"></td> -->
                                <td class="col-md-3 tdpadding">Email Address:</td>
                                <td class="col-md-3 tdpadding" id="emailAddress"></td>
                            </tr>

                            <!-- <tr>

                                <td class="col-md-3 tdpadding">Are you a Ex-Serviceman?</td>
                                <td class="col-md-3 tdpadding" id="ExServiceManp"></td>
                                <td class="col-md-3 tdpadding"></td>
                                <td class="col-md-3 tdpadding"></td>
                            </tr>

                            <tr id="serviceDate">
                                <td class="col-md-3 tdpadding">Date of Joining the Service:</td>
                                <td class="col-md-3 tdpadding" id="dateofjoiningp"></td>
                                <td class="col-md-3 tdpadding">Date of Leaving the Service </td>
                                <td class="col-md-3 tdpadding" id="dateofleavingp"></td>
                            </tr>
                            <tr id="serviceExperience">
                                <td class="col-md-3 tdpadding">How many months of experience do you have? (In months) </td>
                                <td class="col-md-3 tdpadding" id="ExServicehowManyExperienceP"></td>
                                <td class="col-md-3 tdpadding"></td>
                                <td class="col-md-3 tdpadding"></td>
                            </tr>

                            <tr>
                                <td class="col-md-3 tdpadding">Are You Regular Employee ?:</td>
                                <td class="col-md-3 tdpadding" id="IsGovernmentSeventp"></td>
                                <td class="col-md-3 tdpadding Experiencep">How many months of experience do you have? (In months)</td>
                                <td class="col-md-3 tdpadding Experiencep" id="howManyExperiencep"></td>
                            </tr>

                            <tr>
                                <td class="col-md-3 tdpadding">If you are a Pwd Candidate, do you have benchmark disability ? :</td>
                                <td class="col-md-3 tdpadding" id="physicalDisability"></td>

                                <td class="col-md-3 tdpadding PercentageOfDisability">Percentage of disability </td>
                                <td class="col-md-3 tdpadding PercentageOfDisability" id="disabilityPercentage"></td>
                            </tr>

                            <tr class="PercentageOfDisability">
                                <td class="col-md-3 tdpadding">Type of Disability :</td>
                                <td class="col-md-3 tdpadding" id="disabilyType"></td>
                                <td class="col-md-3 tdpadding">Whether you need scribe/reader </td>
                                <td class="col-md-3 tdpadding" id="needScribeR"></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">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>
                        </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 No/ Name):</td>
                                <td class="col-md-3 tdpadding" id="premisesName"></td>
                                <td class="col-md-3 tdpadding">उप-स्थानीयता (Sub-Locality)(Optional):</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):</td>
                                <td class="col-md-3 tdpadding" id="stateName"></td>
                                <td class="col-md-3 tdpadding">जिला (District):</td>
                                <td class="col-md-3 tdpadding" id="districtName"></td>
                            </tr>
                            <tr>
                                <td class="col-md-3 tdpadding">पिन कोड (Pin Code):</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 No/ Name):</td>
                                <td class="col-md-3 tdpadding" id="permanentPremisesName"></td>
                                <td class="col-md-3 tdpadding">उप-स्थानीयता (Sub-Locality)(Optional):</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):</td>
                                <td class="col-md-3 tdpadding" id="permanentStateName"></td>
                                <td class="col-md-3 tdpadding">जिला (District):</td>
                                <td class="col-md-3 tdpadding" id="permanentDistrictName"></td>
                            </tr>
                            <tr>
                                <td class="col-md-3 tdpadding">पिन कोड (Pin Code):</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's 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's
                                        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 style="text-align: justify;"> I hereby declare that all the particulars started in this application form are true to the best of my knowledge and belief. I have read the Information Bulletein for SSS - 2024 and understood the procedures. I shall abide by the terms and conditions thereon.</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>

<!--Less than experience Error model start -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Error</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span class="errorMsg" style="color: red;font-size: 18px;"></span>
            </div>
        </div>
    </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary showErrorModel" style="display:none;" data-toggle="modal" data-target="#exampleModal">
</button>

<input type="hidden" id="PermanentStateUTID_hide">
<input type="hidden" id="PermanentDistrictID_hide">
@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("EmailValidate", function(value, element) {
            let email = value;
            //Email validation      
            var re = /([A-Z0-9a-z_-][^@])+?@[^$#<>?]+?\.[\w]{2,4}/.test(email);
            if (!re) {
                return false
            } else {
                return true;

            }

        }, "Email format is wrong.");

        jQuery.validator.addMethod("AddressFnoSpace", function(value, element) {
            let myString = value;
            if (myString != '') {
                let remText = myString.replace(/ /g, "");

                if (jQuery.trim(remText).length < 2) {
                    return false;
                } else {
                    return true;
                }
            } else {
                return true;
            }

        }, "Field must consist of at least 2 characters.");

        jQuery.validator.addMethod("FnoSpace", function(value, element) {
            let myString = value;
            let remText = myString.replace(/ /g, "");

            if (jQuery.trim(remText).length < 2) {
                return false;
            } else {
                return true;
            }
        }, "Field must consist of at least 2 characters.");

        $.validator.addMethod("alternateMobileFormat", function(value, element) {
            if (value != "") {
                if (value == $('#mobile').val()) {
                    return false;
                } else {
                    return true;
                }
            } else {
                return true;
            }
        }, "Alternate No. Should be Diffrent from Mobile Number.");


        jQuery.validator.addMethod("validdays", function(value, element) {
            var calday = caldays($('#month').val(), $('#year').val());
            if ($('#day').val() <= calday) {
                return true;
            } else {
                return false;
            }
        }, "Selected date is not valid.");

        $.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() {

            var IdentityID = $('#IdentityID').val();
            if (IdentityID == 1) {
                $('#IdentityNumber').addClass('text-upper');
            } else {
                $('#IdentityNumber').removeClass('text-upper');
            }
            $('#IdentityNumber').val('');
            $('#IdentityNumber').removeClass('is-invalid');
            $('#IdentityNumberError').text('');
        });
        //  identity type value check start
        $('#IdentityNumber').focusout(function() {
            var IdentityID = $('#IdentityID').val();
            var IdentityNumber = $('#IdentityNumber').val().toUpperCase().trim();

            if (IdentityID == 8) {
                var IdentityNumberAadhaar = /^[a-zA-Z0-9 ]{14}$/;
                // if (!IdentityNumber.match(/^([0-9]{4}[0-9]{4}[0-9]{4}$)|([0-9]{4}\s[0-9]{4}\s[0-9]{4}$)|([0-9]{4}-[0-9]{4}-[0-9]{4}$)/)) {
                if (!IdentityNumber.match(IdentityNumberAadhaar)) {
                    $('#IdentityNumberError').text(
                        'Please enter valid Aadhaar Number (example:- Enter Aadhaar number 12 digit).');
                    $('#IdentityNumber').addClass('is-invalid');
                } else {
                    $('#IdentityNumber').removeClass('is-invalid');
                    $('#IdentityNumberError').text('');
                }
            } else 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 != '') {

                var IdentityNumberRegEx = /^[a-zA-Z0-9][A-Za-z0-9]{1,30}$/;
                // if (!IdentityNumber.match(/^(?=.*[a-zA-Z0-9])(?=.*[0-9])[A-Za-z0-9]+.{1,19}$/)) {
                if (!IdentityNumber.match(IdentityNumberRegEx)) {
                    $('#IdentityNumberError').text(
                        'Please enter valid Document Issued By Govt Authority Number(example:-Enter character or numeric min 2 , max 30)'
                    );
                    $('#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,
                        FnoSpace: true,
                    },
                    FatherName: {
                        required: true,
                        minlength: 2,
                        FnoSpace: true,
                    },
                    MotherName: {
                        required: true,
                        minlength: 2,
                        FnoSpace: true,
                    },
                    day: {
                        required: true,
                        validdays: true,
                    },
                    month: {
                        required: true,
                        validdays: true,
                    },
                    year: {
                        required: true,
                        validdays: true,
                    },

                    gender: {
                        required: true
                    },
                    // CastCategoryID: {
                    //     required: true
                    // },
                    // ExServiceMan: {
                    //     required: true
                    // },
                    // dateofjoining: {
                    //     required: function() {
                    //         return $('#ExServiceMan').val() != 0;
                    //     }
                    // },
                    // dateofleaving: {
                    //     required: function() {
                    //         return $('#ExServiceMan').val() != 0;
                    //     }
                    // },
                    // ExServicehowManyExperience: {
                    //     required: function() {
                    //         return $('#ExServiceMan').val() != 0;
                    //     },
                    //     minlength: 1,
                    //     maxlength: 3
                    // },
                    // IsGovernmentSevent: {
                    //     required: true
                    // },
                    // howManyExperience: {
                    //     required: function() {
                    //         return $('#IsGovernmentSevent').val() != 0;
                    //     },
                    //     minlength: 1,
                    //     maxlength: 3,
                    //     number: true
                    // },
                    email: {
                        required: true,
                        email: true,
                        EmailValidate: true,
                    },
                    confirmMail: {
                        required: true,
                        equalTo: "#email",

                    },
                    mobileCode: {
                        required: true
                    },
                    mobile: {
                        required: true,
                        maxlength: 10,
                        minlength: 10,
                        number: true
                    },
                    ConfirmMobileNumber: {
                        required: true,
                        equalTo: "#mobile"
                    },
                    alternateMobile: {
                        maxlength: 10,
                        minlength: 10,
                        number: true,
                        alternateMobileFormat: true,
                    },
                    IdentityID: {
                        required: true
                    },
                    IdentityNumber: {
                        required: true,
                        customIdentityValidation: {
                            depends: function(element) {
                                return $('#IdentityID').val() != 8;
                            }
                        },
                        customIdentityValidationAadhar: {
                            depends: function(element) {
                                return $('#IdentityID').val() == 8;
                            }
                        }
                    },
                    // IdentityNumber: {
                    //     required: true,
                    //     FnoSpace: true,
                    // },
                    PremisesName: {
                        required: true,
                        minlength: 2,
                        maxlength: 150,
                        FnoSpace: true,
                    },
                    SubLocality: {
                        minlength: 2,
                        maxlength: 100,
                        AddressFnoSpace: true,
                    },
                    Locality: {
                        required: true,
                        minlength: 2,
                        maxlength: 150,
                        FnoSpace: true,
                    },
                    CountryID: {
                        required: true
                    },
                    StateUTID: {
                        required: true
                    },
                    DistrictID: {
                        required: true
                    },
                    PinCode: {
                        required: true
                    },
                    PermanentPremisesName: {
                        required: true,
                        minlength: 2,
                        maxlength: 150,
                        FnoSpace: true,
                    },
                    PermanentSubLocality: {
                        minlength: 2,
                        maxlength: 100,
                        AddressFnoSpace: true,
                    },
                    PermanentLocality: {
                        required: true,
                        minlength: 2,
                        maxlength: 150,
                        FnoSpace: true,
                    },
                    PermanentCountryID: {
                        required: true
                    },
                    PermanentStateUTID: {
                        required: true
                    },
                    PermanentDistrictID: {
                        required: true
                    },
                    PermanentPinCode: {
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 8,
                        maxlength: 13,
                        passwordFormat: true
                    },
                    confirmPassword: {
                        equalTo: "#password",
                    },
                    SecurityQuestionID: {
                        required: true,
                    },
                    SecurityAnswer: {
                        required: true,
                        minlength: 2,
                        maxlength: 50,
                        FnoSpace: true,
                    },
                    // PhysicalDisability: {
                    //     required: true
                    // },
                    // DisabilyType: {
                    //     required: function() {
                    //         //return $('#PhysicalDisability').val() != 3;
                    //         return $('#PhysicalDisability').val() != 2;
                    //     }
                    // },
                    // DisabilityPercentage: {
                    //         required: function() {
                    //             return $('#PhysicalDisability').val() != 3;
                    //         },
                    //         number: true
                    // },
                    // NeedScribeR: {
                    //     required: function() {
                    //         //return $('#PhysicalDisability').val() != 3;
                    //         return $('#PhysicalDisability').val() != 2;
                    //     }
                    // },
                    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."
                    },
                    day: {
                        required: "Please fill required field."
                    },
                    month: {
                        required: "Please fill required field."
                    },
                    year: {
                        required: "Please fill required field."
                    },
                    gender: {
                        required: "Please fill required field."
                    },
                    // CastCategoryID: {
                    //     required: "Please fill required field."
                    // },
                    // ExServiceMan: {
                    //     required: "Please fill required field."
                    // },
                    // dateofjoining: {
                    //     required: "Please fill required field."
                    // },
                    // dateofleaving: {
                    //     required: "Please fill required field."
                    // },
                    // ExServicehowManyExperience: {
                    //     required: "Please fill required field."
                    // },
                    // IsGovernmentSevent: {
                    //     required: "Please fill required field."
                    // },
                    // howManyExperience: {
                    //     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."
                    },
                    ConfirmMobileNumber: {
                        required: "Confirm Mobile Number cannot be blank.",
                        equalTo: "Confirm Mobile Number should be same as Mobile Number."
                    },
                    IdentityID: {
                        required: "Identity Type cannot be blank."
                    },

                    IdentityNumber: {
                        required: "Identity Number cannot be blank.",
                        customIdentityValidation: function() {
                            var identityID = $('#IdentityID').val();
                            if (identityID == 1) {
                                // return "Please enter a valid PAN Number (example: BNZAA2318J)";
                                return "";
                            } else if (identityID != 8) {
                                return "";
                                // return "Please enter a valid Document Issued By Govt Authority Number (example: Enter character or numeric min 2, max 20)";
                            }
                        }
                    },

                    // IdentityNumber: {
                    //     required: "Identity 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 Min 8 and Max 13 characters.",
                        pattern: "Password is not valid Ex. (Nta@2023)."
                    },
                    confirmPassword: {
                        equalTo: "Confirm password should be same as 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."
                    },
                    // PhysicalDisability: {
                    //     required: "Please fill required field."
                    // },
                    // DisabilyType: {
                    //     required: "Please fill required field."
                    // },
                    // DisabilityPercentage: {
                    //     required: "Please fill required field."
                    // },
                    // NeedScribeR: {
                    //     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');
                    $(element).addClass('is-valid');
                }

            });
            if (form.valid() === true) {
                setPreview();
                // $('#registrationPageForm').submit();
            }


        });


        $("#email").on('blur mouseout', function() {
            if ($("#email").val() != "") {
                $('#email').next('div').remove();
                $.ajax({
                    type: 'POST',
                    url: "{{ route('registration.duplicate') }}",
                    data: {
                        email: $("#email").val(),
                    },
                    success: function(response) {
                        var Data = $.parseJSON(response);
              
                        $("div").remove(".text-remove"); // remove error div
                        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 text-remove">' + 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 text-remove"></div>');
                            $('#email').after('<div class="text-danger text-remove">' + 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();
                $.ajax({
                    type: 'POST',
                    url: "{{ route('registration.duplicateMobile') }}",
                    data: {
                        mobile: $("#mobile").val(),
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        var Data = $.parseJSON(response);
                        console.log(Data);
                        $("div").remove(".text-remove"); // remove error div
                        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 text-remove">' + Data.msg +
                                '</div>');
                            $('#mobile').focus();
                        } else {
                            $("#mobile").removeClass("is-invalid")
                        }
                    },
                    failure: function(response) {
                        console.log(response);
                    },
                    error: function(response) {
                        console.log(response);
                    },
                });
            }
        });
    });

    function updateStateOptions(countryID) {

        $('.overlay2').show();
        $.ajax({
            type: "POST",
            url: "{{ route('getState') }}",
            data: {
                ID: countryID,
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                if (countryID == '') {
                    $('.overlay2').hide();
                }
                $('.StateUTID').html('');
                $('.StateUTID').html('<option selected="" value="">Select </option>');
                var statesArray = JSON.parse(result);
                // Check if the parsed object is an array
                if (Array.isArray(statesArray)) {
                    $('.overlay2').hide();
                    var stateOptions = '';
                    $.each(statesArray, function(key, value) {
                        stateOptions += '<option value="' + value.ID + '">' + value.StateName + '</option>';
                    });
                    $('.StateUTID').html('<option selected value="">Select</option>' + stateOptions);
                } else {
                    console.error("Invalid response format. Expected an array.");
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    }

    function updateStatePermanent(countryID) {
        var stateId = $('#PermanentStateUTID_hide').val();
        if(countryID !=''){
        $('.overlay2').show();
        $.ajax({
            type: "POST",
            url: "{{ route('getState') }}",
            data: {
                ID: countryID,
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                if (countryID == '') {
                    $('.overlay2').hide();
                }
                $('.PermanentStateUTID').html('');
                $('.PermanentStateUTID').html('<option selected="" value="">Select </option>');
                var statesArray = JSON.parse(result);
                // Check if the parsed object is an array
                if (Array.isArray(statesArray)) {
                    $('.overlay2').hide();
                    var stateOptions = '';
                    $.each(statesArray, function(key, value) {
                        stateOptions += '<option value="' + value.ID + '" ' + (stateId == value.ID ? 'selected' : '') + '>' + value.StateName + '</option>';
                    });
                    $('.PermanentStateUTID').html('<option selected value="">Select</option>' +
                        stateOptions);
                } else {
                    console.error("Invalid response format. Expected an array.");
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
     }
    }


    //feb month day manage code
    function lastdayofmonth() {
        var Year = $("#year :selected").val();
        var Month = $("#month :selected").val();
        var date_time = new Date((new Date(Year, Month, 1)) - 1)
        //console.log(date_time);
        convert(date_time)

    }

    function convert(str) {
        var date = new Date(str);
        var mnth = ("0" + (date.getMonth() + 1)).slice(-2);
        var day = ("0" + date.getDate()).slice(-2);
        $("#day option").attr("disabled", false);

        if (mnth == 2) {
            day = 29;
        }
        if (($("#year :selected").val() > 0 && (0 == $("#year :selected").val() % 4) && mnth == 2)) {
            day = 29;
        } else if (($("#year :selected").val() > 0 && (0 != $("#year :selected").val() % 4) && mnth == 2)) {
            day = 28;
        }
        if (($("#day :selected").val() > day)) {
            $('#day').val('');
        }
        for (var i = 31; i > day; i--) {
            $("#day option:contains('" + i + "')").attr("disabled", "disabled");
        }
        return day;
    }
    //feb month day manage code end

    $(document).on('change', '#CountryID', function() {
        var val = $(this).val();

        //updateStateOptions(val);
        var ids = '';
        getDistrictByID(ids)
    });
    $(document).on('change', '#PermanentCountryID', function() {
        var val = $(this).val();
        // updateStatePermanent(val);
        var ids = '';
        getPermanentDistrictByID(ids)

    });
    $(document).on('change', '#PermanentStateUTID', function() {
        var val = $(this).val();
        getPermanentDistrictByID(val);

    });
    $(document).on('change', '#StateUTID', function() {
        var val = $(this).val();
        getDistrictByID(val);
    });

    function getDistrictByID(val) {
        $('.overlay2').show();
        $.ajax({
            type: "POST",
            url: "{{ route('getDistrict') }}",
            data: {
                ID: val,
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                if (val == '') {
                    $('.overlay2').hide();
                }
                $('.DistrictID').html('');
                $('.DistrictID').html('<option selected="" value="">Select </option>');
                // var CityArray = JSON.parse(result);
                var CityArray = result;
                // Check if the parsed object is an array
                $('.overlay2').hide();
                var CityOptions = '';
                $.each(CityArray, function(key, value) {
                    CityOptions += '<option value="' + value.ID + '">' + value.DistrictName +
                        '</option>';
                });
                $('.DistrictID').html('<option selected value="">Select</option>' + CityOptions);
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    }

    function getPermanentDistrictByID(val) {
        var cityId = $('#PermanentDistrictID_hide').val();
        $('.overlay2').show();
        $.ajax({
            type: "POST",
            url: "{{ route('getDistrict') }}",
            data: {
                ID: val,
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                if (val == '') {
                    $('.overlay2').hide();
                }
                $('.PermanentDistrictID').html('');
                $('.PermanentDistrictID').html('<option selected="" value="">Select </option>');
                // var CityArray = JSON.parse(result);
                var CityArray = result;
                // Check if the parsed object is an array
                $('.overlay2').hide();
                var CityOptions = '';
                $.each(CityArray, function(key, value) {
                    CityOptions += '<option value="' + value.ID + '" ' + (cityId == value.ID ?
                        'selected' : '') + '>' + value.DistrictName + '</option>';
                });
                $('.PermanentDistrictID').html('<option selected value="">Select</option>' + CityOptions);
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    }

    $(document).ready(function() {
        $('#is_permanent').click(function() {
            if ($.trim($('#PremisesName').val()) != '' && $.trim($('#StateUTID option:selected').val()) != '' && $.trim(
                    $('#StateUTID option:selected').val()) != '' && $.trim($('#DistrictID').val()) != '' && $.trim($(
                    '#PinCode').val()) != '') {
                if ($('#is_permanent').is(":checked")) {
                    $('#PermanentPremisesName').val($('#PremisesName').val());
                    $('#PermanentStateUTID').val($('#StateUTID option:selected').val());
                    $('#PermanentLocality').val($('#Locality').val());
                    $('#PermanentSubLocality').val($('#SubLocality').val());
                    var country = $('#CountryID option:selected').val();
                    $("#PermanentCountryID").val(country);
                    var state = $('#StateUTID option:selected').val();
                    var district = $('#DistrictID option:selected').val();
                    $("#PermanentDistrictID_hide").val(district);
                    $("#PermanentStateUTID_hide").val(state);
                    updateStatePermanent(country);
                    getPermanentDistrictByID(state)

                    // 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 ($("#PermanentPremisesName").hasClass("is-invalid")) {
                        $("#PermanentPremisesName").removeClass("is-invalid");
                        $("#PermanentPremisesName").parent().find('.invalid-feedback').css("display", "none");
                    }

                    if ($("#PermanentLocality").hasClass("is-invalid")) {
                        $("#PermanentLocality").removeClass("is-invalid");
                        $("#PermanentLocality").parent().find('.invalid-feedback').css("display", "none");
                    }

                    if ($("#PermanentCountryID").hasClass("is-invalid")) {
                        $("#PermanentCountryID").removeClass("is-invalid");
                        $("#PermanentCountryID").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('');
                    $('#PermanentStateUTID_hide').val('');
                    $('#PermanentDistrictID_hide').val('');
                    var selectElement = document.getElementById('PermanentCountryID');
                    selectElement.selectedIndex = 0;
                    var ids = '';
                    updateStatePermanent(ids);
                    getPermanentDistrictByID(ids)
                    $('#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);
            }
        });

        //keyUp or change 

        $(".uncheckedPerA").on("keyup change", function() {

            if ($('#is_permanent').is(":checked")) {

                $("#is_permanent").prop("checked", false);

                $('#PermanentPremisesName').val("");

                $("#PermanentPremisesName").parent().find('.invalid-feedback').text('');

                $("#PermanentPremisesName").parent().find('.invalid-feedback').css("display", "block");

                $('#PermanentSubLocality').val("");

                $("#PermanentSubLocality").parent().find('.invalid-feedback').text('');

                $("#PermanentSubLocality").parent().find('.invalid-feedback').css("display", "block");

                $('#PermanentLocality').val("");

                $("#PermanentLocality").parent().find('.invalid-feedback').text('');

                $("#PermanentLocality").parent().find('.invalid-feedback').css("display", "block");

                $('#PermanentPinCode').val("");

                $("#PermanentPinCode").parent().find('.invalid-feedback').text('');

                $("#PermanentPinCode").parent().find('.invalid-feedback').css("display", "block");

                $("#PermanentCountryID option:selected").removeAttr('selected');

                $("#PermanentCountryID").val("");

                $("#PermanentCountryID").parent().find('.invalid-feedback').text('');

                $("#PermanentCountryID").parent().find('.invalid-feedback').css("display", "block");

                $("#PermanentStateUTID option:selected").removeAttr('selected');

                $("#PermanentStateUTID").val("");

                $("#PermanentStateUTID").parent().find('.invalid-feedback').text('');

                $("#PermanentStateUTID").parent().find('.invalid-feedback').css("display", "block");

                $("#PermanentDistrictID option:selected").removeAttr('selected');

                $("#PermanentDistrictID").val("");

                let district_opt = "<option value=''>--Select--</option>";

                $('#PermanentDistrictID').html(district_opt);

                $("#PermanentDistrictID").parent().find('.invalid-feedback').text('');

                $("#PermanentDistrictID").parent().find('.invalid-feedback').css("display", "block");

                // $("#PermanentPinCode").val('');

                $('#PermanentPremisesName,#PermanentSubLocality,#PermanentLocality,#PermanentPinCode,#PermanentCountryID,#PermanentStateUTID,#PermanentDistrictID')

                    .prop('readonly', false);

                $('#PermanentPremisesName,#PermanentSubLocality,#PermanentLocality,#PermanentPinCode,#PermanentCountryID,#PermanentStateUTID,#PermanentDistrictID')

                    .css({

                        'pointer-events': '',

                        'background-color': '',

                        'opacity': ''

                    });
            }
        });


        //check unclick
        $(".uncheckedPersent").on("keyup change", function() {
            if ($('#is_permanent').is(":checked")) {
                $("#is_permanent").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());
        var monthPreview = ('0' + $("#month").val()).slice(-2);
        var DOBPreview = $("#day").val() + '-' + monthPreview + '-' + $("#year").val();

        $("#dateOfBirth").text(DOBPreview);
        $("#genderIDp").text($("#gender :selected").text().toUpperCase());
        // $("#dateofjoiningp").text($("#dateofjoining").val());
        // $("#dateofleavingp").text($("#dateofleaving").val());
        // $("#ExServicehowManyExperienceP").text($("#ExServicehowManyExperience").val());
        // $("#dateofjoiningp").text(strtotime('d-m-Y',$("#dateofjoining").val()));
        // $("#dateofleavingp").text(strtotime('d-m-Y',$("#dateofjoining").val()));
        // $("#ExServiceManp").text($("#ExServiceMan :selected").text().toUpperCase());
        // $("#IsGovernmentSeventp").text($("#IsGovernmentSevent :selected").text().toUpperCase());

        // $("#CastCategoryIDp").text($("#CastCategoryID :selected").text().toUpperCase());
        // $("#howManyExperiencep").text($("#howManyExperience").val().toUpperCase());

        // $("#physicalDisability").text($("#PhysicalDisability :selected").text().toUpperCase());
        //$("#disabilityPercentage").text($("#DisabilityPercentage").val().toUpperCase()); 
        // if ($("#PhysicalDisability").val()!=3) {
        // if ($("#PhysicalDisability").val() != 2) {
        //     $("#disabilyType").text($("#DisabilyType :selected").text().toUpperCase());
        //     $("#needScribeR").text($("#NeedScribeR :selected").text().toUpperCase());
        // } else {
        //     $("#disabilyType").text();
        //     $("#needScribeR").text();
        // }

        $("#emailAddress").text($("#email").val());
        $("#candidateMobile").text($("#mobileCode").val() + - +$("#mobile").val());
        if ($("#alternateMobile").val().length > 1) {
            $("#candidateAlternateMobile").text($("#alternateCode").val() + - +$("#alternateMobile").val());
        } else {
            $("#candidateAlternateMobile").text('NA');
        }
        $("#identityType").text($("#IdentityID :selected").text());
        // $("#confEmailAddress").text($("#confirmMail").val());
        $("#identityNumber").text($("#IdentityNumber").val());
        //Presenet address
        $("#premisesName").text($("#PremisesName").val().toUpperCase());
        $("#sublocality").text($("#SubLocality").val() !='' ? $("#SubLocality").val().toUpperCase():'NA');
        $("#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() !='' ? $("#PermanentSubLocality").val().toUpperCase() :'NA');
        $("#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) {

            // if (confirm("Do you wish to submit Registration Form?") == true) {
            $('#registrationPageForm').submit();
            // } else {

            // }
        }
    });

    $('#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  option:selected').val();
    if (StateUTID != '') {
        getDistrictByID(StateUTID);
    }

    var PermanentStateUTID = $('#PermanentStateUTID option:selected').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

    $(document).ready(function() {

        /* Set preview */
        // var ExServiceMan = $('#ExServiceMan').val();
        // if (ExServiceMan == 1) {
        //     $("#serviceDate").show();
        //     $("#serviceExperience").show();
        // } else {
        //     $("#serviceDate").hide();
        //     $("#serviceExperience").hide();
        // }
        // /* Pwd */
        // $("#typeDisability").hide();
        // $("#bulletinScribe").hide();
        // $("#PercentageDisability").hide();
        // $(".PercentageOfDisability").hide();
        // var PhysicalDisability = $("#PhysicalDisability :selected").val();
        // if (PhysicalDisability != 2) {
        //     $("#typeDisability").show();
        //     $("#bulletinScribe").show();
        //     //$("#PercentageDisability").show();
        //     $(".PercentageOfDisability").show();
        // } else {
        //     $("#typeDisability").hide();
        //     //$("#PercentageDisability").hide();
        //     $("#bulletinScribe").hide();
        //     $("#DisabilyType").val("");
        //     $("#NeedScribeR").val("");
        //     // $("#DisabilityPercentage").val("");
        //     $(".PercentageOfDisability").hide();
        // }

        // jQuery("#PhysicalDisability").on("change", function() {
        //     var PhysicalDisability = $("#PhysicalDisability :selected").val();

        //     if (PhysicalDisability != 2) {
        //         $("#typeDisability").show();
        //         $("#bulletinScribe").show();
        //         // $("#PercentageDisability").show();
        //         $(".PercentageOfDisability").show();
        //     } else {
        //         $("#typeDisability").hide();
        //         $("#bulletinScribe").hide();
        //         // $("#PercentageDisability").hide();
        //         $("#NeedScribeR").prop("required", false);
        //         $("#DisabilyType").prop("required", false);
        //         // $("#DisabilityPercentage").prop("required", false);
        //         $("#DisabilyType").val("");
        //         $("#NeedScribeR").val("");
        //         // $("#DisabilityPercentage").val("");
        //         $(".PercentageOfDisability").hide();
        //     }

        // });

        // jQuery("#DisabilityPercentage").on("blur mouseout focusout", function() {
        //     var PhysicalDisability = $("#PhysicalDisability :selected").val();
        //     var disabilityPercentVal = $(this).val();
        //     if ((disabilityPercentVal.length == 3) && (PhysicalDisability == 1) && (
        //             disabilityPercentVal > 100)) {
        //         $("#DisabilityPercentage").val("");
        //     } else if ((disabilityPercentVal.length >= 1) && (PhysicalDisability == 1) && (
        //             disabilityPercentVal < 40)) {
        //         $("#DisabilityPercentage").val("");
        //     } else if (PhysicalDisability == 2 && (disabilityPercentVal == 0 || disabilityPercentVal >
        //             39)) {
        //         $("#DisabilityPercentage").val("");
        //     }
        // });

        /* Pwd */


        // $('#joiningleaving').hide();
        // $('#howmanyexp').hide();


        // $('body').on('focus', ".date", function () {
        //         $(this).datepicker({
        //             format: 'yyyy-mm-dd',
        //             autoclose: true,
        //             todayHighlight: true,
        //             endDate: "today"
        //         });
        //     });

        //Identity validation
        $.validator.addMethod("customIdentityValidation", function(value, element) {
            var identityID = $('#IdentityID').val();
            var identityNumber = value.toUpperCase().trim();
            //alert(identityID);

            if (identityID == 1) {
                return identityNumber.match(/^[A-Z]{5}\d{4}[A-Z]{1}$/) && identityNumber.length === 10;
            } else if (identityID != '' && identityID !== 8) {
                var IdentityNumberRegExOther = /^[a-zA-Z0-9][A-Za-z0-9]{1,20}$/;
                return identityNumber.match(IdentityNumberRegExOther);
                //return identityNumber.match(/^(?=.*[a-zA-Z0-9])(?=.*[0-9])[A-Za-z0-9]+.{1,20}$/);
            }
            return false; // Default to false if conditions are not met
            // }, "Please enter a valid identity number.");
        }, " ");

        $.validator.addMethod("customIdentityValidationAadhar", function(Aadharvalue, Aadharelement) {

            var identityIDAadhar = $('#IdentityID').val();
            var identityNumberAadhar = Aadharvalue.toUpperCase().trim();
            var IdentityNumberAadhaar = /^[a-zA-Z0-9 ]{14}$/;
            if (identityIDAadhar == 8) {
                return identityNumberAadhar.match(IdentityNumberAadhaar) && identityNumberAadhar.length === 14;
            }
            return false; // Default to false if conditions are not met
            // }, "Please enter valid Aadhaar Number (example:- Enter Aadhaar number 12 digit.)");
        }, " ");

        //Identity validation close

        // $(document).on('change', '#ExServiceMan', function() {

        //     var ExServiceMan = $('#ExServiceMan').val();
        //     if (ExServiceMan == 1) {
        //         $('#joiningleaving').show();
        //         $("#serviceDate").show();
        //         $("#serviceExperience").show();
        //     } else {
        //         $("#serviceDate").hide();
        //         $("#serviceExperience").hide();
        //         $('#joiningleaving').hide();
        //         $('#dateofjoining').val('');
        //         $('#dateofleaving').val('');
        //         $('#ExServicehowManyExperience').val('');
        //     }

        // });

        // $(document).on('change', '#IsGovernmentSevent', function() {

        //     var IsGovernmentSevent = $('#IsGovernmentSevent').val();
        //     if (IsGovernmentSevent != 0) {
        //         $('#howmanyexp').show();
        //         $('.Experiencep').show();
        //     } else {
        //         $('#howmanyexp').hide();
        //         $('.Experiencep').hide();
        //         $('#howManyExperience').val('');

        //     }

        // });


        //Age calculation

        $('.dobChange').on('change', function() {
            let Dayss = $('#day').val();
            let Monthss = $('#month').val();
            let Yearss = $('#year').val();

            let CandidateDOB = Yearss + '-' + Monthss + '-' + Dayss;

            if (Dayss && Monthss && Yearss) {

                var CalculateDate = null;
                var a = moment(CalculateDate, 'Y-M-D');
                var b = moment(CandidateDOB, 'Y-M-D');

                var years = a.diff(b, 'year');
                b.add(years, 'years');
                var months = a.diff(b, 'months');
                b.add(months, 'months');
                var days = a.diff(b, 'days');
                $('.Age').text(years + ' years ' + months + ' months ' + days + ' days ' + '. Age as on cut-off date  ' + '');

            }
        });

    });
</script>

<script>
    jQuery(document).ready(function() {
        $("#IdentityID").on('change', function() {
            if ($("#IdentityID").val() != '') {
                $("#IdentityNumber").val('');
            } else {
                $("#IdentityNumber").val('');
            }
        });

    });
    jQuery(function($) { // DOM ready and $ alias secured
        let aadhaar = "";
        let aadhaarStack = [];
        let maskStack = [];
        let flag = 0;

        $('#IdentityNumber').on('input', function(e) {

            var Identity_value = $("#IdentityID").val();

            let key = e.which || this.value.substr(-1).charCodeAt(0);

            if (Identity_value == 8) {

                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(key);
                            }
                        } else {
                            aadhaarStack.push(key);
                            if (aadhaarStack.filter(i => i !== " ").length > 8) {
                                maskStack.push(key);
                            } else {
                                maskStack.push(key);
                            }
                        }
                    }
                }

                updateUi();
            }

        });

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


    $(document).ready(function() {

        // var CURL = {!!json_encode(url('/')) !!};
        // var currentYear = new Date().getFullYear();
        // var currentDate = new Date();
        // var dateFormat = "dd-mm-yy";
        // from = $("#dateofjoining")
        //     .datepicker({

        //         changeMonth: true,
        //         changeYear: true,
        //         yearRange: '1968:' + currentYear,
        //         numberOfMonths: 1,
        //         showOn: "button",
        //         buttonImage: CURL + "/public/assets/images/calander.png",
        //         buttonImageOnly: true,
        //         buttonText: "Select date",
        //         dateFormat: 'dd-mm-yy',
        //         maxDate: currentDate,
        //         onSelect: function(selectedDate, instance) {
        //             var id = $(this).attr("id");
        //             if (id === 'dateofjoining') {
        //                 $('#dateofleaving').datepicker('option', 'minDate', selectedDate);
        //                 var monthsDifference = calculateMonthDifference();
        //                 $('#ExServicehowManyExperience').val(monthsDifference);
        //             } else if (id === 'dateofleaving') {
        //                 $('#dateofjoining').datepicker('option', 'maxDate', selectedDate);
        //                 var monthsDifference = calculateMonthDifference();
        //                 $('#ExServicehowManyExperience').val(monthsDifference);
        //             }

        //         }
        //     });
        // $("#dateofleaving")
        //     .datepicker({
        //         //defaultDate: "+1w",
        //         changeMonth: true,
        //         changeYear: true,
        //         yearRange: '1968:' + currentYear,
        //         numberOfMonths: 1,
        //         showOn: "button",
        //         buttonImage: CURL + "/public/assets/images/calander.png",
        //         buttonImageOnly: true,
        //         buttonText: "Select date",
        //         dateFormat: 'dd-mm-yy',
        //         maxDate: currentDate,
        //         onSelect: function(selectedDate, instance) {
        //             var id = $(this).attr("id");

        //             if (id === 'dateofjoining') {
        //                 $('#dateofleaving').datepicker('option', 'minDate', selectedDate);
        //                 var monthsDifference = calculateMonthDifference();
        //                 $('#ExServicehowManyExperience').val(monthsDifference);
        //             } else if (id === 'dateofleaving') {
        //                 $('#dateofjoining').datepicker('option', 'maxDate', selectedDate);
        //                 var monthsDifference = calculateMonthDifference();
        //                 $('#ExServicehowManyExperience').val(monthsDifference);
        //             }

        //         }

        //     });
        // $('#dateofjoining').click(function() {
        //     $('#dateofjoining').datepicker("show");
        // });
        // $('#dateofleaving').click(function() {
        //     $('#dateofleaving').datepicker("show");
        // });


        // function calculateMonthDifference() {
        //     var getDateofjoining = $("#dateofjoining").datepicker('getDate');
        //     var getDateofleaving = $("#dateofleaving").datepicker('getDate');

        //     if (getDateofjoining && getDateofleaving) {
        //         var monthDiff = (getDateofleaving.getFullYear() - getDateofjoining.getFullYear()) * 12;
        //         monthDiff += getDateofleaving.getMonth() - getDateofjoining.getMonth();

        //         // Handle the case where the day of the month might be smaller in the leaving date
        //         if (getDateofleaving.getDate() < getDateofjoining.getDate()) {
        //             monthDiff--;
        //         }

        //         return monthDiff;
        //     }

        //     return 0; // Return 0 if either date is not selected
        // }


        $("#confirmMail").on('keyup', function() {
            var email = $("#email").val();
            var confirmEmail = $("#confirmMail").val();
            if (confirmEmail.length > 5) {
                if (email != confirmEmail) {
                    $('#confirmMailError').text('Confirm Email Address should be same as Email Address');
                    $('#confirmMail').addClass('is-invalid');
                } else {
                    $('#confirmMail').removeClass('is-invalid');
                    $('#confirmMailError').text('');

                }
            }
        });

        $("#ConfirmMobileNumber").on('keyup', function() {
            var mobile = $("#mobile").val();
            var ConfirmMobileNumber = $("#ConfirmMobileNumber").val();
            if (ConfirmMobileNumber.length > 9) {
                if (mobile != ConfirmMobileNumber) {
                    $('#ConfirmMobileNumberError').text('Confirm Mobile Number should be same as Mobile Number');
                    $('#ConfirmMobileNumber').addClass('is-invalid');
                } else {
                    $('#ConfirmMobileNumber').removeClass('is-invalid');
                    $('#ConfirmMobileNumberError').text('');
                }
            }

        });

        $("#confirmPassword").on('keyup', function() {
            var password = $("#password").val();
            var confirmPassword = $("#confirmPassword").val();
            if (confirmPassword.length > 5) {
                if (password != confirmPassword) {
                    $('#confirmPasswordError').text('Confirm Password should be same as Password');
                    $('#confirmPassword').addClass('is-invalid');
                } else {
                    $('#confirmPassword').removeClass('is-invalid');
                    $('#confirmPasswordError').text('');
                }
            }

        });


    });
</script>


@endpush