<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?><?= e($game['name_ar']) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/games" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة</a>
<?php $__template->endSection(); ?>

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

<!-- Game Info -->
<div class="card" style="padding:20px;margin-bottom:20px;">
    <div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;font-size:13px;">
        <div>
            <div style="color:#6B7280;font-size:12px;margin-bottom:3px;">النوع</div>
            <div style="font-weight:600;">
                <?php $typeLabels = ['free_play' => 'لعب حر', 'tournament' => 'بطولة', 'session' => 'جلسة']; ?>
                <?= e($typeLabels[$game['game_type'] ?? ''] ?? $game['game_type']) ?>
            </div>
        </div>
        <div>
            <div style="color:#6B7280;font-size:12px;margin-bottom:3px;">المرفق</div>
            <div style="font-weight:600;"><?= e($game['facility_name'] ?? '—') ?></div>
        </div>
        <div>
            <div style="color:#6B7280;font-size:12px;margin-bottom:3px;">المدة</div>
            <div style="font-weight:600;"><?= (int) $game['duration_minutes'] ?> دقيقة</div>
        </div>
        <div>
            <div style="color:#6B7280;font-size:12px;margin-bottom:3px;">الحد الأقصى</div>
            <div style="font-weight:600;"><?= (int) $game['max_players'] ?> لاعب</div>
        </div>
        <div>
            <div style="color:#6B7280;font-size:12px;margin-bottom:3px;">رسوم العضو</div>
            <div style="font-weight:700;color:#0D7377;"><?= money((float) $game['fee_member']) ?></div>
        </div>
        <div>
            <div style="color:#6B7280;font-size:12px;margin-bottom:3px;">رسوم غير العضو</div>
            <div style="font-weight:700;color:#0D7377;"><?= money((float) $game['fee_nonmember']) ?></div>
        </div>
    </div>
</div>

<!-- Create Session -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:12px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;font-size:14px;color:#374151;">إنشاء جلسة جديدة</h3>
    </div>
    <div style="padding:15px 20px;">
        <form method="POST" action="/sa/games/<?= (int) $game['id'] ?>/sessions" style="display:flex;gap:12px;align-items:end;flex-wrap:wrap;">
            <?= csrf_field() ?>
            <div class="form-group" style="margin:0;">
                <label class="form-label" style="font-size:12px;">التاريخ</label>
                <input type="date" name="session_date" class="form-input" required value="<?= date('Y-m-d') ?>" style="font-size:13px;">
            </div>
            <div class="form-group" style="margin:0;">
                <label class="form-label" style="font-size:12px;">من</label>
                <input type="time" name="start_time" class="form-input" required style="font-size:13px;">
            </div>
            <div class="form-group" style="margin:0;">
                <label class="form-label" style="font-size:12px;">إلى</label>
                <input type="time" name="end_time" class="form-input" required style="font-size:13px;">
            </div>
            <div class="form-group" style="margin:0;">
                <label class="form-label" style="font-size:12px;">ملاحظات</label>
                <input type="text" name="notes" class="form-input" placeholder="اختياري..." style="font-size:13px;">
            </div>
            <button type="submit" class="btn btn-primary" style="font-size:13px;padding:8px 16px;">
                <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إنشاء
            </button>
        </form>
    </div>
</div>

<!-- Sessions List -->
<div class="card">
    <div style="padding:12px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;font-size:14px;color:#374151;">الجلسات</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>التاريخ</th>
                    <th>الوقت</th>
                    <th>اللاعبون</th>
                    <th>الحالة</th>
                    <th>إجراء</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($sessions)): ?>
                <tr><td colspan="5" style="text-align:center;padding:30px;color:#6B7280;">لا توجد جلسات</td></tr>
                <?php else: ?>
                <?php foreach ($sessions as $s):
                    $statusLabels = ['open' => 'متاحة', 'full' => 'ممتلئة', 'in_progress' => 'جارية', 'completed' => 'مكتملة', 'cancelled' => 'ملغية'];
                    $statusColors = ['open' => '#059669', 'full' => '#D97706', 'in_progress' => '#2563EB', 'completed' => '#6B7280', 'cancelled' => '#DC2626'];
                    $ss = $s['status'] ?? 'open';
                ?>
                <tr>
                    <td style="font-weight:600;"><?= e($s['session_date']) ?></td>
                    <td style="direction:ltr;text-align:right;"><?= e(substr($s['start_time'], 0, 5)) ?> - <?= e(substr($s['end_time'], 0, 5)) ?></td>
                    <td><?= (int) $s['current_players'] ?> / <?= (int) $s['max_players'] ?></td>
                    <td>
                        <span style="padding:3px 8px;border-radius:8px;font-size:11px;font-weight:600;background:<?= $statusColors[$ss] ?? '#6B7280' ?>15;color:<?= $statusColors[$ss] ?? '#6B7280' ?>;">
                            <?= $statusLabels[$ss] ?? $ss ?>
                        </span>
                    </td>
                    <td>
                        <a href="/sa/games/<?= (int) $game['id'] ?>/sessions/<?= (int) $s['id'] ?>" class="btn btn-sm btn-outline" style="font-size:11px;padding:4px 10px;">
                            <i data-lucide="eye" style="width:12px;height:12px;vertical-align:middle;margin-left:3px;"></i> تفاصيل
                        </a>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

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