@extends('layouts.goberdata')

@section('title', 'Escaneo de QR')
@section('page_title', 'Escaneo de QR')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@section('content')
<div class="max-w-3xl mx-auto px-4 py-12">
        <div class="bg-white rounded-2xl shadow-xl p-8">
            <div class="text-center mb-6">
                <div class="text-6xl mb-3">📲</div>
                <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900">Escaneo de Afiches con QR</h1>
                <p class="text-gray-600 mt-2">Ingresa un código QR o prueba con un demo</p>
            </div>

            <div class="grid md:grid-cols-3 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Código QR</label>
                    <div class="flex gap-2">
                        <input id="qrCodeInput" type="text" placeholder="Ej: QRJUA006_10" class="flex-1 border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500" />
                        <button onclick="goToScan()" class="px-5 py-3 rounded-xl bg-blue-600 text-white font-semibold hover:bg-blue-700">
                            Ir
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">Se abrirá la página de escaneo para el código provisto</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Pruebas rápidas</label>
                    <div class="space-y-2">
                        <a href="{{ url('/qr/QR_DEMO_001') }}" class="block px-4 py-3 rounded-xl border-2 border-gray-200 hover:border-blue-500 hover:bg-blue-50">
                            <i class="fas fa-qrcode mr-2 text-blue-600"></i> Probar código demo
                        </a>
                        <a href="{{ url('/qr-landing') }}" class="block px-4 py-3 rounded-xl border-2 border-gray-200 hover:border-purple-500 hover:bg-purple-50">
                            <i class="fas fa-bullhorn mr-2 text-purple-600"></i> Ver landing de campaña (demo)
                        </a>
                    </div>
                </div>
            </div>

            <div class="mt-8 p-4 rounded-xl bg-yellow-50 text-yellow-800 text-sm">
                <i class="fas fa-info-circle mr-2"></i>
                Si el código no existe en la base de datos, la página de escaneo mostrará contenido de demostración para facilitar la prueba.
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        function goToScan() {
            const code = document.getElementById('qrCodeInput').value.trim();
            if (!code) return;
            window.location.href = `/qr/${encodeURIComponent(code)}`;
        }
        document.getElementById('qrCodeInput').addEventListener('keydown', function(e){
            if (e.key === 'Enter') { goToScan(); }
        });
    </script>
@endpush