@extends('layouts.login')
@section('content')
<style>
.login-5 .form-section {
    min-height: 0vh !important;

}

.top-heading {

    color: #007bff;
    text-align: left;
    font-size: 18px;
}

.instru {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.instru li {
    margin-bottom: 7px;
}

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

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

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

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

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

tr .tbl-2 {
    width: 50%;
    padding: 5px 10px;
}

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

.ugclink {
    color: #0d6efd !important;
}

.step-2 {
    list-style: none;
    font-size: 15px;
    letter-spacing: 0.5px;

}

.step-2 li {
    margin-bottom: 7px;
}

.check-section {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.step6 {

    padding-left: 23px;
}

.btn-primary {
    background-color: #0062cc !important;
    color: #ffffff;
    text-align: center;
}

.btn-primary a {
    color: #ffffff !important;
}

.card-header {
    padding: 7px 7px 0px !important;
    margin-bottom: 0px;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.card {
    background-color: #14274e !important;
    box-shadow: 0px 0px 26px #163d8d47;
    border: none;
    margin-bottom: 20px;
}

h3 a {
    color: #ffffff !important;
    font-size: 27px;
}


/*.navbar .navbar-nav .nav-item .nav-link {
        padding: 0 0.5em;
    }*/

/* .navbar .navbar-nav .nav-item:not(:last-child) .nav-link {
    border-right: 2px solid #ffffff;
  } */
.field-instruction-declaration {
    float: left;
}

.invalid-feedback {}

.paragrap-align {
    text-align: justify;
}
</style>

<div class="login-5">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 form-section">
                <div class="form-inner1">
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="col-lg-4 form-section">
                <div class="form-inner1">
                    <h3 style="text-align:center;">Navodaya Vidyalaya Samiti Recruitment - 2024 (Non-Teaching)</h3>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="col-lg-4 form-section">
                <div class="form-inner1">
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card card-primary">
                    <nav class="navbar navbar-expand-lg navbar-light lined" style="background-color: #14274e;">
                        <div class="collapse navbar-collapse" id="navbarToggler11">
                            <ul class="navbar-nav  ml-auto">
                                <li class="nav-item">
                                    <!--a class="nav-link" href="#" style="color: #ffff;font-size: 20px;">Home</a-->
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>

            <div class="col-lg-12">
                <h3 class="top-heading">Login and Identification for online submission of Application Form</h3>
                <hr>
            </div>
            <div class="col-lg-12" style="display: flex; justify-content: center">
                <form id="login-identification" autocomplete="off" action=""
                    method="post">
                    
                    @csrf
                    <div class="col-sm-12">
                        <label>Please Select:</label>
                        <br />
                        <h3 class="top-heading">Dear Candidate, kindly use your Aadhaar/Identity proof<span style="color:red;"> (Don't use your parents/relative identity) </span>to create login as your Aadhaar/Identity proof will be used for verification/authentication purpose at different stages of exam. Using anyone's else Aadhaar/Identity card may result in cancellation of your candidature.<br> (प्रिय अभ्यर्थी  लॉगिन बनाने के लिए अपने आधार/पहचान प्रमाण<span style="color:red;"> (अपने माता-पिता/रिश्तेदार की पहचान का उपयोग न करें) </span> का उपयोग करें क्योंकि आपके आधार/पहचान प्रमाण का उपयोग परीक्षा के विभिन्न चरणों में सत्यापन/प्रमाणीकरण उद्देश्य के लिए किया जाएगा। किसी अन्य के आधार/पहचान पत्र का उपयोग करने पर आपकी अभ्यर्थिता रद्द हो सकती है। )</h3>
                        <br />
                        <label><input type="radio" class="identificationField digilocker" name="identificationField"
                                value="7">
                            I have Aadhaar Number and wish to create my Login using
                            Aadhaar Number. / मेरे पास आधार आधार नंबर है और मैं
                            अपने
                            आधार आधार नंबर का उपयोग करके अपना लॉगिन बनाना चाहता/चाहती हूँ।</label><br />
                        <label><input type="radio" class="identificationField digilocker" name="identificationField"
                                value="1">
                            I have a Digilocker Account. I wish to login and identify through Digilocker. /
                            मेरे पास डिजिलॉकर खाता है। मैं डिजिलॉकर के माध्यम से लॉगिन करके अपनी पहचान प्रमाणित करना
                            चाहता/चाहती हूँ।</label><br />
                        <label><input type="radio" class="identificationField digilocker" name="identificationField"
                                value="2">
                            I do not have a Digilocker Account. I wish to create my Digilocker Account and
                            login and identify through Digilocker. / मेरे पास डिजीलॉकर खाता नहीं है। मैं अपना डिजीलॉकर
                            खाता
                            बनाना चाहता/चाहती हूँ और डिजीलॉकर के माध्यम से लॉगिन करके और अपनी पहचान प्रमाणित करना
                            चाहता/चाहती हूँ।</label><br />
                        <label><input type="radio" class="identificationField digilocker" name="identificationField"
                                value="3">
                            I have Academic Bank of Credits ID (ABC ID). I wish to login and identify through
                            ABC ID. / मेरे पास एक एकेडेमिक बैंक ऑफ क्रेडिट्स आईडी (ABC आईडी) है। मैं ABC आईडी के माध्यम
                            से
                            लॉगिन करके और अपनी पहचान प्रमाणित करना चाहता/चाहती हूँ।</label><br />
                        <label><input type="radio" class="identificationField digilocker" name="identificationField"
                                value="4">
                            I do not have Academic Bank of Credits ID (ABC ID). I wish to create my ABC ID and
                            login and identify through ABC ID. / मेरे पास एकेडेमिक बैंक ऑफ क्रेडिट्स आईडी (ABC आईडी)
                            नहीं
                            है। मैं अपना ABC आईडी बनाना चाहता/चाहती हूँ और ABC आईडी के माध्यम से लॉगिन करके और अपनी
                            पहचान
                            प्रमाणित करना चाहता/चाहती हूँ।</label><br />
                        <label><input type="radio" class="identificationField digilocker" name="identificationField"
                                value="5">
                            I have an Indian Passport and wish to create my Login using Passport. / मेरे पास
                            एक भारतीय पासपोर्ट है और मैं अपने पासपोर्ट का उपयोग करके अपना लॉगिन बनाना चाहता/चाहती
                            हूँ।</label><br />
                        <!--label><input type="radio" class="identificationField digilocker" name="identificationField"
                                value="6">
                            I have a PAN Card and wish to create my Login using PAN. / मेरे पास पैन कार्ड है
                            और मैं अपने पैन कार्ड का उपयोग करके अपना लॉगिन बनाना चाहता/चाहती हूँ।</label-->
                        <label><input type="radio" class="identificationField digilocker" name="identificationField"
                                value="8">
                            I have a Non-Indian Passport and wish to create my Login using Non-Indian
                            Passport. / मेरे पास एक गैर-भारतीय पासपोर्ट है और मैं अपने गैर-भारतीय पासपोर्ट का उपयोग करके
                            अपना लॉगिन बनाना चाहता/चाहती हूँ।</label><br /><br />
                    </div>
                    <div class="col-sm-4" id="identificationInputField" style="display: none;">
                        <div id='identificationInputField5' class="form-group" style="display: none;">
                            <label>Indian Passport Number</label>
                            <input type="text" name="PassportNumber" class="form-control form-control-sm"
                                id="PassportNumber" autocomplete="off" placeholder="Enter Indian Passport Number"
                                minlength="8" maxlength="14"
                                onkeypress="return blockSpecialChar(event,'characterNumericAndAllowTwopecials'),blockSpecialChar(event,'alphanumeric')">
                        </div>
                        <div id='identificationInputField6' class="form-group" style="display: none;">
                            <label>Pan Card Number</label>
                            <input type="text" name="PanCard" class="form-control form-control-sm" id="PanCard"
                                autocomplete="off" placeholder="Enter Pan Card Number" minlength="10" maxlength="10"
                                onkeypress="return blockSpecialChar(event,'characterNumericAndAllowTwopecials')">
                                <div class="text-danger" id="IdentityNumberError"></div>
                        </div>
                        <div id='identificationInputField7' class="form-group" style="display: none;">
                            <label>Aadhaar Number / आधार नंबर</label>
                            <input type="text" name="AadharEnrolmentNumber" class="form-control form-control-sm"
                                id="AadharEnrolmentNumber" autocomplete="off"
                                placeholder="Enter Aadhaar Number / आधार नंबर" minlength="12"
                                maxlength="12"
                                onkeypress="return blockSpecialChar(event,'characterNumericAndAllowTwopecials'),blockSpecialChar(event,'numeric')">
                        </div>
                        <!--  -->
                        <div class="row" id="divMessage" style="display:none;">
                            <span id="spnResult" style="color: green; font-weight: bold; font-size: 18px;"></span>
                        </div>
                        <span id="btnGenerateOTP" class="btn btn-sm btn-warning AadhaarNumberhide" onclick="onGenerateOTP()">Generate OTP</span>
                        <div class="row" style="padding-top:15px;display:none;" id="otpdiv">
                            <div class="col-md-10 col-sm-10 col-xs-10" style="text-align:left;">
                                <input type="text" name="Otp" autofocus="false", placeholder = 'Enter OTP', class = 'form-control form-control-sm', id = 'Otp',  autocomplete = "off", maxlength='6' onkeypress= "return blockSpecialChar(event,'numeric')">
                                <label class="control-label" style="text-align:left;margin-left:5px;font-size:14px;font-weight:bold;padding-top:10px">Please validate the OTP within 10 minutes of receiving it</label>
                            </div>
                            <br>
                            <div class="col-md-10 col-sm-10 col-xs-10" style="text-align:left;">
                                <span id="btnValidateOTP" class="btn btn-sm btn-warning" disabled onclick="onValidateOtp()">Validate OTP</span>
                            </div>
                        </div>
                        <!--  -->
                        <div id='identificationInputField8' class="form-group" style="display: none;">
                            <label>Non-Indian Passport Number</label>
                            <input type="text" name="OutsideIndiaPassportNumber" class="form-control form-control-sm"
                                id="OutsideIndiaPassportNumber" autocomplete="off" minlength="2" maxlength="20"
                                placeholder="Enter Non-Indian Passport Number"
                                onkeypress="return blockSpecialChar(event,'characterNumericAndAllowTwopecials'),blockSpecialChar(event,'alphanumeric')">
                        </div>
                    </div>
                    <br />
                    <br />
            </div>
            <div class="col text-center" style="display: flex; justify-content: center">
                <div id="digilocker_signup" style="display: none;">
                    <a style="text-decoration: none;"
                        href="