<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>البوابة — مسح الكروت<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/gate/log" class="btn btn-outline"><i data-lucide="list" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> السجل</a>
<?php $__template->endSection(); ?>

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

<!-- Stats -->
<div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:16px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">إجمالي المسح</div>
        <div style="font-size:22px;font-weight:800;color:#1A1A2E;margin-top:4px;"><?= (int) ($todayStats['total_scans'] ?? 0) ?></div>
    </div>
    <div class="card" style="padding:16px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">دخول مسموح</div>
        <div style="font-size:22px;font-weight:800;color:#059669;margin-top:4px;"><?= (int) ($todayStats['entries'] ?? 0) ?></div>
    </div>
    <div class="card" style="padding:16px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">مرفوض</div>
        <div style="font-size:22px;font-weight:800;color:#DC2626;margin-top:4px;"><?= (int) ($todayStats['denied'] ?? 0) ?></div>
    </div>
    <div class="card" style="padding:16px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">لاعبين مختلفين</div>
        <div style="font-size:22px;font-weight:800;color:#2563EB;margin-top:4px;"><?= (int) ($todayStats['unique_players'] ?? 0) ?></div>
    </div>
</div>

<!-- Scan Interface -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;font-size:16px;font-weight:600;"><i data-lucide="scan" style="width:18px;height:18px;vertical-align:middle;margin-left:6px;"></i> مسح الكارت</h3>
    </div>
    <div style="padding:30px;text-align:center;">
        <div style="max-width:400px;margin:0 auto;">
            <input type="text" id="scanInput" class="form-input" placeholder="امسح QR أو أدخل رقم الكارت..." dir="ltr" style="font-size:18px;text-align:center;padding:14px;" autofocus>
            <button type="button" id="btnScan" class="btn btn-primary" style="margin-top:12px;width:100%;padding:12px;font-size:16px;"><i data-lucide="shield-check" style="width:18px;height:18px;vertical-align:middle;margin-left:6px;"></i> تحقق</button>
        </div>

        <!-- Result Display -->
        <div id="scanResult" style="display:none;margin-top:20px;padding:20px;border-radius:12px;max-width:400px;margin-left:auto;margin-right:auto;">
        </div>
    </div>
</div>

<!-- Recent Entries -->
<?php if (!empty($recentEntries)): ?>
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;font-size:15px;font-weight:600;">آخر العمليات اليوم</h3>
    </div>
    <table style="width:100%;border-collapse:collapse;font-size:13px;">
        <thead>
            <tr style="background:#F9FAFB;">
                <th style="padding:8px 15px;text-align:right;font-weight:600;color:#6B7280;">الوقت</th>
                <th style="padding:8px 15px;text-align:right;font-weight:600;color:#6B7280;">اللاعب</th>
                <th style="padding:8px 15px;text-align:right;font-weight:600;color:#6B7280;">الكارت</th>
                <th style="padding:8px 15px;text-align:right;font-weight:600;color:#6B7280;">النتيجة</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($recentEntries as $entry): ?>
            <tr style="border-top:1px solid #F3F4F6;">
                <td style="padding:8px 15px;direction:ltr;text-align:right;"><?= e(substr($entry['recorded_at'], 11, 5)) ?></td>
                <td style="padding:8px 15px;"><?= e($entry['full_name_ar']) ?></td>
                <td style="padding:8px 15px;direction:ltr;text-align:right;font-size:12px;"><?= e($entry['card_number'] ?? '—') ?></td>
                <td style="padding:8px 15px;">
                    <?php if ((int) $entry['granted']): ?>
                    <span style="color:#059669;font-weight:600;">✓ دخول</span>
                    <?php else: ?>
                    <span style="color:#DC2626;font-weight:600;">✗ <?= e($entry['denial_reason'] ?? 'مرفوض') ?></span>
                    <?php endif; ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?php endif; ?>

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

    var scanInput = document.getElementById('scanInput');
    var btnScan = document.getElementById('btnScan');
    var scanResult = document.getElementById('scanResult');
    var csrfToken = '';
    var csrfInput = document.querySelector('input[name="_csrf_token"]');
    if (csrfInput) csrfToken = csrfInput.value;

    function doScan() {
        var data = scanInput.value.trim();
        if (!data) return;

        btnScan.disabled = true;
        fetch('/sa/gate/scan', {
            method: 'POST',
            headers: {'Content-Type':'application/json','X-Requested-With':'XMLHttpRequest','X-CSRF-TOKEN': csrfToken},
            body: JSON.stringify({scanned_data: data, _csrf_token: csrfToken})
        }).then(function(r){return r.json();}).then(function(res) {
            btnScan.disabled = false;
            scanResult.style.display = 'block';

            if (res.granted) {
                scanResult.style.background = '#ECFDF5';
                scanResult.style.border = '2px solid #059669';
                scanResult.innerHTML = '<div style="font-size:40px;margin-bottom:8px;">✓</div>' +
                    '<div style="font-size:18px;font-weight:700;color:#059669;">مسموح بالدخول</div>' +
                    '<div style="margin-top:8px;font-size:14px;color:#1A1A2E;">' + (res.player_name || '') + '</div>' +
                    '<div style="font-size:12px;color:#6B7280;">' + (res.card_number || '') + '</div>';
            } else {
                scanResult.style.background = '#FEF2F2';
                scanResult.style.border = '2px solid #DC2626';
                scanResult.innerHTML = '<div style="font-size:40px;margin-bottom:8px;">✗</div>' +
                    '<div style="font-size:18px;font-weight:700;color:#DC2626;">ممنوع الدخول</div>' +
                    '<div style="margin-top:8px;font-size:14px;color:#DC2626;">' + (res.reason || '') + '</div>' +
                    (res.player_name ? '<div style="font-size:12px;color:#6B7280;margin-top:4px;">' + res.player_name + '</div>' : '');
            }

            scanInput.value = '';
            scanInput.focus();

            setTimeout(function() { scanResult.style.display = 'none'; }, 5000);
        }).catch(function() {
            btnScan.disabled = false;
        });
    }

    btnScan.addEventListener('click', doScan);
    scanInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') { e.preventDefault(); doScan(); }
    });
});
</script>
<?php $__template->endSection(); ?>
