<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include "../include/config.php";

// Check if student is logged in
if (!isset($_SESSION['studentid'])) {
    header("location:../index.php");
    exit();
}

$student_id = $_SESSION['studentid'];
$student_name = $_SESSION['studentname'] ?? 'Student';
$intake = $_SESSION['intake'] ?? '';
$program = $_SESSION['program'] ?? '';

// Handle joining meeting
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['join_meeting'])) {
    $meeting_id = mysqli_real_escape_string($conn, $_POST['meeting_id']);
    
    // Check if meeting exists - ALWAYS ALLOW JOINING, NO TIME RESTRICTIONS
    $meetingQuery = "SELECT * FROM meetings 
                    WHERE meeting_id = '$meeting_id' 
                    AND program = '$program' 
                    AND intake = '$intake'";
    
    $meetingResult = mysqli_query($conn, $meetingQuery);
    
    if (mysqli_num_rows($meetingResult) > 0) {
        $meeting = mysqli_fetch_assoc($meetingResult);
        
        // Check if meeting requires password
        if (!empty($meeting['meeting_password'])) {
            $entered_password = mysqli_real_escape_string($conn, $_POST['meeting_password'] ?? '');
            
            if ($entered_password !== $meeting['meeting_password']) {
                $message = "<div class='alert alert-danger alert-dismissible fade show' role='alert'>
                            <i class='fas fa-times-circle me-2'></i>Incorrect meeting password!
                            <button type='button' class='btn-close' data-bs-dismiss='alert'></button>
                          </div>";
            } else {
                // Password correct, proceed to meeting
                $_SESSION['current_meeting'] = $meeting_id;
                header("Location: student_meeting_room.php?meeting_id=$meeting_id");
                exit();
            }
        } else {
            // No password required
            $_SESSION['current_meeting'] = $meeting_id;
            header("Location: student_meeting_room.php?meeting_id=$meeting_id");
            exit();
        }
    } else {
        $message = "<div class='alert alert-danger alert-dismissible fade show' role='alert'>
                    <i class='fas fa-times-circle me-2'></i>Meeting not found!
                    <button type='button' class='btn-close' data-bs-dismiss='alert'></button>
                  </div>";
    }
}

// Get filter values
$filter_course = $_GET['course'] ?? '';

// Get available courses for student
$available_courses_query = "SELECT DISTINCT rc.course_name 
                          FROM registered_course rc
                          WHERE rc.student_id = '$student_id' 
                          AND rc.course_name IS NOT NULL 
                          AND rc.course_name != ''
                          ORDER BY rc.course_name";
$available_courses_result = mysqli_query($conn, $available_courses_query);

// Get ALL meetings for student's program and intake - NO TIME FILTERS
$filter_conditions = ["program = '$program'", "intake = '$intake'"];

if (!empty($filter_course)) {
    $filter_conditions[] = "course_name LIKE '%$filter_course%'";
}

$filter_sql = '';
if (!empty($filter_conditions)) {
    $filter_sql = "WHERE " . implode(' AND ', $filter_conditions);
}

// Get all meetings - ALL ARE CONSIDERED "LIVE"
$meetings_query = "SELECT * FROM meetings 
                  $filter_sql 
                  ORDER BY scheduled_time DESC";

$meetings_result = mysqli_query($conn, $meetings_query);

// Get meeting statistics
$total_meetings_query = "SELECT COUNT(*) as total FROM meetings 
                        WHERE program = '$program' 
                        AND intake = '$intake'";
$total_meetings_result = mysqli_query($conn, $total_meetings_query);
$total_meetings = mysqli_fetch_assoc($total_meetings_result)['total'] ?? 0;

// Get active meetings count (for statistics)
$active_meetings_query = "SELECT COUNT(*) as active FROM meetings 
                         WHERE program = '$program' 
                         AND intake = '$intake' 
                         AND is_active = 1";
