<?php
use App\Modules\Tournaments\Models\TournamentMatch;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>تسجيل نتيجة المباراة<?php $__template->endSection(); ?>

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

<div class="card" style="padding:25px;max-width:700px;">
    <h2 style="margin:0 0 20px;font-size:18px;color:#1A1A2E;">
        <i data-lucide="clipboard-list" style="width:20px;height:20px;vertical-align:middle;margin-left:6px;color:#0D7377;"></i>
        تسجيل نتيجة المباراة
    </h2>

    <div style="margin-bottom:20px;padding:15px;background:#F9FAFB;border-radius:8px;border:1px solid #E5E7EB;">
        <div style="font-size:13px;color:#6B7280;margin-bottom:8px;">
            <?= e($match['tournament_name'] ?? '') ?> — الجولة <?= (int) ($match['round_number'] ?? 0) ?>
        </div>
        <div style="display:flex;align-items:center;justify-content:center;gap:20px;font-size:16px;font-weight:600;">
            <span style="color:#1A1A2E;"><?= e($match['participant_a_name'] ?? 'مشارك أ') ?></span>
            <span style="color:#9CA3AF;font-size:20px;">VS</span>
            <span style="color:#1A1A2E;"><?= e($match['participant_b_name'] ?? 'مشارك ب') ?></span>
        </div>
    </div>

    <form method="POST" action="/matches/<?= (int) $match['id'] ?>/result">
        <?= csrf_field() ?>

        <!-- Scores -->
        <div style="display:grid;grid-template-columns:1fr auto 1fr;gap:15px;align-items:end;margin-bottom:20px;">
            <div>
                <label class="form-label"><?= e($match['participant_a_name'] ?? 'مشارك أ') ?></label>
                <input type="text" name="score_a" value="<?= e(old('score_a') ?? '') ?>" class="form-input" style="text-align:center;font-size:18px;font-weight:700;" placeholder="0">
            </div>
            <div style="padding-bottom:10px;color:#9CA3AF;font-weight:600;">—</div>
            <div>
                <label class="form-label"><?= e($match['participant_b_name'] ?? 'مشارك ب') ?></label>
                <input type="text" name="score_b" value="<?= e(old('score_b') ?? '') ?>" class="form-input" style="text-align:center;font-size:18px;font-weight:700;" placeholder="0">
            </div>
        </div>

        <!-- Winner Selection -->
        <div style="margin-bottom:20px;" id="winnerSection">
            <label class="form-label">الفائز</label>
            <div style="display:flex;gap:15px;flex-wrap:wrap;">
                <?php if ($match['participant_a_id']): ?>
                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border:1px solid #E5E7EB;border-radius:6px;">
                    <input type="radio" name="winner_participant_id" value="<?= (int) $match['participant_a_id'] ?>">
                    <span><?= e($match['participant_a_name'] ?? '') ?></span>
                </label>
                <?php endif; ?>
                <?php if ($match['participant_b_id']): ?>
                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border:1px solid #E5E7EB;border-radius:6px;">
                    <input type="radio" name="winner_participant_id" value="<?= (int) $match['participant_b_id'] ?>">
                    <span><?= e($match['participant_b_name'] ?? '') ?></span>
                </label>
                <?php endif; ?>
            </div>
        </div>

        <!-- Draw checkbox -->
        <?php if (($match['tournament_format'] ?? '') !== 'knockout'): ?>
        <div style="margin-bottom:20px;">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                <input type="checkbox" name="is_draw" value="1" id="isDrawCheck" style="width:18px;height:18px;">
                <span style="font-size:14px;color:#374151;">تعادل</span>
            </label>
        </div>
        <?php endif; ?>

        <!-- Referee & Notes -->
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">
            <div>
                <label class="form-label">الحكم</label>
                <input type="text" name="referee_name" value="<?= e(old('referee_name') ?? '') ?>" class="form-input" placeholder="اسم الحكم...">
            </div>
            <div>
                <label class="form-label">ملاحظات</label>
                <input type="text" name="match_notes" value="<?= e(old('match_notes') ?? '') ?>" class="form-input" placeholder="ملاحظات...">
            </div>
        </div>

        <!-- Submit -->
        <div style="display:flex;gap:10px;padding-top:15px;border-top:1px solid #E5E7EB;">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="check" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i>
                حفظ النتيجة
            </button>
            <a href="/tournaments/<?= (int) ($match['tournament_id'] ?? 0) ?>" class="btn btn-outline">العودة للبطولة</a>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();

    var drawCheck = document.getElementById('isDrawCheck');
    var winnerSection = document.getElementById('winnerSection');

    if (drawCheck && winnerSection) {
        drawCheck.addEventListener('change', function() {
            if (this.checked) {
                winnerSection.style.opacity = '0.3';
                winnerSection.style.pointerEvents = 'none';
                var radios = winnerSection.querySelectorAll('input[type=radio]');
                radios.forEach(function(r) { r.checked = false; });
            } else {
                winnerSection.style.opacity = '1';
                winnerSection.style.pointerEvents = '';
            }
        });
    }
});
</script>
<?php $__template->endSection(); ?>
