@{
    ViewBag.Title = "Create Account";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<section class="section-py">
    <div class="container formContainer">
        <div class="backlink">
            <a href="#!" onclick="@("window.location.href='" + @Url.Action("index", "login") + "'");" class="back-arrow-button" title="Go back to Sign in">Go back to Sign in</a>
        </div>
        <ul class="nav form-head-nav">
            <li class="nav-item active">
                <a class="nav-link" href="">
                    Create an Account
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0)">
                    Payment
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0)">
                    Complete Application
                </a>
            </li>
        </ul>
        <div class="row justify-content-end">
            <div class="col-md-12">
                <div class="form_rounded_box createBox bg-white activeBox">
                    <div class="form-head">
                        <h1>Create an Account</h1>
                        <p>The information below will be provided to the admissions offices at the programs to which you apply. <br />Please provide complete and accurate information.</p>
                    </div>
                    <div class="form_title createAccoutnHead">
                        <h2>Name and contact details</h2>
                        <p><span class="redStar">*</span>Indicates required field</p>
                    </div>

                    <div class="row">
                        <div class="col-md-12 lrSpace">
                            <div class="form-group">
                                <label for="state"><span class="redStar">*</span>Applying Year</label>
                                <div class="form-select">
                                    <select class="form-control" aria-label="form-select-sm example" id="SessionYear">
                                        <option value="2024">2024</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 lrSpace">
                            <div class="form-group">
                                <label for="txtfirstname"><span class="redStar">*</span>First Name (Enter Name as per 10th Marksheet)</label>
                                <input type="text" name="" id="txtfirstname" value="" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace">
                            <div class="form-group">
                                <label for="middlename">Middle Name</label>
                                <input type="text" name="" id="middlename" value="" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace">
                            <div class="form-group">
                                <label for="lastname"><span class="redStar">*</span>Last Name</label>
                                <input type="text" name="" id="lastname" value="" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace">
                            <div class="form-group">
                                <label for="datepicker"><span class="redStar">*</span>Date Of Birth</label>
                                <div class="date">
                                    <input type="date" class="form-control" value="" id="dob" min="1970-01-01" max="2008-12-31" onkeydown="return false" />
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace">
                            <div class="form-group">
                                <label for="phone"><span class="redStar">*</span>Mobile Number</label>
                                <input type="text" name="" id="phone" value="" class="form-control" onkeypress="return isNumberKey(event)" maxlength="10">
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace">
                            <div class="form-group">
                                <label for="email"><span class="redStar">*</span>Email ID</label>
                                <input type="text" name="" id="email" value="" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace">
                            <div class="form-group">
                                <label for="nationality"><span class="redStar">*</span>Nationality</label>
                                <div class="">
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain">
                                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="rd_ntn_ind" value="indian" checked="">
                                        <label class="form-check-label" for="rd_ntn_ind">Indian</label>
                                    </div>
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain">
                                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="rd_ntn_nri" value="nri">
                                        <label class="form-check-label" for="rd_ntn_nri">NRI/International Students</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @*Indian section*@

                        <div class="col-md-6 lrSpace ind_field hidden">
                            <div class="form-group">
                                <label><span class="redStar">*</span>Country</label>
                                <input type="text" value="India" class="form-control" disabled>
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace ind_field hidden">
                            <div class="form-group">
                                <label for="state"><span class="redStar">*</span>State</label>
                                <div class="form-select">
                                    <select class="form-control" aria-label="form-select-sm example" id="state">
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace ind_field hidden">
                            <div class="form-group">
                                <label for="city"><span class="redStar">*</span>City</label>
                                <div class="form-select">
                                    <select class="form-control" aria-label="form-select-sm example" id="city">
                                        <option selected>Select City</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        @*NRI*@

                        <div class="col-md-6 lrSpace nri_field hidden">
                            <div class="form-group">
                                <label for="email"><span class="redStar">*</span>Country</label>
                                <div class="form-select">
                                    <select class="form-control" aria-label="form-select-sm example" id="country">
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 lrSpace nri_field hidden">
                            <div class="form-group">
                                <label for="nricity"><span class="redStar">*</span>City</label>
                                <input type="text" name="" id="nricity" value="" class="form-control">
                            </div>
                        </div>

                    </div>
                </div>


                <div class="form_rounded_box createBox bg-white">

                    <div class="form_title lrSpace">
                        <h2>What would you like to study at UPES?</h2>

                    </div>
                    <div class="innerDetails activeBox" style="display: block;">
                        <div class="row">
                            <div class="col-md-8 radioDetails">
                                <label><span class="redStar">*</span>Select program</label>
                                <div class="radioWrap">
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain">
                                        <input class="form-check-input" type="radio" name="programRadioOptions" id="radug" value="UG" checked="">
                                        <label class="form-check-label" for="radug">Undergraduate</label>
                                    </div>
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain">
                                        <input class="form-check-input" type="radio" name="programRadioOptions" id="radpg" value="PG">
                                        <label class="form-check-label" for="radpg">Postgraduate</label>
                                    </div>
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain">
                                        <input class="form-check-input" type="radio" name="programRadioOptions" id="inlineRadio3" value="PHD">
                                        <label class="form-check-label" for="inlineRadio3">PHD</label>
                                    </div>
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain">
                                        <input class="form-check-input" type="radio" name="programRadioOptions" id="radGlobalProgram" value="GlobalProgram">
                                        <label class="form-check-label" for="radGlobalProgram">Global Pathway Program</label>
                                    </div>
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain">
                                        <input class="form-check-input" type="radio" name="programRadioOptions" id="inlineRadio5" value="Integrated">
                                        <label class="form-check-label" for="inlineRadio5">Integrated</label>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-8">
                                <label><span class="redStar">*</span>Select discipline</label>
                                <div class="form-select" style="margin-bottom: 20px;">
                                    <select class="form-control" aria-label="form-select-sm example" id="Disciplinetype">
                                        <option selected>Select Discipline</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-8" id="divcourse" style="display:none">
                                <label><span class="redStar">*</span>Select course</label>
                                <div class="form-select" style="margin-bottom: 20px;">
                                    <select class="form-control" aria-label="form-select-sm example" id="cource">
                                        <option selected>Select Course</option>
                                    </select>
                                </div>
                            </div>
                       
                            <div class="col-md-8" id="divprogram" style="display:none">
                                <div class="form-group">
                                    <label for="middle_name"><span class="redStar">*</span>Program interested to pursue (select upto 2)</label>

                                    <div id="divbindheckbox" style="border: 1px solid #A8A8A8; border-radius: 10px; padding: 10px; margin-bottom: 20px; overflow-y: scroll; height: 250px;">

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8" id="divsubspecialisations" style="display:none">
                                <div class="form-group">
                                    <label for="middle_name">Major Specialisation (NO ACTION REQUIRED)</label>

                                    <div style="border: 1px solid #A8A8A8; border-radius: 10px; padding: 5px 5px 5px; margin-bottom: 20px; background-color: #E5E4E2;" id="divbindheSpecialckbox">
                                      
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-8" id="divMinors" style="display:none">
                                <div class="form-group">
                                    <label for="middle_name">Minor Specialisation (NO ACTION REQUIRED)</label>

                                    <div style="border: 1px solid #A8A8A8; border-radius: 10px; padding: 5px 5px 5px; margin-bottom: 20px; background-color: #E5E4E2;" id="divbindhecheckboxMinors">
                                      
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-8" id="divindianexam" style="display:none">
                                <label><span class="redStar">*</span>Mode of application</label>
                                <div class="radioWrap">
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain examradiodiv">
                                        <input class="form-check-input" type="radio" name="radapplicationmade" id="upes" value="exam" checked="">
                                        <label class="form-check-label" for="upes">UPES Entrance Exam</label>
                                    </div>
                                    <div class="form-group form-check form-check-inline radioBtn2 radiomain nonexamradiodiv">
                                        <input class="form-check-input" type="radio" name="radapplicationmade" id="nonexam" value="non_exam">
                                        <label class="form-check-label" for="nonexam">Non Exam</label>
                                    </div>
                                 
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

                <div class="form_rounded_box createBox bg-white">

                    <div class="form_title lrSpace">
                        <h2>How did you know about UPES?</h2>

                    </div>
                    <div class="innerDetails activeBox" style="display: block;">
                        <div class="row">


                            <div class="col-md-8">
                                <label><span class="redStar">*</span>Source</label>
                                <div class="form-select" style="margin-bottom: 20px;">
                                    <select class="form-control" aria-label="form-select-sm example" id="source">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-8 coaching-center-div">
                                <label><span class="redStar">*</span>Coaching Centre</label>
                                <div class="form-select" style="margin-bottom: 20px;">
                                    <select class="form-control" aria-label="form-select-sm example" id="coachingcentre">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-8 other-coaching-div">
                                <div class="form-group">
                                    <label for="txtfirstname"><span class="redStar">*</span>Coaching Institute's Name</label>
                                    <input type="text" name="" id="othercoachingcentre" value="" class="form-control">
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-md-12 lrSpace">
                        <div class="form-group" id="divotp">

                            <button type="button" class="btn btn-primary btn-lg" id="btnotp" onclick="getcreateaccountotp();">Send OTP</button>

                            <div id="innerotp" style="display:none">
                                @*<input type="text" class="form-control FormStyle" placeholder="OTP" id="otp" value="@Convert.ToString(Session["userotp"])" />*@
                                <input type="text" class="form-control FormStyle" placeholder="OTP" id="otp" value="" />
                                <p id="responseotp"></p>
                                <label id="otpmsg" style="color:green"></label>
                                <button type="button" class="btn btn-primary BtnStyle ForOTP" onclick="verifyOTP();">verify</button>
                                @*<button type="button" class="btn btn-primary BtnStyle ForOTP" id="resendotp" onclick="resendotp();">Resend OTP</button>*@
                            </div>

                        </div>
                        <span class="otpvalidation" style="color:red; margin-bottom:20px;display:none;height:25px;" id="otpcheckp">Please verify your mobile number with OTP</span>
                        <input type="hidden" id="hdncreateaccountotp" value="" />
                    </div>
                    <div class="col-md-12 lrSpace">
                        <div class="form-group form-check customCheck chkBoxTermsAcceptanceDiv">
                            <input class="form-check-input" type="checkbox" value="" id="ChkBoxTermsAcceptance">
                            <label class="form-check-label" for="ChkBoxTermsAcceptance">
                                I agree to the Terms of Service and to receive calls and/or texts at any phone number I have provided or may provide in the future, from any entity associated with my application process, including but not limited to my designated schools and programs.
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 createAccountBtn">
                        <a href="#!" class="btn btn-primary createBtn" onclick="CreateAccount()">Create an account</a>
                    </div>
                </div>
            </div>
        </div>

    </div>



    <div class="modal fade" id="CourseEligibiityPopupImage" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"  data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" style="max-width:50%;">
            <div class="modal-content">
                <div class="modal-header">
                    @*<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>*@
                    @*<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>*@
                </div>
                <div class="modal-body">
                    <center> <h2><strong>ELIGIBILITY CRITERIA</strong> </h2></center> <br /><div id="courseeligibility"></div>
                    <div class="col-md-12 mt-5 ps-4">
                        <div class="form-group form-check customCheck eligibilitydeclarec">
                            <input class="form-check-input" type="checkbox" value="" id="Eligibilitydeclare">
                            <label class="form-check-label" for="Eligibilitydeclare" style="align-items: center;display: flex;">
                                I hereby confirm that I have read the eligibility criteria for applied program.
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="modalVerifyOtp" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:50%;">
            <div class="modal-content">
                @*<div class="modal-header text-center">
                    <h2 class="modal-title" id="staticBackdropLabel">Verify</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>*@
                <div class="modal-body text-center pt-5 pb-5">
                    <h2>Please enter the OTP to verify your contact details.</h2>
                    <label>OTP has been sent to your email and mobile number.</label>
                    <div class="form-group">
                        <input type="text" name="" id="caotp_1" class="form-control" maxlength="1" style="width: 50px; display: inline;" autocomplete="off">
                        <input type="text" name="" id="caotp_2" class="form-control" maxlength="1" style="width: 50px; display: inline;" autocomplete="off">
                        <input type="text" name="" id="caotp_3" class="form-control" maxlength="1" style="width: 50px; display: inline;" autocomplete="off">
                        <input type="text" name="" id="caotp_4" class="form-control" maxlength="1" style="width: 50px; display: inline;" autocomplete="off">
                        <br />
                        <span style="display:block;color:red" class="caotpvalidationSpan hidden mt-3"></span>
                    </div>
                    <label>Didn't recieve the code?</label><br />
                    <button type="button" class="btn btn-primary btn-lg" id="btnresendotp" onclick="getcreateaccountotp()">Resend</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-lg" style="background-color: #808080 !important" onclick="CloseVerifyOtpModal()">Close</button>
                    <button type="button" class="btn btn-primary btn-lg" onclick="verifyOTPNew()" id="modalVerifyBtn">Verify</button>
                </div>
            </div>
        </div>
    </div>







    <!--<div class="modal fade popupImgStyle" id="CourseEligibiityPopupImage" tabindex="-1">
        <div class="modal-dialog" style="max-width:50%;">
            <div class="modal-content">-->
    <!-- Modal Header -->
    <!--<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>-->
    <!-- Modal body -->
    <!--<div class="modal-body">

                    <center> <h2><strong>ELIGIBILITY CRITERIA</strong> </h2></center> <br /><div id="courseeligibility"></div>
                </div>
            </div>
        </div>
    </div>-->
    <input type="hidden" value="indian" id="hdntype" name="typeofnation" />
    <input type="hidden" id="hdncid" name="cid" />
    <input type="hidden" id="hdnLSStatus" runat="server" />
    <input type="hidden" id="hdnLSID" runat="server" />
