<?php
include('session_validator.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SRMS Admin Manage Subjects</title>
    <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/lobipanel/lobipanel.min.css" media="screen">
    <link rel="stylesheet" href="css/prism/prism.css" media="screen">
    <link rel="stylesheet" href="css/select2/select2.min.css">
    <link rel="stylesheet" href="css/main.css" media="screen">
    <script src="js/modernizr/modernizr.min.js"></script>
    <style>
        /* Additional styles for better table appearance */
        .panel-body h2 {
            margin-top: 20px;
        }
        .print-button {
            margin-bottom: 20px;
        }
    </style>
</head>
<body class="top-navbar-fixed">
    <div class="main-wrapper">

        <!-- ========== TOP NAVBAR ========== -->
        <?php include('includes/topbar.php'); ?> 
        <!-- ========== WRAPPER FOR BOTH SIDEBARS & MAIN CONTENT ========== -->
        <div class="content-wrapper">
            <div class="content-container">

                <!-- ========== LEFT SIDEBAR ========== -->
                <?php include('includes/leftbar.php'); ?>  
                <!-- /.left-sidebar -->

                <div class="main-page">

                    <div class="container-fluid">
                        <div class="row page-title-div">
                            <div class="col-md-6">
                                <h2 class="title">Select Exam to View Report</h2>
                            </div>
                        </div>
                        <!-- /.row -->
                        <div class="row breadcrumb-div">
                            <div class="col-md-6">
                                <ul class="breadcrumb">
                                    <li><a href="dashboard.php"><i class="fa fa-home"></i> Home</a></li>
                                    <li> Report </li>
                                    <li class="">Marks Entered Report</li>
                                </ul>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    
                    <div class="container-fluid">
                       
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel">
                                  
                                    <div class="panel-body">

                                        <!-- Select Exam Type Dropdown -->
                                        <div class="form-group">
                                            <label for="exam_type">Select Exam Type:</label>
                                            <select id="exam_type" class="form-control">
                                                <option value="">-- Select Exam Type --</option>
                                                <?php
                                                include("includes/db.php");
                                                $examTypeQuery = "SELECT id, exm_year, exam_type FROM examination_type";
                                                $examTypeResult = $conn->query($examTypeQuery);

                                                if ($examTypeResult->num_rows > 0) {
                                                    while ($examType = $examTypeResult->fetch_assoc()) {
                                                        echo "<option value='" . $examType['id'] . "'>" . htmlspecialchars($examType['exam_type']) . " (" . htmlspecialchars($examType['exm_year']) . ")</option>";
                                                    }
                                                } else {
                                                    echo "<option value=''>No Exam Types Available</option>";
                                                }
                                                ?>
                                            </select>
                                        </div>

                                        <!-- Print Button -->
                                        <button id="print-button" class="btn btn-primary print-button" style="display:none;">
                                            <i class="fa fa-print"></i> Print Report
                                        </button>

                                        <!-- Subjects Table -->
                                        <div id="subject-table">
                                            <p>Please select an exam type to view the report.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.col-md-12 -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.content-container -->
        </div>
        <!-- /.content-wrapper -->
    </div>
    <!-- /.main-wrapper -->

    <!-- JavaScript -->
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    <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>

    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize Select2 for better dropdown
            $('#exam_type').select2({
                placeholder: "-- Select Exam Type --",
                allowClear: true
            });

            // Trigger table load when exam type is selected
            $('#exam_type').on('change', function() {
                var examTypeId = $(this).val();
                
                if (examTypeId) {
                    $.ajax({
                        url: 'submitted_report.php', // Ensure this file exists and is correctly configured
                        type: 'POST',
                        data: {exam_type: examTypeId},
                        success: function(data) {
                            $('#subject-table').html(data);
                            $('#print-button').show();
                        },
                        error: function() {
                            $('#subject-table').html('<p class="text-danger">An error occurred while fetching the data.</p>');
                            $('#print-button').hide();
                        }
                    });
                } else {
                    $('#subject-table').html('<p>Please select an exam type to view the report.</p>');
                    $('#print-button').hide();
                }
            });

            // Print button functionality
            $('#print-button').on('click', function() {
                var printContents = document.getElementById('subject-table').innerHTML;
                var originalContents = document.body.innerHTML;

                // Replace the body content with the print contents
                document.body.innerHTML = printContents;

                // Print the page
                window.print();

                // Restore the original contents
                document.body.innerHTML = originalContents;
                location.reload(); // Reload to ensure all scripts and styles are reloaded
            });
        });
    </script>

</body>
</html>
