<?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/<?= (int) $match->id ?>" 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'); ?>

<!-- Current Score Display -->
<div class="card" style="margin-bottom:20px;background:linear-gradient(135deg, #1A1A2E, #16213E);color:#fff;">
    <div style="padding:25px;text-align:center;">
        <div style="font-size:13px;color:#9CA3AF;margin-bottom:8px;"><?= e($match->match_title_ar) ?></div>
        <div style="display:flex;align-items:center;justify-content:center;gap:25px;">
            <div style="flex:1;text-align:center;">
                <div style="font-size:20px;font-weight:700;"><?= e($match->team_a_name) ?></div>
            </div>
            <div style="font-size:52px;font-weight:900;min-width:120px;letter-spacing:4px;color:#FCD34D;">
                <?= (int) $match->score_a ?> - <?= (int) $match->score_b ?>
            </div>
            <div style="flex:1;text-align:center;">
                <div style="font-size:20px;font-weight:700;"><?= e($match->team_b_name) ?></div>
            </div>
        </div>
        <div style="margin-top:10px;">
            <span style="display:inline-block;padding:3px 14px;border-radius:12px;font-size:11px;font-weight:700;background:#FEE2E2;color:#DC2626;animation:pulse 1.5s infinite;">
                مباشر
            </span>
        </div>
    </div>
</div>

<!-- Direct Score Update -->
<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;">
        <form method="POST" action="/match-center/<?= (int) $match->id ?>/score" style="display:flex;align-items:end;gap:15px;">
            <?= csrf_field() ?>
            <div class="form-group" style="flex:1;">
                <label class="form-label"><?= e($match->team_a_name) ?></label>
                <input type="number" name="score_a" value="<?= (int) $match->score_a ?>" class="form-input" min="0" style="text-align:center;font-size:20px;font-weight:700;">
            </div>
            <div style="font-size:24px;font-weight:700;color:#6B7280;padding-bottom:10px;">-</div>
            <div class="form-group" style="flex:1;">
                <label class="form-label"><?= e($match->team_b_name) ?></label>
                <input type="number" name="score_b" value="<?= (int) $match->score_b ?>" class="form-input" min="0" style="text-align:center;font-size:20px;font-weight:700;">
            </div>
            <button type="submit" class="btn btn-primary" style="white-space:nowrap;">تحديث النتيجة</button>
        </form>
    </div>
</div>

<!-- Quick Event Buttons -->
<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;">
        <!-- Quick buttons to pre-fill event type -->
        <div style="display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;">
            <button type="button" class="btn btn-outline quick-event-btn" data-type="goal" style="border-color:#10B981;color:#10B981;">
                <i data-lucide="circle-dot" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> هدف
            </button>
            <button type="button" class="btn btn-outline quick-event-btn" data-type="foul" style="border-color:#F59E0B;color:#F59E0B;">
                <i data-lucide="alert-triangle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> خطأ
            </button>
            <button type="button" class="btn btn-outline quick-event-btn" data-type="yellow_card" style="border-color:#EAB308;color:#EAB308;">
                <i data-lucide="square" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> بطاقة صفراء
            </button>
            <button type="button" class="btn btn-outline quick-event-btn" data-type="red_card" style="border-color:#DC2626;color:#DC2626;">
                <i data-lucide="square" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> بطاقة حمراء
            </button>
            <button type="button" class="btn btn-outline quick-event-btn" data-type="substitution" style="border-color:#6366F1;color:#6366F1;">
                <i data-lucide="repeat" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> تبديل
            </button>
            <button type="button" class="btn btn-outline quick-event-btn" data-type="penalty" style="border-color:#8B5CF6;color:#8B5CF6;">
                <i data-lucide="target" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> ركلة جزاء
            </button>
            <button type="button" class="btn btn-outline quick-event-btn" data-type="injury" style="border-color:#EF4444;color:#EF4444;">
                <i data-lucide="heart-pulse" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إصابة
            </button>
            <button type="button" class="btn btn-outline quick-event-btn" data-type="half_time" style="border-color:#6B7280;color:#6B7280;">
                <i data-lucide="pause" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> نهاية الشوط
            </button>
            <button type="button" class="btn btn-outline quick-event-btn" data-type="other" style="border-color:#9CA3AF;color:#9CA3AF;">
                <i data-lucide="info" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> أخرى
            </button>
        </div>

        <!-- Event Form -->
        <form method="POST" action="/match-center/<?= (int) $match->id ?>/event" id="eventForm" style="display:none;background:#F9FAFB;border-radius:8px;padding:20px;">
            <?= csrf_field() ?>
            <input type="hidden" name="event_type" id="eventTypeInput" value="">

            <div style="margin-bottom:12px;font-weight:700;font-size:14px;color:#374151;">
                نوع الحدث: <span id="eventTypeLabel" style="color:#0D7377;"></span>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:15px;">
                <div class="form-group">
                    <label class="form-label">الدقيقة <span style="color:#DC2626;">*</span></label>
                    <input type="number" name="minute" class="form-input" min="0" max="120" value="0" required style="text-align:center;">
                </div>
                <div class="form-group">
                    <label class="form-label">الفريق</label>
                    <select name="team" class="form-select">
                        <option value="">-- اختر --</option>
                        <option value="a"><?= e($match->team_a_name) ?></option>
                        <option value="b"><?= e($match->team_b_name) ?></option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">اسم اللاعب</label>
                    <input type="text" name="player_name" class="form-input" placeholder="اختياري">
                </div>
            </div>

            <div class="form-group" style="margin-bottom:15px;">
                <label class="form-label">وصف</label>
                <input type="text" name="description_ar" class="form-input" placeholder="وصف اختياري للحدث">
            </div>

            <div style="display:flex;gap:10px;">
                <button type="submit" class="btn btn-primary">إضافة الحدث</button>
                <button type="button" class="btn btn-outline" id="cancelEventBtn">إلغاء</button>
            </div>
        </form>
    </div>
