<?php
if (!isset($title)) {
    $title = 'QR Attendance System';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $title; ?></title>
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
    
    <style>
        :root {
            --primary: #549239;
            --secondary: #504e2c;
            --success: #27ae60;
            --danger: #e74c3c;
            --warning: #f39c12;
            --light: #f8f9fa;
            --dark: #343a40;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333333;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        
        /* Main container */
        .main-container {
            display: flex;
            min-height: 100vh;
        }
        
        /* Sidebar */
        .sidebar {
            width: 250px;
            background: #37502c;
            color: white;
            transition: all 0.3s;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            z-index: 1000;
        }
        
        .sidebar-header {
            padding: 20px 15px;
            background: rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .user-info {
            text-align: center;
            padding: 20px 10px;
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            border: 3px solid var(--primary);
        }
        
        .user-avatar i {
            font-size: 2.5rem;
        }
        
        .sidebar .nav-link {
            color: #b6c3b0;
            padding: 12px 20px;
            margin: 2px 10px;
            border-radius: 8px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
        }
        
        .sidebar .nav-link:hover {
            color: white;
            background: rgba(169, 219, 52, 0.2);
            transform: translateX(5px);
        }
        
        .sidebar .nav-link.active {
            color: white;
            background: var(--primary);
            box-shadow: 0 4px 15px rgba(9, 109, 9, 0.4);
        }
        
        .sidebar .nav-link i {
            width: 25px;
            font-size: 1.2rem;
            margin-right: 10px;
        }
        
        .sidebar .nav-item {
            margin-bottom: 5px;
        }
        
        /* Main content area */
        .main-content {
            flex: 1;
            margin-left: 250px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* Top navbar */
        .top-navbar {
            background: white;
            border-bottom: 1px solid #e3e6f0;
            padding: 0.8rem 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 999;
        }
        
        .navbar-brand {
            color: var(--primary);
            font-weight: 600;
            font-size: 1.5rem;
        }
        
        .time-display {
            font-family: 'Courier New', monospace;
            font-weight: 500;
        }
        
        /* Content wrapper */
        .content-wrapper {
            flex: 1;
            padding: 20px;
            background: #f5f7fb;
        }
        
        /* Cards */
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }
        
        .card-header {
            background:#166b0e;
            color: white;
            border-radius: 10px 10px 0 0;
            border: none;
            padding: 15px 20px;
        }
        
        .card-header h6 {
            margin: 0;
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        /* Buttons */
        .btn {
            border-radius: 8px;
            padding: 8px 20px;
            font-weight: 500;
            border: none;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #205e03;
            border: none;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* Badges */
        .badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-weight: 500;
        }
        
        /* Tables */
        .table {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .table thead th {
            border-bottom: 2px solid #e3e6f0;
            font-weight: 700;
            color: var(--secondary);
            background: #f8f9fa;
            padding: 15px;
        }
        
        .table tbody td {
            padding: 12px 15px;
            vertical-align: middle;
        }
        
        .table tbody tr:hover {
            background-color: rgba(155, 219, 52, 0.05);
        }
        
        /* Form styles */
        .form-control, .form-select {
            border-radius: 8px;
            padding: 10px 15px;
            border: 1px solid #dee2e6;
            transition: all 0.3s;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 0.25rem rgba(155, 219, 52, 0.25);
        }
        
        /* Modal styles */
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .modal-header {
            background: #56b32b;
            color: white;
            border-radius: 10px 10px 0 0;
            padding: 15px 20px;
        }
        
        /* Stats cards */
        .stat-card {
            border-left: 4px solid var(--primary);
        }
        
        .stat-card .card-body {
            padding: 20px;
        }
        
        .stat-card i {
            font-size: 2.5rem;
            opacity: 0.8;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .sidebar {
                margin-left: -250px;
                position: fixed;
                z-index: 1001;
            }
            
            .sidebar.show {
                margin-left: 0;
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .top-navbar {
                padding: 0.8rem 1rem;
            }
        }
        
        /* Animation for alerts */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .alert {
            animation: fadeIn 0.3s ease-out;
            border: none;
            border-radius: 8px;
        }
        
        /* Action buttons */
        .action-buttons {
            display: flex;
            gap: 5px;
        }
        
        .action-buttons .btn {
            padding: 5px 10px;
            font-size: 0.875rem;
        }
        
        /* Status badges */
        .status-active {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-inactive {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        /* Search box */
        .search-box {
            position: relative;
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
        }
        
        .search-box input {
            padding-left: 40px;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h4 class="text-center mb-0">
                    <i class="bi bi-qr-code-scan me-2"></i>
                    AMS
                </h4>
            </div>
            
            <!-- User Info -->
            <div class="user-info">
                <div class="user-avatar">
                    <i class="bi bi-person-circle"></i>
                </div>
                <h5 class="mb-1"><?php echo htmlspecialchars($_SESSION['full_name'] ?? 'User'); ?></h5>
                <small class="text-light">
                    <?php 
                    $role = $_SESSION['role'] ?? 'user';
                    $role_badge = '';
                    switch($role) {
                        case 'admin': $role_badge = 'danger'; break;
                        case 'teacher': $role_badge = 'success'; break;
                        case 'student': $role_badge = 'info'; break;
                        default: $role_badge = 'secondary';
                    }
                    ?>
                    <span class="badge bg-<?php echo $role_badge; ?>">
                        <?php echo ucfirst($role); ?>
                    </span>
                </small>
            </div>
            
            <!-- Navigation -->
            <div class="sidebar-nav px-2">
                <ul class="nav flex-column">
                    <?php if ($_SESSION['role'] === 'admin'): ?>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'active' : ''; ?>" href="dashboard.php">
                                <i class="bi bi-speedometer2"></i> Dashboard
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'users.php' ? 'active' : ''; ?>" href="users.php">
                                <i class="bi bi-people-fill"></i> User
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'manage_students.php' ? 'active' : ''; ?>" href="manage_students.php">
                                <i class="bi bi-people"></i> Students
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'manage_activities.php' ? 'active' : ''; ?>" href="manage_activities.php">
                                <i class="bi bi-calendar-event"></i> Activities
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'attendance.php' ? 'active' : ''; ?>" href="attendance.php">
                                <i class="bi bi-qr-code-scan"></i> Scan QR
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'reports.php' ? 'active' : ''; ?>" href="reports.php">
                                <i class="bi bi-file-earmark-text"></i> Reports
                            </a>
                        </li>
                        
                    <?php elseif ($_SESSION['role'] === 'teacher'): ?>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'active' : ''; ?>" href="dashboard.php">
                                <i class="bi bi-speedometer2"></i> Dashboard
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'attendance.php' ? 'active' : ''; ?>" href="attendance.php">
                                <i class="bi bi-qr-code-scan"></i> Take Attendance
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'reports.php' ? 'active' : ''; ?>" href="reports.php">
                                <i class="bi bi-file-earmark-text"></i> Reports
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'activities.php' ? 'active' : ''; ?>" href="activities.php">
                                <i class="bi bi-calendar-event"></i> My Activities
                            </a>
                        </li>
                        
                    <?php else: ?>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'active' : ''; ?>" href="dashboard.php">
                                <i class="bi bi-speedometer2"></i> Dashboard
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'profile.php' ? 'active' : ''; ?>" href="profile.php">
                                <i class="bi bi-person"></i> My Profile
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'attendance.php' ? 'active' : ''; ?>" href="attendance.php">
                                <i class="bi bi-clock-history"></i> Attendance
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'qr_code.php' ? 'active' : ''; ?>" href="qr_code.php">
                                <i class="bi bi-qr-code"></i> My QR Code
                            </a>
                        </li>
                    <?php endif; ?>
                </ul>
                
                <!-- Logout -->
                <ul class="nav flex-column mt-4">
                    <li class="nav-item">
                        <a class="nav-link text-danger" href="../auth/logout.php">
                            <i class="bi bi-box-arrow-right"></i> Logout
                        </a>
                    </li>
                </ul>
            </div>
        </aside>
        
        <!-- Main Content -->
        <main class="main-content">
            <!-- Top Navbar -->
            <nav class="top-navbar navbar navbar-expand-lg">
                <div class="container-fluid">
                    <!-- Mobile sidebar toggle -->
                    <button class="btn btn-outline-primary d-md-none me-2" type="button" id="sidebarToggle">
                        <i class="bi bi-list"></i>
                    </button>
                    
                    <!-- Page title -->
                    <span class="navbar-brand">
                        <?php echo htmlspecialchars($title); ?>
                    </span>
                    
                    <!-- Time and notifications -->
                    <div class="d-flex align-items-center">
                        <div class="time-display me-3">
                            <i class="bi bi-clock me-1"></i>
                            <span id="current-time"><?php echo date('h:i:s A'); ?></span>
                        </div>
                        <div class="date-display me-3">
                            <i class="bi bi-calendar-check me-1"></i>
                            <?php echo date('F j, Y'); ?>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="bi bi-gear"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="profile.php"><i class="bi bi-person me-2"></i> Profile</a></li>
                                <li><a class="dropdown-item" href="change_password.php"><i class="bi bi-lock me-2"></i> Change Password</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" href="../auth/logout.php"><i class="bi bi-box-arrow-right me-2"></i> Logout</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            
            <!-- Page Content -->
            <div class="content-wrapper">
                <!-- Content will be inserted here -->

    <?php
    // Check for session messages
    if (isset($_SESSION['message'])) {
        $message_type = $_SESSION['message_type'] ?? 'success';
        ?>
        <div class="alert alert-<?php echo $message_type; ?> alert-dismissible fade show" role="alert">
            <?php echo $_SESSION['message']; ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <?php
        unset($_SESSION['message']);
        unset($_SESSION['message_type']);
    }
?>