$active_meetings_result = mysqli_query($conn, $active_meetings_query);
$active_meetings = mysqli_fetch_assoc($active_meetings_result)['active'] ?? 0;
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Classes - Always Available</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #4f46e5;
            --secondary: #7c3aed;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --dark: #1f2937;
            --light: #f9fafb;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: var(--dark);
        }
        
        .content {
            margin-left: 240px;
            padding: 25px;
            min-height: 100vh;
            transition: all 0.3s ease;
        }
        
        @media (max-width: 1200px) {
            .content {
                margin-left: 0;
                padding: 20px;
            }
        }
        
        /* Header Section - Modern Glass Effect */
        .header-section {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .header-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
            border-radius: 0 20px 0 0;
        }
        
        .welcome-text h1 {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }
        
        .welcome-text p {
            color: #6b7280;
            font-size: 1.1rem;
            margin-bottom: 0;
        }
        
        .user-badge {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 15px 25px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
        }
        
        /* Stats Cards - Modern Design */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .stats-card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .stats-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
            border-color: var(--primary);
        }
        
        .stats-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }
        
        .stats-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: white;
            box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
        }
        
        .stats-number {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
            margin: 15px 0;
        }
        
        .stats-label {
            color: #6b7280;
            font-size: 1rem;
            font-weight: 500;
        }
        
        /* Filter Section - Modern */
        .filter-section {
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title i {
            color: var(--primary);
            font-size: 1.8rem;
        }
        
        /* Classes Grid - Modern Card Design */
        .classes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            .classes-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .class-card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border: 2px solid transparent;
        }
        
        .class-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
            border-color: var(--primary);
        }
        
        .class-card.live {
            border-left: 5px solid var(--success);
        }
        
        .class-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }
        
        .class-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        
        .class-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark);
            line-height: 1.3;
            flex: 1;
        }
        
        .live-badge {
            background: linear-gradient(135deg, var(--success) 0%, #34d399 100%);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }
        
        .class-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .meta-badge {
            background: #f3f4f6;
            color: #4b5563;
            padding: 8px 16px;
            border-radius: 15px;
            font-size: 0.9rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .meta-badge i {
            font-size: 1rem;
        }
        
        .class-description {
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 25px;
            font-size: 1rem;
        }
        
        .class-time {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #9ca3af;
            font-size: 0.95rem;
            margin-bottom: 20px;
            padding: 12px;
            background: #f9fafb;
            border-radius: 12px;
        }
        
        .class-time i {
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .class-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
        }
        
        .instructor-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .instructor-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 1rem;
        }
        
        .instructor-name {
            font-weight: 500;
            color: var(--dark);
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
            color: white;
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-outline:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 80px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            margin-top: 30px;
        }
        
        .empty-icon {
            font-size: 5rem;
            color: #d1d5db;
            margin-bottom: 25px;
        }
        
        .empty-state h3 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 15px;
        }
        
        .empty-state p {
            color: #6b7280;
            font-size: 1.1rem;
            max-width: 500px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        /* Modal Styling */
        .modal-content {
            border-radius: 20px;
            border: none;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border-radius: 20px 20px 0 0;
            padding: 25px;
            border: none;
        }
        
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .modal-body {
            padding: 30px;
        }
        
        /* Form Controls */
        .form-control, .form-select {
            padding: 15px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        
        /* Toast Notification */
        .toast {
            border-radius: 12px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .toast-header {
            background: linear-gradient(135deg, var(--success) 0%, #34d399 100%);
            color: white;
            border-radius: 12px 12px 0 0;
            padding: 15px 20px;
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }
        
        /* Animation for cards */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .class-card {
            animation: fadeInUp 0.6s ease forwards;
        }
        
        .class-card:nth-child(1) { animation-delay: 0.1s; }
        .class-card:nth-child(2) { animation-delay: 0.2s; }
        .class-card:nth-child(3) { animation-delay: 0.3s; }
        .class-card:nth-child(4) { animation-delay: 0.4s; }
        .class-card:nth-child(5) { animation-delay: 0.5s; }
        .class-card:nth-child(6) { animation-delay: 0.6s; }
    </style>
</head>
<body>
    <?php include "../include/nav.php"; ?>
    
    <div class="content">
        <div class="container-fluid">
            <!-- Modern Header Section -->
            <div class="header-section">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="welcome-text">
                            <h1>Welcome to Online Classes</h1>
                            <p>Join virtual classrooms anytime. All classes are available 24/7!</p>
                        </div>
                    </div>
                    <div class="col-md-4 text-md-end">
                        <div class="user-badge d-inline-block">
                            <div class="d-flex align-items-center gap-3">
                                <div class="instructor-avatar">
                                    <?php echo strtoupper(substr($student_name, 0, 1)); ?>
                                </div>
                                <div class="text-start">
                                    <div class="fw-bold"><?php echo htmlspecialchars($student_name); ?></div>
                                    <div class="small opacity-75"><?php echo htmlspecialchars($program); ?></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <?php if (isset($message)) echo $message; ?>

            <!-- Modern Statistics -->
            <div class="stats-grid">
                <div class="stats-card">
                    <div class="stats-icon">
                        <i class="fas fa-video"></i>
                    </div>
                    <div class="stats-number"><?php echo $total_meetings; ?></div>
                    <div class="stats-label">Total Classes Available</div>
                </div>
                
                <div class="stats-card">
                    <div class="stats-icon">
                        <i class="fas fa-play-circle"></i>
                    </div>
                    <div class="stats-number"><?php echo $active_meetings; ?></div>
                    <div class="stats-label">Active Classes</div>
                </div>
                
                <div class="stats-card">
                    <div class="stats-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stats-number">24/7</div>
                    <div class="stats-label">Access Anytime</div>
                </div>
            </div>

            <!-- Filter Section -->
            <div class="filter-section">
                <div class="section-title">
                    <i class="fas fa-filter"></i>
                    Filter Classes
                </div>
                <form method="GET" class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Select Course</label>
                        <select name="course" class="form-select">
                            <option value="">All Courses</option>
                            <?php 
                            if ($available_courses_result && mysqli_num_rows($available_courses_result) > 0):
                                while ($course = mysqli_fetch_assoc($available_courses_result)): 
                            ?>
                                <option value="<?php echo htmlspecialchars($course['course_name']); ?>" 
                                    <?php echo ($filter_course == $course['course_name']) ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($course['course_name']); ?>
                                </option>
                            <?php 
                                endwhile;
                            endif; 
                            ?>
                        </select>
                    </div>
                    <div class="col-md-6 d-flex align-items-end">
                        <button type="submit" class="btn-primary w-100">
                            <i class="fas fa-search me-2"></i>Apply Filter
                        </button>
                    </div>
                </form>
            </div>

            <!-- All Classes Section -->
            <div>
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="section-title">
                        <i class="fas fa-list"></i>
                        All Available Classes
                    </div>
                    <div class="text-muted">
                        Showing <?php echo mysqli_num_rows($meetings_result); ?> classes
                    </div>
                </div>
                
                <?php if ($meetings_result && mysqli_num_rows($meetings_result) > 0): ?>
                    <div class="classes-grid">
                        <?php 
                        while ($meeting = mysqli_fetch_assoc($meetings_result)): 
                            $meeting_time = strtotime($meeting['scheduled_time']);
                        ?>
                            <div class="class-card live">
                                <div class="class-header">
                                    <h3 class="class-title"><?php echo htmlspecialchars($meeting['meeting_title']); ?></h3>
                                    <div class="live-badge">
                                        <i class="fas fa-play-circle"></i>
                                        ALWAYS LIVE
                                    </div>
                                </div>
                                
                                <div class="class-meta">
                                    <div class="meta-badge">
                                        <i class="fas fa-book"></i>
                                        <?php echo htmlspecialchars($meeting['course_code']); ?>
                                    </div>
                                    <div class="meta-badge">
                                        <i class="fas fa-graduation-cap"></i>
                                        <?php echo htmlspecialchars($meeting['program']); ?>
                                    </div>
                                    <div class="meta-badge">
                                        <i class="fas fa-calendar"></i>
                                        <?php echo htmlspecialchars($meeting['intake']); ?>
                                    </div>
                                </div>
                                
                                <p class="class-description">
                                    <?php echo htmlspecialchars($meeting['meeting_description'] ?: 'Join this online class for interactive learning and discussions.'); ?>
                                </p>
                                
                                <div class="class-time">
                                    <i class="fas fa-clock"></i>
                                    <div>
                                        <div>Scheduled: <?php echo date('F j, Y', $meeting_time); ?></div>
                                        <div class="small"><?php echo date('h:i A', $meeting_time); ?></div>
                                    </div>
                                </div>
                                
                                <div class="class-actions">
                                    <div class="instructor-info">
                                        <div class="instructor-avatar">
                                            <?php echo strtoupper(substr($meeting['staff_name'], 0, 1)); ?>
                                        </div>
                                        <div>
                                            <div class="instructor-name"><?php echo htmlspecialchars($meeting['staff_name']); ?></div>
                                            <div class="small text-muted">Instructor</div>
                                        </div>
                                    </div>
                                    
                                    <div class="action-buttons">
                                        <?php if (!empty($meeting['meeting_password'])): ?>
                                            <!-- Password protected meeting -->
                                            <button type="button" class="btn-primary" 
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#passwordModal<?php echo $meeting['meeting_id']; ?>">
                                                <i class="fas fa-key me-2"></i> Join
                                            </button>
                                        <?php else: ?>
                                            <!-- No password required -->
                                            <form method="POST" class="d-inline">
                                                <input type="hidden" name="meeting_id" value="<?php echo $meeting['meeting_id']; ?>">
                                                <button type="submit" name="join_meeting" class="btn-primary">
                                                    <i class="fas fa-sign-in-alt me-2"></i> Join Now
                                                </button>
                                            </form>
                                        <?php endif; ?>
                                        
                                        <button type="button" class="btn-outline" 
                                                onclick="copyMeetingLink('<?php echo $meeting['meeting_id']; ?>')"
                                                data-bs-toggle="tooltip" title="Copy meeting ID">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Password Modal -->
                            <?php if (!empty($meeting['meeting_password'])): ?>
                            <div class="modal fade" id="passwordModal<?php echo $meeting['meeting_id']; ?>" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">
                                                <i class="fas fa-lock me-2"></i>Enter Password
                                            </h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Enter the password to join: <strong><?php echo htmlspecialchars($meeting['meeting_title']); ?></strong></p>
                                            <form method="POST">
                                                <input type="hidden" name="meeting_id" value="<?php echo $meeting['meeting_id']; ?>">
                                                <div class="mb-4">
                                                    <label for="password<?php echo $meeting['meeting_id']; ?>" class="form-label fw-semibold">Class Password</label>
                                                    <input type="password" name="meeting_password" class="form-control" 
                                                           id="password<?php echo $meeting['meeting_id']; ?>" 
                                                           placeholder="Enter the class password" required>
                                                </div>
                                                <div class="d-grid">
                                                    <button type="submit" name="join_meeting" class="btn-primary">
                                                        <i class="fas fa-sign-in-alt me-2"></i> Join Class
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php endif; ?>
                            
                        <?php endwhile; ?>
                    </div>
                <?php else: ?>
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-video-slash"></i>
                        </div>
                        <h3>No Classes Available</h3>
                        <p>There are currently no virtual classes scheduled for your program and intake. Please check back later or contact your instructor for more information.</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // Copy meeting ID function
        function copyMeetingLink(meetingId) {
            navigator.clipboard.writeText(meetingId).then(() => {
                // Show modern notification
                const notification = document.createElement('div');
                notification.className = 'position-fixed bottom-0 end-0 p-4';
                notification.style.zIndex = '9999';
                notification.innerHTML = `
                    <div class="toast show" role="alert">
                        <div class="toast-header">
                            <strong class="me-auto"><i class="fas fa-check-circle me-2"></i>Copied!</strong>
                            <button type="button" class="btn-close" onclick="this.closest('.position-fixed').remove()"></button>
                        </div>
                        <div class="toast-body">
                            Meeting ID copied: <strong>${meetingId}</strong>
                        </div>
                    </div>
                `;
                document.body.appendChild(notification);
                
                // Auto-remove notification after 3 seconds
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.remove();
                    }
                }, 3000);
            }).catch(err => {
                console.error('Failed to copy: ', err);
            });
        }
        
        // Auto-focus password field in modals
        document.addEventListener('show.bs.modal', function(event) {
            const modal = event.target;
            const passwordInput = modal.querySelector('input[type="password"]');
            if (passwordInput) {
                setTimeout(() => {
                    passwordInput.focus();
                }, 500);
            }
        });
        
        // Add hover effect to cards
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.class-card');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-10px) scale(1.02)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
            
            // Auto-refresh page every 10 minutes
            setTimeout(() => {
                window.location.reload();
            }, 600000); // 10 minutes
        });
        
        // Add keyboard shortcut for quick join (Alt+J)
        document.addEventListener('keydown', function(e) {
            if (e.altKey && e.key === 'j') {
                const firstJoinButton = document.querySelector('.btn-primary');
                if (firstJoinButton) {
                    firstJoinButton.click();
                }
            }
        });
    </script>
</body>
</html>