<!DOCTYPE html>
<html lang="en">
    <head>
        <title>હર ઘર તિરંગા કિવઝ</title>
        <link rel="icon" type="image/x-icon" href="flaticon.ico">
        <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="logo_new.jpg" class="img-rounded" style="height: 160px;margin: 10px">
                    <h1><b><span style="color: rgb(236, 85, 69)">શિક્ષણ સમિતિ જિલ્લા પંચાયત, તાપી</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">શાળાનું નામ :</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>
                            <!--<input type="email" class="form-control" tabindex="2" placeholder="કલસ્ટરનું નામ" id="email">-->
                            <select name="select" id="select_cluster" 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>
                                <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>
                                <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>

                                <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>
                                <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>
                                <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>
                                <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>
                                <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>
                                <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>
                                <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_cluster"></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">
                            * User Register 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("* તાલુકો Is Empty").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("* જિલ્લો Is Empty").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("* વિદ્યાર્થીનું નામ દાખલ કરો.").css({'color': 'red'});
                    $("#msg_stud_name").focusin();
                } else
                {
                    $("#msg_stud_name").fadeOut(1000);
                }
            });

            function validateEmail($email) {
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                return emailReg.test($email);
            }

            $(document.body).on('blur', '#select_cluster', function (e) {
//        $("#product_type").blur(function () {
                e.preventDefault();
                if ($("#select_cluster").val() == "Select")
                {
                    $("#msg_select_cluster").fadeIn(500);
                    $("#msg_select_cluster").html("* કલસ્ટરનું નામ પસંદ કરો").css({'color': 'red'});
                    $("#msg_select_cluster").focusin();
                } else
                {
                    $("#msg_select_cluster").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("* શાળાનું નામ દાખલ કરો.").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('');
                $("#select_cluster").html('Select');
                $("#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 select_cluster = $("#select_cluster").children(":selected").attr("id");
                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("* વિદ્યાર્થીનું નામ દાખલ કરો.").css({'color': 'red'});
                    $("#msg_stud_name").focusin();
                } else if (school_name == '')
                {
                    $("#msg_school_name").fadeIn(500);
                    $("#msg_school_name").html("* શાળાનું નામ દાખલ કરો.").css({'color': 'red'});
                    $("#msg_school_name").focusin();
                } else if (select_cluster == 'Select')
                {
                    $("#msg_select_cluster").fadeIn(500);
                    $("#msg_select_cluster").html("* કલસ્ટરનું નામ પસંદ કરો").css({'color': 'red'});
                    $("#msg_select_cluster").focusin();
                } else if (select_taluka == 'Select')
                {
                    $("#msg_select_taluka").fadeIn(500);
                    $("#msg_select_taluka").html("* તાલુકો પસંદ કરો").css({'color': 'red'});
                    $("#msg_select_taluka").focusin();
                } else if (select_district == 'Select')
                {
                    $("#msg_select_district").fadeIn(500);
                    $("#msg_select_district").html("* જિલ્લો પસંદ કરો").css({'color': 'red'});
                    $("#msg_select_district").focusin();
                } else
                {

                    var send = {'ss_stud_name': stud_name, 'select_cluster': select_cluster, '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 = './quiz_questions.php';

                            $('#msg_success').fadeIn(500);
                            $('#msg_success').text('* User Register Successfully!');
                            $('#msg_success').fadeOut(5000);
                            $('#tablebody').html('');
                            $('#tablebody').html(data);
                            clear();
                        }, error: function (xhr, err) {
                            alert('Error ' + err.message);
                        }
                    });
                }
            });

        });
    </script>
</html>

