<style>
    form#admission-register ul {
        background-color: transparent !important;
        border: none !important;
        border-bottom: 2px solid #b7b3b3 !important;
        list-style: none;
        display: flex;
        justify-content: space-around;
    }

    form#admission-register ul li {
        flex-basis: 25%;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    form label.error,
    #secNameerr {
        color: red;
        font-size: 13px;
        margin-bottom: 0;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        right: 27px;
    }

    .register-radio label {
        font-size: 14px;
    }

    .register-row {
        margin-bottom: 20px;
    }

    form#admission-register .ui-widget-header .ui-state-active {
        background-color: transparent !important;
        color: #032da1 !important;
    }

    form#admission-register .ui-widget-header .ui-state-active a {
        color: #032da1;
    }

    form#admission-register ul li a {
        background: none;
        color: #222;
        padding: 10px 15px;
        cursor: pointer;
        font-weight: 500;
    }

    form#admission-register ul li.ui-state-active:after {
        position: absolute;
        content: "";
        left: 0;
        background: #032da1;
        right: 0;
        height: 4px;
        bottom: -1px;
        width: 96%;
        margin: auto;
    }
</style>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="adm-cover">
    <header class="login-header">
        <div class="login-wrap">
            <div class="logo-wrap">
                <a href="<?php echo base_url() . $this->uri->segment(1); ?>"><img src="<?= base_url(); ?>common_assets/<?= $school_info['color_logo']; ?>"> </a>

            </div>
        </div>
        <div class="header-menu-wrap">
            <div class="login-mob-menu"><i class="fas fa-bars"></i></div>
            <ul class="mob-menu">
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="admission-process.html"><button class="join-class-btn">Admission Process ></button></a></li>
            </ul>
        </div>
    </header>
    <div class="admission-wrap">
        <div class="admission-cover">
            <div class="admission-head">
                <h3 class="common-heading">Application for Admission</h3>
            </div>
            <form id="admission-register" action="<?php echo base_url(); ?>Student/addedit_apllication" method="post" enctype="multipart/form-data">

                <div class="tab-head" id="formtabs">
                    <ul>
                        <li class="tab-link" data-ref="enabled"><a href="#tab-1">Register</a> </li>
                        <li class="tab-link" data-ref="disabled"><a href="#tab-2">Additional details</a></li>
                        <li class="tab-link" data-ref="disabled"><a href="#tab-3">Documents</a> </li>
                        <li class="tab-link" data-ref="disabled"><a href="#tab-4">Application fee</a> </li>
                    </ul>



                    <div class="tab-content-wrap">

                        <div id="tab-1" class="tab-content current">
                            <h4 class="adm-heading">Create your centralized account</h4>

                            <div class="register-form">

                                <div class="register-row">
                                    <input type="text" name="sfname" class="sfname" id="sfname" placeholder="First name" pattern="[a-zA-Z]+" />
                                </div>

                                <div class="register-row">
                                    <input type="text" name="ssname" class="ssname" id="ssname" placeholder="Second name">
                                </div>

                                <div class="register-row">
                                    <input type="text" name="semail" id="semail" class="semail" placeholder="Email Address">
                                </div>

                                <div class="register-row">
                                    <input type="text" name="semailre" class="semailre" id="semailre" placeholder="Re-Enter your Email address">
                                </div>



                                <div class="register-row password-wrp">
                                    <input type="password" name="spaswd" class="spaswd" placeholder="Password" id="password1">
                                    <span class="passwrd-icon icon-y" id="p_icon1">
                                        <i class="far fa-eye"></i>
                                    </span>
                                </div>


                                <div class="register-row password-wrp">
                                    <input type="password" name="spaswdre" class="spaswdre" id="spaswdre" placeholder="Re-enter Password">
                                    <span class="passwrd-icon icon-y" id="p_icon2">
                                        <i class="far fa-eye"></i>
                                    </span>

                                </div>

                                <div class="register-row">
                                    <input type="text" name="scontact" class="scontact" id="scontact" placeholder="Contact number">
                                </div>

                                <div class="register-row">

                                    <div class="row">
                                        <div class="col-md-2 text-center" style="font-size: 14px;padding-top: 5px;">DOB</div>
                                        <div class="col-md-10">
                                            <input type="date" name="sdob" class="sdob" id="sdob" placeholder="dd">
                                        </div>
                                    </div>

                                </div>

                                <div class="register-row">
                                    <div class="register-radio">
                                        <label for="Male"><input type="radio" id="Male" name="sgender" value="Male" checked> Male </label>
                                    </div>
                                    <div class="register-radio">
                                        <label for="Female"><input type="radio" id="Female" name="sgender" value="Female"> Female</label>
                                    </div>
                                    <div class="register-radio">
                                        <label for="Other"><input type="radio" id="Other" name="sgender" value="Other"> Other</label>
                                    </div>
                                    <label id="sgender-error"></label>
                                </div>

                                <div class="register-btn">
                                    <a id="cont_1" type="button" class="text-white join-class-btn" href="#tab-2">Continue</a>
                                </div>

                            </div>
                        </div>

                        <div id="tab-2" class="tab-content tab_2">
                            <h4 class="adm-heading">Select Course</h4>
                            <div class="register-form">

                                <div class="register-row">
                                    <select name="scourse" class="scourse" id="scourse">
                                        <option value="">Select Course</option>
                                        <?php foreach ($courses as $c) { ?>
                                            <option value="<?= $c['id'] ?>"><?= $c['course_name'] ?></option>
                                        <?php } ?>
                                    </select>
                                    <p id="course_error" class="d-none text-danger">Please Select Course </p>
                                </div>
                                <div class="register-row">
                                    <select name="sbatch" class="sbatch" id="sbatch">
                                        <option value="">Select Batch</option>
                                        <?php foreach ($batch as $c) { ?>
                                            <option value="<?= $c['id'] ?>"><?= $c['b_name'] ?></option>
                                        <?php } ?>
                                    </select>
                                </div>

                                <h4 class="adm-heading">Emergency Contact</h4>
                                <div class="register-row">
                                    <input type="text" name="semfname" class="semfname" id="semfname" placeholder="Enter name">
                                </div>
                                <div class="register-row">
                                    <input type="text" name="semlname" class="semlname" id="semlname" placeholder="Last Name">
                                </div>
                                <div class="register-row">
                                    <input type="text" name="semphone" class="semphone" id="semphone" placeholder="Phone Number">
                                </div>

                                <h4 class="adm-heading">Address</h4>
                                <div class="register-row">
                                    <select name="scountry" class="scountry" id="scountry">
                                        <option value="">Country</option>
                                        <option value="India">India</option>
                                    </select>
                                </div>

                                <div class="register-row">
                                    <input type="text" name="sstate" class="sstate" id="sstate" placeholder="Provinces/state">
                                </div>
                                <div class="register-row">
                                    <input type="text" name="saddress1" class="saddress1" id="saddress1" placeholder="Address 1">
                                </div>
                                <div class="register-row">
                                    <input type="text" name="saddress2" class="saddress2" id="saddress2" placeholder="Address 2">
                                </div>
                                <div class="register-row">
                                    <input type="text" name="szipcode" class="szipcode" id="szipcode" placeholder="PMB / Zip code">
                                </div>
                                <div class="register-btn">
                                    <button class="join-class-btn" type="button" id="previous_1">Previous</button>
                                    <button class="join-class-btn" type="button" id="cont_2">Continue</button>
                                </div>

                            </div>
                        </div>


                        <div id="tab-3" class="tab-content tab_3">
                            <h4 class="adm-heading">Upload required document</h4>

                            <div class="upload-doc">
                                <label>Passport size photo</label>
                                <!-- <span id="uploaded-file">&nbsp</span> -->
                                <div class="upload-doc-btn-wrap">
                                    <input type="file" name="photo" id="photo" name="No file uploaded" />
                                    <label for="photo" class="upload-btn" id="uploadBtn1">Upload</label>
                                    <label for="photo" class="upload-btn re-upload-btn" id="uploadBtn2">Re-Upload</label>
                                </div>
                            </div>
                            <div class="upload-doc">
                                <label>School certificate</label>
                                <!-- <span id="uploaded-file">&nbsp</span> -->
                                <div class="upload-doc-btn-wrap">
                                    <input type="file" name="school" id="school" name="No file uploaded" />
                                    <label for="school" class="upload-btn" id="uploadBtn3">Upload</label>
                                    <label for="school" class="upload-btn re-upload-btn" id="uploadBtn4">Re-Upload</label>
                                </div>
                            </div>
                            <div class="upload-doc">
                                <label>Exam Results</label>
                                <!-- <span id="uploaded-file">&nbsp</span> -->
                                <div class="upload-doc-btn-wrap">
                                    <input type="file" name="exam" id="exam" name="No file uploaded" />
                                    <label for="exam" class="upload-btn" id="uploadBtn5">Upload</label>
                                    <label for="exam" class="upload-btn re-upload-btn" id="uploadBtn6">Re-Upload</label>
                                </div>
                            </div>
                            <div class="upload-doc">
                                <label>Medical Certificate</label>
                                <!-- <span id="uploaded-file">&nbsp</span> -->
                                <div class="upload-doc-btn-wrap">
                                    <input type="file" name="medical" id="medical" name="No file uploaded" />
                                    <label for="medical" class="upload-btn" id="uploadBtn7">Upload</label>
                                    <label for="medical" class="upload-btn re-upload-btn" id="uploadBtn8">Re-Upload</label>
                                </div>
                            </div>
                            <div class="register-btn">
                                <button class="join-class-btn" type="button" id="previous_2">Previous</button>
                                <button class="join-class-btn" type="button" id="cont_3">Continue</button>
                            </div>
                        </div>

                        <div id="tab-4" class="tab-content">
                            <div class="payment-cover">
                                <!-- <div class="payment-left">
                  <h4 class="adm-heading">Purpose of payment</h4>
                  <div class="register-row">
                    <select>
                      <option>Select Purpose</option>
                      <option>A</option>
                      <option>B</option>
                      <option>C</option>
                    </select>
                  </div>
                  <h4 class="adm-heading">Select a payment method</h4>
                  <div class="register-row">
                
                  </div>
                  <h4 class="adm-heading">Purpose of payment</h4>
                  <div class="register-row">
                    <input type="text" name="" placeholder="Name on the Card">
                  </div>
                  <div class="register-row">
                    <input type="number" name="" placeholder="16 Digits Card number">
                  </div>
                  <div class="register-row reg-date">
                    <input type="number" name="" placeholder="mm">
                    <input type="number" name="" placeholder="yyyy">
                  </div>
                </div> -->
                                <div class="payment-center">
                                    <h4 class="adm-heading">Price Details</h4>

                                    <div class="register-row">
                                        <select name="payment_method" id="payment_method" class="form-control">
                                            <option>Select Purpose</option>
                                            <option value="offline">Offline Payment</option>
                                            <option value="online">Online Payment</option>

                                        </select>
                                    </div>

                                    <div id="fee-section">

                                    </div>

                                    <div id="total-amt" class="payment-row total-amt">
                                        <label>Total Amount:</label><span id="total-fee"></span>
                                        <input type="hidden" id="textbox-totalfee" name="amount" />
                                    </div>
                                    <div class="payment-btn">
                                        <button class="join-class-btn" data-toggle="modal" data-target="#paymentDone">Continue</button>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <!-- <div class="payment-modal">
    <div class="modal fade" id="paymentDone" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <div class="payment-done-cover">
            <div class="payment-done-img"><i class="fas fa-check-circle"></i></div>
            <h3>Payment Successfull</h3>
            <p>Your Admission Procedures has been completed successfully you will get you're <strong>User ID & Password</strong> to your registered <strong>Email ID</strong> within <strong>24 Hrs.</strong></p>
            <a href="my-info-one.html"><button class="join-class-btn">Done</button></a>
          </div>
        </div>
      </div>
    </div>
  </div> -->
