<?php
/**
 * Toppers Page — Gmind Institute
 *
 * Full page displaying all star-performing students.
 *
 * Expected PHP variables:
 *   $toppers    — array of topper records with course_name and branch_name
 *   $settings   — key-value pairs from settings table
 *   $csrfToken  — CSRF token string
 *   $currentPage — string 'toppers'
 */
$toppers    = $toppers    ?? [];
$settings   = $settings   ?? [];
$basePath   = defined('BASE_PATH') ? BASE_PATH : '/gmind';
include __DIR__ . '/../layouts/header.php';

?>
<!-- Page Banner -->
<section class="page-banner" aria-label="Page heading">
    <div class="container">
        <h1><?= __('toppers.page_title') ?></h1>
        <p><?= __('toppers.page_subtitle') ?></p>
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="<?= $basePath ?>/"><?= __('toppers.breadcrumb_home') ?></a>
            <span aria-hidden="true">/</span>
            <span><?= __('toppers.breadcrumb_toppers') ?></span>
        </nav>
    </div>
</section>

<!-- Toppers Section -->
<section class="toppers-full-section" style="background: linear-gradient(135deg, #0d2b6e 0%, #1a4fa0 50%, #0d2b6e 100%); color: #ffffff;" aria-label="Star performers">
    <div class="container">
        <?php if (!empty($toppers)): ?>
        <div class="toppers-grid" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2rem; padding: 3rem 0;">
            <?php foreach ($toppers as $index => $topper): ?>
                <?php
                $rankClass = '';
                if ($index === 0) $rankClass = 'rank-1';
                elseif ($index === 1) $rankClass = 'rank-2';
                elseif ($index === 2) $rankClass = 'rank-3';
                ?>
            <div class="topper-card <?= $rankClass ?> animate-on-scroll">
                <img
                    class="topper-photo"
                    src="<?= htmlspecialchars(!empty($topper['photo']) ? upload_url($topper['photo']) : $basePath . '/images/avatar-default.png', ENT_QUOTES, 'UTF-8') ?>"
                    alt="<?= htmlspecialchars($topper['name'] ?? 'Student', ENT_QUOTES, 'UTF-8') ?>"
                    loading="lazy"
                >
                <div class="topper-name"><?= htmlspecialchars($topper['name'] ?? 'Student', ENT_QUOTES, 'UTF-8') ?></div>
                <div class="topper-course"><?= htmlspecialchars($topper['course_name'] ?? $topper['course_id'] ?? '', ENT_QUOTES, 'UTF-8') ?></div>
                <?php if (!empty($topper['marks']) || !empty($topper['grade'])): ?>
                <div class="topper-marks">
                    <?= htmlspecialchars($topper['marks'] ?? $topper['grade'] ?? '', ENT_QUOTES, 'UTF-8') ?>
                </div>
                <?php endif; ?>
                <div class="topper-meta">
                    <?php if (!empty($topper['batch_year'])): ?>
                        <?= htmlspecialchars((string) $topper['batch_year'], ENT_QUOTES, 'UTF-8') ?>
                    <?php endif; ?>
                    <?php if (!empty($topper['branch_name'])): ?>
                        &bull; <?= htmlspecialchars($topper['branch_name'], ENT_QUOTES, 'UTF-8') ?>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <div style="text-align:center; padding:60px 20px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
            </svg>
            <p style="margin-top:20px; color:#999; font-size:1.1rem;"><?= __('toppers.no_toppers') ?></p>
        </div>
        <?php endif; ?>
    </div>
</section>

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