<?php 
ini_set('display_errors', 1); error_reporting(E_ALL);
date_default_timezone_set('Asia/Dhaka');
require_once '../db_connect.php'; 

// ==========================================
// 🛠️ AUTO-FIX DATABASE COLUMNS 
// ==========================================
try {
    $columns = $pdo->query("SHOW COLUMNS FROM live_classes")->fetchAll(PDO::FETCH_COLUMN);
    if(!in_array('duration', $columns)) { $pdo->exec("ALTER TABLE live_classes ADD COLUMN duration VARCHAR(50) DEFAULT '60 mins'"); }
    if(!in_array('platform', $columns)) { $pdo->exec("ALTER TABLE live_classes ADD COLUMN platform VARCHAR(50) DEFAULT 'Zoom'"); }
    if(!in_array('teacher_id', $columns)) { $pdo->exec("ALTER TABLE live_classes ADD COLUMN teacher_id INT(11) DEFAULT NULL"); }
    if(!in_array('join_link', $columns)) { $pdo->exec("ALTER TABLE live_classes ADD COLUMN join_link VARCHAR(255) DEFAULT ''"); } 
} catch (Exception $e) {}

$success_msg = ''; $error_msg = '';

// ==========================================
// 1. DELETE CLASS
// ==========================================
if (isset($_GET['delete_id'])) {
    try {
        $pdo->prepare("DELETE FROM live_classes WHERE id = ?")->execute([$_GET['delete_id']]);
        $success_msg = "Live class schedule deleted successfully!";
    } catch (Exception $e) {
        $error_msg = "Could not delete class. Error: " . $e->getMessage();
    }
}

// ==========================================
// 2. ADD NEW CLASS
// ==========================================
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['add_class'])) {
    try {
        $stmt = $pdo->prepare("INSERT INTO live_classes (course_id, teacher_id, topic, class_date, class_time, duration, platform, join_link, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?, 'upcoming')");
        $stmt->execute([
            $_POST['course_id'], $_POST['teacher_id'], trim($_POST['topic']), $_POST['class_date'], $_POST['class_time'], 
            trim($_POST['duration']), trim($_POST['platform']), trim($_POST['join_link']) 
        ]);
        $success_msg = "Live class scheduled successfully!";
    } catch (Exception $e) { $error_msg = "Error adding class: " . $e->getMessage(); }
}

// ==========================================
// 3. EDIT CLASS
// ==========================================
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['edit_class'])) {
    try {
        $stmt = $pdo->prepare("UPDATE live_classes SET course_id=?, teacher_id=?, topic=?, class_date=?, class_time=?, duration=?, platform=?, join_link=? WHERE id=?");
        $stmt->execute([
            $_POST['course_id'], $_POST['teacher_id'], trim($_POST['topic']), $_POST['class_date'], $_POST['class_time'], 
            trim($_POST['duration']), trim($_POST['platform']), trim($_POST['join_link']), $_POST['class_id'] 
        ]);
        $success_msg = "Live class updated successfully!";
    } catch (Exception $e) { $error_msg = "Error updating class: " . $e->getMessage(); }
}

include 'includes/header.php'; 
include 'includes/sidebar.php'; 

// Fetch Courses and Teachers for Dropdowns
$courses = $pdo->query("SELECT id, title FROM courses WHERE status='active'")->fetchAll(PDO::FETCH_ASSOC);
$teachers = $pdo->query("SELECT id, name FROM teachers WHERE status='active'")->fetchAll(PDO::FETCH_ASSOC);

// Fetch Live Classes safely
try {
    $query = "SELECT lc.*, c.title as course_name, t.name as teacher_name 
              FROM live_classes lc 
              JOIN courses c ON lc.course_id = c.id 
              LEFT JOIN teachers t ON lc.teacher_id = t.id 
              ORDER BY lc.class_date DESC, lc.class_time DESC";
    $live_classes = $pdo->query($query)->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $error_msg = "Database Error: " . $e->getMessage();
}
?>