</div>



<!-- Javascript -->

<script>
    $("#formtabs").tabs({
        active: 0,
        beforeActivate: function(event, ui) {

            let NewTabIndex = ui.newTab.index();
            let CurrentTabIndex = ui.oldTab.index();

            if (NewTabIndex > (CurrentTabIndex + 1)) {
                console.log(ui.newTab.data('ref'));
                if (ui.newTab.data('ref') == 'enabled') {
                    return true;
                }
                return false;
            }

            if (NewTabIndex < CurrentTabIndex) {
                return true;
            }

            if ($('#admission-register').valid()) {
                ui.newTab.attr("data-ref", "enabled");
                return true;
            }



            return false;
        }
    });

    function loadTab(id) {
        console.log('isdss asdasds asdasd');
        $("#formtabs").tabs({
            active: id
        })
    }

    // First Tab Change
    $("#cont_1").click(function() {
        $("#formtabs").tabs("option", "active", 1);
    });
    $("#previous_1").click(function() {
        $("#formtabs").tabs("option", "active", 0);
    });
    // First Tab Change

    // Second Tab Change
    $("#cont_2").click(function() {
        $("#formtabs").tabs("option", "active", 2);
    });
    $("#previous_2").click(function() {
        $("#formtabs").tabs("option", "active", 1);
    });
    // Second Tab Change

    // Third Tab Change
    $("#cont_3").click(function() {
        $("#formtabs").tabs("option", "active", 3);
    });
    $("#previous_3").click(function() {
        $("#formtabs").tabs("option", "active", 2);
    });
    // Third Tab Change
