@extends('layout.master')

@section('title', 'Resolver Examen')
@section('styles')
    {{-- <link rel="stylesheet" href="{{ asset('assets/css/examen.css') }}" /> --}}
    <link rel="stylesheet" href="{{ asset('assets/css/examenv2.css') }}" /> 
@endsection

@section('content')
<main class="page-main">
    <div class="uk-container">
        <div class="uk-margin-medium-top">

        
        <div class="uk-flex uk-flex-between encabezado ">
            <h1 class="poppi-sb color1 anticon uk-margin-remove">
                <em>Evaluación Examen Online:</em><br>
                  {{ $examen->titulo }}
            </h1>
            <a href="{{ url('mis-examenes') }}" class="uk-button uk-button-link uk-text-small">
                << Retornar
            </a>
        </div>
        <hr>
        <p class="texto conside">
            <strong>CONSIDERACIONES:</strong><br>
            El tiempo de duración del examen es de  <b>{{ $horas }} horas, {{ $minutos }} minutos</b>, ¡y ya comenzó a correr!<br>
            Cantidad de Preguntas: <b>{{ $examen->total_preguntas }}</b> │ Total Puntaje: <b>{{ $puntajeTotal }}</b> │
            Intentos permitidos: <b>1</b>.
        </p>
        <hr>
        <div id="countdown" class="uk-alert-primary uk-padding-small uk-text-center" style="font-size: 20px;">

        </div>

        <form id="form-finalizar" method="post" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="link_espe" value="{{ url('perfil/examenes/' . $examen->titulo_rewrite) }}">
            <input type="hidden" name="suscrito" value="{{ session('suscrito')['id'] }}">
            <input type="hidden" name="minuto2" value="{{ $examen->minutos }}">
            <input type="hidden" name="minuto" id="inputMinuto" value="0:0:0">

            <input type="hidden" name="examen" value="{{ $examen->id_examen }}">
            <input type="hidden" name="total_preguntas" value="{{ $examen->total_preguntas }}">

            @foreach ($preguntas as $index => $pregunta)
                <input type="hidden" name="pregunta{{ $index + 1 }}" value="{{ $pregunta->id_pregunta }}">
                <div class="preguntas uk-card  uk-card-body " id="pregunta{{ $index + 1 }}" style="display: none;">
                    <h2 class="uk-heading-line"><span>Pregunta: {{ $index + 1 }} / {{ $examen->total_preguntas }}</span></h2>
                    <p class="uk-text-lead">{{ $pregunta->titulo }}</p>

                    @if ($pregunta->descripcion)
                        <p class="uk-text-meta uk-margin-small-top">{!! $pregunta->descripcion !!}</p>
                    @endif

                    @if ($pregunta->imagen)
                        <img src="{{ env('URL_ARCHIVOS') . '/images/imagenes/' . $pregunta->imagen }}" class="uk-margin-top" style="max-width: 100%;">
                    @endif

                    <p class="uk-text-primary uk-margin-medium-top">
                        Seleccione una alternativa para la respuesta correcta:
                    </p>
                    <div>
                        @foreach ($pregunta->respuestas as $respuesta)
                            <div class="uk-margin">
                                <label class="uk-text-normal">
                                    <input class="uk-radio" type="radio" value="{{ $respuesta->id_rpta }}" name="preg{{ $index + 1 }}">
                                    {{ $respuesta->titulo }}
                                    @if ($respuesta->imagen)
                                        <img src="{{ env('URL_ARCHIVOS') . '/images/imagenes/' . $respuesta->imagen }}" class="uk-margin-small-top" style="max-width: 100%;">
                                    @endif
                                </label>
                            </div>
                        @endforeach
                    </div>
                    <div class="uk-margin-large-top button-container">
                        @if ($index != 0)
                            <button type="button" class="uk-button uk-button-secondary btn-left" onclick="ante{{ $index + 1 }}()">Anterior</button>
                        @endif
                        @if ($index + 1 != $examen->total_preguntas)
                            <button type="button" class="uk-button uk-button-primary btn-right" onclick="sigue{{ $index + 1 }}()">Siguiente</button>
                        @endif
                    </div>

                </div>
            @endforeach
                <div class="uk-text-center" style="margin-bottom: 50px;">
                   <button type="button" class="uk-button uk-button-danger" onclick="finalizar({{$examen->total_preguntas}})"
                   style="font-size: 20px; width: 400px;">TERMINAR EXAMEN</button>
                </div>
        </form>

    </div>
    </div>

    <script>
        // ============================================
        // SISTEMA DE GUARDADO SEGURO Y RECUPERACIÓN
        // ============================================
        const STORAGE_KEY = 'examen_respuestas_{{ $examen->id_examen }}_{{ session("suscrito")["id"] }}';
        const AUTOSAVE_INTERVAL = 120000; // Autoguardar cada 2 minutos
        let autosaveTimer;
        let intentosEnvio = 0;
        const MAX_INTENTOS = 5;

        // Función para guardar respuestas en localStorage
        function guardarEnLocalStorage() {
            try {
                const respuestas = {};
                const totalPreguntas = {{ $examen->total_preguntas }};
                
                for (let i = 1; i <= totalPreguntas; i++) {
                    const respuesta = $("input[name='preg" + i + "']:checked").val();
                    if (respuesta) {
                        respuestas['preg' + i] = respuesta;
                    }
                }
                
                const datos = {
                    respuestas: respuestas,
                    timestamp: new Date().toISOString(),
                    examen_id: {{ $examen->id_examen }},
                    suscrito_id: {{ session('suscrito')['id'] }}
                };
                
                localStorage.setItem(STORAGE_KEY, JSON.stringify(datos));
                console.log('✅ Respuestas guardadas en backup local');
                return true;
            } catch (e) {
                console.error('❌ Error al guardar en localStorage:', e);
                return false;
            }
        }

        // Función para recuperar respuestas del localStorage
        function recuperarDeLocalStorage() {
            try {
                const datosGuardados = localStorage.getItem(STORAGE_KEY);
                if (datosGuardados) {
                    const datos = JSON.parse(datosGuardados);
                    let recuperadas = 0;
                    
                    Object.keys(datos.respuestas).forEach(key => {
                        const valor = datos.respuestas[key];
                        $("input[name='" + key + "'][value='" + valor + "']").prop('checked', true);
                        recuperadas++;
                    });
                    
                    if (recuperadas > 0) {
                        Swal.fire({
                            title: 'Respuestas Recuperadas',
                            text: `Se recuperaron ${recuperadas} respuestas guardadas previamente.`,
                            icon: 'info',
                            timer: 3000
                        });
                    }
                    return true;
                }
            } catch (e) {
                console.error('❌ Error al recuperar de localStorage:', e);
            }
            return false;
        }

        // Guardar automáticamente cada vez que se selecciona una respuesta
        $(document).on('change', 'input[type="radio"]', function() {
            guardarEnLocalStorage();
        });

        // Autoguardado periódico en el backend
        function autoguardarProgreso() {
            const totalPreguntas = {{ $examen->total_preguntas }};
            let respuestasCount = 0;
            
            for (let i = 1; i <= totalPreguntas; i++) {
                if ($("input[name='preg" + i + "']:checked").val()) {
                    respuestasCount++;
                }
            }
            
            // Solo autoguardar si hay al menos una respuesta
            if (respuestasCount > 0) {
                guardarEnLocalStorage();
                console.log(`🔄 Autoguardado: ${respuestasCount}/${totalPreguntas} respuestas`);
            }
        }

        // Iniciar autoguardado periódico
        function iniciarAutoguardado() {
            autosaveTimer = setInterval(autoguardarProgreso, AUTOSAVE_INTERVAL);
        }

        function actualizarCSRF() {
                $.get('{{ url("/refresh-csrf") }}', function (data) {
                    // Actualiza el token en el meta tag
                    $('meta[name="csrf-token"]').attr('content', data.token);
                    
                    // Actualiza el token en el formulario
                    $('input[name="_token"]').val(data.token);
                });
        }

        // Llama una vez al cargar la página para asegurar un token actualizado
        actualizarCSRF();
        
        // Recuperar respuestas previas si existen
        recuperarDeLocalStorage();
        
        // Iniciar sistema de autoguardado
        iniciarAutoguardado();
        
        document.getElementById("pregunta1").style.display = "block";
        var end = new Date('{{$fechaLimite}}'); // Fecha límite obtenida desde el backend
        var _second = 1000; // Milisegundos en un segundo
        var _minute = _second * 60; // Milisegundos en un minuto
        var _hour = _minute * 60; // Milisegundos en una hora
        var timer;

        function showRemaining() {
            var now = new Date(); // Fecha actual
            var distance = end - now; // Diferencia entre la fecha límite y la actual

            if (distance < 0) {
                clearInterval(timer);
                document.getElementById('countdown').innerHTML = 'SE ACABÓ EL TIEMPO. EXAMEN FINALIZADO';
                // Llamada automática para enviar el examen sin confirmación
                finalizarAuto();
                return;
            }

            // Cálculo de horas, minutos y segundos
            var hours = Math.floor(distance / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            // Mostrar tiempo restante
            document.getElementById('countdown').innerHTML = 
                '<strong>Tiempo restante:</strong> ' + hours + ' horas, ' + minutes + ' minutos y ' + seconds + ' segundos';
        
        document.getElementById('inputMinuto').value = hours + ':' + minutes + ':' + seconds;
         }

// Agregar el input hidden al DOM
// if (!document.getElementById('inputMinuto')) {
//     var hiddenInput = document.createElement('input');
//     hiddenInput.type = 'hidden';
//     hiddenInput.name = 'minuto';
//     hiddenInput.id = 'inputMinuto';
//     document.getElementById('form-finalizar').appendChild(hiddenInput);
// }

        // Actualiza el temporizador cada segundo
        timer = setInterval(showRemaining, 1000);

        // Llama a la función una vez para evitar esperar el primer intervalo
        showRemaining();

        @foreach ($preguntas as $index => $pregunta)
        function sigue{{ $index + 1 }}() {
            // if (!$('input:radio[name=preg{{ $index + 1 }}]:checked').val()) {
            //     alert('Debe seleccionar una respuesta antes de continuar.');
            // } else {
                document.getElementById('pregunta{{ $index + 1 }}').style.display = 'none';
                document.getElementById('pregunta{{ $index + 2 }}').style.display = 'block';
            // }
        }

        function ante{{ $index + 1 }}() {
            document.getElementById('pregunta{{ $index + 1 }}').style.display = 'none';
            document.getElementById('pregunta{{ $index }}').style.display = 'block';
        }
        @endforeach

        // Validación y Envío de Examen
        function finalizar(tota) {
            for (var i = 1; i <= tota; i++) {
                if ($("input[name='preg" + i + "']:radio").is(':checked')) {
                    i = tota + 1; // Salimos del bucle
                    Swal.fire({
                                title: 'Mensaje Auge Peru',
                                text: '¿Estás seguro de terminar el examen y enviar los datos?',
                                icon: 'warning', // Cambiado de 'type' a 'icon' (versión actual de SweetAlert2)
                                showCancelButton: true,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                cancelButtonText: 'Cancelar',
                                confirmButtonText: 'Aceptar'
                            }).then((result) => {
                                if (result.isConfirmed) { 
                                    // Solo ejecuta finalizar2 si el usuario confirma
                                    finalizar2();
                                }
                            });
                } else {
                    if (tota == i) {
                        Swal.fire({
                            title: 'Mensaje Auge Peru',
                            html: "<p align='left' style='font-size:20px;line-height:26px'>Para terminar el examen debe seleccionar al menos una respuesta</p>",
                            width: '600px',
                            button: "Cerrar",
                        });
                    }
                }
            }
        }

        function finalizar2() {
            // Guardar backup final antes de enviar
            guardarEnLocalStorage();
            
            // Detener autoguardado
            if (autosaveTimer) {
                clearInterval(autosaveTimer);
            }
            
            Swal.fire({
                title: 'Revisando tu examen...',
                text: 'Por favor, espera mientras procesamos tus respuestas.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading(); 
                }
            });

            enviarExamenConReintentos();
        }

        // Función mejorada con sistema de reintentos
        function enviarExamenConReintentos() {
            intentosEnvio++;
            
            const formData = $('#form-finalizar').serialize();
            
            $.ajax({
                url: '{{ url("/desarrollo-examen") }}',
                method: 'POST',
                data: formData,
                timeout: 60000, // Timeout de 60 segundos
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    console.log('✅ Respuesta del servidor:', response);
                    
                    // Validar que la respuesta sea exitosa
                    if (response.success && response.guardado && response.id_intento) {
                        Swal.close();
                        
                        // Limpiar localStorage solo si se guardó exitosamente
                        try {
                            localStorage.removeItem(STORAGE_KEY);
                            console.log('🗑️ Backup local eliminado - examen guardado correctamente');
                        } catch (e) {
                            console.error('Error al limpiar localStorage:', e);
                        }
                        
                        // Mostrar mensaje de éxito antes de redirigir
                        Swal.fire({
                            title: '¡Examen Enviado!',
                            text: 'Tu examen se guardó correctamente.',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.href = response.url_resultado;
                        });
                        
                    } else {
                        // Respuesta del servidor pero sin confirmación de guardado
                        throw new Error('El servidor no confirmó el guardado del examen');
                    }
                },
                error: function (xhr, status, error) {
                    console.error(`❌ Error en intento ${intentosEnvio}:`, {xhr, status, error});
                    
                    if (intentosEnvio < MAX_INTENTOS) {
                        // Reintentar con delay incremental
                        const delay = intentosEnvio * 2000; // 2s, 4s, 6s, 8s, 10s
                        
                        Swal.update({
                            title: 'Reintentando envío...',
                            html: `Intento ${intentosEnvio} de ${MAX_INTENTOS}<br>
                                   <small>Reintentando en ${delay/1000} segundos...</small>`,
                            icon: 'warning'
                        });
                        
                        setTimeout(function() {
                            enviarExamenConReintentos();
                        }, delay);
                        
                    } else {
                        // Se agotaron los reintentos
                        Swal.close();
                        
                        Swal.fire({
                            title: '⚠️ No se pudo enviar el examen',
                            html: `<p>Hemos intentado enviar tu examen ${MAX_INTENTOS} veces sin éxito.</p>
                                   <p><strong>Tus respuestas están guardadas localmente.</strong></p>
                                   <p>Por favor:</p>
                                   <ol style="text-align: left;">
                                      <li>Verifica tu conexión a internet</li>
                                      <li>Haz clic en "Reintentar Envío"</li>
                                      <li>Si persiste el problema, contacta a soporte</li>
                                   </ol>
                                   <small>Código de error: ${error || 'TIMEOUT'}</small>`,
                            icon: 'error',
                            showCancelButton: true,
                            confirmButtonText: '🔄 Reintentar Envío',
                            cancelButtonText: '📞 Contactar Soporte',
                            allowOutsideClick: false
                        }).then((result) => {
                            if (result.isConfirmed) {
                                intentosEnvio = 0; // Reiniciar contador
                                finalizar2(); // Intentar de nuevo
                            } else {
                                // Mostrar información de contacto
                                Swal.fire({
                                    title: 'Información de Contacto',
                                    html: `<p>Por favor contacta a soporte con la siguiente información:</p>
                                           <ul style="text-align: left;">
                                              <li><strong>Examen ID:</strong> {{ $examen->id_examen }}</li>
                                              <li><strong>Usuario ID:</strong> {{ session('suscrito')['id'] }}</li>
                                              <li><strong>Fecha:</strong> ${new Date().toLocaleString()}</li>
                                              <li><strong>Error:</strong> Timeout al guardar examen</li>
                                           </ul>
                                           <p><strong>TUS RESPUESTAS ESTÁN GUARDADAS</strong> y pueden ser recuperadas.</p>`,
                                    icon: 'info'
                                });
                            }
                        });
                        
                        // Enviar log del error al servidor
                        enviarLogError({
                            examen_id: {{ $examen->id_examen }},
                            suscrito_id: {{ session('suscrito')['id'] }},
                            error: error,
                            status: status,
                            intentos: intentosEnvio,
                            respuestas_guardadas: localStorage.getItem(STORAGE_KEY)
                        });
                    }
                }
            });
        }

        // Función para enviar logs de errores al servidor
        function enviarLogError(datos) {
            $.ajax({
                url: '{{ url("/log-error-examen") }}',
                method: 'POST',
                data: datos,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function() {
                    console.log('📋 Log de error enviado al servidor');
                },
                error: function() {
                    console.error('❌ No se pudo enviar el log de error');
                }
            });
        }
        function finalizarAuto() {
            // Guardar en localStorage antes de finalizar automáticamente
            guardarEnLocalStorage();
            
            Swal.fire({
                title: '⏰ Se acabó el tiempo',
                text: 'Tu examen se enviará automáticamente.',
                icon: 'warning',
                timer: 3000,
                showConfirmButton: false,
                allowOutsideClick: false
            });

            // Dar un momento para que el usuario vea el mensaje
            setTimeout(function() {
                enviarExamenConReintentos();
            }, 3000);
        }

        // Detectar si el usuario intenta salir de la página
        // COMENTADO: El navegador mostraba advertencia al guardar y redirigir
        // window.addEventListener('beforeunload', function (e) {
        //     guardarEnLocalStorage();
        //     const totalPreguntas = {{ $examen->total_preguntas }};
        //     let hayRespuestas = false;
        //     for (let i = 1; i <= totalPreguntas; i++) {
        //         if ($("input[name='preg" + i + "']:checked").val()) {
        //             hayRespuestas = true;
        //             break;
        //         }
        //     }
        //     if (hayRespuestas) {
        //         e.preventDefault();
        //         e.returnValue = '¿Estás seguro de salir? Tu examen no ha sido enviado. Las respuestas quedarán guardadas localmente.';
        //         return e.returnValue;
        //     }
        // });
    </script>
</main>
@endsection