<!DOCTYPE html>
<html lang="en">
    <head>
        <title>હર ઘર તિરંગા કિવઝ</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body style="background-color: aliceblue;">

        <div class="container text-center" style="padding: 10px">
            <div class="row">
                <div class="col-sm-3"></div>
                <div class="col-sm-6" style="background-color: white">
                    <img src="logo1.jpg" class="img-rounded" style="width: 100%;height: 160px;margin: 10px">
<!--                    <h1><b><span style="color: orange">હર ઘર</span> તિરંગા <span style="color: green">કિવઝ</span></b></h1>
                    <h5>આઝાદી કા અમૃત મહોત્સવે આપનું જ્ઞાન ચકાસીએ.</h5> -->
                    <!--<hr style="height: 4px;border-width:0;color:orange;background-color:orange">-->
                </div>
                <div class="col-sm-3"></div>
            </div>
        </div>

        <div class="container">


            <div class="row">

                <div class="col-sm-3">

                </div>
                <div class="col-sm-6" style="background-color: white">
                    <hr style="height: 4px;border-width:0;color:orange;background-color:orange;margin-top: 0px;margin-bottom: 0px">
                    <div style="padding: 10px">
                        <h1><b><span style="color: orange">હર ઘર</span> તિરંગા <span style="color: green">કિવઝ</span></b></h1>
                        <h5>આઝાદી કા અમૃત મહોત્સવે આપનું જ્ઞાન ચકાસીએ.</h5> 
                    </div>

                    <form action="" style="padding: 10px">
                        <div class="form-group">
                            <label for="email">વિદ્યાર્થીનુ નામ :</label>
                            <input type="text" class="form-control" tabindex="1" placeholder="વિદ્યાર્થીનુ નામ" id="stud_name">
                            <div id="msg_stud_name"></div>
                        </div>
                        <div class="form-group">
                            <label for="pwd">Email id :</label>
                            <input type="email" class="form-control" tabindex="2" placeholder="Email id" id="email">
                            <div id="msg_email"></div>
                        </div>
                        <div class="form-group">
                            <label for="pwd">શાળાનું નામ :</label>
                            <input type="text" class="form-control" tabindex="3" placeholder="શાળાનું નામ" id="school_name">
                            <div id="msg_school_name"></div>
                        </div>

                        <div class="form-group">
                            <label for="pwd">તાલુકો :</label>
                            <select name="select" id="select_taluka" tabindex="4" class="form-control">
                                <option name="Select" id="Select"> Select </option>
                                <option id="વાલોડ" style="color: blue">વાલોડ</option>
                                <option id="ઉચ્છલ" style="color: blue">ઉચ્છલ</option>
                                <option id="નિઝર" style="color: blue">નિઝર</option>
                                <option id="કુકરમુંડા" style="color: blue">કુકરમુંડા</option>
                                <option id="ડોલવણ" style="color: blue">ડોલવણ</option>
                                <option id="સોનગઢ" style="color: blue">સોનગઢ</option>
                                <option id="વ્યારા" style="color: blue">વ્યારા</option>
                            </select>
                            <div id="msg_select_taluka"></div>
                        </div>

                        <div class="form-group">
                            <label for="pwd">જિલ્લો :</label>
                            <select name="select" id="select_district" tabindex="5" class="form-control">
                                <option name="Select" id="Select"> Select </option>
                                <option id="તાપી" style="color: blue">તાપી</option>
                            </select>
                            <div id="msg_select_district"></div>
                        </div>

                        <button type="button" class="btn btn-primary btnsave" id="btn-submit" tabindex="6">Next</button>
                        <button type="reset" class="btn btn-default clear" tabindex="7">Clear</button>
                        <div id="msg_success" style="display:none;font-size: 16px;color: green;padding: 5px">
                            * Data Insert Successfully!
                        </div>
                    </form>
                </div>
                <div class="col-sm-3">

                </div>
            </div>
        </div>
        <div style="margin-bottom: 100px;background-color: white"></div>

    </body>

    <script type="text/javascript">

        $(document).ready(function () {
            $(document.body).on('blur', '#select_taluka', function (e) {
                e.preventDefault();
//            alert('select_menu_category ' + $("#select_menu_category").val());
                if ($("#select_taluka").val() == "Select")
                {
                    $("#msg_select_taluka").fadeIn(500);
                    $("#msg_select_taluka").html("* Select Taluka").css({'color': 'red'});
                    $("#msg_select_taluka").focusin();
                } else
                {
                    $("#msg_select_taluka").fadeOut(1000);
                }
            });

            $(document.body).on('blur', '#select_district', function (e) {
                e.preventDefault();
//            alert('select_menu_category ' + $("#select_menu_category").val());
                if ($("#select_district").val() == "Select")
                {
                    $("#msg_select_district").fadeIn(500);
                    $("#msg_select_district").html("* Select District").css({'color': 'red'});
                    $("#msg_select_district").focusin();
                } else
                {
                    $("#msg_select_district").fadeOut(1000);
                }
            });

            $(document.body).on('blur', '#stud_name', function (e) {
//        $("#product_type").blur(function () {
                e.preventDefault();
//            alert($("#land_area").val());
                if ($("#stud_name").val() == "")
                {
                    $("#msg_stud_name").fadeIn(500);
                    $("#msg_stud_name").html("* વિદ્યાર્થીનુ નામ Is Empty").css({'color': 'red'});
                    $("#msg_stud_name").focusin();
                } else
                {
                    $("#msg_stud_name").fadeOut(1000);
                }
            });

            $(document.body).on('blur', '#email', function (e) {
//        $("#product_type").blur(function () {
                e.preventDefault();
                if ($("#email").val() == "")
                {
                    $("#msg_email").fadeIn(500);
                    $("#msg_email").html("* Email id Is Empty").css({'color': 'red'});
                    $("#msg_email").focusin();
                } else
                {
                    $("#msg_email").fadeOut(1000);
                }
            });

            $(document.body).on('blur', '#school_name', function (e) {
//        $("#product_type").blur(function () {
                e.preventDefault();
                if ($("#school_name").val() == "")
                {
                    $("#msg_school_name").fadeIn(500);
                    $("#msg_school_name").html("* શાળાનું નામ Is Empty").css({'color': 'red'});
                    $("#msg_school_name").focusin();
                } else
                {
                    $("#msg_school_name").fadeOut(1000);
                }
            });

            function clear()
            {
                $("#select_taluka").val('Select');
                $("#select_district").val('Select');
                $("#stud_name").val('');
                $("#email").html('');
                $("#school_name").val('');
            }


            $(document.body).on('click', '.btnsave', function (e) {
                debugger;
                var select_taluka = $("#select_taluka").children(":selected").attr("id");
                var select_district = $("#select_district").children(":selected").attr("id");

                var stud_name = $("#stud_name").val();
                var email = $("#email").val();
                var school_name = $("#school_name").val();


                alert('stud_name ' + stud_name + ' email ' + email + ' school_name ' + school_name + ' select_taluka ' + select_taluka + " select_district " + select_district);

                if (stud_name == '')
                {
                    $("#msg_stud_name").fadeIn(500);
                    $("#msg_stud_name").html("* વિદ્યાર્થીનુ નામ Is Empty").css({'color': 'red'});
                    $("#msg_stud_name").focusin();
                } else if (email == '')
                {
                    $("#msg_email").fadeIn(500);
                    $("#msg_email").html("* Email Is Empty").css({'color': 'red'});
                    $("#msg_email").focusin();
                } else if (school_name == '')
                {
                    $("#msg_school_name").fadeIn(500);
                    $("#msg_school_name").html("* શાળાનું નામ Is Empty").css({'color': 'red'});
                    $("#msg_school_name").focusin();
                } else if (select_district == 'Select')
                {
                    $("#msg_select_district").fadeIn(500);
                    $("#msg_select_district").html("* Select District").css({'color': 'red'});
                    $("#msg_select_district").focusin();
                } else if (select_taluka == 'Select')
                {
                    $("#msg_select_taluka").fadeIn(500);
                    $("#msg_select_taluka").html("* Select Taluka").css({'color': 'red'});
                    $("#msg_select_taluka").focusin();
                } else
                {

                    var send = {'ss_stud_name': stud_name, 'ss_email': email, 'school_name': school_name, 'select_district': select_district, 'select_taluka': select_taluka};

                    $.ajax({
                        type: 'POST',
                        data: send,
                        url: './PHP_Code/student_entry.php',
                        success: function (data) {
                            debugger;
//                    console.log('success');
//                    console.log(JSON.stringify(data));
//                    alert('data ' + data);


                            window.location.href = '/har_ghar_tiranga_quiz/quiz_questions.php';

                            $('#msg_success').fadeIn(500);
                            $('#msg_success').text('* USer Register Successfully!');
                            $('#msg_success').fadeOut(5000);
                            $('#tablebody').html('');
                            $('#tablebody').html(data);



                            clear();

//                            var a = $('#zero_config tr:last').attr('id');
//                            $('html,body').animate({
//                                scrollTop: $("tr[id=" + a + "]").offset().top},
//                                    'slow');
//                            var a = $('#zero_config tr:last').attr('id');
//                            $("tr[id=" + a + "]").css({'background-color': '#adb3d6'});
//
//                            setTimeout(function () {
//                                // Do something after 1 second 
////                        alert('set timeout ');
//                                $('#tablebody tr').css({'background-color': '#d0dee9'});
//                            }, 10000);
                        }, error: function (xhr, err) {
                            alert('Error ' + err.message);
                        }
                    });
                }
            });

        });
    </script>
</html>

