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

$exams      = $exams      ?? [];
$isLoggedIn = $isLoggedIn ?? false;
$userName   = $userName   ?? '';
$basePath = defined('BASE_PATH') ? BASE_PATH : '/gmind';
$maxAttempts = 3;
include __DIR__ . '/../layouts/header.php';

?>
<!-- ============================================================
     Page Banner
     ============================================================ -->
<section class="page-banner" aria-label="Page heading">
    <div class="container">
        <h1><?= __('exam.title') ?></h1>
        <p><?= __('exam.subtitle') ?></p>
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="<?= $basePath ?>/"><?= __('exam.breadcrumb_home') ?></a>
            <span aria-hidden="true">/</span>
            <span><?= __('exam.breadcrumb_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><?= __('exam.info_assessment') ?></h3>
                <p><?= __('exam.info_assessment_desc') ?></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><?= __('exam.info_timed') ?></h3>
                <p><?= __('exam.info_timed_desc') ?></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><?= __('exam.info_multiple') ?></h3>
                <p><?= __('exam.info_multiple_desc') ?></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><?= __('exam.available_exams') ?></h2>
            <p><?= __('exam.select_exam') ?></p>
        </div>

        <?php if ($isLoggedIn && !empty($userName)): ?>
        <!-- User Welcome -->
        <div style="text-align:center;margin-bottom:1.5rem;">
            <span style="font-size:0.95rem;color:#0d2b6e;font-weight:500;">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:4px;"><path d="M20 21v-2a4 4 0 00-3-3.87"/><path d="M4 21v-2a4 4 0 013-3.87"/><circle cx="12" cy="7" r="4"/></svg>
                <?= __('dashboard.welcome') ?>, <strong><?= htmlspecialchars($userName, ENT_QUOTES, 'UTF-8') ?></strong>
            </span>
        </div>
        <?php endif; ?>

        <?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><?= __('exam.login_to_take') ?></h3>
            <p><?= __('exam.login_to_take_desc') ?></p>
            <a href="<?= $basePath ?>/login" class="btn-primary"><?= __('exam.student_login') ?></a>
        </div>
        <?php endif; ?>

        <?php if (!empty($exams)): ?>
        <div class="exams-grid">
            <?php foreach ($exams as $exam): ?>
            <?php
            $attemptCount = (int) ($exam['attempt_count'] ?? 0);
            $remainingAttempts = (int) ($exam['remaining_attempts'] ?? $maxAttempts);
            $canAttempt = (bool) ($exam['can_attempt'] ?? true);
            $latestResult = $exam['latest_result'] ?? null;
            $latestStatus = $latestResult['status'] ?? '';
            $latestPercentage = (float) ($latestResult['percentage'] ?? 0);
            $latestAttemptId = (int) ($latestResult['id'] ?? 0);
            ?>
            <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><?= __('exam.duration') ?>: <strong><?= (int) ($exam['duration_minutes'] ?? $exam['duration'] ?? 30) ?> <?= __('exam.mins') ?></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><?= __('exam.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><?= __('exam.pass_marks') ?>: <strong><?= (int) ($exam['pass_marks'] ?? 0) ?></strong></span>
                        </div>
                    </div>

                    <?php if ($isLoggedIn): ?>
                    <!-- Attempt Status -->
                    <div style="margin:12px 0;padding:10px 14px;border-radius:8px;background-color:<?= $attemptCount > 0 ? '#f4f7fc' : '#eafaf1' ?>;font-size:0.82rem;">
                        <?php if ($attemptCount > 0): ?>
                            <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
                                <?php if ($latestStatus === 'pass'): ?>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#27ae60" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                <span style="color:#27ae60;font-weight:600;"><?= __('exam.passed') ?></span>
                                <?php else: ?>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e84118" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                                <span style="color:#e84118;font-weight:600;"><?= __('exam.not_passed') ?></span>
                                <?php endif; ?>
                                <span style="color:#666;margin-left:4px;">(<?= __('exam.best') ?>: <?= number_format($latestPercentage, 1) ?>%)</span>
                            </div>
                            <div style="color:#555;">
                                <?= __('exam.attempts_used') ?>: <strong><?= $attemptCount ?>/<?= $maxAttempts ?></strong>
                                <?php if ($canAttempt): ?>
                                &nbsp;|&nbsp; <?= __('exam.remaining') ?>: <strong style="color:#1a4fa0;"><?= $remainingAttempts ?></strong>
                                <?php else: ?>
                                &nbsp;|&nbsp; <strong style="color:#e84118;"><?= __('exam.no_attempts_remaining') ?></strong>
                                <?php endif; ?>
                            </div>
                        <?php else: ?>
                            <div style="display:flex;align-items:center;gap:6px;color:#27ae60;font-weight:500;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                <?= __('exam.not_attempted') ?> &nbsp;|&nbsp; <?= $maxAttempts ?> <?= __('exam.attempts_available') ?>
                            </div>
                        <?php endif; ?>
                    </div>

                    <?php if ($canAttempt): ?>
                    <a href="<?= $basePath ?>/exam/<?= htmlspecialchars($exam['id'] ?? '#', ENT_QUOTES, 'UTF-8') ?>" class="btn-enroll btn-enroll-scarlet">
                        <?= $attemptCount > 0 ? __('exam.retake_exam') . ' (' . __('exam.attempt') . ' ' . ($attemptCount + 1) . ')' : __('exam.start') ?>
                    </a>
                    <?php else: ?>
                    <span class="btn-enroll" style="opacity:0.5;background-color:#999;cursor:not-allowed;display:inline-block;text-align:center;"><?= __('exam.all_attempts_used') ?></span>
                    <?php endif; ?>

                    <?php if ($attemptCount > 0 && $latestAttemptId > 0): ?>
                    <a href="<?= $basePath ?>/exam/<?= htmlspecialchars((string) ($exam['id'] ?? ''), ENT_QUOTES, 'UTF-8') ?>/result/<?= $latestAttemptId ?>" style="display:block;text-align:center;margin-top:8px;font-size:0.85rem;color:#1a4fa0;font-weight:500;text-decoration:none;"><?= __('exam.view_latest_result') ?></a>
                    <?php endif; ?>

                    <?php else: ?>
                    <a href="<?= $basePath ?>/login" class="btn-enroll" style="opacity:0.7;"><?= __('exam.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><?= __('exam.no_exams') ?></h3>
            <p><?= __('exam.no_exams_desc') ?></p>
        </div>
        <?php endif; ?>
    </div>
</section>

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