<?php
require_once 'includes/validar_sesion.php';
require_once 'config/conexion.php';

// Obtener 20 preguntas aleatorias
$stmt = $pdo->query("SELECT * FROM preguntas ORDER BY RAND() LIMIT 20");
$preguntas = $stmt->fetchAll();
$total_preguntas = count($preguntas);
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Examen de Repaso</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background-color: #f4f6f9; }
        .pregunta-card { border-top: 4px solid #0d6efd; }
        .img-senal { max-height: 150px; object-fit: contain; border-radius: 5px; }
        .form-check-label { cursor: pointer; width: 100%; }
        .form-check { border: 1px solid transparent; transition: all 0.2s; }
        .form-check:hover { background-color: #f8f9fa; border-color: #dee2e6; border-radius: 5px; }
        /* Ocultar todos los pasos por defecto con CSS (JS los mostrará) */
        .paso-pregunta { display: none; }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4 shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="dashboard.php">❌ Salir del examen</a>
        <span class="text-white fw-bold" id="texto-progreso">Cargando...</span>
    </div>
</nav>

<div class="container pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8"> <!-- Contenedor un poco más estrecho para móvil -->
            
            <form action="evaluar.php" method="POST" id="form-examen">
                <?php foreach ($preguntas as $index => $pregunta): ?>
                    <!-- Cada pregunta envuelta en su div de paso -->
                    <div class="paso-pregunta" id="paso-<?= $index ?>">
                        <div class="card shadow-sm mb-4 pregunta-card">
                            <div class="card-body">
                                <h5 class="card-title fw-bold mb-3">
                                    <?= ($index + 1) ?>. <?= htmlspecialchars($pregunta['texto_pregunta']) ?>
                                </h5>
                                
                                <?php if (!empty($pregunta['imagen_url'])): ?>
                                    <div class="my-3 text-center">
                                        <img src="<?= htmlspecialchars($pregunta['imagen_url']) ?>" alt="Señal" class="img-senal border p-1 shadow-sm">
                                    </div>
                                <?php endif; ?>
                                
                                <div class="mt-4">
                                    <?php
                                    $stmtAlt = $pdo->prepare("SELECT * FROM alternativas WHERE pregunta_id = ? ORDER BY letra ASC");
                                    $stmtAlt->execute([$pregunta['id']]);
                                    $alternativas = $stmtAlt->fetchAll();
                                    ?>
                                    
                                    <?php foreach ($alternativas as $alt): ?>
                                        <div class="form-check p-3 mb-2 bg-white shadow-sm rounded">
                                            <!-- Quitamos el atributo 'required' nativo de HTML5 para evitar que el navegador bloquee campos ocultos -->
                                            <input class="form-check-input ms-1" type="radio" name="respuestas[<?= $pregunta['id'] ?>]" id="alt_<?= $alt['id'] ?>" value="<?= $alt['letra'] ?>">
                                            <label class="form-check-label ps-2 fs-6" for="alt_<?= $alt['id'] ?>">
                                                <strong><?= strtoupper($alt['letra']) ?>)</strong> <?= htmlspecialchars($alt['texto']) ?>
                                            </label>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
                
                <!-- Controles de Navegación -->
                <div class="d-flex justify-content-between mt-3">
                    <button type="button" class="btn btn-secondary" id="btn-anterior">⬅ Anterior</button>
                    <button type="button" class="btn btn-primary px-4" id="btn-siguiente">Siguiente ➡</button>
                    <button type="submit" class="btn btn-success fw-bold px-4 shadow" id="btn-terminar">Terminar Examen</button>
                </div>
                
                <!-- Alerta por si intenta avanzar sin responder -->
                <div class="alert alert-danger mt-3 d-none" id="alerta-error">
                    Por favor, selecciona una respuesta para poder continuar.
                </div>
            </form>

        </div>
    </div>
</div>

<!-- Lógica JavaScript para el paso a paso -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let pasoActual = 0;
        const totalPasos = <?= $total_preguntas ?>;
        const pasos = document.querySelectorAll('.paso-pregunta');
        const btnAnterior = document.getElementById('btn-anterior');
        const btnSiguiente = document.getElementById('btn-siguiente');
        const btnTerminar = document.getElementById('btn-terminar');
        const textoProgreso = document.getElementById('texto-progreso');
        const alertaError = document.getElementById('alerta-error');

        function mostrarPaso(indice) {
            // Ocultar alerta de error
            alertaError.classList.add('d-none');
            
            // Ocultar todos y mostrar solo el actual
            pasos.forEach((paso, i) => {
                paso.style.display = (i === indice) ? 'block' : 'none';
            });

            // Lógica de botones
            btnAnterior.style.display = (indice === 0) ? 'none' : 'inline-block';
            
            if (indice === totalPasos - 1) {
                btnSiguiente.style.display = 'none';
                btnTerminar.style.display = 'inline-block';
            } else {
                btnSiguiente.style.display = 'inline-block';
                btnTerminar.style.display = 'none';
            }

            // Actualizar texto superior
            textoProgreso.innerText = `Pregunta ${indice + 1} de ${totalPasos}`;
            
            // Hacer scroll suave hacia arriba (ideal para móviles)
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function validarPasoActual() {
            // Buscar en el div del paso actual si hay algún radio button seleccionado
            const paso = pasos[pasoActual];
            const estaMarcado = paso.querySelector('input[type="radio"]:checked');
            
            if (!estaMarcado) {
                alertaError.classList.remove('d-none');
                return false;
            }
            return true;
        }

        // Eventos de botones
        btnSiguiente.addEventListener('click', function() {
            if (validarPasoActual()) {
                pasoActual++;
                mostrarPaso(pasoActual);
            }
        });

        btnAnterior.addEventListener('click', function() {
            pasoActual--;
            mostrarPaso(pasoActual);
        });

        // Validar también antes de hacer el Submit final
        document.getElementById('form-examen').addEventListener('submit', function(e) {
            if (!validarPasoActual()) {
                e.preventDefault(); // Detener el envío si la última no está marcada
            }
        });

        // Iniciar el examen mostrando la primera pregunta
        mostrarPaso(pasoActual);
    });
</script>

</body>
</html>