@php
    $VerEditor = auth()->user()->can('Alumnos - Visor') || auth()->user()->can('Alumnos - Editor') || auth()->user()->can('Asistencias - Creador');
@endphp
@if ($VerEditor)
    @extends('layouts.app')
    @section('tituloModulo')
        ESCANNER QR
    @endsection
    @section('contenido')
        <style>
            /* Estilos específicos para mejorar la apariencia en móviles */
            #reader {
                width: 100% !important;
                height: 300px !important;
                border-radius: 8px !important;
                overflow: hidden !important;
            }
            #reader video {
                object-fit: cover !important;
            }
            /* Ajustes para dispositivos pequeños */
            @media (max-width: 576px) {
                #reader {
                    height: 250px !important;
                }
                .card-title {
                    font-size: 1.2rem !important;
                }
            }
            /* Estilos para los botones de asistencia */
            .btn-success,
            .btn-danger {
                font-weight: 600;
                letter-spacing: 0.5px;
                transition: all 0.3s ease;
            }
            .btn-success:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
            }
            .btn-danger:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
            }
            /* Animación para los iconos de los botones */
            .btn i {
                transition: transform 0.2s ease;
            }
            .btn:hover i {
                transform: scale(1.2);
            }
            /* Estilos para la sección de asistencia */
            .card-body.border-top {
                background-color: #f8f9fa;
            }
            /* Responsivo para móviles */
            @media (max-width: 576px) {
                .d-flex.gap-2 {
                    gap: 0.5rem !important;
                }
                .btn {
                    font-size: 0.875rem;
                    padding: 0.5rem 0.75rem;
                }
            }
        </style>
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10 col-xl-8">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        {{-- <h4 class="card-title mb-0">Validación de Pagos</h4> --}}
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-4 d-md-none mt-2">
                            <img src="{{ asset('assets/img/iconos/codigo-qr.png') }}" alt="Escanear QR" class="img-fluid"
                                style="max-width: 120px;">
                        </div>
                        <!-- Campo oculto para el código -->
                        <input type="hidden" id="codigo-alumno">
                        <!-- Botones de acción -->
                        <div class="d-grid gap-2 mb-4">
                            <button class="btn btn-primary" type="button" id="iniciar-escaneo">
                                <i class="bx bx-scan me-2"></i>Escanear Credencial
                            </button>
                        </div>
                        <!-- Contenedor de la cámara -->
                        <div id="lector-qr" style="display: none;">
                            <div class="position-relative">
                                <div id="reader" class="border rounded overflow-hidden"></div>
                                <button type="button" id="cerrar-scanner"
                                    class="btn btn-sm btn-light position-absolute top-0 end-0 m-2">
                                    <i class="bx bx-x"></i>
                                </button>
                            </div>
                        </div>
                        <!-- Mostrar resultados -->
                        <div id="resultado-busqueda" class="mt-3">
                            <!-- Aquí se mostrarán los resultados -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Incluir la biblioteca Html5QrcodeScanner -->
        <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
        <script>
            // Declarar variables globales
            window.alumnoActual = null;
            let resultadoBusqueda = null;
            let iniciarEscaneoBtn = null;
            // Función para registrar asistencia (en el ámbito global)
            window.registrarAsistencia = function(alumnoId, tipo) {
                // Verificar que tenemos los datos del alumno
                if (!window.alumnoActual) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se encontraron los datos del alumno'
                    });
                    return;
                }
                // Mostrar confirmación
                Swal.fire({
                    title: `¿Registrar ${tipo.toUpperCase()}?`,
                    text: `Se registrará la ${tipo} de ${window.alumnoActual.nombre_alum}`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: tipo === 'entrada' ? '#28a745' : '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: `Sí, registrar ${tipo}`,
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Mostrar loading
                        Swal.fire({
                            title: 'Registrando asistencia...',
                            text: 'Por favor espere',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                        // Preparar datos para enviar
                        const datosEnviar = {
                            alumno_id: alumnoId,
                            tipo: tipo,
                            alumno_data: window.alumnoActual
                        };
                        console.log('Enviando datos:', datosEnviar); // Para debug
                        // Enviar petición AJAX
                        fetch('{{ route('asistencias.store') }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest'
                                },
                                body: JSON.stringify(datosEnviar)
                            })
                            .then(response => {
                                console.log('Respuesta recibida:', response); // Para debug
                                // Verificar si la respuesta es OK
                                if (!response.ok) {
                                    throw new Error(`HTTP error! status: ${response.status}`);
                                }
                                return response.json();
                            })
                            .then(data => {
                                console.log('Datos recibidos:', data); // Para debug
                                if (data.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '¡Registrado!',
                                        text: `${tipo.charAt(0).toUpperCase() + tipo.slice(1)} registrada correctamente`,
                                        timer: 2000,
                                        showConfirmButton: false
                                    });
                                    // Limpiar y preparar para nuevo escaneo
                                    setTimeout(() => {
                                        if (resultadoBusqueda) {
                                            resultadoBusqueda.innerHTML = '';
                                        }
                                        if (iniciarEscaneoBtn) {
                                            iniciarEscaneoBtn.click();
                                        }
                                    }, 2000);
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: data.message || 'No se pudo registrar la asistencia'
                                    });
                                }
                            })
                            .catch(error => {
                                console.error('Error completo:', error); // Para debug
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error de conexión',
                                    text: 'No se pudo conectar con el servidor. Por favor, verifica tu conexión e intenta nuevamente.',
                                    footer: `<small>Detalles: ${error.message}</small>`
                                });
                            });
                    }
                });
            }
            document.addEventListener('DOMContentLoaded', function() {
                // Referencias a elementos del DOM
                iniciarEscaneoBtn = document.getElementById('iniciar-escaneo');
                const cerrarScannerBtn = document.getElementById('cerrar-scanner');
                const lectorQr = document.getElementById('lector-qr');
                const codigoAlumnoInput = document.getElementById('codigo-alumno');
                resultadoBusqueda = document.getElementById('resultado-busqueda');
                let html5QrCode = null;
                // Función para iniciar el escáner
                iniciarEscaneoBtn.addEventListener('click', function() {
                    lectorQr.style.display = 'block';
                    iniciarEscaneoBtn.disabled = true;
                    // Inicializar escáner
                    html5QrCode = new Html5Qrcode("reader");
                    // Configurar opciones para usar preferentemente la cámara trasera
                    html5QrCode.start({
                            facingMode: "environment"
                        }, // Intentar usar la cámara trasera
                        {
                            fps: 10,
                            qrbox: {
                                width: 250,
                                height: 250
                            },
                        },
                        onScanSuccess,
                        onScanFailure
                    ).catch(err => {
                        // Si falla al acceder a la cámara trasera, intentar con cualquier cámara disponible
                        html5QrCode.start({
                                facingMode: "user"
                            }, {
                                fps: 10,
                                qrbox: {
                                    width: 250,
                                    height: 250
                                }
                            },
                            onScanSuccess,
                            onScanFailure
                        ).catch(err => {
                            console.error('Error al iniciar la cámara:', err);
                            lectorQr.style.display = 'none';
                            iniciarEscaneoBtn.disabled = false;
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'No se pudo acceder a la cámara. Verifica los permisos.'
                            });
                        });
                    });
                });
                // Función de éxito al escanear
                function onScanSuccess(decodedText, decodedResult) {
                    // Extraer el código de alumno de la URL escaneada
                    let codigoAlumno = extraerCodigoAlumno(decodedText);
                    if (codigoAlumno) {
                        // Detener el escáner
                        html5QrCode.stop();
                        // Guardar el código y ocultar el lector
                        codigoAlumnoInput.value = codigoAlumno;
                        lectorQr.style.display = 'none';
                        iniciarEscaneoBtn.disabled = false;
                        // Buscar automáticamente
                        buscarAlumno(codigoAlumno);
                        // Reproducir sonido de éxito (opcional)
                        try {
                            const audio = new Audio('{{ asset('assets/sounds/beep.mp3') }}');
                            audio.play().catch(e => console.log('Error reproduciendo sonido'));
                        } catch (e) {
                            console.log('Audio no disponible');
                        }
                    } else {
                        // Notificación de error (más simple)
                        resultadoBusqueda.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bx bx-error-circle me-2"></i>
                        Código QR no válido. Intenta nuevamente.
                    </div>
                `;
                    }
                }
                // Función para manejar errores de escaneo
                function onScanFailure(error) {
                    // No hacer nada en errores regulares para evitar spam de consola
                }
                // Función para extraer el código de alumno de la URL
                function extraerCodigoAlumno(url) {
                    // Intentar extraer mediante regex para URL completa
                    const regexUrl = /\/credencial\/alumno\/(ALUM[a-zA-Z0-9]+)/;
                    let match = url.match(regexUrl);
                    // Si encontramos coincidencia, devolver el código
                    if (match && match[1]) {
                        return match[1];
                    }
                    // Si no es una URL, verificar si es directamente un código de alumno
                    if (url.startsWith('ALUM')) {
                        return url;
                    }
                    // Si no se encontró ningún formato válido
                    return null;
                }
                // Función para cerrar el escáner
                cerrarScannerBtn.addEventListener('click', function() {
                    if (html5QrCode) {
                        html5QrCode.stop().then(() => {
                            console.log('Escáner detenido');
                        }).catch(err => {
                            console.error('Error al detener el escáner:', err);
                        });
                    }
                    lectorQr.style.display = 'none';
                    iniciarEscaneoBtn.disabled = false;
                });
                // Función para realizar la búsqueda del alumno
                function buscarAlumno(codigo) {
                    // Mostrar indicador de carga
                    resultadoBusqueda.innerHTML = `
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2">Buscando...</p>
                </div>
            `;
                    // Realizar petición AJAX
                    fetch(`{{ route('alumnos.validar.qr') }}?codigo=${codigo}`, {
                            method: 'GET',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.success) {
                                // Mostrar información simplificada
                                mostrarInformacionSimplificada(data.alumno, data.pagos);
                            } else {
                                // Mostrar mensaje de error
                                resultadoBusqueda.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="bx bx-error-circle me-2"></i>
                            <span>${data.message}</span>
                        </div>
                    `;
                            }
                        })
                        .catch(error => {
                            console.error('Error al buscar alumno:', error);
                            resultadoBusqueda.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bx bx-error-circle me-2"></i>
                        <span>Error de conexión. Intenta nuevamente.</span>
                    </div>
                `;
                        });
                }
                // Función para mostrar información simplificada del alumno y pagos
                function mostrarInformacionSimplificada(alumno, pagos) {
                    // Guardar datos del alumno globalmente
                    window.alumnoActual = alumno;
                    // Filtrar solo pagos pendientes y vencidos
                    const pagosFiltrados = pagos.filter(pago =>
                        pago.estatus_pago === 'Pendiente por pagar' ||
                        pago.estatus_pago === 'Vencido'
                    );
                    // Formatear fecha
                    const formatearFecha = (fechaStr) => {
                        if (!fechaStr) return 'N/A';
                        const fecha = new Date(fechaStr);
                        return fecha.toLocaleDateString('es-MX');
                    };
                    // Crear lista de pagos pendientes
                    let listaPagos = '';
                    pagosFiltrados.forEach(pago => {
                        const esVencido = pago.estatus_pago === 'Vencido';
                        listaPagos += `
                    <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                        <div>
                            <span class="d-block fw-medium">${formatearFecha(pago.fecha_pago)}</span>
                            <small class="text-muted">$${parseFloat(pago.cantidad_pago).toFixed(2)}</small>
                        </div>
                        <span class="badge bg-${esVencido ? 'danger' : 'warning'} rounded-pill">
                            ${esVencido ? 'Vencido' : 'Pendiente'}
                        </span>
                    </li>
                `;
                    });
                    // Determinar el color del encabezado según los pagos
                    const tieneVencidos = pagosFiltrados.some(pago => pago.estatus_pago === 'Vencido');
                    const colorEncabezado = tieneVencidos ? 'bg-danger' : 'bg-warning';
                    // Crear la tarjeta de información
                    resultadoBusqueda.innerHTML = `
                <div class="card border-0 shadow-sm">
                    <div class="card-header ${colorEncabezado} text-white">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <img src="${alumno.photo ? '{{ asset('assets/img/perfiles/') }}/' + alumno.photo : '{{ asset('assets/img/usuario.png') }}'}"
                                    alt="Foto" class="rounded-circle" width="40" height="40">
                            </div>
                            <div class="ms-3">
                                <h6 class="mb-0">${alumno.nombre_alum}</h6>
                                <small>Matrícula: ${alumno.matricula_alum}</small>
                            </div>
                        </div>
                    </div>

                    <!-- Sección de botones de asistencia -->
                    <div class="card-body border-top">
                        <h6 class="mb-3">Registrar Asistencia</h6>
                        <div class="d-flex gap-2">
                            <button class="btn btn-success flex-fill" onclick="registrarAsistencia('${alumno.id}', 'entrada')">
                                <i class="bx bx-log-in me-2"></i>ENTRADA
                            </button>
                            <button class="btn btn-danger flex-fill" onclick="registrarAsistencia('${alumno.id}', 'salida')">
                                <i class="bx bx-log-out me-2"></i>SALIDA
                            </button>
                        </div>
                    </div>

                    ${pagosFiltrados.length > 0 ? `
                                <div class="card-body p-0">
                                    <div class="p-3 pb-0">
                                        <h6 class="mb-2">Pagos por realizar</h6>
                                    </div>
                                    <ul class="list-group list-group-flush">
                                        ${listaPagos}
                                    </ul>
                                </div>
                            ` : `
                                <div class="card-body p-3">
                                    <div class="alert alert-success mb-0">
                                        <i class="bx bxs-check-circle me-2"></i>
                                        No tiene pagos pendientes
                                    </div>
                                </div>
                            `}

                    <div class="card-footer bg-light d-flex justify-content-between">
                        <small>${pagosFiltrados.length} pagos pendientes</small>
                        <button class="btn btn-sm btn-primary" id="btn-nuevo-escaneo">
                            <i class="bx bx-scan me-1"></i>Nuevo escaneo
                        </button>
                    </div>
                </div>
            `;
                    // Agregar evento al botón de nuevo escaneo
                    document.getElementById('btn-nuevo-escaneo').addEventListener('click', function() {
                        iniciarEscaneoBtn.click();
                    });
                }
            });
        </script>
    @endsection
@endif