@extends('layouts.app')
@section('content')
@php
    $status = $result['status'] ?? null;
    $isAllowed = $status === 'valid';
    $resultClass = $status ? ($isAllowed ? 'verify-valid' : 'verify-invalid') : '';
@endphp
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-3 no-print">
    <div>
        <div class="page-kicker">Gate scan</div>
        <h1 class="page-title">Scanner checkpoint</h1>
        <div class="muted-line">Scan ticket barcode, ticket QR, or membership card. The field stays ready for the next scan.</div>
    </div>
    <span class="quick-chip"><i class="bi bi-upc-scan"></i> Scanner ready</span>
</div>

<div class="row g-3">
    <div class="col-xl-5">
        <div class="panel panel-pad">
            <h2 class="h5 mb-3">Scan input</h2>
            <form method="post" action="{{ route('verification.verify') }}" id="scanForm" autocomplete="off">
                @csrf
                <label class="form-label">Gate</label>
                @if($gates->count())
                    <select class="form-select mb-3" name="gate_name" id="gateName" required>
                        @foreach($gates as $gate)
                            <option value="{{ $gate->name }}" @selected(old('gate_name', request('gate_name', $appSettings['default_gate'] ?? 'Main Gate')) === $gate->name)>{{ $gate->name }}</option>
                        @endforeach
                    </select>
                @else
                    <input class="form-control mb-3" name="gate_name" id="gateName" value="{{ old('gate_name', $appSettings['default_gate'] ?? 'Main Gate') }}" required>
                @endif

                <label class="form-label">Barcode / QR payload</label>
                <input class="form-control form-control-lg scan-input mb-2" name="code" id="scanCode" value="" autofocus required placeholder="Scan here">
                <div class="muted-line mb-3">Most scanners type the code and press Enter automatically.</div>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary flex-grow-1"><i class="bi bi-upc-scan me-1"></i> Verify</button>
                    <button class="btn btn-outline-secondary" type="button" id="clearScan">Clear</button>
                </div>
            </form>
        </div>

        <div class="panel panel-pad mt-3">
            <h2 class="h5 mb-3">Last scans</h2>
            <div class="activity-scroll" style="max-height:330px">
                @forelse($recentScans as $scan)
                    <div class="activity-item d-flex gap-3 align-items-start">
                        <div class="activity-icon"><i class="bi {{ $scan->status === 'valid' ? 'bi-check2-circle' : 'bi-x-circle' }}"></i></div>
                        <div class="flex-grow-1">
                            <div class="fw-semibold">{{ $scan->message }}</div>
                            <div class="muted-line">{{ $scan->gate_name }} - {{ $scan->entry_time->format('d M h:i:s A') }}</div>
                        </div>
                        <span class="badge badge-soft">{{ strtoupper($scan->status) }}</span>
                    </div>
                @empty
                    <div class="empty-note">No scans yet.</div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="col-xl-7">
        @isset($result)
            <div class="panel panel-pad scan-result {{ $resultClass }}">
                <div class="scan-status-icon"><i class="bi {{ $isAllowed ? 'bi-check-circle-fill' : 'bi-x-octagon-fill' }}"></i></div>
                <div class="page-kicker">Scan result</div>
                <h2 class="scan-result-title">{{ $isAllowed ? 'ENTRY ALLOWED' : strtoupper($result['status']) }}</h2>
                <p class="lead mb-3">{{ $result['message'] }}</p>
                @if($result['ticket'])
                    <div class="scan-detail-grid">
                        <div><span>Ticket</span><strong>{{ $result['ticket']->ticket_number }}</strong></div>
                        <div><span>Category</span><strong>{{ $result['ticket']->category->name ?? '-' }}</strong></div>
                        <div><span>Status</span><strong>{{ strtoupper($result['ticket']->status) }}</strong></div>
                        <div><span>Gate</span><strong>{{ $result['ticket']->gate_name ?: request('gate_name') }}</strong></div>
                    </div>
                @endif
                @if($result['membership'])
                    <div class="scan-detail-grid">
                        <div><span>Member</span><strong>{{ $result['membership']->name }}</strong></div>
                        <div><span>Member no</span><strong>{{ $result['membership']->membership_number }}</strong></div>
                        <div><span>Valid till</span><strong>{{ $result['membership']->expiry_date->format('d M Y') }}</strong></div>
                        <div><span>Status</span><strong>{{ strtoupper($result['membership']->status) }}</strong></div>
                    </div>
                @endif
            </div>
        @else
            <div class="panel panel-pad scan-result scan-idle">
                <div class="scan-status-icon"><i class="bi bi-upc-scan"></i></div>
                <div class="page-kicker">Waiting</div>
                <h2 class="scan-result-title">READY TO SCAN</h2>
                <p class="lead mb-0">Scan a ticket or membership card. Valid tickets are marked used immediately.</p>
            </div>
        @endisset
    </div>
</div>
@endsection

@push('scripts')
<script>
const scanInput = document.getElementById('scanCode');
const scanForm = document.getElementById('scanForm');
const clearScan = document.getElementById('clearScan');
const lastStatus = @json($status);

function focusScanner() {
    if (!scanInput) return;
    scanInput.value = '';
    scanInput.focus({ preventScroll: true });
}

function beep(ok) {
    try {
        const audio = new (window.AudioContext || window.webkitAudioContext)();
        const oscillator = audio.createOscillator();
        const gain = audio.createGain();
        oscillator.connect(gain);
        gain.connect(audio.destination);
        oscillator.frequency.value = ok ? 880 : 220;
        gain.gain.value = 0.05;
        oscillator.start();
        setTimeout(() => { oscillator.stop(); audio.close(); }, ok ? 130 : 240);
    } catch (e) {}
}

scanInput?.addEventListener('keydown', event => {
    if (event.key === 'Enter') {
        event.preventDefault();
        if (scanInput.value.trim().length > 0) {
            scanForm.submit();
        }
    }
});

clearScan?.addEventListener('click', focusScanner);
document.addEventListener('click', event => {
    if (!event.target.closest('input, textarea, select, button, a')) focusScanner();
});

window.addEventListener('load', () => {
    focusScanner();
    if (lastStatus) beep(lastStatus === 'valid');
});

setTimeout(focusScanner, 600);
</script>
@endpush