<?php
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>لوحة المتصدرين<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/achievements" class="btn btn-outline"><i data-lucide="arrow-right" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> الإنجازات</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<!-- Discipline Filter -->
<div class="card" style="margin-bottom:20px;padding:15px;">
    <form method="GET" action="/achievements/leaderboard" style="display:flex;gap:10px;align-items:end;flex-wrap:wrap;">
        <div style="min-width:200px;">
            <label class="form-label" style="font-size:12px;">النشاط الرياضي</label>
            <select name="discipline_id" class="form-input" onchange="this.form.submit()">
                <option value="">جميع الأنشطة</option>
                <?php foreach ($disciplines as $d): ?>
                <option value="<?= (int) $d['id'] ?>" <?= $disciplineId == $d['id'] ? 'selected' : '' ?>><?= e($d['name_ar']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <button type="submit" class="btn btn-outline">تصفية</button>
    </form>
</div>

<?php if (!empty($leaderboard)): ?>
<div class="card" style="padding:0;overflow-x:auto;">
    <!-- Top 3 Podium -->
    <?php if (count($leaderboard) >= 3): ?>
    <div style="padding:30px 20px;display:flex;justify-content:center;align-items:end;gap:20px;background:linear-gradient(135deg, #F9FAFB, #EFF6FF);">
        <!-- 2nd Place -->
        <div style="text-align:center;order:1;">
            <div style="width:60px;height:60px;border-radius:50%;background:#E5E7EB;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border:3px solid #9CA3AF;">
                <span style="font-size:20px;font-weight:700;color:#6B7280;">2</span>
            </div>
            <div style="font-size:13px;font-weight:600;color:#1A1A2E;"><?= e($leaderboard[1]['player_name'] ?? '') ?></div>
            <div style="font-size:16px;font-weight:700;color:#9CA3AF;"><?= number_format((int) ($leaderboard[1]['total_points'] ?? 0)) ?></div>
            <div style="font-size:10px;color:#6B7280;">نقطة</div>
        </div>
        <!-- 1st Place -->
        <div style="text-align:center;order:2;">
            <div style="width:80px;height:80px;border-radius:50%;background:#FEF3C7;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border:4px solid #F59E0B;">
                <i data-lucide="crown" style="width:32px;height:32px;color:#F59E0B;"></i>
            </div>
            <div style="font-size:15px;font-weight:700;color:#1A1A2E;"><?= e($leaderboard[0]['player_name'] ?? '') ?></div>
            <div style="font-size:22px;font-weight:700;color:#F59E0B;"><?= number_format((int) ($leaderboard[0]['total_points'] ?? 0)) ?></div>
            <div style="font-size:11px;color:#6B7280;">نقطة</div>
        </div>
        <!-- 3rd Place -->
        <div style="text-align:center;order:3;">
            <div style="width:60px;height:60px;border-radius:50%;background:#FEF3C7;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border:3px solid #B45309;">
                <span style="font-size:20px;font-weight:700;color:#B45309;">3</span>
            </div>
            <div style="font-size:13px;font-weight:600;color:#1A1A2E;"><?= e($leaderboard[2]['player_name'] ?? '') ?></div>
            <div style="font-size:16px;font-weight:700;color:#B45309;"><?= number_format((int) ($leaderboard[2]['total_points'] ?? 0)) ?></div>
            <div style="font-size:10px;color:#6B7280;">نقطة</div>
        </div>
    </div>
    <?php endif; ?>

    <!-- Full Ranking Table -->
    <table style="width:100%;border-collapse:collapse;font-size:14px;">
        <thead>
            <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;width:60px;">المركز</th>
                <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">اللاعب</th>
                <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">الإنجازات</th>
                <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">النقاط</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($leaderboard as $i => $entry):
                $rank = $i + 1;
                $rankColor = match(true) {
                    $rank === 1 => '#F59E0B',
                    $rank === 2 => '#9CA3AF',
                    $rank === 3 => '#B45309',
                    default     => '#6B7280',
                };
            ?>
            <tr style="border-bottom:1px solid #F3F4F6;<?= $rank <= 3 ? 'background:#FFFBEB;' : '' ?>" onmouseover="this.style.background='#F9FAFB'" onmouseout="this.style.background='<?= $rank <= 3 ? '#FFFBEB' : 'transparent' ?>'">
                <td style="padding:12px 15px;">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:<?= $rankColor ?>15;color:<?= $rankColor ?>;font-weight:700;font-size:13px;"><?= $rank ?></span>
                </td>
                <td style="padding:12px 15px;">
                    <a href="/achievements?player_id=<?= (int) $entry['player_id'] ?>" style="text-decoration:none;color:#1A1A2E;font-weight:600;">
                        <?= e($entry['player_name'] ?? '') ?>
                    </a>
                    <div style="font-size:11px;color:#9CA3AF;"><?= e($entry['registration_serial'] ?? '') ?></div>
                </td>
                <td style="padding:12px 15px;color:#374151;"><?= (int) ($entry['total_achievements'] ?? 0) ?></td>
                <td style="padding:12px 15px;font-weight:700;color:<?= $rankColor ?>;"><?= number_format((int) ($entry['total_points'] ?? 0)) ?></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <div style="margin-bottom:15px;">
        <i data-lucide="trophy" style="width:48px;height:48px;color:#D1D5DB;"></i>
    </div>
    <h3 style="color:#6B7280;margin:0 0 8px;">لا توجد بيانات</h3>
    <p style="color:#9CA3AF;font-size:14px;margin:0;">لم يحصل أي لاعب على إنجازات بعد.</p>
</div>
<?php endif; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>
<?php $__template->endSection(); ?>
