<?php
/**
 * Online Exam Listing Page — Gmind Institute
 *
 * Exam portal with info section, available exams as cards,
 * login prompt for unauthenticated users.
 *
 * Expected PHP variables:
 *   $exams       — array of published exam records
 *   $isLoggedIn  — bool whether user is logged in
 *   $csrfToken   — CSRF token string
 *   $currentPage — string 'online-exam'
 *   $title       — page title
 */

$exams      = $exams      ?? [];
$isLoggedIn = $isLoggedIn ?? false;
?>

<?php include __DIR__ . '/../layouts/header.php'; ?>

<!-- ============================================================
     Page Banner
     ============================================================ -->
<section class="page-banner" aria-label="Page heading">
    <div class="container">
        <h1>Online Exam Portal</h1>
        <p>Practise and appear for exams online — anytime, anywhere</p>
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="<?= url('/') ?>">Home</a>
            <span aria-hidden="true">/</span>
            <span>Online Exam</span>
        </nav>
    </div>
</section>

<!-- ============================================================
     Exam Info Section
     ============================================================ -->
<section class="exam-info-section section-white" aria-label="Exam system information">
    <div class="container">
        <div class="exam-info-grid">
            <div class="exam-info-block">
                <div class="exam-info-icon icon-navy" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                </div>
                <h3>Online Assessment</h3>
                <p>Take exams from the comfort of your home or at our centres. Our digital platform ensures a seamless exam experience.</p>
            </div>
            <div class="exam-info-block">
                <div class="exam-info-icon icon-scarlet" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <h3>Timed Exams</h3>
                <p>Each exam has a set duration. The timer counts down automatically and submits your exam when time expires.</p>
            </div>
            <div class="exam-info-block">
                <div class="exam-info-icon icon-gold" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                </div>
                <h3>Instant Results</h3>
                <p>Get your results immediately after submission. View your score, pass/fail status, and detailed answer breakdown.</p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Available Exams Section
     ============================================================ -->
<section class="exams-listing-section section-offwhite" aria-label="Available exams">
    <div class="container">
        <div class="section-heading">
            <h2>Available Exams</h2>
            <p>Select an exam to begin your assessment</p>
        </div>

        <?php if (!$isLoggedIn): ?>
        <div class="exam-login-prompt">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
            <h3>Please Login to Take Exams</h3>
            <p>You need to be logged in as a student to access and take online exams.</p>
            <a href="<?= url('/login') ?>" class="btn-primary">Student Login</a>
        </div>
        <?php endif; ?>

        <?php if (!empty($exams)): ?>
        <div class="exams-grid">
            <?php foreach ($exams as $exam): ?>
            <div class="exam-card animate-on-scroll">
                <div class="exam-card-header">
                    <h3 class="exam-card-title"><?= htmlspecialchars($exam['title'] ?? 'Exam', ENT_QUOTES, 'UTF-8') ?></h3>
                    <?php if (!empty($exam['course_name'])): ?>
                    <span class="exam-card-course"><?= htmlspecialchars($exam['course_name'], ENT_QUOTES, 'UTF-8') ?></span>
                    <?php endif; ?>
                </div>
                <div class="exam-card-body">
                    <div class="exam-card-details">
                        <div class="exam-detail-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            <span>Duration: <strong><?= (int) ($exam['duration'] ?? 30) ?> min</strong></span>
                        </div>
                        <div class="exam-detail-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                            <span>Total Marks: <strong><?= (int) ($exam['total_marks'] ?? 0) ?></strong></span>
                        </div>
                        <div class="exam-detail-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                            <span>Pass Marks: <strong><?= (int) ($exam['pass_marks'] ?? 0) ?></strong></span>
                        </div>
                    </div>
                    <?php if ($isLoggedIn): ?>
                    <a href="<?= url('/exam/' . $exam['id'] ?? '#' . '/take') ?>" class="btn-enroll btn-enroll-scarlet">Start Exam</a>
                    <?php else: ?>
                    <a href="<?= url('/login') ?>" class="btn-enroll" style="opacity:0.7;">Login to Start</a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <div class="empty-state">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
            <h3>No Exams Available</h3>
            <p>There are no published exams at the moment. Please check back later.</p>
        </div>
        <?php endif; ?>
    </div>
</section>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
