<?php
// live-classes.php - Student Live Classes
require_once 'includes/config.php';

if(!isLoggedIn()) {
    header('Location: auth.php');
    exit;
}

$user_id = $_SESSION['user_id'];

// Get live classes - all and enrolled courses
$stmt = $pdo->query("
    SELECT lc.*, c.title_bn as course_name, u.full_name as instructor_name,
           (SELECT COUNT(*) FROM live_class_attendees WHERE live_class_id = lc.id AND user_id = $user_id) as has_joined
    FROM live_classes lc
    LEFT JOIN courses c ON lc.course_id = c.id
    LEFT JOIN users u ON lc.instructor_id = u.id
    WHERE lc.status IN ('scheduled', 'live')
    ORDER BY lc.scheduled_at ASC
");
$live_classes = $stmt->fetchAll();

// Get past classes
$stmt = $pdo->query("
    SELECT lc.*, c.title_bn as course_name, u.full_name as instructor_name
    FROM live_classes lc
    LEFT JOIN courses c ON lc.course_id = c.id
    LEFT JOIN users u ON lc.instructor_id = u.id
    WHERE lc.status = 'completed'
    ORDER BY lc.scheduled_at DESC LIMIT 10
");
$past_classes = $stmt->fetchAll();

// Record attendance
if(isset($_GET['join']) && isset($_GET['id'])) {
    $class_id = $_GET['id'];
    $stmt = $pdo->prepare("INSERT IGNORE INTO live_class_attendees (live_class_id, user_id) VALUES (?, ?)");
    $stmt->execute([$class_id, $user_id]);
}
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>লাইভ ক্লাস - বাংলা LMS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root {
            --primary: #6C5CE7;
            --g1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --g2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --g3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --dark: #1a1a2e;
            --shadow: 0 5px 25px rgba(0,0,0,0.08);
            --shadow-lg: 0 15px 45px rgba(0,0,0,0.12);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { background:#f0f2f8; font-family:'Segoe UI','Hind Siliguri',Arial,sans-serif; }
        
        .navbar { background:rgba(255,255,255,0.9); backdrop-filter:blur(15px); box-shadow:0 2px 15px rgba(0,0,0,0.06); padding:14px 0; position:sticky; top:0; z-index:1000; }
        .navbar-brand { font-weight:800; font-size:1.3rem; background:var(--g1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-decoration:none; }
        
        .container { max-width:1100px; margin:0 auto; padding:25px 20px; }
        
        .page-header {
            background:var(--g1); color:white; border-radius:20px; padding:30px;
            margin-bottom:25px; position:relative; overflow:hidden;
        }
        .page-header h3 { font-weight:700; position:relative; z-index:1; }
        .page-header p { opacity:0.9; position:relative; z-index:1; margin:0; }
        .page-header::after { content:''; position:absolute; right:-20px; top:-20px; width:120px; height:120px; background:rgba(255,255,255,0.1); border-radius:50%; }
        
        .class-card {
            background:white; border-radius:18px; padding:22px 25px;
            box-shadow:0 3px 12px rgba(0,0,0,0.05); margin-bottom:15px;
            transition:all 0.35s ease; border-left:5px solid transparent;
            display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px;
        }
        .class-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
        .class-card.live { border-left-color:#28a745; background:#f0fff4; animation:liveGlow 2s infinite; }
        .class-card.upcoming { border-left-color:#ffc107; }
        .class-card.past { border-left-color:#6c757d; opacity:0.7; }
        
        @keyframes liveGlow { 0%,100%{box-shadow:0 0 0 0 rgba(40,167,69,0.2)} 50%{box-shadow:0 0 0 15px rgba(40,167,69,0)} }
        
        .platform-badge { padding:4px 12px; border-radius:20px; font-size:0.75rem; font-weight:600; display:inline-block; }
        .platform-gmeet { background:#e8f0fe; color:#1967d2; }
        .platform-zoom { background:#e8f5fe; color:#2b8cf0; }
        
        .countdown { font-weight:700; color:#ff4757; font-size:0.9rem; }
        .countdown.live-now { color:#28a745; animation:pulseText 1s infinite; }
        @keyframes pulseText { 0%,100%{opacity:1} 50%{opacity:0.5} }
        
        .btn-join {
            padding:10px 25px; border-radius:50px; font-weight:700; font-size:0.9rem;
            text-decoration:none; transition:0.3s; display:inline-flex; align-items:center; gap:6px;
            background:#28a745; color:white;
        }
        .btn-join:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(40,167,69,0.3); color:white; }
        .btn-join.live-btn { background:#dc3545; animation:pulse 2s infinite; }
        @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,53,69,0.4)} 50%{box-shadow:0 0 0 15px rgba(220,53,69,0)} }
        
        .btn-outline { padding:8px 20px; border-radius:50px; border:2px solid var(--primary); color:var(--primary); text-decoration:none; font-weight:600; transition:0.3s; }
        .btn-outline:hover { background:var(--primary); color:white; }
        
        .nav-tabs { border:none; gap:10px; margin-bottom:20px; }
        .nav-tabs .nav-link { border-radius:50px; padding:10px 25px; border:2px solid #e0e0e0; color:#555; font-weight:600; transition:0.3s; }
        .nav-tabs .nav-link.active { background:var(--g1); color:white; border-color:transparent; }
        
        .empty-state { text-align:center; padding:60px; color:#888; }
        .empty-state i { font-size:4rem; opacity:0.3; margin-bottom:15px; }
        
        @media (max-width:768px) {
            .class-card { flex-direction:column; text-align:center; }
        }
    </style>
</head>
<body>

<nav class="navbar">
    <div class="container" style="display:flex;justify-content:space-between;align-items:center;">
        <a href="index.php" class="navbar-brand"><i class="fas fa-graduation-cap me-2"></i>বাংলা LMS</a>
        <div style="display:flex;gap:12px;flex-wrap:wrap;">
            <a href="dashboard.php" style="color:#555;text-decoration:none;font-weight:500;">ড্যাশবোর্ড</a>
            <a href="courses.php" style="color:#555;text-decoration:none;font-weight:500;">কোর্স</a>
            <a href="logout.php" style="color:#ff4757;text-decoration:none;font-weight:600;">লগআউট</a>
        </div>
    </div>
</nav>

<div class="container">
    
    <div class="page-header" data-aos="fade-down">
        <h3>🔴 লাইভ ক্লাস</h3>
        <p>আসন্ন ও চলমান লাইভ ক্লাসে জয়েন করুন</p>
    </div>
    
    <!-- Tabs -->
    <ul class="nav nav-tabs" data-aos="fade-up">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#upcoming">🟢 আসন্ন / চলমান</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#past">✅ অতীত ক্লাস</a></li>
    </ul>
    
    <div class="tab-content">
        
        <!-- Upcoming & Live -->
        <div class="tab-pane fade show active" id="upcoming">
            <?php if(count($live_classes) > 0): ?>
                <?php foreach($live_classes as $cls): 
                    $is_live = (strtotime($cls['scheduled_at']) <= time() && strtotime($cls['scheduled_at']) + ($cls['duration_minutes'] * 60) >= time());
                    $starts_in = strtotime($cls['scheduled_at']) - time();
                ?>
                    <div class="class-card <?= $is_live ? 'live' : 'upcoming' ?>" data-aos="fade-up">
                        <div style="flex:1;">
                            <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
                                <span class="platform-badge platform-<?= $cls['platform'] ?>">
                                    <?= $cls['platform'] == 'gmeet' ? '🔵 GMeet' : ($cls['platform'] == 'zoom' ? '🔷 Zoom' : '🔶 Other') ?>
                                </span>
                                <?php if($is_live): ?>
                                    <span class="badge bg-danger live-now">🔴 LIVE NOW</span>
                                <?php endif; ?>
                                <?php if($cls['has_joined']): ?>
                                    <span class="badge bg-success">✅ যোগদান করেছেন</span>
                                <?php endif; ?>
                            </div>
                            <h5><?= htmlspecialchars($cls['title_bn']) ?></h5>
                            <?php if($cls['course_name']): ?>
                                <small class="text-muted">📚 <?= htmlspecialchars($cls['course_name']) ?></small>
                            <?php endif; ?>
                            <br>
                            <small>👨‍🏫 <?= htmlspecialchars($cls['instructor_name'] ?? 'ইন্সট্রাক্টর') ?></small>
                            <br>
                            <small>📅 <?= date('d M Y, h:i A', strtotime($cls['scheduled_at'])) ?> | ⏱️ <?= $cls['duration_minutes'] ?> মিনিট</small>
                            
                            <?php if(!$is_live && $starts_in > 0): ?>
                                <br><span class="countdown" data-time="<?= $cls['scheduled_at'] ?>">
                                    ⏰ শুরু হতে <?= floor($starts_in/3600) ?> ঘন্টা <?= floor(($starts_in%3600)/60) ?> মিনিট বাকি
                                </span>
                            <?php endif; ?>
                        </div>
                        
                        <div>
                            <a href="<?= htmlspecialchars($cls['meeting_link']) ?>" target="_blank" 
                               class="btn-join <?= $is_live ? 'live-btn' : '' ?>"
                               onclick="window.open('?join=1&id=<?= $cls['id'] ?>', '_self')">
                                <i class="fas fa-video"></i> <?= $is_live ? 'এখনই জয়েন করুন' : 'জয়েন করুন' ?>
                            </a>
                            <?php if($cls['meeting_id']): ?>
                                <br><small class="text-muted">ID: <?= $cls['meeting_id'] ?></small>
                            <?php endif; ?>
                            <?php if($cls['meeting_password']): ?>
                                <br><small class="text-muted">Pass: <?= $cls['meeting_password'] ?></small>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="empty-state">
                    <i class="fas fa-video-slash"></i>
                    <h5>কোন আসন্ন ক্লাস নেই</h5>
                    <p>নতুন ক্লাস শিডিউল হলে এখানে দেখতে পাবেন</p>
                    <a href="dashboard.php" class="btn-outline" style="display:inline-flex;">ড্যাশবোর্ডে ফিরুন</a>
                </div>
            <?php endif; ?>
        </div>
        
        <!-- Past Classes -->
        <div class="tab-pane fade" id="past">
            <?php if(count($past_classes) > 0): ?>
                <?php foreach($past_classes as $cls): ?>
                    <div class="class-card past" data-aos="fade-up">
                        <div style="flex:1;">
                            <span class="platform-badge platform-<?= $cls['platform'] ?>"><?= $cls['platform'] == 'gmeet' ? '🔵 GMeet' : '🔷 Zoom' ?></span>
                            <span class="badge bg-secondary ms-2">✅ শেষ হয়েছে</span>
                            <h5 class="mt-2"><?= htmlspecialchars($cls['title_bn']) ?></h5>
                            <small class="text-muted">📅 <?= date('d M Y, h:i A', strtotime($cls['scheduled_at'])) ?></small>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="empty-state"><i class="fas fa-history"></i><h5>কোন অতীত ক্লাস নেই</h5></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 src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init({duration:700,once:true});</script>
</body>
</html>