<?php 
ini_set('display_errors', 1); error_reporting(E_ALL);
require_once '../db_connect.php';
include 'includes/header.php'; 
include 'includes/sidebar.php'; 

$results = [];
try {
    $results = $pdo->query("
        SELECT r.*, s.name, s.email, e.exam_title 
        FROM exam_result r 
        JOIN students s ON r.student_id = s.id 
        JOIN exams e ON r.exam_id = e.id 
        ORDER BY r.id DESC
    ")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    // Handle error silently
}
?>

<style>
    /* Premium Theme Colors */
    :root { --theme-green: #064e3b; --theme-dark: #022c22; --theme-gold: #d4af37; --bg-soft: #f8fafc; }
    
    .dashboard-header { background: #fff; padding: 20px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); margin-bottom: 25px; border-left: 6px solid var(--theme-green); }
    .custom-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); overflow: hidden; border-top: 5px solid var(--theme-green); }
    
    .table thead th { border: none; padding: 18px 20px; color: #64748b; font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; background-color: var(--bg-soft); border-bottom: 1px solid #e2e8f0; }
    .table tbody tr { transition: 0.3s; border-bottom: 1px solid #f1f5f9; }
    .table tbody tr:hover { background-color: rgba(6, 78, 59, 0.02); }
    .table td { padding: 15px 20px; vertical-align: middle; color: #334155; }
    
    /* Action Buttons */
    .act-btn { width: 35px; height: 35px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: none; transition: 0.3s; margin: 0 2px; text-decoration: none; cursor: pointer; }
    .act-delete { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca;} 
    .act-delete:hover { background: #ef4444; color: #fff; }

    .fade-up { animation: fadeInUp 0.5s ease-out forwards; }
    @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

    /* --- 📱 Mobile Responsive Fixes --- */
    @media (max-width: 768px) {
        .main-content { padding: 15px !important; }
        .dashboard-header { flex-direction: column; align-items: flex-start !important; gap: 15px; padding: 15px 20px; }
        .dashboard-header .d-flex { width: 100%; align-items: center; }
        
        #sidebarToggle { width: 42px !important; height: 42px !important; padding: 0; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px;}
        .table-responsive { border: 0; }
    }
</style>

<div class="main-content p-4" style="background: var(--bg-soft); min-height: 100vh;">
    
    <div class="dashboard-header d-flex justify-content-between align-items-center fade-up">
        <div class="d-flex align-items-center">
            <button class="btn btn-light border d-md-none me-3 shadow-sm" id="sidebarToggle">
                <i class="fas fa-bars text-dark"></i>
            </button>
            <div>
                <h4 class="mb-0 fw-bold text-dark"><i class="fas fa-poll-h me-2" style="color: var(--theme-green);"></i> Student Exam Results</h4>
                <p class="text-muted fw-semibold mb-0 d-none d-md-block" style="font-size: 14px;">Track and manage student performance reports.</p>
            </div>
        </div>
    </div>

    <div class="custom-card fade-up" style="animation-delay: 0.1s;">
        <div class="table-responsive">
            <table class="table align-middle border-0 mb-0">
                <thead>
                    <tr>
                        <th class="ps-4">Student Info</th>
                        <th>Exam Title</th>
                        <th>Score / Percentage</th>
                        <th>Submitted Date</th>
                        <th class="text-end pe-4">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(!empty($results)): foreach($results as $res): ?>
                    <tr>
                        <td class="ps-4">
                            <div class="fw-bold text-dark" style="font-size: 15px;"><?= htmlspecialchars($res['name']); ?></div>
                            <div class="text-muted small fw-medium mt-1">
                                <i class="fas fa-envelope me-1" style="color: var(--theme-gold);"></i> <?= htmlspecialchars($res['email']); ?>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-light text-muted border px-3 py-2 rounded-pill fw-bold">
                                <i class="fas fa-file-alt me-1" style="color: var(--theme-green);"></i> <?= htmlspecialchars($res['exam_title']); ?>
                            </span>
                        </td>
                        <td>
                            <span class="badge px-2 py-1 fs-6" style="background-color: var(--theme-green);"><?= htmlspecialchars($res['score']); ?></span> 
                            <span class="fw-bold text-muted ms-1">(<?= htmlspecialchars($res['percentage']); ?>%)</span>
                        </td>
                        <td>
                            <div class="fw-bold" style="color: var(--theme-green);">
                                <i class="far fa-calendar-alt me-1"></i> <?= date('d M, Y', strtotime($res['submitted_at'])); ?>
                            </div>
                            <div class="text-muted small mt-1">
                                <i class="far fa-clock me-1"></i> <?= date('h:i A', strtotime($res['submitted_at'])); ?>
                            </div>
                        </td>
                        <td class="text-end pe-4">
                            <a href="delete_result.php?id=<?= $res['id']; ?>" class="act-btn act-delete" onclick="return confirm('Are you sure you want to permanently delete this result?');" title="Delete Result">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                        </td>
                    </tr>
                    <?php endforeach; else: ?>
                    <tr>
                        <td colspan="5" class="text-center py-5">
                            <div class="text-muted fw-bold fs-5"><i class="fas fa-folder-open mb-3 fa-2x" style="color: #cbd5e1; display: block;"></i> No exam results found yet.</div>
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const toggleBtn = document.getElementById('sidebarToggle');
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const sidebar = document.querySelector('.sidebar');
                if (sidebar) { sidebar.classList.toggle('active'); }
            });
        }
    });
</script>

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