<style>
    /* Premium Theme Colors */
    :root { --theme-green: #064e3b; --theme-dark: #022c22; --theme-gold: #d4af37; --bg-soft: #f8fafc; }

    .main-content { background-color: var(--bg-soft); min-height: 100vh; padding-bottom: 50px; font-family: 'Outfit', sans-serif; }
    
    /* Header & Mobile Menu */
    .dashboard-header { background: #fff; padding: 20px 30px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); margin-bottom: 30px; border-left: 6px solid var(--theme-green); }
    #sidebarToggle { display: none; width: 45px; height: 45px; border-radius: 12px; background: #f1f5f9; border: 1px solid #e2e8f0; color: var(--theme-green); cursor: pointer; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center; }
    #sidebarToggle:hover { background: var(--theme-green); color: #fff; }
    
    .btn-theme { background: var(--theme-green); color: #fff; border-radius: 12px; padding: 12px 24px; font-weight: 700; border: none; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
    .btn-theme:hover { background: var(--theme-dark); color: var(--theme-gold); transform: translateY(-2px); box-shadow: 0 8px 15px rgba(6, 78, 59, 0.2); }

    /* Desktop Table */
    .desktop-table-card { background: #fff; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.02); overflow: hidden; border-top: 5px solid var(--theme-green); }
    .table thead th { background-color: #f1f5f9; color: #64748b; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 18px 20px; border: none; letter-spacing: 0.5px; }
    .table tbody tr:hover { background-color: #f8fafc; }
    .table td { padding: 15px 20px; vertical-align: middle; font-size: 14px; color: #334155; border-bottom: 1px solid #f1f5f9; }
    
    .class-icon { width: 45px; height: 45px; border-radius: 12px; background: rgba(6, 78, 59, 0.08); color: var(--theme-green); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
    
    /* Badges & Status */
    .status-badge { padding: 6px 14px; border-radius: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 5px; }
    .status-upcoming { background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe; }
    .status-live { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; animation: pulseLive 2s infinite; }
    .status-completed { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
    
    /* Action Buttons */
    .act-btn { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; transition: 0.3s; margin: 0 3px; text-decoration: none; cursor: pointer; border: none; }
    .act-link { background: #eff6ff; color: #3b82f6; }
    .act-link:hover { background: #3b82f6; color: #fff; }
    .act-edit { background: rgba(212, 175, 55, 0.15); color: var(--theme-dark); }
    .act-edit:hover { background: var(--theme-gold); color: #fff; transform: translateY(-2px); }
    .act-delete { background: #fef2f2; color: #ef4444; }
    .act-delete:hover { background: #ef4444; color: #fff; transform: translateY(-2px); }

    /* Modals & Inputs */
    .modal-content { border-radius: 24px; border: none; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
    .modal-header { border-bottom: 1px solid #f1f5f9; padding: 20px 30px; }
    .form-control, .form-select { border-radius: 12px; border: 2px solid #f1f5f9; padding: 12px 15px; font-size: 14px; background: #f8fafc; transition: 0.3s; }
    .form-control:focus, .form-select:focus { border-color: var(--theme-green); background: #fff; box-shadow: 0 0 0 4px rgba(6, 78, 59, 0.1); }

    /* Animations */
    .fade-up { animation: fadeInUp 0.4s ease-out forwards; }
    @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }
    @keyframes pulseLive { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

    /* 📱 Mobile Specific Styles (Card View) */
    .class-mobile-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow: hidden; transition: 0.3s; }
    
    @media (max-width: 991.98px) {
        .main-content { padding: 15px !important; }
        .dashboard-header { padding: 20px; flex-direction: column; align-items: flex-start !important; gap: 15px; }
        .dashboard-header .header-top { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 15px; }
        .dashboard-header .btn-theme { width: 100%; }
        .header-title { font-size: 1.2rem; }
    }
    @media (min-width: 992px) { #sidebarToggle { display: none !important; } }
</style>

<div class="main-content p-3 p-md-4">
    
    <div class="dashboard-header d-flex justify-content-between align-items-center fade-up">
        <div class="header-top">
            <button id="sidebarToggle" class="shadow-sm"><i class="fas fa-bars fs-5"></i></button>
            <div>
                <h4 class="mb-0 fw-bold text-dark header-title"><i class="fas fa-video me-2" style="color: var(--theme-green);"></i> Live Classes</h4>
                <p class="text-muted fw-semibold mb-0 d-none d-md-block" style="font-size: 13px;">Manage and schedule online interactive sessions</p>
            </div>
        </div>
        <button class="btn-theme shadow-sm mt-3 mt-md-0" data-bs-toggle="modal" data-bs-target="#addClassModal">
            <i class="fas fa-calendar-plus me-2"></i> Schedule Class
        </button>
    </div>

    <?php if($success_msg): ?> 
        <div class="alert alert-success d-flex align-items-center mb-4 rounded-4 border-0 shadow-sm fade-up" style="border-left: 5px solid #10b981 !important;">
            <i class="fas fa-check-circle me-3 fa-2x text-success"></i> 
            <div><strong class="d-block text-success">Success!</strong><span class="text-muted small"><?= $success_msg ?></span></div>
        </div>
    <?php endif; ?>
    <?php if($error_msg): ?> 
        <div class="alert alert-danger d-flex align-items-center mb-4 rounded-4 border-0 shadow-sm fade-up" style="border-left: 5px solid #ef4444 !important;">
            <i class="fas fa-exclamation-triangle me-3 fa-2x text-danger"></i> 
            <div><strong class="d-block text-danger">Error!</strong><span class="text-muted small"><?= $error_msg ?></span></div>
        </div>
    <?php endif; ?>

    <div class="desktop-table-card d-none d-lg-block fade-up" style="animation-delay: 0.1s;">
        <div class="table-responsive">
            <table class="table align-middle mb-0 border-0">
                <thead>
                    <tr>
                        <th class="ps-4">Topic & Course</th>
                        <th>Instructor</th>
                        <th>Schedule & Platform</th>
                        <th>Status</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(!empty($live_classes)): foreach($live_classes as $cls): 
                        $duration = $cls['duration'] ?? '60 mins';
                        $platform = $cls['platform'] ?? 'Zoom';
                        $join_link = $cls['join_link'] ?? $cls['meeting_link'] ?? ''; 
                        $teacher_id = $cls['teacher_id'] ?? 0;

                        // Status Logic
                        $class_timestamp = strtotime($cls['class_date'] . ' ' . $cls['class_time']);
                        $current_time = time();
                        
                        if ($current_time > ($class_timestamp + 7200)) {
                            $status_class = 'status-completed'; $status_text = 'Completed'; $status_icon = 'fas fa-check-circle';
                        } elseif ($current_time >= ($class_timestamp - 900) && $current_time <= ($class_timestamp + 7200)) {
                            $status_class = 'status-live'; $status_text = 'Live Now'; $status_icon = 'fas fa-broadcast-tower';
                        } else {
                            $status_class = 'status-upcoming'; $status_text = 'Upcoming'; $status_icon = 'fas fa-clock';
                        }
                    ?>
                    <tr>
                        <td class="ps-4 py-3">
                            <div class="d-flex align-items-center gap-3">
                                <div class="class-icon shadow-sm"><i class="fas fa-chalkboard"></i></div>
                                <div>
                                    <div class="fw-bold text-dark" style="font-size: 15px;"><?= htmlspecialchars((string)$cls['topic']); ?></div>
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle mt-1 rounded-pill" style="font-size: 10px;">
                                        <i class="fas fa-book me-1"></i> <?= htmlspecialchars((string)$cls['course_name']); ?>
                                    </span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="fw-bold text-dark mb-1" style="font-size: 13px;"><i class="fas fa-chalkboard-teacher text-muted me-2"></i><?= htmlspecialchars((string)($cls['teacher_name'] ?? 'Not Assigned')); ?></div>
                        </td>
                        <td>
                            <div class="fw-bold text-dark mb-1" style="font-size: 13px;"><i class="far fa-calendar-alt text-primary me-2"></i><?= date('d M, Y', strtotime($cls['class_date'])); ?> &bull; <span class="text-muted"><?= date('h:i A', strtotime($cls['class_time'])); ?></span></div>
                            <small class="text-muted fw-bold"><i class="fas fa-desktop me-1"></i> <?= htmlspecialchars((string)$platform); ?> (<?= htmlspecialchars((string)$duration); ?>)</small>
                        </td>
                        <td>
                            <span class="status-badge <?= $status_class; ?>">
                                <i class="<?= $status_icon ?>"></i> <?= $status_text; ?>
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            <a href="<?= htmlspecialchars((string)$join_link); ?>" target="_blank" class="act-btn act-link shadow-sm" title="Join/Test Link"><i class="fas fa-external-link-alt"></i></a>
                            <button type="button" class="act-btn act-edit shadow-sm" onclick="editClass(<?= (int)$cls['id'] ?>, <?= (int)$cls['course_id'] ?>, <?= (int)$teacher_id ?>, '<?= htmlspecialchars(addslashes((string)$cls['topic'])) ?>', '<?= $cls['class_date'] ?>', '<?= $cls['class_time'] ?>', '<?= htmlspecialchars(addslashes((string)$duration)) ?>', '<?= htmlspecialchars(addslashes((string)$platform)) ?>', '<?= htmlspecialchars(addslashes((string)$join_link)) ?>')" title="Edit"><i class="fas fa-pen"></i></button>
                            <a href="?delete_id=<?= $cls['id']; ?>" class="act-btn act-delete shadow-sm" onclick="return confirm('Permanently delete this class schedule?')" title="Delete"><i class="fas fa-trash-alt"></i></a>
                        </td>
                    </tr>
                    <?php endforeach; else: ?>
                        <tr><td colspan="5" class="text-center py-5 text-muted fw-bold"><i class="fas fa-calendar-times fa-3x mb-3 opacity-25 d-block"></i> No live classes scheduled.</td></tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div class="d-block d-lg-none fade-up" style="animation-delay: 0.1s;">
        <div class="row g-3">
            <?php if(!empty($live_classes)): foreach($live_classes as $cls): 
                $duration = $cls['duration'] ?? '60 mins'; $platform = $cls['platform'] ?? 'Zoom';
                $join_link = $cls['join_link'] ?? $cls['meeting_link'] ?? ''; $teacher_id = $cls['teacher_id'] ?? 0;

                $class_timestamp = strtotime($cls['class_date'] . ' ' . $cls['class_time']); $current_time = time();
                if ($current_time > ($class_timestamp + 7200)) { $status_class = 'status-completed'; $status_text = 'Completed'; $status_icon = 'fas fa-check-circle'; } 
                elseif ($current_time >= ($class_timestamp - 900) && $current_time <= ($class_timestamp + 7200)) { $status_class = 'status-live'; $status_text = 'Live Now'; $status_icon = 'fas fa-broadcast-tower'; } 
                else { $status_class = 'status-upcoming'; $status_text = 'Upcoming'; $status_icon = 'fas fa-clock'; }
            ?>
            <div class="col-12">
                <div class="class-mobile-card p-3">
                    <div class="d-flex justify-content-between align-items-start mb-3 pb-3 border-bottom">
                        <div>
                            <h6 class="fw-bold text-dark mb-1" style="font-size: 15px;"><?= htmlspecialchars((string)$cls['topic']); ?></h6>
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill" style="font-size: 10px;">
                                <i class="fas fa-book me-1"></i> <?= htmlspecialchars((string)$cls['course_name']); ?>
                            </span>
                        </div>
                        <span class="status-badge <?= $status_class; ?>" style="font-size: 9px; padding: 4px 8px;">
                            <i class="<?= $status_icon ?>"></i> <?= $status_text; ?>
                        </span>
                    </div>
                    
                    <div class="bg-light p-3 rounded-3 border mb-3">
                        <div class="mb-2 d-flex align-items-center">
                            <i class="far fa-calendar-alt text-primary me-2" style="width: 15px;"></i>
                            <span class="text-dark fw-bold" style="font-size: 12px;"><?= date('d M, Y', strtotime($cls['class_date'])); ?> &bull; <?= date('h:i A', strtotime($cls['class_time'])); ?></span>
                        </div>
                        <div class="mb-2 d-flex align-items-center">
                            <i class="fas fa-desktop text-muted me-2" style="width: 15px;"></i>
                            <span class="text-muted fw-bold" style="font-size: 12px;"><?= htmlspecialchars((string)$platform); ?> (<?= htmlspecialchars((string)$duration); ?>)</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-chalkboard-teacher text-muted me-2" style="width: 15px;"></i>
                            <span class="text-muted fw-bold" style="font-size: 12px;"><?= htmlspecialchars((string)($cls['teacher_name'] ?? 'Not Assigned')); ?></span>
                        </div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <a href="<?= htmlspecialchars((string)$join_link); ?>" target="_blank" class="btn btn-light border flex-grow-1 fw-bold text-primary" style="font-size: 12px; padding: 8px;"><i class="fas fa-link me-1"></i> Link</a>
                        <button type="button" class="btn btn-light border flex-grow-1 fw-bold text-warning" style="font-size: 12px; padding: 8px;" onclick="editClass(<?= (int)$cls['id'] ?>, <?= (int)$cls['course_id'] ?>, <?= (int)$teacher_id ?>, '<?= htmlspecialchars(addslashes((string)$cls['topic'])) ?>', '<?= $cls['class_date'] ?>', '<?= $cls['class_time'] ?>', '<?= htmlspecialchars(addslashes((string)$duration)) ?>', '<?= htmlspecialchars(addslashes((string)$platform)) ?>', '<?= htmlspecialchars(addslashes((string)$join_link)) ?>')"><i class="fas fa-pen me-1"></i> Edit</button>
                        <a href="?delete_id=<?= $cls['id']; ?>" class="btn btn-light border flex-grow-1 fw-bold text-danger" style="font-size: 12px; padding: 8px;" onclick="return confirm('Delete this class schedule?');"><i class="fas fa-trash-alt me-1"></i> Delete</a>
                    </div>
                </div>
            </div>
            <?php endforeach; else: ?>
                <div class="col-12 text-center py-5 bg-white rounded-4 border shadow-sm">
                    <i class="fas fa-calendar-times fa-3x text-muted opacity-25 mb-3 d-block"></i>
                    <h6 class="fw-bold text-muted">No classes scheduled!</h6>
                </div>
            <?php endif; ?>
        </div>
    </div>

</div>

<div class="modal fade" id="addClassModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold text-dark"><i class="fas fa-calendar-plus text-success me-2"></i> Schedule New Class</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST">
                <div class="modal-body p-4 row g-4">
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Select Course <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-book"></i></span>
                            <select name="course_id" class="form-select border-start-0 ps-0 fw-bold text-dark" required>
                                <option value="">-- Choose Course --</option>
                                <?php foreach($courses as $c): ?>
                                    <option value="<?= $c['id'] ?>"><?= htmlspecialchars($c['title']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Assign Teacher <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-chalkboard-teacher"></i></span>
                            <select name="teacher_id" class="form-select border-start-0 ps-0 fw-bold text-dark" required>
                                <option value="">-- Choose Teacher --</option>
                                <?php foreach($teachers as $t): ?>
                                    <option value="<?= $t['id'] ?>"><?= htmlspecialchars($t['name']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label fw-bold small text-uppercase text-muted">Class Topic / Subject <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-heading"></i></span>
                            <input type="text" name="topic" class="form-control border-start-0 ps-0 fw-bold" placeholder="E.g. Rules of Tajweed (Part 1)" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Class Date <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-calendar-alt"></i></span>
                            <input type="date" name="class_date" class="form-control border-start-0 ps-0 fw-bold" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Class Time (BD Time) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-clock"></i></span>
                            <input type="time" name="class_time" class="form-control border-start-0 ps-0 fw-bold" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Duration</label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-hourglass-half"></i></span>
                            <input type="text" name="duration" class="form-control border-start-0 ps-0 fw-bold" value="60 mins" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Platform</label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-desktop"></i></span>
                            <select name="platform" class="form-select border-start-0 ps-0 fw-bold text-dark" required>
                                <option value="Zoom">Zoom</option>
                                <option value="Google Meet">Google Meet</option>
                                <option value="Teams">Microsoft Teams</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label fw-bold small text-uppercase text-muted">Meeting Link <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-link"></i></span>
                            <input type="url" name="join_link" class="form-control border-start-0 ps-0 text-primary" placeholder="https://zoom.us/j/..." required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="submit" name="add_class" class="btn btn-theme w-100 py-3 shadow-sm">SCHEDULE CLASS</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editClassModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold text-dark"><i class="fas fa-pen text-warning me-2"></i> Edit Class Schedule</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST">
                <div class="modal-body p-4 row g-4">
                    <input type="hidden" name="class_id" id="edit_class_id">
                    
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Select Course <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-book"></i></span>
                            <select name="course_id" id="edit_course_id" class="form-select border-start-0 ps-0 fw-bold text-dark" required>
                                <?php foreach($courses as $c): ?>
                                    <option value="<?= $c['id'] ?>"><?= htmlspecialchars($c['title']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Assign Teacher <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-chalkboard-teacher"></i></span>
                            <select name="teacher_id" id="edit_teacher_id" class="form-select border-start-0 ps-0 fw-bold text-dark" required>
                                <?php foreach($teachers as $t): ?>
                                    <option value="<?= $t['id'] ?>"><?= htmlspecialchars($t['name']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label fw-bold small text-uppercase text-muted">Class Topic / Subject <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-heading"></i></span>
                            <input type="text" name="topic" id="edit_topic" class="form-control border-start-0 ps-0 fw-bold" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Class Date <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-calendar-alt"></i></span>
                            <input type="date" name="class_date" id="edit_class_date" class="form-control border-start-0 ps-0 fw-bold" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Class Time (BD Time) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-clock"></i></span>
                            <input type="time" name="class_time" id="edit_class_time" class="form-control border-start-0 ps-0 fw-bold" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Duration</label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-hourglass-half"></i></span>
                            <input type="text" name="duration" id="edit_duration" class="form-control border-start-0 ps-0 fw-bold" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small text-uppercase text-muted">Platform</label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-desktop"></i></span>
                            <select name="platform" id="edit_platform" class="form-select border-start-0 ps-0 fw-bold text-dark" required>
                                <option value="Zoom">Zoom</option>
                                <option value="Google Meet">Google Meet</option>
                                <option value="Teams">Microsoft Teams</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label fw-bold small text-uppercase text-muted">Meeting Link <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text border-2 border-end-0 bg-light text-muted"><i class="fas fa-link"></i></span>
                            <input type="url" name="join_link" id="edit_join_link" class="form-control border-start-0 ps-0 text-primary" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="submit" name="edit_class" class="btn btn-dark w-100 py-3 fw-bold rounded-3 shadow-sm">UPDATE SCHEDULE</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Sidebar Toggle for Mobile
        const toggleBtn = document.getElementById('sidebarToggle');
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const sidebar = document.querySelector('.sidebar') || document.getElementById('sidebarMenu');
                if (sidebar) { sidebar.classList.toggle('active'); }
            });
        }
    });

    function editClass(id, course_id, teacher_id, topic, date, time, duration, platform, link) {
        document.getElementById('edit_class_id').value = id;
        document.getElementById('edit_course_id').value = course_id;
        document.getElementById('edit_teacher_id').value = teacher_id;
        document.getElementById('edit_topic').value = topic;
        document.getElementById('edit_class_date').value = date;
        document.getElementById('edit_class_time').value = time;
        document.getElementById('edit_duration').value = duration;
        document.getElementById('edit_platform').value = platform;
        document.getElementById('edit_join_link').value = link;
        
        new bootstrap.Modal(document.getElementById('editClassModal')).show();
    }
</script>

<?php include 'includes/footer.php'; ?>