<?php
// Include database connection code
include("includes/db.php");

$class_names = '';
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="css/tablestyle.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
    <link rel="stylesheet" href="css/animate-css/animate.min.css" media="screen">
    <link rel="stylesheet" href="css/prism/prism.css" media="screen">
    <link rel="stylesheet" href="nepali.datepicker.v4.0.1/css/main.css" media="screen">
    <script src="js/multiselect-dropdown.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <script>
        $(document).ready(function () {
            // Initialize DataTables
            var table = $('#customers').DataTable();

            // On form submit via AJAX
            $("form#filterForm").on('submit', function (e) {
                e.preventDefault();  // Prevent regular form submission
                
                var formData = $(this).serialize();  // Collect form data

                // Send AJAX request
                $.ajax({
                    type: "GET",
                    url: "get_dreport.php",  // Target the get_ngreport.php file
                    data: formData,  // Send form data
                    success: function (response) {
                        // Display the result (failed students) in the div below the form
                        $('#reportSection').html(response);
                    },
                    error: function (xhr, status, error) {
                        // Handle error
                        alert('Error fetching report: ' + error);
                    }
                });
            });

            // DataTable initialization (optional, if needed in the fetched report)
            if (!$.fn.DataTable.isDataTable('#customers')) {
                $('#customers').DataTable({
                    "pageLength": 100,
                    "lengthMenu": [10, 25, 50, 100, 500]
                });
            }
        });
    </script>

</head>

<body>

<p>Go back to home: <a href="dashboard.php">
    <img border="0" alt="SRMS" src="favicon.ico" width="40" height="40" Value="Dashboard">
</a></p>

<div class="container">
    <h2>Select Class</h2>
    <div class="container" style="margin-left:-200px">
        <!-- Form for selecting filters -->
        <form action="get_dgreport.php" method="get" id="filterForm">
            <div class="row">
                <div class="form-group col-md-4">
                    <label for="exam_type">Select Exam Type:</label>
                    <select name="exam_type" id="exam_type" class="form-control" required>
                        <option value="">Select Exam</option>
                        <?php
                        $queryexam = "SELECT id, exm_year, exam_type FROM examination_type";
                        $resultexam = $conn->query($queryexam);
                        while ($row = $resultexam->fetch_assoc()) {
                            $selected = ($_GET['exam_type'] == $row['id']) ? 'selected' : '';
                            echo "<option value='" . $row['id'] . "' $selected>" . $row['exm_year'] . " - " . $row['exam_type'] . "</option>";
                        }
                        ?>
                    </select>
                </div>
                <div class="form-group col-md-4">
                    <label for="class_id">Select Class:</label>
                    <select name="class_id[]" id="class_id" class="form-control" multiple>
                        <?php
                        // Query classes from the database
                        $classQuery = "SELECT class_id, class_name, section FROM classes";
                        $classResult = $conn->query($classQuery);
                        while ($row = $classResult->fetch_assoc()) {
                            echo "<option value='" . $row['class_id'] . "'>" . $row['class_name'] . " - " . $row['section'] . "</option>";
                        }
                        ?>
                    </select>
                </div>
                <br>
                <div style="width: 150px;">
                    <button type="submit" class="btn btn-primary">Show Ledger</button>
                </div>
            </div>
        </form>

        <!-- Section to display the report dynamically after AJAX fetch -->
        <div id="reportSection" style="margin-top: 30px;">
            <!-- This will be populated with the report data from get_ngreport.php -->
        </div>
    </div>
</div>

<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/pace/pace.min.js"></script>
<script src="js/lobipanel/lobipanel.min.js"></script>
<script src="js/iscroll/iscroll.js"></script>
<script src="js/prism/prism.js"></script>
<script src="js/select2/select2.min.js"></script>
<script src="js/main.js"></script>
</body>

</html>
