V1rus Private

Viewing: student_dashboard.php

<?php 
include 'config.php';
if (!isset($_SESSION['student_id'])) {
    header("Location: login.php");
    exit();
}

$student_id = $_SESSION['student_id'];

// Get student statistics
try {
    // Total exams taken
    $stmt = $pdo->prepare("SELECT COUNT(*) as total_exams FROM exams WHERE student_id = ?");
    $stmt->execute([$student_id]);
    $totalExams = $stmt->fetch()['total_exams'];

    // Certificates earned
    $stmt = $pdo->prepare("SELECT COUNT(*) as total_certs FROM certificates WHERE student_id = ?");
    $stmt->execute([$student_id]);
    $totalCerts = $stmt->fetch()['total_certs'];

    // Average score
    $stmt = $pdo->prepare("SELECT AVG(percentage) as avg_score FROM exams WHERE student_id = ? AND status = 'passed'");
    $stmt->execute([$student_id]);
    $avgScoreResult = $stmt->fetch();
    $avgScore = $avgScoreResult['avg_score'] ? round($avgScoreResult['avg_score'], 1) : 0;

    // Recent exams
    $stmt = $pdo->prepare("SELECT e.*, c.name as category_name 
                          FROM exams e 
                          JOIN categories c ON e.category_id = c.id 
                          WHERE e.student_id = ? 
                          ORDER BY e.completed_at DESC 
                          LIMIT 5");
    $stmt->execute([$student_id]);
    $recentExams = $stmt->fetchAll();

    // Get student info for profile
    $stmt = $pdo->prepare("SELECT * FROM students WHERE id = ?");
    $stmt->execute([$student_id]);
    $student = $stmt->fetch();

} catch(PDOException $e) {
    // Initialize variables to avoid errors
    $totalExams = 0;
    $totalCerts = 0;
    $avgScore = 0;
    $recentExams = [];
    $student = [];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Dashboard - CertiPro</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.0.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --success-color: #4cc9f0;
            --info-color: #4895ef;
            --warning-color: #f72585;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --sidebar-width: 280px;
            --header-height: 70px;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #495057;
            overflow-x: hidden;
        }
        
        .dashboard-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;
            overflow: hidden;
        }
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .stat-card {
            border-left: 4px solid;
            overflow: hidden;
            position: relative;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: inherit;
            opacity: 0.7;
        }
        .stat-card.exams { border-left-color: #4361ee; }
        .stat-card.exams::before { background: #4361ee; }
        .stat-card.certificates { border-left-color: #4cc9f0; }
        .stat-card.certificates::before { background: #4cc9f0; }
        .stat-card.score { border-left-color: #4895ef; }
        .stat-card.score::before { background: #4895ef; }
        .stat-card.performance { border-left-color: #f72585; }
        .stat-card.performance::before { background: #f72585; }
        
        .sidebar {
            background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            min-height: 100vh;
            color: white;
            width: var(--sidebar-width);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            transition: all 0.3s;
        }
        .sidebar.collapsed {
            width: 70px;
        }
        .sidebar.collapsed .sidebar-text {
            display: none;
        }
        .sidebar .nav-link {
            color: rgba(255,255,255,0.8);
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            color: white;
            background: rgba(255,255,255,0.1);
            border-left: 4px solid white;
        }
        .sidebar .nav-link i {
            width: 20px;
            margin-right: 10px;
            text-align: center;
        }
        .sidebar.collapsed .nav-link i {
            margin-right: 0;
        }
        .welcome-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }
        .welcome-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            transform: translate(30%, -30%);
        }
        .welcome-section::after {
            content: '';
            position: absolute;
            bottom: -50px;
            left: -50px;
            width: 150px;
            height: 150px;
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
        }
        .exam-card {
            border-radius: 12px;
            transition: all 0.3s ease;
            border: 1px solid #e3e6f0;
            height: 100%;
        }
        .exam-card:hover {
            border-color: var(--primary-color);
            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.15);
        }
        .progress {
            height: 10px;
            border-radius: 5px;
        }
        .certificate-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--warning-color);
            color: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            z-index: 1;
        }
        .main-content {
            margin-left: var(--sidebar-width);
            transition: all 0.3s;
        }
        .main-content.expanded {
            margin-left: 70px;
        }
        .navbar-custom {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            height: var(--header-height);
            position: sticky;
            top: 0;
            z-index: 999;
        }
        .mobile-menu-btn {
            display: none;
        }
        .share-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .share-btn {
            border-radius: 50px;
            padding: 8px 15px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .whatsapp-btn {
            background: #25D366;
            color: white;
            border: none;
        }
        .email-btn {
            background: #EA4335;
            color: white;
            border: none;
        }
        .social-share-btn {
            background: #3b5998;
            color: white;
            border: none;
        }
        .certificate-modal .modal-content {
            border-radius: 15px;
            overflow: hidden;
        }
        .certificate-preview {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            background: #f8f9fa;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        @media (max-width: 992px) {
            .sidebar {
                width: 70px;
            }
            .sidebar .sidebar-text {
                display: none;
            }
            .main-content {
                margin-left: 70px;
            }
            .mobile-menu-btn {
                display: block;
            }
        }
        
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.mobile-open {
                transform: translateX(0);
            }
            .main-content {
                margin-left: 0;
            }
            .welcome-section {
                padding: 20px;
            }
            .stat-card {
                margin-bottom: 15px;
            }
        }
        
        .floating-action-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 100;
            cursor: pointer;
            transition: all 0.3s;
        }
        .floating-action-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-sticky pt-4">
            <div class="text-center mb-4">
                <h4><i class="fas fa-certificate"></i> <span class="sidebar-text">CertiPro</span></h4>
                <small class="sidebar-text">Student Portal</small>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#dashboard" data-bs-toggle="tab">
                        <i class="fas fa-tachometer-alt"></i> <span class="sidebar-text">Dashboard</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#available-exams" data-bs-toggle="tab">
                        <i class="fas fa-graduation-cap"></i> <span class="sidebar-text">Available Exams</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#certificates" data-bs-toggle="tab">
                        <i class="fas fa-award"></i> <span class="sidebar-text">My Certificates</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#exam-history" data-bs-toggle="tab">
                        <i class="fas fa-history"></i> <span class="sidebar-text">Exam History</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#profile" data-bs-toggle="tab">
                        <i class="fas fa-user"></i> <span class="sidebar-text">My Profile</span>
                    </a>
                </li>
                <li class="nav-item mt-4">
                    <a class="nav-link text-warning" href="logout.php">
                        <i class="fas fa-sign-out-alt"></i> <span class="sidebar-text">Logout</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content" id="mainContent">
        <!-- Top Navbar -->
        <nav class="navbar navbar-custom">
            <div class="container-fluid">
                <button class="btn mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="d-flex align-items-center">
                    <div class="dropdown">
                        <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="https://ui-avatars.com/api/?name=<?php echo urlencode($_SESSION['student_name']); ?>&background=random" alt="User" class="rounded-circle me-2" width="32" height="32">
                            <span class="d-none d-md-inline"><?php echo $_SESSION['student_name']; ?></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><a class="dropdown-item" href="#profile" data-bs-toggle="tab"><i class="fas fa-user me-2"></i> Profile</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> Settings</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="logout.php"><i class="fas fa-sign-out-alt me-2"></i> Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

        <div class="container-fluid px-4 py-4">
            <!-- Welcome Section -->
            <div class="welcome-section">
                <div class="row align-items-center position-relative" style="z-index: 1;">
                    <div class="col-md-8">
                        <h2>Welcome back, <?php echo $_SESSION['student_name']; ?>! 👋</h2>
                        <p class="mb-0">Continue your learning journey and earn professional certifications</p>
                    </div>
                    <div class="col-md-4 text-end">
                        <div class="bg-white text-dark rounded p-3 d-inline-block shadow-sm">
                            <small class="text-muted">Student ID</small>
                            <div class="fw-bold">STU<?php echo str_pad($student_id, 5, '0', STR_PAD_LEFT); ?></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-content">
                <!-- Dashboard Tab -->
                <div class="tab-pane fade show active" id="dashboard">
                    <!-- Statistics Cards -->
                    <div class="row mb-4">
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card dashboard-card stat-card exams h-100">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                Exams Taken</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php echo $totalExams; ?></div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card dashboard-card stat-card certificates h-100">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                                Certificates Earned</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php echo $totalCerts; ?></div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-certificate fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card dashboard-card stat-card score h-100">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                                Average Score</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php echo $avgScore; ?>%</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-chart-line fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card dashboard-card stat-card performance h-100">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                                Success Rate</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                                <?php echo $totalExams > 0 ? round(($totalCerts / $totalExams) * 100) : 0; ?>%
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-trophy fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Recent Activity -->
                        <div class="col-lg-8">
                            <div class="card dashboard-card mb-4">
                                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0"><i class="fas fa-history"></i> Recent Exam Activity</h5>
                                    <a href="#exam-history" class="btn btn-sm btn-light" data-bs-toggle="tab">View All</a>
                                </div>
                                <div class="card-body">
                                    <?php if (!empty($recentExams)): ?>
                                        <div class="table-responsive">
                                            <table class="table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>Exam</th>
                                                        <th>Date</th>
                                                        <th>Score</th>
                                                        <th>Status</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php foreach ($recentExams as $exam): 
                                                        $statusClass = $exam['status'] == 'passed' ? 'success' : 
                                                                     ($exam['status'] == 'failed' ? 'danger' : 'warning');
                                                    ?>
                                                    <tr>
                                                        <td><?php echo $exam['category_name']; ?></td>
                                                        <td><?php echo date('M j, Y', strtotime($exam['completed_at'])); ?></td>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <div class="progress flex-grow-1 me-2" style="height: 8px;">
                                                                    <div class="progress-bar bg-<?php echo $statusClass; ?>" 
                                                                         style="width: <?php echo $exam['percentage']; ?>%"></div>
                                                                </div>
                                                                <span><?php echo $exam['percentage']; ?>%</span>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-<?php echo $statusClass; ?>">
                                                                <?php echo ucfirst($exam['status']); ?>
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <?php if ($exam['status'] == 'passed'): ?>
                                                                <a href="generate_certificate.php?exam_id=<?php echo $exam['id']; ?>" 
                                                                   class="btn btn-sm btn-success">
                                                                    <i class="fas fa-download"></i> Certificate
                                                                </a>
                                                            <?php else: ?>
                                                                <a href="exam_landing.php?category_id=<?php echo $exam['category_id']; ?>" 
                                                                   class="btn btn-sm btn-primary">
                                                                    <i class="fas fa-redo"></i> Retry
                                                                </a>
                                                            <?php endif; ?>
                                                        </td>
                                                    </tr>
                                                    <?php endforeach; ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    <?php else: ?>
                                        <div class="text-center py-4">
                                            <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
                                            <p class="text-muted">No exam history yet. Start your first exam!</p>
                                            <a href="#available-exams" class="btn btn-primary" data-bs-toggle="tab">
                                                <i class="fas fa-graduation-cap"></i> Browse Exams
                                            </a>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Stats -->
                        <div class="col-lg-4">
                            <div class="card dashboard-card mb-4">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-trophy"></i> Achievement Progress</h5>
                                </div>
                                <div class="card-body">
                                    <div class="achievement-item mb-3">
                                        <div class="d-flex justify-content-between mb-1">
                                            <span>First Certificate</span>
                                            <span><?php echo $totalCerts > 0 ? '✅' : '⏳'; ?></span>
                                        </div>
                                    </div>
                                    <div class="achievement-item mb-3">
                                        <div class="d-flex justify-content-between mb-1">
                                            <span>Score 90%+</span>
                                            <span>🏆</span>
                                        </div>
                                    </div>
                                    <div class="achievement-item mb-3">
                                        <div class="d-flex justify-content-between mb-1">
                                            <span>Complete 5 Exams</span>
                                            <span><?php echo $totalExams >= 5 ? '✅' : $totalExams . '/5'; ?></span>
                                        </div>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-info" style="width: <?php echo min(($totalExams / 5) * 100, 100); ?>%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Quick Actions -->
                            <div class="card dashboard-card">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0"><i class="fas fa-bolt"></i> Quick Actions</h5>
                                </div>
                                <div class="card-body">
                                    <a href="#available-exams" class="btn btn-primary w-100 mb-2" data-bs-toggle="tab">
                                        <i class="fas fa-play-circle"></i> Start New Exam
                                    </a>
                                    <a href="#certificates" class="btn btn-success w-100 mb-2" data-bs-toggle="tab">
                                        <i class="fas fa-award"></i> View Certificates
                                    </a>
                                    <a href="#profile" class="btn btn-outline-dark w-100" data-bs-toggle="tab">
                                        <i class="fas fa-user-edit"></i> Update Profile
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Available Exams Tab -->
                <div class="tab-pane fade" id="available-exams">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4><i class="fas fa-graduation-cap"></i> Available Certification Exams</h4>
                        <span class="badge bg-primary"><?php 
                            $stmt = $pdo->query("SELECT COUNT(*) as total FROM categories WHERE is_active = TRUE");
                            echo $stmt->fetch()['total'] . ' available';
                        ?></span>
                    </div>

                    <div class="row">
                        <?php
                        $stmt = $pdo->query("SELECT * FROM categories WHERE is_active = TRUE");
                        while ($category = $stmt->fetch()) {
                            // Check if student already passed this exam
                            $checkExam = $pdo->prepare("SELECT id, status FROM exams WHERE student_id = ? AND category_id = ? AND status = 'passed' LIMIT 1");
                            $checkExam->execute([$student_id, $category['id']]);
                            $examData = $checkExam->fetch();
                            $hasPassed = ($examData !== false);
                            
                            // Check attempts
                            $checkAttempts = $pdo->prepare("SELECT COUNT(*) as attempts FROM exams WHERE student_id = ? AND category_id = ?");
                            $checkAttempts->execute([$student_id, $category['id']]);
                            $attempts = $checkAttempts->fetch()['attempts'];
                            $maxAttempts = 3;
                            $canRetake = $attempts < $maxAttempts;
                            
                            $buttonClass = $hasPassed ? 'btn-success' : ($canRetake ? 'btn-primary' : 'btn-secondary');
                            $buttonText = $hasPassed ? 'Certificate Earned' : ($attempts > 0 ? 'Retake Exam' : 'Start Exam');
                            $disabled = $hasPassed || !$canRetake ? 'disabled' : '';
                            ?>
                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="card exam-card h-100 position-relative">
                                    <?php if ($hasPassed): ?>
                                        <div class="certificate-badge">
                                            <i class="fas fa-award"></i>
                                        </div>
                                    <?php endif; ?>
                                    <div class="card-header bg-transparent">
                                        <h5 class="card-title mb-0"><?php echo $category['name']; ?></h5>
                                    </div>
                                    <div class="card-body">
                                        <p class="card-text text-muted"><?php echo $category['description']; ?></p>
                                        <div class="exam-meta">
                                            <small class="text-muted d-block mb-2">
                                                <i class="fas fa-clock"></i> 
                                                <strong>Duration:</strong> <?php echo $category['exam_duration']; ?> minutes
                                            </small>
                                            <small class="text-muted d-block mb-2">
                                                <i class="fas fa-question-circle"></i> 
                                                <strong>Questions:</strong> <?php echo $category['total_questions']; ?>
                                            </small>
                                            <small class="text-muted d-block mb-2">
                                                <i class="fas fa-trophy"></i> 
                                                <strong>Passing:</strong> <?php echo $category['passing_marks']; ?>%
                                            </small>
                                            <small class="text-muted d-block">
                                                <i class="fas fa-redo"></i> 
                                                <strong>Attempts:</strong> <?php echo $attempts; ?>/<?php echo $maxAttempts; ?>
                                            </small>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-transparent">
                                        <?php if ($hasPassed && $examData): ?>
                                            <div class="d-grid">
                                                <a href="generate_certificate.php?exam_id=<?php echo $examData['id']; ?>" 
                                                   class="btn btn-success">
                                                    <i class="fas fa-download"></i> Download Certificate
                                                </a>
                                            </div>
                                        <?php else: ?>
                                            <div class="d-grid">
                                                <a href="exam_landing.php?category_id=<?php echo $category['id']; ?>" 
                                                   class="btn <?php echo $buttonClass; ?> <?php echo $disabled; ?>">
                                                    <i class="fas fa-<?php echo $hasPassed ? 'award' : ($attempts > 0 ? 'redo' : 'play-circle'); ?>"></i>
                                                    <?php echo $buttonText; ?>
                                                </a>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php } ?>
                    </div>
                </div>

                <!-- Certificates Tab -->
                <div class="tab-pane fade" id="certificates">
                    <h4><i class="fas fa-award"></i> My Certificates</h4>
                    <div class="row">
                        <?php
                        $stmt = $pdo->prepare("SELECT cert.*, exam.id as exam_id, exam.percentage, cat.name as category_name 
                                              FROM certificates cert 
                                              JOIN exams exam ON cert.exam_id = exam.id 
                                              JOIN categories cat ON exam.category_id = cat.id 
                                              WHERE exam.student_id = ? 
                                              ORDER BY cert.issued_date DESC");
                        $stmt->execute([$student_id]);
                        $certificates = $stmt->fetchAll();

                        if (empty($certificates)): ?>
                            <div class="col-12">
                                <div class="card dashboard-card">
                                    <div class="card-body text-center py-5">
                                        <i class="fas fa-certificate fa-4x text-muted mb-3"></i>
                                        <h5 class="text-muted">No Certificates Yet</h5>
                                        <p class="text-muted">Complete exams to earn your first certificate!</p>
                                        <a href="#available-exams" class="btn btn-primary" data-bs-toggle="tab">
                                            <i class="fas fa-graduation-cap"></i> Browse Exams
                                        </a>
                                    </div>
                                </div>
                            </div>
                        <?php else: 
                            foreach ($certificates as $cert): ?>
                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="card dashboard-card h-100">
                                    <div class="card-body text-center">
                                        <div class="text-warning mb-3">
                                            <i class="fas fa-certificate fa-4x"></i>
                                        </div>
                                        <h5 class="card-title"><?php echo htmlspecialchars($cert['category_name']); ?></h5>
                                        <p class="text-muted">Score: <?php echo $cert['percentage']; ?>%</p>
                                        <div class="certificate-info">
                                            <small class="text-muted d-block">
                                                <strong>Issued:</strong> <?php echo date('M j, Y', strtotime($cert['issued_date'])); ?>
                                            </small>
                                            <small class="text-muted d-block">
                                                <strong>Expires:</strong> <?php echo date('M j, Y', strtotime($cert['expiry_date'])); ?>
                                            </small>
                                            <small class="text-muted d-block">
                                                <strong>ID:</strong> <?php echo $cert['certificate_code']; ?>
                                            </small>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-transparent">
                                        <div class="d-grid gap-2">
                                            <a href="generate_certificate.php?exam_id=<?php echo $cert['exam_id']; ?>" 
                                               class="btn btn-success btn-sm">
                                                <i class="fas fa-download"></i> Download PDF
                                            </a>
                                            <button class="btn btn-info btn-sm view-certificate" 
                                                    data-exam-id="<?php echo $cert['exam_id']; ?>"
                                                    data-bs-toggle="modal" data-bs-target="#certificateModal">
                                                <i class="fas fa-eye"></i> View Details
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php endforeach;
                        endif; ?>
                    </div>
                </div>

                <!-- Exam History Tab -->
                <div class="tab-pane fade" id="exam-history">
                    <h4><i class="fas fa-history"></i> Exam History</h4>
                    <div class="card dashboard-card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Exam</th>
                                            <th>Date</th>
                                            <th>Score</th>
                                            <th>Percentage</th>
                                            <th>Status</th>
                                            <th>Time Taken</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        $stmt = $pdo->prepare("SELECT e.*, c.name as category_name 
                                                              FROM exams e 
                                                              JOIN categories c ON e.category_id = c.id 
                                                              WHERE e.student_id = ? 
                                                              ORDER BY e.completed_at DESC");
                                        $stmt->execute([$student_id]);
                                        while ($exam = $stmt->fetch()) {
                                            $statusClass = $exam['status'] == 'passed' ? 'success' : 
                                                         ($exam['status'] == 'failed' ? 'danger' : 'warning');
                                            $timeTaken = $exam['time_taken'] ? gmdate("H:i:s", $exam['time_taken']) : 'N/A';
                                            ?>
                                            <tr>
                                                <td><?php echo htmlspecialchars($exam['category_name']); ?></td>
                                                <td><?php echo date('M j, Y g:i A', strtotime($exam['completed_at'])); ?></td>
                                                <td><?php echo $exam['score'] . '/' . $exam['total_marks']; ?></td>
                                                <td>
                                                    <div class="progress" style="height: 8px; width: 80px;">
                                                        <div class="progress-bar bg-<?php echo $statusClass; ?>" 
                                                             style="width: <?php echo $exam['percentage']; ?>%"></div>
                                                    </div>
                                                    <small><?php echo $exam['percentage']; ?>%</small>
                                                </td>
                                                <td>
                                                    <span class="badge bg-<?php echo $statusClass; ?>">
                                                        <?php echo ucfirst($exam['status']); ?>
                                                    </span>
                                                </td>
                                                <td><?php echo $timeTaken; ?></td>
                                                <td>
                                                    <?php if ($exam['status'] == 'passed'): ?>
                                                        <a href="generate_certificate.php?exam_id=<?php echo $exam['id']; ?>" 
                                                           class="btn btn-sm btn-success" title="Download Certificate">
                                                            <i class="fas fa-certificate"></i>
                                                        </a>
                                                    <?php else: ?>
                                                        <a href="exam_landing.php?category_id=<?php echo $exam['category_id']; ?>" 
                                                           class="btn btn-sm btn-primary" title="Retake Exam">
                                                            <i class="fas fa-redo"></i>
                                                        </a>
                                                    <?php endif; ?>
                                                    <button class="btn btn-sm btn-info view-exam-details" 
                                                            data-exam-id="<?php echo $exam['id']; ?>" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        <?php } ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Profile Tab -->
                <div class="tab-pane fade" id="profile">
                    <h4><i class="fas fa-user"></i> My Profile</h4>
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card dashboard-card">
                                <div class="card-header">
                                    <h5 class="mb-0">Personal Information</h5>
                                </div>
                                <div class="card-body">
                                    <form id="profileForm">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">Full Name</label>
                                                <input type="text" class="form-control" name="name" value="<?php echo $student['name']; ?>">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">Email</label>
                                                <input type="email" class="form-control" name="email" value="<?php echo $student['email']; ?>">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">Phone</label>
                                                <input type="text" class="form-control" name="phone" value="<?php echo $student['phone']; ?>">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">Education Level</label>
                                                <select class="form-select" name="education_level">
                                                    <option value="High School" <?php echo $student['education_level'] == 'High School' ? 'selected' : ''; ?>>High School</option>
                                                    <option value="Bachelor's Degree" <?php echo $student['education_level'] == "Bachelor's Degree" ? 'selected' : ''; ?>>Bachelor's Degree</option>
                                                    <option value="Master's Degree" <?php echo $student['education_level'] == "Master's Degree" ? 'selected' : ''; ?>>Master's Degree</option>
                                                    <option value="Doctorate" <?php echo $student['education_level'] == 'Doctorate' ? 'selected' : ''; ?>>Doctorate</option>
                                                    <option value="Other" <?php echo $student['education_level'] == 'Other' ? 'selected' : ''; ?>>Other</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Address</label>
                                            <textarea class="form-control" name="address" rows="3"><?php echo $student['address']; ?></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Date of Birth</label>
                                            <input type="date" class="form-control" name="date_of_birth" value="<?php echo $student['date_of_birth']; ?>">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Notification Preferences</label>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="emailNotifications" name="email_notifications" checked>
                                                <label class="form-check-label" for="emailNotifications">
                                                    Email notifications for exam results
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="certificateEmail" name="certificate_email" checked>
                                                <label class="form-check-label" for="certificateEmail">
                                                    Automatically email certificates upon completion
                                                </label>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Update Profile</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card dashboard-card">
                                <div class="card-header">
                                    <h5 class="mb-0">Account Summary</h5>
                                </div>
                                <div class="card-body">
                                    <div class="text-center mb-4">
                                        <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center" 
                                             style="width: 80px; height: 80px;">
                                            <i class="fas fa-user fa-2x text-white"></i>
                                        </div>
                                    </div>
                                    <div class="account-stats">
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Member Since</span>
                                            <strong><?php echo date('M Y', strtotime($student['created_at'])); ?></strong>
                                        </div>
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Exams Taken</span>
                                            <strong><?php echo $totalExams; ?></strong>
                                        </div>
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Certificates</span>
                                            <strong><?php echo $totalCerts; ?></strong>
                                        </div>
                                        <div class="d-flex justify-content-between py-2">
                                            <span>Success Rate</span>
                                            <strong><?php echo $totalExams > 0 ? round(($totalCerts / $totalExams) * 100) : 0; ?>%</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Certificate Sharing Settings -->
                            <div class="card dashboard-card mt-4">
                                <div class="card-header">
                                    <h5 class="mb-0">Certificate Sharing</h5>
                                </div>
                                <div class="card-body">
                                    <p class="small text-muted">Configure how you want to share your certificates</p>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="whatsappSharing" checked>
                                        <label class="form-check-label" for="whatsappSharing">
                                            Enable WhatsApp sharing
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="emailSharing" checked>
                                        <label class="form-check-label" for="emailSharing">
                                            Enable email sharing
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="socialSharing">
                                        <label class="form-check-label" for="socialSharing">
                                            Enable social media sharing
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Certificate Modal -->
    <div class="modal fade certificate-modal" id="certificateModal" tabindex="-1" aria-labelledby="certificateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="certificateModalLabel">Certificate Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="certificate-preview mb-4">
                        <i class="fas fa-certificate fa-4x text-warning mb-3"></i>
                        <h4 id="certificateTitle">Certificate of Achievement</h4>
                        <p class="text-muted" id="certificateDescription">This is a preview of your certificate</p>
                    </div>
                    
                    <div class="share-section">
                        <h6>Share Your Achievement</h6>
                        <div class="share-buttons">
                            <button class="btn share-btn whatsapp-btn" id="whatsappShare">
                                <i class="fab fa-whatsapp"></i> WhatsApp
                            </button>
                            <button class="btn share-btn email-btn" id="emailShare">
                                <i class="fas fa-envelope"></i> Email
                            </button>
                            <button class="btn share-btn social-share-btn" id="socialShare">
                                <i class="fas fa-share-alt"></i> Social Media
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <a href="#" class="btn btn-primary" id="downloadCertificate">
                        <i class="fas fa-download"></i> Download PDF
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Floating Action Button -->
    <div class="floating-action-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick Actions">
        <i class="fas fa-plus"></i>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
    <script>
    $(document).ready(function() {
        // Mobile menu toggle
        $('#mobileMenuBtn').click(function() {
            $('#sidebar').toggleClass('mobile-open');
        });
        
        // Tab functionality
        $('.nav-link').click(function() {
            $('.nav-link').removeClass('active');
            $(this).addClass('active');
        });

        // Certificate modal functionality
        $('.view-certificate').click(function() {
            var examId = $(this).data('exam-id');
            var certificateUrl = 'generate_certificate.php?exam_id=' + examId;
            
            // Set download link
            $('#downloadCertificate').attr('href', certificateUrl);
            
            // Set sharing URLs
            var shareText = "I just earned a certificate from CertiPro! Check out my achievement.";
            var shareUrl = window.location.origin + '/certipro/' + certificateUrl;
            
            $('#whatsappShare').attr('href', 'https://wa.me/?text=' + encodeURIComponent(shareText + ' ' + shareUrl));
            $('#emailShare').attr('href', 'mailto:?subject=My CertiPro Certificate&body=' + encodeURIComponent(shareText + '\n\nView my certificate: ' + shareUrl));
        });
        
        // Profile form submission
        $('#profileForm').submit(function(e) {
            e.preventDefault();
            // In a real application, you would send this data to the server via AJAX
            alert('Profile updated successfully!');
        });
        
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });
        
        // Floating action button menu
        $('.floating-action-btn').click(function() {
            // In a real implementation, this would open a menu with quick actions
            window.location.href = '#available-exams';
            $('.nav-link').removeClass('active');
            $('a[href="#available-exams"]').addClass('active');
        });
    });
    </script>
</body>
</html>
User / IP	: 216.73.217.108
Host / Server	: 190.92.174.125 / aerosofthealthcare.com
System	: Linux s3739.bom1.stableserver.net 4.18.0-513.24.1.lve.2.el8.x86_64 #1 SMP Fri May 24 12:42:50 UTC 2024 x86_64