</section>
<div class="overlay text-center" id="caOverlay">
    <div id="loading-img">
        <span id="loading-img-span"></span>
        <img id="loading-img-src" src="~/assets/images/loader.gif" alt="">
    </div>
</div>
<script src="assets/js/jquery-3.6.3.min.js"></script>
<script>
    $(function () {

        $('#Eligibilitydeclare').on('click', function () {
            var isChecked = $(this).is(":checked");
            if (isChecked) {
                setTimeout(function () {
                    $('#CourseEligibiityPopupImage').modal('hide');
                }, 500);
            }
           
        });
        $('.coaching-center-div').hide();
        $(".other-coaching-div").hide();

        $("#source").change(function () {
            //$("#coachingcentre").hide();
            $('.coaching-center-div').hide();
            $("#othercoachingcentre").val('');
            //$("#othercoachingcentre").hide();
            $(".other-coaching-div").hide();

            var selSource = $("#source").val();
            if (selSource == "3") {
                //$("#coachingcentre").show();
                $('.coaching-center-div').show();

            }
            else {

               // $("#coachingcentre").hide();
                $('.coaching-center-div').hide();
                $("#othercoachingcentre").val('');
                //$("#othercoachingcentre").hide();
                $(".other-coaching-div").hide();
                $('#coachingcentre [value=0]').attr('selected', 'true');
            }
        });
        // bind other coaching center
        $("#coachingcentre").change(function () {
            $("#othercoachingcentre").val('');
            //$("#othercoachingcentre").hide();
            $(".other-coaching-div").hide();
            var selCoachingIns = $("#coachingcentre").val();
            if (selCoachingIns == "others") {
                //$("#othercoachingcentre").show();
                $(".other-coaching-div").show();

            }
            else {
                $("#othercoachingcentre").val('');
                //$("#othercoachingcentre").hide();
                $(".other-coaching-div").hide();
            }
        });

        var serviceURL = '/Home/bindenquirysource';
        $.ajax({
            url: serviceURL,
            type: "GET",
            dataType: "HTML",
            async: false,
            success: function (data) {
                //  alert(data);

                if (data != "") {


                    $("#source").html(data);

                }
                else {
                    console.log("Error:bindenquirysource")
                }
                console.log("Error:bindenquirysource2")

            }
        });


        //bind coaching institute
        var serviceCoachingURL = '/Home/bindcoaching';
        $.ajax({
            url: serviceCoachingURL,
            type: "GET",
            dataType: "HTML",
            async: false,
            success: function (data) {
                //  alert(data);

                if (data != "") {


                    $("#coachingcentre").html(data);

                }
                else {
                    console.log("err:coachingcentre");
                }
                //  alert(data);
                console.log("err:coachingcentre2");
            }
        });


        $('#lastname,#middlename,#txtfirstname').on('keydown', function (e) {
            var k = e.keyCode || e.which;
            var ok = k >= 65 && k <= 90 || // A-Z
                k >= 96 && k <= 105 || // a-z
                k >= 35 && k <= 40 || // arrows
                k == 9 || //tab
                k == 46 || //del
                k == 8 || // backspaces
                k == 32 || // spaces
                (!e.shiftKey && k >= 48 && k <= 57); // only 0-9 (ignore SHIFT options)

            if (!ok || (e.ctrlKey && e.altKey)) {
                e.preventDefault();
            }
        });
    });
</script>
