<?php
use App\Modules\MatchCenter\Models\MatchEvent;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>تفاصيل المباراة<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/match-center" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة لمركز المباريات</a>
<?php if ($match->status === 'live'): ?>
<a href="/match-center/<?= (int) $match->id ?>/live" class="btn btn-primary"><i data-lucide="radio" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> الإدخال المباشر</a>
<?php endif; ?>
<?php $__template->endSection(); ?>

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

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

<!-- Score Header -->
<div class="card" style="margin-bottom:20px;overflow:hidden;">
    <div style="padding:30px;text-align:center;background:linear-gradient(135deg, #1A1A2E, #16213E);color:#fff;">
        <div style="font-size:14px;color:#9CA3AF;margin-bottom:10px;"><?= e($match->match_title_ar) ?></div>
        <div style="display:flex;align-items:center;justify-content:center;gap:30px;">
            <div style="flex:1;text-align:center;">
                <div style="font-size:22px;font-weight:700;"><?= e($match->team_a_name) ?></div>
            </div>
            <div style="font-size:48px;font-weight:900;min-width:120px;letter-spacing:4px;">
                <?= (int) $match->score_a ?> - <?= (int) $match->score_b ?>
            </div>
            <div style="flex:1;text-align:center;">
                <div style="font-size:22px;font-weight:700;"><?= e($match->team_b_name) ?></div>
            </div>
        </div>
        <div style="margin-top:15px;">
            <span style="display:inline-block;padding:4px 16px;border-radius:12px;font-size:12px;font-weight:700;background:<?= $statusColors[$currentStatus] ?>20;color:<?= $statusColors[$currentStatus] ?>;border:1px solid <?= $statusColors[$currentStatus] ?>50;<?= $currentStatus === 'live' ? 'animation:pulse 1.5s infinite;' : '' ?>">
                <?= $statusLabels[$currentStatus] ?>
            </span>
        </div>
    </div>
</div>

<!-- Match Info -->
<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;">معلومات المباراة</h3>
    </div>
    <div style="padding:20px;display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:15px;">
        <div>
            <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">التاريخ</div>
            <div style="font-size:14px;font-weight:600;color:#1A1A2E;"><?= e($match->match_date) ?></div>
        </div>
        <div>
            <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">وقت البداية</div>
            <div style="font-size:14px;font-weight:600;color:#1A1A2E;"><?= e($match->start_time) ?></div>
        </div>
        <?php if ($match->referee_name): ?>
        <div>
            <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">الحكم</div>
            <div style="font-size:14px;font-weight:600;color:#1A1A2E;"><?= e($match->referee_name) ?></div>
        </div>
        <?php endif; ?>
        <?php if ($match->started_at): ?>
        <div>
            <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">بدأت في</div>
            <div style="font-size:14px;font-weight:600;color:#1A1A2E;"><?= e($match->started_at) ?></div>
        </div>
        <?php endif; ?>
        <?php if ($match->finished_at): ?>
        <div>
            <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">انتهت في</div>
            <div style="font-size:14px;font-weight:600;color:#1A1A2E;"><?= e($match->finished_at) ?></div>
        </div>
        <?php endif; ?>
    </div>
    <?php if ($match->notes): ?>
    <div style="padding:0 20px 20px;">
        <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">ملاحظات</div>
        <div style="font-size:14px;color:#374151;"><?= e($match->notes) ?></div>
    </div>
    <?php endif; ?>
</div>

<!-- Action Buttons -->
<?php if ($currentStatus === 'scheduled'): ?>
<div class="card" style="margin-bottom:20px;padding:20px;">
    <form method="POST" action="/match-center/<?= (int) $match->id ?>/start" style="display:inline;">
        <?= csrf_field() ?>
        <button type="submit" class="btn btn-primary" onclick="return confirm('هل تريد بدء المباراة الآن؟')">
            <i data-lucide="play" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> بدء المباراة
        </button>
    </form>
</div>
<?php elseif ($currentStatus === 'live'): ?>
<div class="card" style="margin-bottom:20px;padding:20px;display:flex;gap:10px;">
    <a href="/match-center/<?= (int) $match->id ?>/live" class="btn btn-primary">
        <i data-lucide="radio" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> الإدخال المباشر
    </a>
    <form method="POST" action="/match-center/<?= (int) $match->id ?>/end" style="display:inline;">
        <?= csrf_field() ?>
        <button type="submit" class="btn btn-outline" style="color:#DC2626;border-color:#DC2626;" onclick="return confirm('هل تريد إنهاء المباراة؟')">
            <i data-lucide="square" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إنهاء المباراة
        </button>
    </form>
</div>
<?php endif; ?>

<!-- Events Timeline -->
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;font-size:15px;color:#374151;">أحداث المباراة</h3>
    </div>
    <div style="padding:20px;">
        <?php if (empty($events)): ?>
        <div style="text-align:center;padding:30px;color:#9CA3AF;">
            <i data-lucide="clock" style="width:32px;height:32px;margin:0 auto 10px;display:block;"></i>
            <p>لا توجد أحداث مسجلة حتى الآن</p>
        </div>
        <?php else: ?>
        <div style="position:relative;padding-right:30px;">
            <!-- Timeline line -->
            <div style="position:absolute;right:12px;top:0;bottom:0;width:2px;background:#E5E7EB;"></div>

            <?php foreach ($events as $event):
                $evColor = MatchEvent::getEventTypeColor($event['event_type']);
                $evIcon = MatchEvent::getEventTypeIcon($event['event_type']);
                $evLabel = $eventTypes[$event['event_type']] ?? $event['event_type'];
                $teamLabel = $event['team'] === 'a' ? $match->team_a_name : ($event['team'] === 'b' ? $match->team_b_name : '');
            ?>
            <div style="position:relative;margin-bottom:20px;padding-right:25px;">
                <!-- Timeline dot -->
                <div style="position:absolute;right:-24px;top:4px;width:16px;height:16px;border-radius:50%;background:<?= $evColor ?>;display:flex;align-items:center;justify-content:center;">
                    <div style="width:6px;height:6px;border-radius:50%;background:#fff;"></div>
                </div>

                <div style="display:flex;align-items:start;gap:12px;background:#F9FAFB;border-radius:8px;padding:12px 15px;">
                    <div style="min-width:40px;text-align:center;">
                        <span style="font-size:18px;font-weight:700;color:<?= $evColor ?>;"><?= (int) $event['minute'] ?>'</span>
                    </div>
                    <div style="flex:1;">
                        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
                            <i data-lucide="<?= e($evIcon) ?>" style="width:14px;height:14px;color:<?= $evColor ?>;"></i>
                            <span style="font-weight:600;font-size:13px;color:#374151;"><?= e($evLabel) ?></span>
                            <?php if ($teamLabel): ?>
                            <span style="font-size:11px;color:#6B7280;background:#E5E7EB;padding:2px 8px;border-radius:8px;"><?= e($teamLabel) ?></span>
                            <?php endif; ?>
                        </div>
                        <?php if ($event['player_name']): ?>
                        <div style="font-size:12px;color:#374151;"><?= e($event['player_name']) ?></div>
                        <?php endif; ?>
                        <?php if ($event['description_ar']): ?>
                        <div style="font-size:12px;color:#6B7280;margin-top:2px;"><?= e($event['description_ar']) ?></div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</div>

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

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