<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>مركز المباريات<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/match-center/create" class="btn btn-primary"><i data-lucide="plus" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> جدولة مباراة جديدة</a>
<?php $__template->endSection(); ?>

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

<?php
$statusLabels = [
    'live'      => 'مباشر',
    'scheduled' => 'مجدولة',
    'finished'  => 'منتهية',
    'cancelled' => 'ملغاة',
];
$statusColors = [
    'live'      => '#DC2626',
    'scheduled' => '#2563EB',
    'finished'  => '#10B981',
    'cancelled' => '#6B7280',
];
?>

<!-- Live Matches -->
<?php if (!empty($liveMatches)): ?>
<div style="margin-bottom:30px;">
    <h2 style="font-size:18px;font-weight:700;color:#DC2626;margin-bottom:15px;display:flex;align-items:center;gap:8px;">
        <span style="width:10px;height:10px;border-radius:50%;background:#DC2626;animation:pulse 1.5s infinite;"></span>
        مباريات مباشرة (<?= count($liveMatches) ?>)
    </h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));gap:20px;">
        <?php foreach ($liveMatches as $m): ?>
        <a href="/match-center/<?= (int) $m['id'] ?>" style="text-decoration:none;color:inherit;">
            <div class="card" style="border:2px solid #FCA5A5;background:linear-gradient(135deg, #FEF2F2, #FFFFFF);transition:transform 0.2s;">
                <div style="padding:20px;text-align:center;">
                    <div style="font-size:13px;color:#6B7280;margin-bottom:8px;"><?= e($m['match_title_ar']) ?></div>
                    <div style="display:flex;align-items:center;justify-content:center;gap:20px;">
                        <div style="flex:1;text-align:center;">
                            <div style="font-size:16px;font-weight:700;color:#1A1A2E;"><?= e($m['team_a_name']) ?></div>
                        </div>
                        <div style="font-size:32px;font-weight:900;color:#DC2626;min-width:80px;">
                            <?= (int) $m['score_a'] ?> - <?= (int) $m['score_b'] ?>
                        </div>
                        <div style="flex:1;text-align:center;">
                            <div style="font-size:16px;font-weight:700;color:#1A1A2E;"><?= e($m['team_b_name']) ?></div>
                        </div>
                    </div>
                    <div style="margin-top:10px;">
                        <span style="display:inline-block;padding:3px 12px;border-radius:12px;font-size:11px;font-weight:700;background:#FEE2E2;color:#DC2626;animation:pulse 1.5s infinite;">
                            مباشر
                        </span>
                    </div>
                </div>
            </div>
        </a>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>

<!-- Scheduled Matches -->
<?php if (!empty($scheduledMatches)): ?>
<div style="margin-bottom:30px;">
    <h2 style="font-size:18px;font-weight:700;color:#2563EB;margin-bottom:15px;">
        مباريات مجدولة (<?= count($scheduledMatches) ?>)
    </h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));gap:20px;">
        <?php foreach ($scheduledMatches as $m): ?>
        <a href="/match-center/<?= (int) $m['id'] ?>" style="text-decoration:none;color:inherit;">
            <div class="card" style="border:1px solid #BFDBFE;transition:transform 0.2s;">
                <div style="padding:20px;text-align:center;">
                    <div style="font-size:13px;color:#6B7280;margin-bottom:8px;"><?= e($m['match_title_ar']) ?></div>
                    <div style="display:flex;align-items:center;justify-content:center;gap:20px;">
                        <div style="flex:1;text-align:center;">
                            <div style="font-size:16px;font-weight:700;color:#1A1A2E;"><?= e($m['team_a_name']) ?></div>
                        </div>
                        <div style="font-size:14px;font-weight:600;color:#2563EB;min-width:80px;">
                            VS
                        </div>
                        <div style="flex:1;text-align:center;">
                            <div style="font-size:16px;font-weight:700;color:#1A1A2E;"><?= e($m['team_b_name']) ?></div>
                        </div>
                    </div>
                    <div style="margin-top:10px;font-size:12px;color:#6B7280;">
                        <?= e($m['match_date']) ?> - <?= e($m['start_time']) ?>
                    </div>
                    <div style="margin-top:8px;">
                        <span style="display:inline-block;padding:3px 12px;border-radius:12px;font-size:11px;font-weight:600;background:#DBEAFE;color:#2563EB;">
                            مجدولة
                        </span>
                    </div>
                </div>
            </div>
        </a>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>

<!-- Finished Matches -->
<?php if (!empty($finishedMatches)): ?>
<div style="margin-bottom:30px;">
    <h2 style="font-size:18px;font-weight:700;color:#10B981;margin-bottom:15px;">
        مباريات منتهية (<?= count($finishedMatches) ?>)
    </h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));gap:20px;">
        <?php foreach ($finishedMatches as $m): ?>
        <a href="/match-center/<?= (int) $m['id'] ?>" style="text-decoration:none;color:inherit;">
            <div class="card" style="border:1px solid #A7F3D0;transition:transform 0.2s;">
                <div style="padding:20px;text-align:center;">
                    <div style="font-size:13px;color:#6B7280;margin-bottom:8px;"><?= e($m['match_title_ar']) ?></div>
                    <div style="display:flex;align-items:center;justify-content:center;gap:20px;">
                        <div style="flex:1;text-align:center;">
                            <div style="font-size:16px;font-weight:700;color:#1A1A2E;"><?= e($m['team_a_name']) ?></div>
                        </div>
                        <div style="font-size:28px;font-weight:900;color:#10B981;min-width:80px;">
                            <?= (int) $m['score_a'] ?> - <?= (int) $m['score_b'] ?>
                        </div>
                        <div style="flex:1;text-align:center;">
                            <div style="font-size:16px;font-weight:700;color:#1A1A2E;"><?= e($m['team_b_name']) ?></div>
                        </div>
                    </div>
                    <div style="margin-top:10px;">
                        <span style="display:inline-block;padding:3px 12px;border-radius:12px;font-size:11px;font-weight:600;background:#D1FAE5;color:#10B981;">
                            منتهية
                        </span>
                    </div>
                </div>
            </div>
        </a>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>

<?php if (empty($liveMatches) && empty($scheduledMatches) && empty($finishedMatches)): ?>
<div class="card" style="padding:60px;text-align:center;">
    <i data-lucide="trophy" style="width:48px;height:48px;color:#D1D5DB;margin:0 auto 15px;display:block;"></i>
    <p style="color:#6B7280;font-size:16px;margin-bottom:15px;">لا توجد مباريات حتى الآن</p>
    <a href="/match-center/create" class="btn btn-primary">جدولة أول مباراة</a>
</div>
<?php endif; ?>

<style>
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
</style>

<?php $__template->endSection(); ?>
