@extends('layouts.app')

@section('title', 'Gate Scanner & Attendance Dashboard - MTPGA')

@section('content')

<div class="space-y-6">

    <!-- Top Action Bar
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
        <div>
            <h2 class="text-xl font-bold text-brand-navy flex items-center gap-2">
                <i class="fa-solid fa-shield-halved text-brand-gold"></i> Gate Attendance Control
            </h2>
            <p class="text-xs text-slate-500">Scan QR codes or lookup member IDs for fast entry verification</p>
        </div>

        <div class="flex items-center gap-2 w-full sm:w-auto">
            <a href="{{ route('admin.attendance.export') }}" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg text-xs font-bold transition flex items-center gap-2">
                <i class="fa-solid fa-file-csv"></i> Export CSV
            </a>
            <form action="{{ route('admin.logout') }}" method="POST">
                @csrf
                <button type="submit" class="bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-lg text-xs font-bold transition flex items-center gap-2">
                    <i class="fa-solid fa-right-from-bracket"></i> Logout
                </button>
            </form>
        </div>
    </div> -->

    <!-- Live Stat Counters -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold uppercase text-slate-400">Total Registered</p>
                <p class="text-2xl font-black text-brand-navy mt-1">{{ $stats['total'] }}</p>
            </div>
            <div class="w-10 h-10 rounded-full bg-slate-100 text-brand-navy flex items-center justify-center text-lg">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>

        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold uppercase text-slate-400">Marked Present</p>
                <p class="text-2xl font-black text-emerald-600 mt-1">{{ $stats['checked_in'] }}</p>
            </div>
            <div class="w-10 h-10 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center text-lg">
                <i class="fa-solid fa-circle-check"></i>
            </div>
        </div>

        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold uppercase text-slate-400">Pending Arrival</p>
                <p class="text-2xl font-black text-amber-600 mt-1">{{ $stats['pending'] }}</p>
            </div>
            <div class="w-10 h-10 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center text-lg">
                <i class="fa-solid fa-clock"></i>
            </div>
        </div>
    </div>

    <!-- Gate Scanner Card -->
    <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
        <div class="flex items-center justify-between border-b pb-3">
            <h3 class="font-bold text-brand-navy text-sm uppercase tracking-wide flex items-center gap-2">
                <i class="fa-solid fa-qrcode text-brand-gold"></i> Fast Gate Check-In
            </h3>
            <button id="toggleCameraBtn" class="bg-brand-navy hover:bg-slate-800 text-white px-3 py-1.5 rounded-lg text-xs font-semibold transition flex items-center gap-1.5">
                <i class="fa-solid fa-camera"></i> <span id="cameraBtnText">Start Camera Scanner</span>
            </button>
        </div>

        <!-- Camera Scanner Video Box -->
        <div id="cameraScannerBox" class="hidden my-4 bg-black rounded-xl overflow-hidden p-2 text-center max-w-sm mx-auto">
            <div id="reader" class="w-full"></div>
            <p class="text-xs text-white/70 mt-2 pb-1">Align attendee pass QR code within camera view</p>
        </div>

        <!-- Manual Registration Code Input -->
        <form id="checkInForm" class="flex gap-2">
            @csrf
            <input type="text" name="registration_code" id="registration_code" required placeholder="Enter Reg Code (e.g. MTPGA-2026-89412)" class="flex-1 bg-slate-50 border border-slate-300 rounded-lg px-4 py-2.5 text-sm uppercase font-mono focus:ring-2 focus:ring-brand-gold focus:outline-none">
            <button type="submit" id="checkInBtn" class="bg-brand-gold hover:bg-amber-600 text-white font-bold px-6 py-2.5 rounded-lg text-sm transition flex items-center gap-2">
                <i class="fa-solid fa-check"></i> Check-In
            </button>
        </form>

        <!-- Dynamic Scan Feedback Banner -->
        <div id="scanResultBox" class="hidden p-4 rounded-xl text-sm font-semibold transition-all"></div>
    </div>

    <!-- Attendance Table & Filters -->
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden space-y-4 p-4">
        <form method="GET" action="{{ route('admin.attendance.index') }}" class="grid grid-cols-1 sm:grid-cols-4 gap-3">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name, email, phone..." class="bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-gold">
            
            <select name="status" class="bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-gold">
                <option value="all">All Statuses</option>
                <option value="registered" {{ request('status') === 'registered' ? 'selected' : '' }}>Pending</option>
                <option value="checked_in" {{ request('status') === 'checked_in' ? 'selected' : '' }}>Checked In</option>
            </select>

            <select name="pass_type" class="bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-gold">
                <option value="all">All Pass Types</option>
                <option value="general" {{ request('pass_type') === 'general' ? 'selected' : '' }}>General Admission</option>
                <option value="international" {{ request('pass_type') === 'international' ? 'selected' : '' }}>International</option>
                <option value="virtual" {{ request('pass_type') === 'virtual' ? 'selected' : '' }}>Virtual</option>
            </select>

            <button type="submit" class="bg-slate-800 text-white rounded-lg px-4 py-2 text-xs font-bold hover:bg-slate-900 transition">
                Filter Results
            </button>
        </form>

        <div class="overflow-x-auto">
    <table class="w-full text-left border-collapse text-xs">
        <thead>
            <tr class="bg-slate-100 text-slate-700 font-bold uppercase tracking-wider border-b">
                <th class="p-3">Attendee Name</th>
                <th class="p-3">Reg Code</th>
                <th class="p-3">Pass Type</th>
                <th class="p-3">Contact</th>
                <th class="p-3">Status</th>
                <th class="p-3">Check-In Time</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            @forelse($registrations as $reg)
            <tr class="hover:bg-slate-50 transition">
                <td class="p-3 font-semibold text-slate-900">{{ $reg->full_name }}</td>
                <td class="p-3 font-mono font-bold text-slate-600">{{ $reg->registration_code }}</td>
                <td class="p-3">
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase border
                        {{ $reg->pass_type === 'international' ? 'bg-purple-50 text-purple-700 border-purple-200' : ($reg->pass_type === 'virtual' ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-slate-100 text-slate-700 border-slate-200') }}">
                        {{ $reg->pass_type }}
                    </span>
                </td>
                <td class="p-3 text-slate-500">{{ $reg->phone }} <br><span class="text-[10px] text-slate-400">{{ $reg->email }}</span></td>
                <td class="p-3">
                    @if($reg->status === 'checked_in')
                        <span class="px-2 py-1 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800 flex items-center gap-1 w-fit">
                            <i class="fa-solid fa-check"></i> Present
                        </span>
                    @else
                        <span class="px-2 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 flex items-center gap-1 w-fit">
                            <i class="fa-solid fa-clock"></i> Pending
                        </span>
                    @endif
                </td>
                <td class="p-3 text-slate-500">
                    {{ $reg->checked_in_at ? $reg->checked_in_at->format('M d, h:i A') : '—' }}
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="text-center p-6 text-slate-400 font-medium">No attendee records found.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

        <div class="pt-2">
            {{ $registrations->links() }}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
    $(document).ready(function() {
        let html5QrCode = null;
        let isScanning = false;

        // Manual Check-In Submit
        $('#checkInForm').on('submit', function(e) {
            e.preventDefault();
            processCheckIn($('#registration_code').val());
        });

        function processCheckIn(code) {
            if (!code) return;

            var $btn =$('#checkInBtn');
            $btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i>');

            $.ajax({
                url: "{{ route('admin.attendance.checkin') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    registration_code: code
                },
                success: function(res) {
                    showBanner('bg-emerald-100 border border-emerald-300 text-emerald-800', 
                        `<i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i> ENTRY GRANTED: ${res.data.full_name} (${res.data.pass_type})`
                    );
                    $('#registration_code').val('');
                    setTimeout(() => location.reload(), 1500);
                },
                error: function(xhr) {
                    var res = xhr.responseJSON;
                    if (xhr.status === 409) {
                        showBanner('bg-amber-100 border border-amber-300 text-amber-800', 
                            `<i class="fa-solid fa-triangle-exclamation text-amber-600 text-lg"></i> ATTENTION: ${res.data.full_name} is ${res.message}`
                        );
                    } else {
                        showBanner('bg-red-100 border border-red-300 text-red-800', 
                            `<i class="fa-solid fa-circle-xmark text-red-600 text-lg"></i> ERROR: ${res.message || 'Check-in failed'}`
                        );
                    }
                },
                complete: function() {
                    $btn.prop('disabled', false).html('<i class="fa-solid fa-check"></i> Check-In');
                }
            });
        }

        function showBanner(cssClasses, htmlContent) {
            $('#scanResultBox').attr('class', 'p-4 rounded-xl text-sm font-semibold transition-all flex items-center gap-3 ' + cssClasses)
                .html(htmlContent).removeClass('hidden');
        }

        // HTML5 Camera QR Code Scanner Integration
        $('#toggleCameraBtn').on('click', function() {
            if (!isScanning) {
                $('#cameraScannerBox').removeClass('hidden');
                $('#cameraBtnText').text('Stop Camera Scanner');
                isScanning = true;

                html5QrCode = new Html5Qrcode("reader");
                html5QrCode.start(
                    { facingMode: "environment" },
                    { fps: 10, qrbox: { width: 220, height: 220 } },
                    (decodedText) => {
                        processCheckIn(decodedText);
                        stopScanner();
                    },
                    (errorMessage) => { /* ignore frame parse errors */ }
                ).catch(err => {
                    alert("Unable to access camera: " + err);
                    stopScanner();
                });
            } else {
                stopScanner();
            }
        });

        function stopScanner() {
            if (html5QrCode && isScanning) {
                html5QrCode.stop().then(() => {
                    $('#cameraScannerBox').addClass('hidden');
                    $('#cameraBtnText').text('Start Camera Scanner');
                    isScanning = false;
                });
            }
        }
    });
</script>
@endpush