<?php
require_once './PHP_Code/connection.php';
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Har Ghar Tiranga Quiz</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>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
        </script>
        <!--<link rel="stylesheet" href="style.css">-->

    </head>
    <body style="background-color: aliceblue;">

        <div class="container text-center" style="padding: 10px">
            <div class="row">
                <div class="col-sm-1"></div>
                <div class="col-sm-10" style="background-color: white;">
                    <img src="logo_new.jpg" class="img-rounded" style="height: 160px;margin: 10px">
                    <h2><b><span style="color: rgb(236, 85, 69);text-align: center">શિક્ષણ સમિતિ જિલ્લા પંચાયત, તાપી</span></b></h2>


                    <!--<h5 style="color: blueviolet;font-size: 28px"><b>Student Quiz Report</b></h5>--> 
                </div>
                <div class="col-sm-1"></div>
            </div>

            <div class="container">
                <div class="col-sm-1"></div>
                <div class="col-sm-10">
                    <div class="form-group col-md-4">
                        <label for="pwd" style="font-size: 18px">કલસ્ટરનું નામ :</label>
                        <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 col-md-4">
                        <label for="pwd" style="font-size: 18px">ગુણ :</label>
                        <select name="select" id="select_mark" tabindex="4" class="form-control">
                            <option name="Select" id="Select"> Select </option>
                            <option id="20" style="color: blue">20</option>
                            <option id="19" style="color: blue">19</option>
                            <option id="18" style="color: blue">18</option>
                            <option id="17" style="color: blue">17</option>
                            <option id="16" style="color: blue">16</option>
                        </select>
                        <div id="msg_select_mark"></div>
                    </div>
                    <div class="form-group col-md-4">
                        <label for="pwd" style="font-size: 18px">Report</label>
                        <button id="button" class="form-control btn-primary" style=";font-size: 16px">Download Pdf</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-1"></div>
            <div class="container">
                <div class="row"  id="makepdf">

                    <!--                    <div class="col-sm-1">
                                        </div>-->
                    <div class="col-sm-12" style="background-color: white">
                        <div style="padding: 2px;text-align: center">
                            <h1><b><span style="color: orange;">હર ઘર</span> તિરંગા <span style="color: green">જ્ઞાન ક્વિઝ</span></b></h1>
                        </div>
                        <h5 style="color: blueviolet;font-size: 28px;text-align: center"><b>Student Quiz Report</b></h5>
                        <hr style="height: 4px;border-width:0;color:orange;background-color:orange;margin-top: 0px;margin-bottom: 0px">
                        <div style="padding: 10px" >

                            <table class="table table-bordered"  style="font-size: 20px">
                                <thead>
                                    <tr>
                                        <td><b>Sr. No</b></td>
                                        <td><b>વિદ્યાર્થીનું નામ</b></td>                                        
                                        <td><b>શાળાનું નામ</b></td>
                                        <td><b>કલસ્ટરનું નામ</b></td>
                                        <td><b>તાલુકો</b></td>
                                        <td><b>જિલ્લો</b></td>
                                        <td><b>મેળવેલ ગુણ</b></td>
                                        <td><b>ગ્રેડ</b></td>
                                        <td><b>ક્વિઝ તારીખ</b></td>
                                        </b>
                                    </tr>
                                </thead>
                                <tbody id="cluster_wise">

                                    <?php
                                    $query = 'SELECT * FROM tbl_student ORDER BY id DESC';
                                    mysqli_set_charset($con, 'utf8');
                                    $result = mysqli_query($con, $query);
