<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>الألعاب الترفيهية<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/games/create" class="btn btn-primary"><i data-lucide="plus" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> إضافة لعبة</a>
<?php $__template->endSection(); ?>

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

<?php if (empty($games)): ?>
<div class="card" style="padding:40px;text-align:center;">
    <i data-lucide="gamepad-2" style="width:48px;height:48px;color:#D1D5DB;margin-bottom:12px;"></i>
    <p style="color:#6B7280;">لا توجد ألعاب ترفيهية حالياً</p>
    <a href="/sa/games/create" class="btn btn-primary" style="margin-top:10px;">إضافة لعبة جديدة</a>
</div>
<?php else: ?>
<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:15px;">
    <?php foreach ($games as $g): ?>
    <a href="/sa/games/<?= (int) $g['id'] ?>" class="card" style="padding:20px;text-decoration:none;color:inherit;transition:box-shadow 0.2s;" onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.1)'" onmouseout="this.style.boxShadow=''">
        <div style="display:flex;justify-content:space-between;align-items:start;">
            <div>
                <div style="font-size:16px;font-weight:700;color:#1A1A2E;margin-bottom:6px;"><?= e($g['name_ar']) ?></div>
                <?php if ($g['facility_name']): ?>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;"><?= e($g['facility_name']) ?></div>
                <?php endif; ?>
                <div style="font-size:12px;color:#6B7280;">
                    <?php $typeLabels = ['free_play' => 'لعب حر', 'tournament' => 'بطولة', 'session' => 'جلسة']; ?>
                    <?= e($typeLabels[$g['game_type'] ?? ''] ?? $g['game_type']) ?> •
                    <?= (int) $g['duration_minutes'] ?> دقيقة •
                    حتى <?= (int) $g['max_players'] ?> لاعب
                </div>
            </div>
            <div style="text-align:left;">
                <?php if ((int) ($g['active_sessions'] ?? 0) > 0): ?>
                <span style="display:inline-block;padding:3px 8px;border-radius:8px;background:#ECFDF5;color:#059669;font-size:11px;font-weight:600;"><?= (int) $g['active_sessions'] ?> جلسة نشطة</span>
                <?php endif; ?>
            </div>
        </div>
        <div style="margin-top:12px;display:flex;gap:15px;font-size:13px;">
            <span style="color:#0D7377;font-weight:600;">عضو: <?= money((float) $g['fee_member']) ?></span>
            <span style="color:#6B7280;">غير عضو: <?= money((float) $g['fee_nonmember']) ?></span>
        </div>
    </a>
    <?php endforeach; ?>
</div>
<?php endif; ?>

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