<?php
// Include database configuration
require_once __DIR__ . "/../database/db_config.php";
// Make sure we have a database connection
if (!isset($conn) || !($conn instanceof mysqli)) {
// Attempt to reconnect or initialize connection
require_once __DIR__ . "/../database/db_config.php";
}
// Start session if not already started
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
// Check if user has student privileges (handled via helper function)
require_faculty_privileges('../login.php');
// Get current page for highlighting active menu item
$current_page = basename($_SERVER['PHP_SELF']);
// Get user info
$user_id = $_SESSION['user_id'];
$user_query = "SELECT * FROM users WHERE id = ?";
$stmt = $conn->prepare($user_query);
$stmt->bind_param("i", $user_id);
$stmt->execute();
$user_result = $stmt->get_result();
$user = $user_result->fetch_assoc();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Dashboard - Popular Computer Institute</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- ApexCharts (for charts) -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- Custom Student CSS -->
<!-- <link rel="stylesheet" href="../assets/css/student.css"> -->
<!-- Faculty Admin CSS -->
<link rel="stylesheet" href="../assets/css/admin.css">
<style>
:root {
--primary-color: #4e73df;
--primary-dark: #224abe;
--secondary-color: #6c757d;
--success-color: #1cc88a;
--info-color: #36b9cc;
--warning-color: #f6c23e;
--danger-color: #e74a3b;
--light-color: #f8f9fc;
--dark-color: #5a5c69;
--transition-speed: 0.3s;
/* RGB values for transparency effects */
--primary-rgb: 78, 115, 223;
--secondary-rgb: 108, 117, 125;
--success-rgb: 28, 200, 138;
--info-rgb: 54, 185, 204;
--warning-rgb: 246, 194, 62;
--danger-rgb: 231, 74, 59;
--light-rgb: 248, 249, 252;
--dark-rgb: 90, 92, 105;
}
body {
background-color: var(--light-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
/* Sidebar Styles */
.sidebar {
min-height: 100vh;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
transition: all var(--transition-speed);
position: fixed;
left: 0;
top: 0;
width: 250px;
z-index: 1000;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
display: flex;
flex-direction: column;
/* overflow: hidden; */
max-height: 100vh;
}
.sidebar-header {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.sidebar-header .logo-img {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: cover;
transition: all var(--transition-speed);
}
.sidebar-header .logo-text {
font-weight: 600;
font-size: 18px;
transition: all 0.2s;
}
.sidebar.collapsed .sidebar-header {
justify-content: center;
}
.sidebar.collapsed .sidebar-header .logo-text {
display: none;
}
.sidebar.collapsed .sidebar-header .logo-img {
width: 40px;
height: 40px;
}
.sidebar-nav {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 80px);
padding-top: 10px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
/* Custom scrollbar for sidebar navigation */
.sidebar-nav::-webkit-scrollbar {
width: 2px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.sidebar .nav-link {
color: rgba(255, 255, 255, 0.8);
padding: 15px 20px;
margin: 5px 15px;
border-radius: 10px;
transition: all var(--transition-speed);
display: flex;
align-items: center;
white-space: nowrap;
}
.sidebar .nav-link:hover {
color: white;
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.sidebar .nav-link.active {
color: white;
background: rgba(255, 255, 255, 0.2);
font-weight: 600;
transform: translateX(5px);
}
.sidebar .nav-link i {
min-width: 30px;
text-align: center;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
}
.sidebar .nav-link.active i {
color: white;
}
.sidebar .nav-item {
margin-bottom: 5px;
}
/* Sidebar Toggle */
.sidebar-toggler {
position: absolute;
right: -15px;
top: 25px;
padding: 2px;
background: white;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
line-height: 24px;
color: var(--primary-color);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 1001;
transition: all var(--transition-speed);
}
.sidebar.collapsed {
width: 80px;
}
.sidebar.collapsed .sidebar-header h4,
.sidebar.collapsed .nav-link span {
display: none;
}
.sidebar.collapsed .nav-link {
padding: 15px 0;
justify-content: center;
margin: 5px 10px;
}
.fixed-bottom {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
.sidebar.collapsed .nav-link i {
margin-right: 0;
}
.sidebar.collapsed .sidebar-toggler {
transform: rotate(180deg);
}
/* Main Content Styles */
.main-content {
margin-left: 250px;
padding: 20px;
transition: all var(--transition-speed);
min-height: 100vh;
}
.main-content.expanded {
margin-left: 70px;
}
/* Topbar Styles */
.topbar {
background: white;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
border-radius: 15px;
padding: 15px 25px;
margin-bottom: 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
.topbar h4 {
margin: 0;
color: var(--dark-color);
font-weight: 600;
}
.topbar .search-box {
position: relative;
max-width: 300px;
}
.topbar .search-box input {
border-radius: 50px;
padding-left: 40px;
background-color: var(--light-color);
border: none;
transition: all var(--transition-speed);
}
.topbar .search-box input:focus {
box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
}
.topbar .search-box i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--secondary-color);
}
/* Card Styles */
.card {
border: none;
border-radius: 15px;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
margin-bottom: 25px;
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 0.5rem 2rem 0 rgba(58, 59, 69, 0.15);
}
.card-header {
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-header h5 {
margin: 0;
font-weight: 600;
color: var(--dark-color);
}
.card-body {
padding: 25px;
}
/* Responsive Adjustments */
@media (max-width: 992px) {
.sidebar {
width: 70px;
}
.sidebar .sidebar-header h4,
.sidebar .nav-link span {
display: none;
}
.sidebar .nav-link {
padding: 15px 0;
justify-content: center;
margin: 5px;
}
.sidebar .nav-link i {
margin-right: 0;
}
.main-content {
margin-left: 70px;
}
.topbar {
padding: 15px;
}
.topbar .search-box {
display: none;
}
}
@media (max-width: 576px) {
.user-profile .user-info {
display: none;
}
.topbar h4 {
font-size: 1.2rem;
}
}
/* Sidebar Dropdown Styles */
.sidebar-dropdown .submenu-icon {
transition: transform 0.3s;
font-size: 10px;
}
.sidebar-dropdown .nav-link[aria-expanded="true"] .submenu-icon {
transform: rotate(180deg);
}
.sidebar-submenu {
list-style: none;
padding-left: 15px;
}
.sidebar-submenu .nav-link {
padding: 10px 15px;
font-size: 0.9rem;
}
.sidebar-submenu .nav-link i {
font-size: 0.9rem;
min-width: 25px;
}
.sidebar-submenu .nav-link:hover {
transform: translateX(3px);
}
.sidebar-submenu .nav-link.active {
transform: translateX(3px);
}
@media (max-width: 992px) {
.sidebar-submenu {
padding-left: 5px;
}
.sidebar-submenu .nav-link span {
display: none;
}
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<button type="button" class="sidebar-toggler" id="sidebarToggler" aria-label="Toggle Sidebar">
<i class="fas fa-chevron-left"></i>
</button>
<div class="sidebar-header">
<img src="../assets/img/logo_1743140535_pc.png" alt="Logo" class="logo-img">
<div class="logo-text">Faculty Panel</div>
</div>
<div class="sidebar-nav">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>" href="index.php">
<i class="fas fa-home"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'courses.php' ? 'active' : ''; ?>" href="courses.php">
<i class="fas fa-book"></i>
<span>Courses</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'students.php' ? 'active' : ''; ?>" href="students.php">
<i class="fas fa-users"></i>
<span>Students</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'attendance.php' ? 'active' : ''; ?>" href="attendance.php">
<i class="fas fa-file-alt"></i>
<span>Attendance</span>
</a>
</li>
<!-- Add test dropdown -->
<li class="nav-item sidebar-dropdown">
<a class="nav-link <?php echo in_array(basename($_SERVER['PHP_SELF']), ['reports.php', 'analytics.php']) ? 'active' : ''; ?>" href="#reportSubmenu" data-bs-toggle="collapse" aria-expanded="<?php echo in_array(basename($_SERVER['PHP_SELF']), ['reports.php', 'analytics.php']) ? 'true' : 'false'; ?>">
<i class="fas fa-chart-bar"></i>
<span>Reports</span>
<i class="fas fa-chevron-down ms-auto submenu-icon"></i>
</a>
<ul class="collapse <?php echo in_array(basename($_SERVER['PHP_SELF']), ['reports.php', 'analytics.php']) ? 'show' : ''; ?> sidebar-submenu" id="reportSubmenu">
<li class="nav-item">
<a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'reports.php' ? 'active' : ''; ?>" href="reports.php">
<i class="fas fa-file-alt"></i>
<span>General Reports</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'analytics.php' ? 'active' : ''; ?>" href="analytics.php">
<i class="fas fa-chart-line"></i>
<span>Analytics</span>
</a>
</li>
</ul>
</li>
<li class="nav-item fixed-bottom">
<a class="nav-link" href="../logout.php">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Main Content -->
<div class="main-content" id="mainContent">
<?php include_once 'topbar.php'; ?>
<!-- Page Content Starts Here -->
<div class="container-fluid">
</body>
</html>
