<?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">


<?php
// Fetch unique teachers
$teachers = $conn->query("SELECT DISTINCT Teacher FROM end_term_report");
?>

  <style>
    body { font-family: Arial; padding: 20px; }
    select, table { margin-top: 15px; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
  </style>

  <h2>Select Teacher</h2>
  <select id="teacherSelect">
    <option value="">-- Select Teacher --</option>
    <?php while($row = $teachers->fetch_assoc()): ?>
      <option value="<?= $row['Teacher'] ?>"><?= $row['Teacher'] ?></option>
    <?php endwhile; ?>
  </select>

  <div id="termDiv" style="display:none;">
    <h2>Select Term</h2>
    <select id="termSelect"></select>
  </div>

  <div id="classDiv" style="display:none;">
    <h2>Select Class</h2>
    <select id="classSelect"></select>
  </div>

  <div id="reportDiv" style="display:none;">
    <h2>Report Summary</h2>
    <table id="reportTable">
      <thead>
  <tr>
    <th>Admission No</th>
    <th>Student Name</th>
    <th>Subject</th>
    <th>CA Test</th>
    <th>Exam Score</th>
    <th>Total</th>
  </tr>
</thead>
<tbody></tbody>
    </table>
    
    
    
    
  </div>

  <script>
    const teacherSelect = document.getElementById('teacherSelect');
    const termSelect = document.getElementById('termSelect');
    const classSelect = document.getElementById('classSelect');
    const termDiv = document.getElementById('termDiv');
    const classDiv = document.getElementById('classDiv');
    const reportDiv = document.getElementById('reportDiv');
    const reportTable = document.querySelector('#reportTable tbody');

    teacherSelect.onchange = () => {
      const teacher = teacherSelect.value;
      termSelect.innerHTML = '';
      classSelect.innerHTML = '';
      reportTable.innerHTML = '';
      if (!teacher) return;

      fetch(`fet_terms.php?teacher=${teacher}`)
        .then(res => res.json())
        .then(data => {
          if (data.length) {
            termDiv.style.display = 'block';
            termSelect.innerHTML = '<option value="">-- Select Term --</option>';
            data.forEach(term => {
              termSelect.innerHTML += `<option value="${term}">${term}</option>`;
            });
          }
        });
    };

    termSelect.onchange = () => {
      const teacher = teacherSelect.value;
      const term = termSelect.value;
      classSelect.innerHTML = '';
      reportTable.innerHTML = '';
      if (!term) return;

      fetch(`fet_classes.php?teacher=${teacher}&term=${term}`)
        .then(res => res.json())
        .then(data => {
          if (data.length) {
            classDiv.style.display = 'block';
            classSelect.innerHTML = '<option value="">-- Select Class --</option>';
            data.forEach(cls => {
              classSelect.innerHTML += `<option value="${cls}">${cls}</option>`;
            });
          }
        });
    };

    classSelect.onchange = () => {
      const teacher = teacherSelect.value;
      const term = termSelect.value;
      const classes = classSelect.value;
      if (!classes) return;

      fetch(`fet_reports.php?teacher=${teacher}&term=${term}&classes=${classes}`)
        .then(res => res.json())
        .then(data => {
         reportDiv.style.display = 'block';
        reportTable.innerHTML = '';
            
            let currentStudent = '';
            data.forEach(row => {
              const studentKey = `${row.Admission_no} - ${row.student_name}`;
            
              if (currentStudent !== studentKey) {
                currentStudent = studentKey;
            
                // Add a row for the student header
                reportTable.innerHTML += `
                  <tr style="background:#f0f0f0; font-weight:bold;">
                    <td colspan="6">${row.student_name} (${row.Admission_no})</td>
                  </tr>
                  <tr>
                    <th>Subject</th>
                    <th>CA Test</th>
                    <th>Exam Score</th>
                    <th>Total</th>
                    <th colspan="2"></th>
                  </tr>
                `;
              }
            
              // Add the subject row under the student
              reportTable.innerHTML += `
                <tr>
                  <td>${row.subject}</td>
                  <td>${row.ca_test}</td>
                  <td>${row.exam_score}</td>
                  <td>${row.total}</td>
                  <td colspan="2"></td>
                </tr>
              `;
            });

        });
    };
  </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>
  
  
  
</body>
</html>
