@extends('layouts.app') {{-- Asume que tienes un layout principal llamado 'app' --}}

@section('title', 'Consulta de Alumno por DNI')

@section('content')
    <div class="container py-4">
        <h1 class="mb-4 text-white text-center"><i class="bi bi-search me-2"></i> Consulta de Alumno por DNI</h1>

        <div class="row justify-content-center">
            <div class="col-md-7 col-lg-6">
                <div class="card bg-dark shadow-lg text-white border-0">
                    <div class="card-body">
                        <form id="dniConsultaForm">
                            @csrf {{-- ¡Importante para la seguridad de Laravel! --}}
                            <div class="mb-3">
                                <label for="dni" class="form-label"><i class="bi bi-credit-card-2-front me-2"></i> Ingrese el DNI del Alumno:</label>
                                <input type="text" class="form-control bg-secondary border-secondary text-white" id="dni" name="dni" placeholder="Ej. 12345678" maxlength="8" required>
                                <div id="dniError" class="invalid-feedback d-none"></div>
                            </div>
                            
                            {{-- ¡NUEVO: Div para el widget reCAPTCHA! --}}
                            <div class="mb-3">
                                {{-- `data-sitekey` debe ser la clave de sitio (pública) que obtuviste de Google --}}
                                {{-- `data-theme="dark"` para que se integre mejor con tu tema --}}
                                <div class="g-recaptcha" data-sitekey="{{ config('recaptcha.sitekey') }}" data-theme="dark"></div>
                                {{-- Este div mostrará los errores del CAPTCHA --}}
                                <div id="recaptchaError" class="invalid-feedback d-none mt-2 text-danger" style="display: block;"></div>
                            </div>

                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-check-circle me-2"></i> Consultar</button>
                            </div>
                        </form>

                        <hr class="my-4 border-secondary">

                        {{-- Sección para mostrar el nombre del alumno --}}
                        <div id="alumnoInfo" class="alert alert-info d-none text-center" role="alert">
                            <h4 class="alert-heading text-dark"><i class="bi bi-person-circle me-2"></i> Alumno Encontrado</h4>
                            <p class="mb-0 fs-5 text-dark">Nombre: <strong id="alumnoNombre"></strong></p>
                        </div>

                        {{-- Sección para mostrar los títulos/resultados (Ugel) --}}
                        <div id="resultadosContainer" class="d-none mt-4">
                            <h5 class="text-white mb-3"><i class="bi bi-award-fill me-2"></i> Títulos / Certificados:</h5>
                            <ul id="titulosList" class="list-group">
                                {{-- Los títulos (Ugel) se cargarán aquí con JavaScript --}}
                            </ul>
                            <div id="noTitulos" class="alert alert-warning d-none mt-3" role="alert">
                                <i class="bi bi-exclamation-triangle me-2"></i> No se encontraron títulos para este alumno.
                            </div>
                        </div>

                        {{-- Mensaje de error general --}}
                        <div id="generalError" class="alert alert-danger d-none mt-4" role="alert">
                            <i class="bi bi-x-circle me-2"></i> <span id="generalErrorMessage"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- ¡Asegúrate de que este script de Google reCAPTCHA esté también en tu layouts/app.blade.php! --}}
    {{-- Debería estar justo antes de @stack('scripts') o </body> en el layout --}}
    {{-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> --}}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('dniConsultaForm');
            const dniInput = document.getElementById('dni');
            const dniError = document.getElementById('dniError');
            const alumnoInfo = document.getElementById('alumnoInfo');
            const alumnoNombre = document.getElementById('alumnoNombre');
            const resultadosContainer = document.getElementById('resultadosContainer');
            const titulosList = document.getElementById('titulosList');
            const noTitulos = document.getElementById('noTitulos');
            const generalError = document.getElementById('generalError');
            const generalErrorMessage = document.getElementById('generalErrorMessage');
            const recaptchaError = document.getElementById('recaptchaError'); // Referencia al div de error de reCAPTCHA

            // Función para resetear el estado de la UI (ocultar mensajes anteriores)
            function resetUI() {
                dniError.classList.add('d-none');
                dniError.innerHTML = '';
                alumnoInfo.classList.add('d-none');
                resultadosContainer.classList.add('d-none');
                titulosList.innerHTML = ''; // Limpia la lista de títulos
                noTitulos.classList.add('d-none');
                generalError.classList.add('d-none');
                generalErrorMessage.innerHTML = '';
                
                // Resetear el error de reCAPTCHA y recargar el widget si es necesario
                recaptchaError.classList.add('d-none');
                recaptchaError.innerHTML = '';
                // Importante: grecaptcha puede no estar cargado instantáneamente, así que comprobamos su existencia
                if (typeof grecaptcha !== 'undefined') { // Solo reiniciamos si grecaptcha está disponible
                    grecaptcha.reset(); // Reinicia el CAPTCHA para que el usuario pueda intentar de nuevo
                }
            }

            // Manejador de evento para el envío del formulario
            form.addEventListener('submit', async function(event) {
                event.preventDefault(); // Evita el envío normal del formulario (recarga de página)
                resetUI(); // Limpia mensajes y resultados previos

                const dni = dniInput.value;
                // Obtiene la respuesta del reCAPTCHA
                // Aseguramos que grecaptcha.getResponse() se llame solo si grecaptcha está definido
                const recaptchaResponse = typeof grecaptcha !== 'undefined' ? grecaptcha.getResponse() : ''; 

                try {
                    // Realiza la petición AJAX al servidor
                    const response = await fetch('{{ route('consulta.dni.buscar') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}', // Envía el token CSRF para seguridad
                            'Accept': 'application/json' // Indica que esperamos una respuesta JSON
                        },
                        body: JSON.stringify({
                            dni: dni, // Envía el DNI en el cuerpo de la petición
                            'g-recaptcha-response': recaptchaResponse // ¡Envía la respuesta de reCAPTCHA!
                        })
                    });

                    const data = await response.json(); // Parsea la respuesta JSON

                    // Manejo de errores HTTP (ej. 422 de validación, 404 de no encontrado)
                    if (!response.ok) {
                        if (data.errors) {
                            if (data.errors.dni) {
                                dniError.classList.remove('d-none');
                                dniError.innerHTML = data.errors.dni.join('<br>');
                            }
                            // Manejo de errores específicos de reCAPTCHA
                            if (data.errors['g-recaptcha-response']) {
                                recaptchaError.classList.remove('d-none');
                                recaptchaError.innerHTML = data.errors['g-recaptcha-response'].join('<br>');
                            }
                        } else if (data.message) {
                            generalError.classList.remove('d-none');
                            generalErrorMessage.innerHTML = data.message;
                        } else {
                            generalError.classList.remove('d-none');
                            generalErrorMessage.innerHTML = 'Ocurrió un error inesperado al procesar la solicitud.';
                        }
                        // Asegúrate de resetear el CAPTCHA en caso de error para que el usuario pueda intentar de nuevo
                        if (typeof grecaptcha !== 'undefined') {
                            grecaptcha.reset();
                        }
                        return; // Detiene la ejecución si hay errores
                    }

                    // Si la respuesta es exitosa (código 2xx)
                    alumnoInfo.classList.remove('d-none');
                    alumnoNombre.textContent = `${data.alumno.nom_c} ${data.alumno.ape_c}`;
                    
                    // Resetear el CAPTCHA si la búsqueda fue exitosa
                    if (typeof grecaptcha !== 'undefined') {
                        grecaptcha.reset();
                    }

                    if (data.titulos && data.titulos.length > 0) {
                        resultadosContainer.classList.remove('d-none');
                        // Itera sobre los títulos y los añade a la lista
                        data.titulos.forEach(titulo => {
                            const li = document.createElement('li');
                            li.classList.add('list-group-item', 'bg-secondary', 'text-white', 'border-dark', 'mb-2');
                            li.innerHTML = `
                                <strong>RD:</strong> ${titulo.rd || 'N/A'}<br>
                                <strong>Fecha de Emisión:</strong> ${titulo.fecha || 'N/A'}<br>
                                <strong>Especialidad:</strong> ${titulo.espec || 'N/A'}<br>
                                <strong>Modalidad:</strong> ${titulo.mod || 'N/A'}<br>
                                <strong>Libro/Página:</strong> ${titulo.libro || 'N/A'} / ${titulo.pagina || 'N/A'}<br>
                                <strong>CEPRO:</strong> ${titulo.cepro_nombre || 'N/A'}
                            `;
                            titulosList.appendChild(li);
                        });
                    } else {
                        resultadosContainer.classList.remove('d-none');
                        noTitulos.classList.remove('d-none'); // Muestra el mensaje de no títulos
                    }

                } catch (error) {
                    // Manejo de errores de red o del cliente (ej. el servidor no responde)
                    console.error('Error al enviar la solicitud:', error);
                    generalError.classList.remove('d-none');
                    generalErrorMessage.innerHTML = 'No se pudo conectar con el servidor. Intente de nuevo más tarde.';
                    // También reiniciar CAPTCHA en caso de errores de red
                    if (typeof grecaptcha !== 'undefined') {
                        grecaptcha.reset();
                    }
                }
            });
        });
    </script>
@endpush