<?php
require_once 'includes/validar_sesion.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard | Sistema de Repaso</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style> body { background-color: #f4f6f9; } </style>
</head>
<body>

<nav class="navbar navbar-dark bg-dark mb-4 shadow-sm">
    <div class="container">
        <span class="navbar-brand mb-0 h1">📖 Sistema de Repaso</span>
        <a href="logout.php" class="btn btn-outline-light btn-sm">Cerrar Sesión</a>
    </div>
</nav>

<div class="container pb-5">
    <h2 class="mb-4">Bienvenido, elige una modalidad:</h2>
    
    <div class="row">
        <!-- Tarjeta 1: Examen Aleatorio 20 Preguntas -->
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm h-100 border-top border-primary border-4">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title fw-bold">Examen Rápido</h5>
                    <p class="card-text text-muted mb-4">Simulación estándar con 20 preguntas seleccionadas al azar de toda la base de datos.</p>
                    <a href="examen.php" class="btn btn-primary mt-auto">Iniciar Examen (20)</a>
                </div>
            </div>
        </div>

        <!-- Tarjeta 2: Modo Repaso -->
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm h-100 border-top border-success border-4">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title fw-bold">Modo Repaso</h5>
                    <p class="card-text text-muted mb-4">Estudia a tu ritmo. Revisa todas las preguntas del balotario con sus respuestas correctas resaltadas.</p>
                    <a href="repaso.php" class="btn btn-success mt-auto">Ver Balotario</a>
                </div>
            </div>
        </div>

        <!-- Tarjeta 3: Examen Personalizado -->
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm h-100 border-top border-warning border-4">
                <div class="card-body">
                    <h5 class="card-title fw-bold">Examen Personalizado</h5>
                    <p class="card-text text-muted">Configura la cantidad y el rango específico de preguntas.</p>
                    
                    <form action="examen_personalizado.php" method="GET">
                        <div class="mb-2">
                            <label class="form-label small mb-0">Cant. Preguntas:</label>
                            <input type="number" name="cantidad" class="form-control form-control-sm" min="1" max="264" value="10" required>
                        </div>
                        <div class="row mb-3">
                            <div class="col">
                                <label class="form-label small mb-0">Desde (N°):</label>
                                <input type="number" name="inicio" class="form-control form-control-sm" min="1" max="264" value="1" required>
                            </div>
                            <div class="col">
                                <label class="form-label small mb-0">Hasta (N°):</label>
                                <input type="number" name="fin" class="form-control form-control-sm" min="1" max="264" value="50" required>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning w-100 fw-bold text-dark">Generar Examen</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>