<?php ob_start();?>
<!-- sidebar.php -->
<style>
.sideNav{
  background: #1B263B;
  transition: transform 0.3s ease-in-out;
}
.the-logo{
  background: #E67817;
  margin-top:-11px;
}
.nav-links a{
	color: #fff;
}
@media(max-width: 992px){
  .the-logo img{
    width: 30px;
    height: 30px;
    margin-left: -22px!important;
  }
  .sideNav a{
    font-size: 15px;
  }
  .the-logo span{
    font-size: 15px;
  }
}
</style>
<?php
if (isset($_SESSION['username'])) {
	$username = $_SESSION['username']; // username = email
	// Get staff Id
	$getstf = "SELECT staffId FROM staff WHERE email = ? ";
	$stmt = $pdo->prepare($getstf);
	$stmt->execute([$username]);
	$row = $stmt->fetch(PDO::FETCH_ASSOC);
	$adminId = $row['staffId'];
}else{
	header('Location:../login.php');
}

// Get the current academic session
$session_status = 'active';
$acaSession = "SELECT session_year FROM sessions WHERE status = ? ";
$sespdo = $pdo->prepare($acaSession);
$sespdo->execute([$session_status]);
$sessionRow = $sespdo->fetch(PDO::FETCH_ASSOC);
$current_session = $sessionRow['session_year'];

// Get the current term
$term_status = 'active';
$get_term = "SELECT term_title FROM terms WHERE status = ?";
$termpdo = $pdo->prepare($get_term);
$termpdo->execute([$term_status]);
$termRow = $termpdo->fetch(PDO::FETCH_ASSOC);
$current_term = $termRow['term_title'];

?>
<div class="sideNav" id="dropdown">
	<div class="the-links" style="margin-top: ;">
		<div class="the-logo" onclick="ShowNav()">
			<img src="logo/goodness.jpg">
			<span>Select Menu <i class=" fa fa-arrow-down"></i></span>
		</div>
		<div class="nav-links" id="dropLink">
			<a href="index.php" >
				<div class="side-inner">
					<i class="fa fa-tachometer-alt"></i> Dashboard
				</div>
			</a>
			<a href="staff.php">
				<div class="side-inner">
					<i class="fa fa-users-cog"></i> Staff Manag...
					<i class="fa fa-caret-down"></i>
				</div>
			</a>
		
			<!-- Display Report card since you are a classteacher -->
			
		    <a href="students.php">
		    	<div class="side-inner">
		    		<i class="fa fa-user-graduate"></i> Student Manag...
		    	</div>
		    </a>

		    <a href="add-class.php">
		    	<div class="side-inner">
		    		<i class="fa fa-chalkboard"></i> Classes
		    	</div>
		    </a>

		    <a href="subject.php">
			   	<div class="side-inner">
			   		<i class="fa fa-book"></i> Subjects
			   	</div>
		   	</a>

		   <a href="session.php">
			   	<div class="side-inner">
			   		<i class="fa fa-clock"></i> Sessions
			   	</div>
		   </a>

		   <a href="School_info.php">
		   	   	<div class="side-inner">
		   	   		<i class="fa fa-info-circle"></i> School Info
		   	   	</div>
		    </a>

		    <a href="package.php">
		    	<div class="side-inner">
		    		<i class="fa fa-money-bill-wave"></i> Payment
		    	</div>
		    </a>

		    <!-- <a href="settings.php">
		 	   	<div class="side-inner">
		 	   		<i class="fa fa-chart-bar"></i> Reports
		 	   	</div>
		    </a> -->

		   <!-- <a href="settings.php">
			   	<div class="side-inner">
			   		<i class="fa fa-cogs"></i> Settings
			   	</div>
		   </a> -->

			<a href="../logout.php">
				<div class="side-inner">
					<i class="fa fa-user-circle"></i> Logout
				</div>
			</a>
		</div>
	</div>
    
</div>

<style>
	.dsp-std{
		width: 100%;
		height: 0;
		background: #1F282F;
		overflow: hidden;
		transition: height 0.4s ease;
		box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	}
	.dsp-std.expanded{
		
	}
	.inner-links{
		display: flex;
		flex-direction: column;
		/*padding: 10px;*/
		padding-left: 10px;
		padding-right: 10px;
	}
	.inner-links a{
		color: #fff;
		font-size: 15px;

	}
</style>
<script>
function DropClick() {
  const sidebar = document.getElementById('dropdown');
  sidebar.classList.toggle('active');
}

// Detect clicks outside sidebar (only on mobile)
document.addEventListener('click', function(event) {
  const sidebar = document.getElementById('dropdown');
  const menuBtn = document.getElementById('menuBtn'); // ✅ Now this exists

  // Only run on mobile
  if (window.innerWidth <= 992) {
    const clickInsideSidebar = sidebar.contains(event.target);
    const clickOnButton = menuBtn.contains(event.target);

    // If sidebar is open and click is outside both
    if (sidebar.classList.contains('active') && !clickInsideSidebar && !clickOnButton) {
      sidebar.classList.remove('active');
    }
  }
});
</script>
<script>
	function openStd() {
		const content = document.getElementById('openStud');

			if (content.classList.contains('expanded')) {
				// Get the current height before collapsing
				content.style.height = content.scrollHeight + 'px';

				// Force reflow to make sure browser registers the height
				content.offsetHeight; // This line is very important

				// Now collapse
				content.style.height = '0';
				content.classList.remove('expanded');
			} else {
				// Expand
				content.style.height = content.scrollHeight + 'px';
				content.classList.add('expanded');

				// After transition, reset to auto so resizing works naturally
				content.addEventListener('transitionend', function removeHeight() {
					if (content.classList.contains('expanded')) {
						content.style.height = 'auto';
					}
					content.removeEventListener('transitionend', removeHeight);
				});
			}
			
	}
	
	function ShowNav(){
		let dropLinks = document.getElementById('dropLink');
		dropLinks.classList.toggle('active');
	}

	function flexing(){
		const myDrops = document.getElementById('myDrop');
		myDrops.classList.toggle('active');
	}

</script>
<?php



?>
 