<?php
use App\Modules\Achievements\Models\AchievementDefinition;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>إنجازات اللاعبين<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/achievements/leaderboard" class="btn btn-outline"><i data-lucide="trophy" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> لوحة المتصدرين</a>
<?php $__template->endSection(); ?>

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

<!-- Player Selector -->
<div class="card" style="margin-bottom:20px;padding:15px;">
    <form method="GET" action="/achievements" style="display:flex;gap:10px;align-items:end;flex-wrap:wrap;">
        <div style="flex:1;min-width:250px;">
            <label class="form-label" style="font-size:12px;">اختر اللاعب</label>
            <select name="player_id" class="form-input" onchange="this.form.submit()">
                <option value="">-- اختر لاعب لعرض إنجازاته --</option>
                <?php foreach ($players as $p): ?>
                <option value="<?= (int) $p['id'] ?>" <?= $playerId == $p['id'] ? 'selected' : '' ?>><?= e($p['full_name_ar']) ?> (<?= e($p['registration_serial'] ?? '') ?>)</option>
                <?php endforeach; ?>
            </select>
        </div>
        <button type="submit" class="btn btn-outline"><i data-lucide="search" style="width:16px;height:16px;vertical-align:middle;"></i> عرض</button>
    </form>
</div>

<?php if ($player): ?>
<!-- Player Header -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:20px;display:flex;justify-content:space-between;align-items:center;">
        <div>
            <h2 style="margin:0 0 4px;font-size:20px;color:#1A1A2E;">
                <i data-lucide="award" style="width:22px;height:22px;vertical-align:middle;margin-left:8px;color:#F59E0B;"></i>
                إنجازات <?= e($player['full_name_ar'] ?? '') ?>
            </h2>
            <div style="font-size:13px;color:#6B7280;"><?= count($achievements) ?> إنجاز مكتسب</div>
        </div>
        <div style="text-align:center;">
            <div style="font-size:32px;font-weight:700;color:#F59E0B;"><?= number_format($totalPoints) ?></div>
            <div style="font-size:12px;color:#6B7280;">نقطة</div>
        </div>
    </div>
</div>

<?php if (!empty($achievements)): ?>
<!-- Achievements by Category -->
<?php foreach ($grouped as $category => $categoryAchievements): ?>
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;font-size:15px;color:#374151;"><?= e($categories[$category] ?? $category) ?></h3>
    </div>
    <div style="padding:20px;display:grid;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));gap:15px;">
        <?php foreach ($categoryAchievements as $ach):
            $badgeColor = $ach['badge_color'] ?? '#F59E0B';
            if (strpos($badgeColor, '#') !== 0) {
                $badgeColor = AchievementDefinition::getBadgeColors()[$badgeColor] ?? '#F59E0B';
            }
        ?>
        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:15px;display:flex;gap:12px;align-items:start;transition:box-shadow 0.2s;" onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.08)'" onmouseout="this.style.boxShadow='none'">
            <div style="width:48px;height:48px;border-radius:50%;background:<?= $badgeColor ?>20;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i data-lucide="<?= e($ach['icon'] ?? 'award') ?>" style="width:24px;height:24px;color:<?= $badgeColor ?>;"></i>
            </div>
            <div style="flex:1;min-width:0;">
                <div style="font-weight:600;font-size:14px;color:#1A1A2E;margin-bottom:2px;"><?= e($ach['name_ar'] ?? '') ?></div>
                <?php if (!empty($ach['description_ar'])): ?>
                <div style="font-size:12px;color:#6B7280;margin-bottom:6px;"><?= e($ach['description_ar']) ?></div>
                <?php endif; ?>
                <div style="display:flex;gap:8px;align-items:center;">
                    <span style="font-size:11px;color:#F59E0B;font-weight:600;">+<?= (int) ($ach['points_earned'] ?? 0) ?> نقطة</span>
                    <span style="font-size:10px;color:#9CA3AF;"><?= e(substr($ach['earned_at'] ?? '', 0, 10)) ?></span>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endforeach; ?>

<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <div style="margin-bottom:15px;">
        <i data-lucide="award" 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; ?>

<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <div style="margin-bottom:15px;">
        <i data-lucide="award" 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(); ?>