//                                                print_r($result);
                                    if (mysqli_num_rows($result) > 0) {
                                        $i = 1;
                                        while ($row = mysqli_fetch_assoc($result)) {
                                            ?>
                                            <tr>
                                                <?php
                                                if ($row["total_get_mark"] == 20) {
                                                    ?>
                                                    <td style="color: green"><b><?php echo $i; ?></b></td>
                                                    <td style="color: green"><b><?php echo $row["name"]; ?></b></td>              
                                                    <td style="color: green"><b><?php echo $row["school_name"]; ?></b></td>
                                                    <td style="color: green"><b><?php echo $row["cluster_name"]; ?></b></td>
                                                    <td style="color: green"><b><?php echo $row["taluko"]; ?></b></td>
                                                    <td style="color: green"><b><?php echo $row["district"]; ?></b></td>

                                                    <td style="color: green"><b><?php echo $row["total_get_mark"]; ?></b></td>
                                                    <td style="color: green"><b><?php echo $row["grade"]; ?></b></td>
                                                    <?php
                                                } else {
                                                    ?>
                                                    <td><?php echo $i; ?></td>
                                                    <td><?php echo $row["name"]; ?></td>              
                                                    <td><?php echo $row["school_name"]; ?></td>
                                                    <td><?php echo $row["cluster_name"]; ?></td>
                                                    <td><?php echo $row["taluko"]; ?></td>
                                                    <td><?php echo $row["district"]; ?></td>
                                                    <td><?php echo $row["total_get_mark"]; ?></td>
                                                    <td><?php echo $row["grade"]; ?></td>
                                                    <?php
                                                }
                                                ?>


                                                <td><?php echo $row["quiz_date"]; ?> </td>
                                            </tr>
                                            <?php
                                            $i = $i + 1;
                                        }
                                    } else {
                                        ?>
                                        <tr>
                                            <td>0 results</td>
                                        </tr>
                                        <?php
                                    }
                                    ?>
                                </tbody>
                            </table>


                        </div>
                        <!--                        <div class="col-sm-1">
                        
                                                </div>-->
                    </div>
                </div>
                <div style="margin-bottom: 100px;background-color: white"  id="tablebody"></div>

                </body>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                <script>


                </script>
                <script type="text/javascript">

                    $(document).ready(function () {
                        $(document.body).on('click', '#button', function (e) {
                            var button = document.getElementById("button");
                            var makepdf = document.getElementById("makepdf");

                            html2pdf().from(makepdf).save();

                            button.addEventListener("click", function () {
                                html2pdf().from(makepdf).save();
                            });
                        });

                        $(document.body).on('change', '#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);
                                var select_cluster = $("#select_cluster").children(":selected").attr("id");

                                var send = {'select_cluster': select_cluster};

                                $.ajax({
                                    type: 'POST',
                                    data: send,
                                    url: './PHP_Code/student_report.php',
                                    success: function (data) {
                                        debugger;
//                    console.log('success');
//                    console.log(JSON.stringify(data));
//                            alert('data ' + data);
                                        $('#cluster_wise').html('');
                                        $('#cluster_wise').html('');
                                        $('#cluster_wise').html(data);
                                        clear();
                                    }, error: function (xhr, err) {
                                        alert('Error ' + err.message);
                                    }
                                });
                            }
                        });

                        $(document.body).on('change', '#select_mark', function (e) {
//        $("#product_type").blur(function () {
                            e.preventDefault();
                            if ($("#select_mark").val() == "Select")
                            {
                                $("#msg_select_mark").fadeIn(500);
                                $("#msg_select_mark").html("* ગુણ પસંદ કરો").css({'color': 'red'});
                                $("#msg_select_mark").focusin();
                            } else
                            {
                                $("#msg_select_mark").fadeOut(1000);

                                var select_cluster = $("#select_cluster").children(":selected").attr("id");
                                var select_mark = $("#select_mark").children(":selected").attr("id");

                                var send = {'select_cluster': select_cluster, 'select_mark': select_mark};

                                $.ajax({
                                    type: 'POST',
                                    data: send,
                                    url: './PHP_Code/get_mark.php',
                                    success: function (data) {
                                        debugger;
//                    console.log('success');
//                    console.log(JSON.stringify(data));
//                            alert('data ' + data);
                                        $('#cluster_wise').html('');
                                        $('#cluster_wise').html('');
                                        $('#cluster_wise').html(data);
                                        clear();
                                    }, error: function (xhr, err) {
                                        alert('Error ' + err.message);
                                    }
                                });
                            }
                        });

                    });
                </script>
                </html>

