@extends('layouts.app')
@section('title', 'Barcode Scanner')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

    {{-- Scanner Panel --}}
    <div class="bg-white rounded-xl shadow p-6">
        <h2 class="text-xl font-bold mb-1">🔍 Barcode Scanner</h2>
        <p class="text-gray-400 text-sm mb-4">Use the camera or type a barcode manually.</p>

        {{-- Result Banner --}}
        <div id="scan-result" class="hidden mb-4 p-4 rounded-lg text-center font-semibold text-base"></div>

        {{-- Camera Toggle --}}
        <div class="flex gap-2 mb-4">
            <button id="btn-camera"
                onclick="startCamera()"
                class="flex-1 bg-indigo-600 text-white py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition">
                📷 Use Camera
            </button>
            <button id="btn-stop"
                onclick="stopCamera()"
                class="hidden flex-1 bg-red-500 text-white py-2 rounded-lg text-sm font-semibold hover:bg-red-600 transition">
                ⏹ Stop Camera
            </button>
        </div>

        {{-- Camera Feed --}}
        <div id="camera-container" class="hidden mb-4">
            <div class="relative bg-black rounded-xl overflow-hidden" style="height:260px;">
                <video id="camera-video" autoplay playsinline muted
                       class="w-full h-full object-cover"></video>
                <canvas id="camera-canvas" class="hidden"></canvas>

                {{-- Scanning overlay --}}
                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <div class="border-2 border-indigo-400 rounded-lg opacity-80"
                         style="width:260px; height:100px;">
                        <div id="scan-line"
                             class="w-full h-0.5 bg-indigo-400 opacity-80"
                             style="animation: scanLine 2s linear infinite;"></div>
                    </div>
                </div>
            </div>
            <p id="camera-status" class="text-xs text-center text-gray-400 mt-2">
                Point the camera at a barcode…
            </p>
        </div>

        {{-- Manual Input --}}
        <form id="scan-form">
            @csrf
            <label class="block text-xs text-gray-500 mb-1">Or type / paste barcode manually:</label>
            <div class="flex gap-2">
                <input
                    type="text"
                    id="barcode-input"
                    name="barcode"
                    placeholder="e.g. STU-ABC1234567"
                    autocomplete="off"
                    class="flex-1 border-2 border-indigo-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:border-indigo-600"
                >
                <button type="submit"
                    class="bg-indigo-600 text-white px-4 py-2.5 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition">
                    Submit
                </button>
            </div>
        </form>

        {{-- Daily Stats --}}
        <div class="mt-6 grid grid-cols-3 gap-3 text-center">
            <div class="bg-green-50 rounded-lg p-3">
                <div class="text-2xl font-bold text-green-600">{{ $stats['total_present'] }}</div>
                <div class="text-xs text-gray-500 mt-1">Present</div>
            </div>
            <div class="bg-yellow-50 rounded-lg p-3">
                <div class="text-2xl font-bold text-yellow-600">{{ $stats['total_late'] }}</div>
                <div class="text-xs text-gray-500 mt-1">Late</div>
            </div>
            <div class="bg-red-50 rounded-lg p-3">
                <div class="text-2xl font-bold text-red-600">{{ $stats['total_denied'] }}</div>
                <div class="text-xs text-gray-500 mt-1">Denied</div>
            </div>
        </div>
    </div>

    {{-- Recent Scans --}}
    <div class="bg-white rounded-xl shadow p-6">
        <h2 class="text-xl font-bold mb-4">Recent Scans Today</h2>
        <div id="recent-list" class="space-y-2">
            @forelse($recentScans as $scan)
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div>
                    <div class="font-medium text-gray-800">{{ $scan->student->name }}</div>
                    <div class="text-xs text-gray-400">{{ $scan->checked_in_at->format('H:i:s') }}</div>
                </div>
                <span class="px-2 py-1 text-xs rounded-full font-medium
                    {{ $scan->status === 'present' ? 'bg-green-100 text-green-700' :
                       ($scan->status === 'late'   ? 'bg-yellow-100 text-yellow-700' :
                                                     'bg-red-100 text-red-700') }}">
                    {{ ucfirst($scan->status) }}
                </span>
            </div>
            @empty
                <p class="text-gray-400 text-sm">No scans recorded today yet.</p>
            @endforelse
        </div>
    </div>

</div>

<style>
@keyframes scanLine {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(98px); }
    100% { transform: translateY(0); }
}
</style>
@endsection

@push('scripts')
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>

<script>
let html5QrCode  = null;
let cameraActive = false;
let lastScanned  = '';
let lastScannedAt = 0;

async function startCamera() {
    document.getElementById('camera-container').classList.remove('hidden');
    document.getElementById('btn-camera').classList.add('hidden');
    document.getElementById('btn-stop').classList.remove('hidden');

    html5QrCode = new Html5Qrcode("camera-video");

    const config = {
        fps: 10,
        qrbox: { width: 250, height: 120 },
        formatsToSupport: [
            Html5QrcodeSupportedFormats.CODE_128,
            Html5QrcodeSupportedFormats.CODE_39,
            Html5QrcodeSupportedFormats.QR_CODE,
            Html5QrcodeSupportedFormats.EAN_13,
        ]
    };

    try {
        await html5QrCode.start(
            { facingMode: "environment" },
            config,
            (decodedText) => {
                const now = Date.now();
                if (decodedText === lastScanned && (now - lastScannedAt) < 3000) return;
                lastScanned   = decodedText;
                lastScannedAt = now;
                document.getElementById('camera-status').textContent = `Detected: ${decodedText}`;
                submitBarcode(decodedText);
            },
            () => {} // ignore not-found frames silently
        );
        cameraActive = true;
        document.getElementById('camera-status').textContent = 'Camera active — point at barcode…';

    } catch (err) {
        const msg = err.toString().includes('NotAllowedError')
            ? 'Camera permission denied. Please allow camera access and try again.'
            : 'Could not start camera: ' + err;
        showResult(false, msg);
        stopCamera();
    }
}

async function stopCamera() {
    if (html5QrCode && cameraActive) {
        await html5QrCode.stop();
        html5QrCode.clear();
    }
    cameraActive = false;
    document.getElementById('camera-container').classList.add('hidden');
    document.getElementById('btn-camera').classList.remove('hidden');
    document.getElementById('btn-stop').classList.add('hidden');
    document.getElementById('camera-status').textContent = 'Point the camera at a barcode…';
}

document.getElementById('scan-form').addEventListener('submit', function (e) {
    e.preventDefault();
    const barcode = document.getElementById('barcode-input').value.trim();
    if (!barcode) return;
    submitBarcode(barcode);
    document.getElementById('barcode-input').value = '';
});

async function submitBarcode(barcode) {
    try {
        const res = await fetch('{{ route("attendance.scan") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept':       'application/json',
            },
            body: JSON.stringify({ barcode }),
        });

        const data = await res.json();
        showResult(data.success, data.message);
        if (data.success) setTimeout(() => location.reload(), 2000);

    } catch (err) {
        showResult(false, 'Network error. Please try again.');
    }
}

function showResult(success, message) {
    const el = document.getElementById('scan-result');
    el.className = 'mb-4 p-4 rounded-lg text-center font-semibold text-base ' +
        (success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700');
    el.textContent = message;
    el.classList.remove('hidden');
    setTimeout(() => el.classList.add('hidden'), 4000);
}
</script>
@endpush