<?php 
include('config.php');

?>


<?php
include('includes/user_data.php');

?>
<!doctype html>
<html lang="en">


<!-- Mirrored from codervent.com/rocker/demo/vertical/user-profile.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 Aug 2022 06:47:36 GMT -->
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--favicon-->
	
	
	<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet" />
	<link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
	<link href="assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet" />
	<link href="assets/plugins/datatable/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
	
	
	
	<link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
	<!--plugins-->
	<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet" />
	<link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
	<link href="assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet" />
	<!-- loader-->
	<link href="assets/css/pace.min.css" rel="stylesheet" />
	<script src="assets/js/pace.min.js"></script>
	<!-- Bootstrap CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/css/bootstrap-extended.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&amp;display=swap" rel="stylesheet">
	<link href="assets/css/app.css" rel="stylesheet">
	<link href="assets/css/icons.css" rel="stylesheet">
	<!-- Theme Style CSS -->
	<link rel="stylesheet" href="assets/css/dark-theme.css" />
	<link rel="stylesheet" href="assets/css/semi-dark.css" />
	<link rel="stylesheet" href="assets/css/header-colors.css" />
	
	
	
	
	
	

	<title> Penuel College</title>
</head>

<body>
	<!--wrapper-->
	<div class="wrapper">
		<!--sidebar wrapper -->
		<?php include 'includes/side.php'; ?>
		<!--end sidebar wrapper -->
		<!--start header -->
		<?php include 'includes/head.php'; ?>
		<!--end header -->
		<!--start page wrapper -->
	
      
      
                
                <!--start page wrapper -->
		<div class="page-wrapper">
			<div class="page-content">

    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        select, table { margin-top: 10px; margin-bottom: 20px; padding: 5px; width: 250px; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
        th { background-color: #f0f0f0; }
    </style>

    <h2>Term Report Filter</h2>
<?php  if ($conn->connect_error) die("Connection failed: " . $conn->connect_error);

// Get unique classes
$classes = $conn->query("SELECT DISTINCT classes FROM end_term_report ORDER BY classes ASC");
 ?>
    <label for="classSelect">Select Class:</label>
    <select id="classSelect" onchange="fetchTerms(this.value)">
        <option value="">-- Select Class --</option>
        <?php while($row = $classes->fetch_assoc()): ?>
            <option value="<?= $row['classes'] ?>"><?= $row['classes'] ?></option>
        <?php endwhile; ?>
    </select>

    <div id="termDiv" style="display:none;">
        <label for="termSelect">Select Term:</label>
        <select id="termSelect" onchange="fetchAdmissionNos()">
            <option value="">-- Select Term --</option>
        </select>
    </div>

    <div id="admissionDiv" style="display:none;">
        <label for="admissionSelect">Select Admission No:</label>
        <select id="admissionSelect" onchange="fetchReport()">
            <option value="">-- Select Admission No --</option>
        </select>
    </div>

    <div id="reportDiv"></div>
    <div id="top3Div" style="margin-top: 40px;"></div>

    <script>
        function fetchTerms(selectedClass) {
            if (!selectedClass) return;

            fetch("fetch_terms.php?class=" + selectedClass)
                .then(res => res.json())
                .then(data => {
                    let termSelect = document.getElementById("termSelect");
                    termSelect.innerHTML = "<option value=''>-- Select Term --</option>";
                    data.forEach(term => {
                        termSelect.innerHTML += `<option value="${term}">${term}</option>`;
                    });
                    document.getElementById("termDiv").style.display = "block";
                });
        }

     function fetchAdmissionNos() {
    let selectedClass = document.getElementById("classSelect").value;
    let selectedTerm = document.getElementById("termSelect").value;
    if (!selectedClass || !selectedTerm) return;

    fetch(`fetch_admission.php?class=${selectedClass}&term=${selectedTerm}`)
        .then(res => res.json())
        .then(data => {
            let admissionSelect = document.getElementById("admissionSelect");
            admissionSelect.innerHTML = "<option value=''>-- Select Admission No --</option>";
            data.forEach(item => {
                admissionSelect.innerHTML += `<option value="${item.admission_no}">${item.name} (${item.admission_no})</option>`;
            });
            document.getElementById("admissionDiv").style.display = "block";
        
            fetchTop3();
        });
}

        function fetchReport() {
            let selectedClass = document.getElementById("classSelect").value;
            let selectedTerm = document.getElementById("termSelect").value;
            let selectedAdmission = document.getElementById("admissionSelect").value;

            fetch(`fetch_report.php?class=${selectedClass}&term=${selectedTerm}&adm=${selectedAdmission}`)
                .then(res => res.text())
                .then(html => {
                    document.getElementById("reportDiv").innerHTML = html;
                });
        }
        function fetchTop3() {
    let selectedClass = document.getElementById("classSelect").value;
    let selectedTerm = document.getElementById("termSelect").value;
    if (!selectedClass || !selectedTerm) return;

    fetch(`top_students.php?class=${selectedClass}&term=${selectedTerm}`)
        .then(res => res.text())
        .then(html => {
            document.getElementById("top3Div").innerHTML = html;
        });
}
    </script>
	</div>
		</div>
		<!--end page wrapper -->
      
      
      
      
      
      
       
		<!--end page wrapper -->
		<!--start overlay-->
		<div class="overlay toggle-icon"></div>
		<!--end overlay-->
		<!--Start Back To Top Button--> <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
		<!--End Back To Top Button-->
		<footer class="page-footer">
			<p class="mb-0">Copyright © 2021. All right reserved.</p>
		</footer>
	</div>
	<!--end wrapper-->
	<!--start switcher-->
	<?php include 'includes/customiser.php'; ?>

	<!--end switcher-->
	<!-- Bootstrap JS -->
	<script src="assets/js/bootstrap.bundle.min.js"></script>
	<!--plugins-->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/plugins/simplebar/js/simplebar.min.js"></script>
	<script src="assets/plugins/metismenu/js/metisMenu.min.js"></script>
	<script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
	<script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
	<script src="assets/plugins/datatable/js/jquery.dataTables.min.js"></script>
	<script src="assets/plugins/datatable/js/dataTables.bootstrap5.min.js"></script>
	<!--app JS-->
	<script src="assets/js/app.js"></script>
	<script>
		$(document).ready(function() {
			$('#example').DataTable();
		  } );
	</script>
	<script>
		$(document).ready(function() {
			var table = $('#example2').DataTable( {
				lengthChange: false,
				buttons: [ 'copy', 'excel', 'pdf', 'print']
			} );
		 
			table.buttons().container()
				.appendTo( '#example2_wrapper .col-md-6:eq(0)' );
		} );
	</script>
</body>


</html>