</script>


<script>
    jQuery.validator.addMethod("fullnameregex", function(value, element) {
        return this.optional(element) || /^[a-zA-Z]{3,30}$/.test(value);
    }, 'Please enter alpha characters only ');

    jQuery.validator.addMethod("passwordregex", function(value, element) {
        return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$#!%*?&])[A-Za-z\d@$!%*#?&]{6,16}$/.test(value);
    }, 'Your password must be atleast 6 characters long, which inculdes one upper case, one numerical value and one special character.');

    jQuery.validator.addMethod("emailregex", function(value, element) {
        return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/.test(value);
    }, 'Email Address is invalid: Please enter a valid email address.');


    jQuery.validator.addMethod("phonenumberregex", function(value, element) {
        return this.optional(element) || /^[0-9]{10,12}$/.test(value);
    }, 'Please enter a 10 digits vaild phone number.');

    jQuery.validator.addMethod("zipregex", function(value, element) {
        return this.optional(element) || /^[0-9]{6}$/.test(value);
    }, 'Please enter 6 digits number: digits only allowed');

    jQuery.validator.addMethod("genral_regex", function(value, element) {
        return this.optional(element) || /^[a-zA-Z -#]{1,50}$/.test(value);
    }, 'Please enter alpha characters only');

    var v = $("#admission-register").validate({

        ignore: ':hidden',

        rules: {
            sfname: {
                required: true,
                minlength: 3,
                maxlength: 30,
                fullnameregex: true,
            },
            ssname: {
                required: true,
                minlength: 1,
                genral_regex: true
            },
            semail: {
                required: true,
                email: true,
                emailregex: true
            },
            semailre: {
                required: true,
                equalTo: '[name="semail"]'
            },
            spaswd: {
                required: true,
                minlength: 6,
                maxlength: 12,
                passwordregex: true
            },
            spaswdre: {
                required: true,
                equalTo: '[name="spaswd"]'
            },
            scontact: {
                required: true,
                minlength: 10,
                maxlength: 10,
                phonenumberregex: true
            },
            sdob: "required",
            sgender: {
                required: true
            },
            scourse: {
                required: true
            },
            sbatch: {
                required: true
            },
            semfname: {
                required: true,
                genral_regex: true
            },
            semlname: {
                required: true,
                minlength: 1,
                genral_regex: true
            },
            semphone: {
                required: true,
                minlength: 10,
                maxlength: 10,
                phonenumberregex: true
            },
            scountry: {
                required: true,
                genral_regex: true

            },
            sstate: {
                required: true,
                genral_regex: true
            },
            saddress1: {
                required: true
            },
            szipcode: {
                required: true,
                zipregex: true
            },
            school: {
                required: true,
            },
            photo: {
                required: true,
            },
            exam: {
                required: true,
            },
            medical: {
                required: true,
            },
            amount: {
                required: true
            }


        },
        messages: {
            semailre: {
                required: "Enter your Email",
                equalTo: "Please enter the same email address again.",
            },
            spaswdre: {
                equalTo: "Please enter the same password again.",
            },
            semphone: {
                minlength: "Please Enter a 10 digits valid phone Number",
                maxlength: "Please Enter a 10 digits valid phone Number",

            },
            scontact: {
                minlength: "Please Enter a 10 digits valid phone Number",
                maxlength: "Please Enter a 10 digits valid phone Number",

            },


        },
        submitHandler: function(form) {

            form.submit();

        },
        highlight: function(element, errorClass) {

            window.scrollTo(0, 0);

        },
        unhighlight: function(element, errorClass) {

        },

    });
</script>
<script>
    $("#p_icon1").click(function() {

        $("#p_icon1").toggleClass("icon-y");

        var input = $("#password1");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });
    $("#p_icon2").click(function() {

        $("#p_icon2").toggleClass("icon-y");

        var input = $("#spaswdre");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });



    $('#sbatch').change(function() {
        var sbatch = $(this).val();
        var scourse = $('#scourse option:selected').val();
        // alert(scourse);
        var div_data = '';
        var total_fee = 0;
        $('#fee-section').html("");
        $('#total-fee').text();
        $('#textbox-totalfee').val('');
        if (scourse != '' && scourse != 0) {
            $('#course_error').addClass("d-none");
            $.ajax({
                url: "<?php echo base_url(); ?>Student/get_applicationfee",
                method: "post",
                data: {
                    batch_id: sbatch,
                    course_id: scourse
                },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    if (data != 0) {
                        total_fee = (data.amount != '') ? data.amount : 0;
                        div_data += '<div class="payment-row"><label>Application Fee:</label><span>' + data.amount + '</span></div>';
                        $('#total-fee').text(total_fee);

                        $('#textbox-totalfee').val(total_fee);
                    } else {
                        div_data += '<div class="payment-row"><label class="text-danger"> Application Fee Not Found  </label></div>';
                        $('#total-fee').text(total_fee);
                        $('#textbox-totalfee').val('');
                    }
                    $('#fee-section').append(div_data);
                }
            });
        } else {
            $('#course_error').removeClass("d-none");
        }
    });
</script>