</div>

<!-- Events List -->
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;font-size:15px;color:#374151;">الأحداث المسجلة (<?= count($events) ?>)</h3>
    </div>
    <div style="padding:20px;">
        <?php if (empty($events)): ?>
        <div style="text-align:center;padding:20px;color:#9CA3AF;">
            لا توجد أحداث مسجلة حتى الآن
        </div>
        <?php else: ?>
        <div style="display:flex;flex-direction:column;gap:10px;">
            <?php foreach (array_reverse($events) as $event):
                $evColor = MatchEvent::getEventTypeColor($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="display:flex;align-items:center;gap:12px;background:#F9FAFB;border-radius:8px;padding:10px 15px;border-right:3px solid <?= $evColor ?>;">
                <span style="font-size:16px;font-weight:700;color:<?= $evColor ?>;min-width:35px;text-align:center;"><?= (int) $event['minute'] ?>'</span>
                <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; ?>
                <?php if ($event['player_name']): ?>
                <span style="font-size:12px;color:#374151;"><?= e($event['player_name']) ?></span>
                <?php endif; ?>
                <?php if ($event['description_ar']): ?>
                <span style="font-size:11px;color:#6B7280;">- <?= e($event['description_ar']) ?></span>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</div>

<style>
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.quick-event-btn:hover {
    transform: scale(1.05);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const eventTypeLabels = {
        'goal': 'هدف',
        'foul': 'خطأ',
        'yellow_card': 'بطاقة صفراء',
        'red_card': 'بطاقة حمراء',
        'substitution': 'تبديل',
        'penalty': 'ركلة جزاء',
        'injury': 'إصابة',
        'half_time': 'نهاية الشوط الأول',
        'full_time': 'نهاية المباراة',
        'other': 'أخرى'
    };

    const buttons = document.querySelectorAll('.quick-event-btn');
    const form = document.getElementById('eventForm');
    const typeInput = document.getElementById('eventTypeInput');
    const typeLabel = document.getElementById('eventTypeLabel');
    const cancelBtn = document.getElementById('cancelEventBtn');

    buttons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            const type = this.getAttribute('data-type');
            typeInput.value = type;
            typeLabel.textContent = eventTypeLabels[type] || type;
            form.style.display = 'block';
            form.scrollIntoView({ behavior: 'smooth', block: 'center' });
        });
    });

    cancelBtn.addEventListener('click', function() {
        form.style.display = 'none';
        typeInput.value = '';
    });
});
</script>

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