{% extends "base.html" %}

{% block title %}Examen Simulado - Balotario Licencia A-I{% endblock %}

{% block content %}
<div class="text-center mb-4">
    <h2 class="fw-bold text-warning">
        <i class="fas fa-clipboard-check me-2"></i>
        Examen Simulado
    </h2>
    <p class="text-muted">Simula el examen real con tiempo limitado y obtén tu calificación final</p>
</div>

<div id="exam-setup" class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title text-center mb-4">
                    <i class="fas fa-cog me-2"></i>Configuración del Examen
                </h5>

                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label">Número de preguntas:</label>
                        <select class="form-select" id="exam-questions">
                            <option value="20">20 preguntas (Rápido)</option>
                            <option value="30" selected>30 preguntas (Estándar)</option>
                            <option value="40">40 preguntas (Completo)</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Tiempo límite:</label>
                        <select class="form-select" id="exam-time">
                            <option value="15">15 minutos</option>
                            <option value="30" selected>30 minutos</option>
                            <option value="45">45 minutos</option>
                            <option value="60">60 minutos</option>
                        </select>
                    </div>
                </div>

                <div class="alert alert-info mt-4">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Instrucciones:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Responde todas las preguntas antes de que se acabe el tiempo</li>
                        <li>Puedes navegar entre preguntas usando los botones</li>
                        <li>Las preguntas no respondidas se marcarán como incorrectas</li>
                        <li>Al finalizar verás tu calificación y las respuestas correctas</li>
                    </ul>
                </div>

                <div class="text-center mt-4">
                    <button class="btn btn-warning btn-lg" id="start-exam">
                        <i class="fas fa-play me-2"></i>Comenzar Examen
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="exam-content" style="display: none;">
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="fas fa-clock me-2"></i>
                            Tiempo restante: <span id="timer" class="text-warning fw-bold">30:00</span>
                        </h6>
                        <div>
                            <span class="badge bg-warning" id="question-progress">1 de 30</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="mb-2">Progreso</h6>
                    <div class="row">
                        <div class="col-6">
                            <h5 class="text-success" id="answered-count">0</h5>
                            <small>Respondidas</small>
                        </div>
                        <div class="col-6">
                            <h5 class="text-muted" id="remaining-count">30</h5>
                            <small>Restantes</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="question-card fade-in" id="exam-question-container">
        <!-- Question content is loaded here -->
    </div>

    <div class="row mt-4">
        <div class="col-md-8">
            <div class="d-flex justify-content-between">
                <button class="btn btn-outline-secondary" id="prev-exam-btn" disabled>
                    <i class="fas fa-chevron-left me-2"></i>Anterior
                </button>
                <button class="btn btn-warning" id="next-exam-btn">
                    Siguiente<i class="fas fa-chevron-right ms-2"></i>
                </button>
            </div>
        </div>
        <div class="col-md-4">
            <button class="btn btn-danger w-100" id="finish-exam">
                <i class="fas fa-flag-checkered me-2"></i>Finalizar Examen
            </button>
        </div>
    </div>

    <!-- Question Navigator -->
    <div class="card mt-4">
        <div class="card-body">
            <h6 class="card-title">Navegador de Preguntas</h6>
            <div id="question-navigator" class="d-flex flex-wrap gap-2">
                <!-- Navigation buttons are generated here -->
            </div>
        </div>
    </div>
</div>

<div id="exam-results" class="text-center" style="display: none;">
    <div class="card">
        <div class="card-body">
            <div id="result-icon" class="mb-4">
                <!-- Icon is generated based on result -->
            </div>
            <h3 class="mb-3" id="result-title">Examen Completado</h3>

            <div class="row justify-content-center mb-4">
                <div class="col-md-8">
                    <div class="row text-center">
                        <div class="col-3">
                            <h4 class="text-success" id="exam-correct">0</h4>
                            <p class="mb-0">Correctas</p>
                        </div>
                        <div class="col-3">
                            <h4 class="text-danger" id="exam-incorrect">0</h4>
                            <p class="mb-0">Incorrectas</p>
                        </div>
                        <div class="col-3">
                            <h4 class="text-muted" id="exam-unanswered">0</h4>
                            <p class="mb-0">Sin responder</p>
                        </div>
                        <div class="col-3">
                            <h4 class="text-primary" id="exam-score">0%</h4>
                            <p class="mb-0">Calificación</p>
                        </div>
                    </div>

                    <div class="progress mb-4" style="height: 25px;">
                        <div class="progress-bar" id="exam-progress-bar" style="width: 0%"></div>
                    </div>

                    <div id="pass-message" class="alert" style="display: none;">
                        <!-- Pass/fail message -->
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2 justify-content-center">
                <button class="btn btn-warning" id="retake-exam">
                    <i class="fas fa-redo me-2"></i>Repetir Examen
                </button>
                <button class="btn btn-outline-primary" id="review-answers">
                    <i class="fas fa-eye me-2"></i>Revisar Respuestas
                </button>
                <a href="/" class="btn btn-outline-secondary">
                    <i class="fas fa-home me-2"></i>Volver al Inicio
                </a>
            </div>
        </div>
    </div>
</div>

<div id="exam-review" style="display: none;">
    <div class="text-center mb-4">
        <h3 class="fw-bold text-primary">
            <i class="fas fa-eye me-2"></i>
            Revisión de Respuestas
        </h3>
        <p class="text-muted">Revisa tus respuestas y las correctas</p>
    </div>

    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <span class="badge bg-success me-2" id="review-correct-count">0</span>Correctas
                            <span class="badge bg-danger me-2 ms-3" id="review-incorrect-count">0</span>Incorrectas
                            <span class="badge bg-secondary me-2 ms-3" id="review-unanswered-count">0</span>Sin responder
                        </h6>
                        <div>
                            <span class="badge bg-primary" id="review-progress">1 de 30</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="question-card fade-in" id="review-question-container">
        <!-- Review question content is loaded here -->
    </div>

    <div class="row mt-4">
        <div class="col-md-8">
            <div class="d-flex justify-content-between">
                <button class="btn btn-outline-secondary" id="prev-review-btn" disabled>
                    <i class="fas fa-chevron-left me-2"></i>Anterior
                </button>
                <button class="btn btn-primary" id="next-review-btn">
                    Siguiente<i class="fas fa-chevron-right ms-2"></i>
                </button>
            </div>
        </div>
        <div class="col-md-4">
            <button class="btn btn-outline-secondary w-100" id="back-to-results">
                <i class="fas fa-arrow-left me-2"></i>Volver a Resultados
            </button>
        </div>
    </div>

    <!-- Question Navigator for Review -->
    <div class="card mt-4">
        <div class="card-body">
            <h6 class="card-title">Navegador de Preguntas</h6>
            <div class="d-flex flex-wrap gap-2 mb-3">
                <span class="badge bg-success me-2">
                    <i class="fas fa-check me-1"></i>Correcta
                </span>
                <span class="badge bg-danger me-2">
                    <i class="fas fa-times me-1"></i>Incorrecta
                </span>
                <span class="badge bg-secondary me-2">
                    <i class="fas fa-question me-1"></i>Sin responder
                </span>
            </div>
            <div id="review-navigator" class="d-flex flex-wrap gap-2">
                <!-- Navigation buttons are generated here -->
            </div>
        </div>
    </div>
</div>

<!-- Custom confirmation modal -->
<div id="confirmModal" style="display: none;">
    <div id="confirmBackdrop" style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1050;
    "></div>
    <div id="confirmDialog" style="
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1055;
        background: white;
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.3);
        min-width: 400px;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
    ">
        <div style="
            padding: 20px 25px 15px 25px;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        ">
            <h5 style="margin: 0; color: #333;">Confirmar acción</h5>
            <button id="confirmModalClose" style="
                background: none;
                border: none;
                font-size: 24px;
                cursor: pointer;
                color: #666;
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
            ">&times;</button>
        </div>
        <div style="padding: 20px 25px;">
            <p id="confirm-message" style="margin: 0 0 10px 0; color: #333;">¿Estás seguro de que quieres finalizar el examen?</p>
            <p style="margin: 0; color: #666; font-size: 14px;">Tienes <span id="unanswered-warning"></span> preguntas sin responder.</p>
        </div>
        <div style="
            padding: 15px 25px 20px 25px;
            border-top: 1px solid #dee2e6;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        ">
            <button id="confirmModalCancel" class="btn btn-secondary">Cancelar</button>
            <button id="confirm-finish" class="btn btn-danger">Finalizar</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Exam mode is now handled by the ExamMode module
// The module auto-initializes when the DOM is ready
console.log('Exam mode template loaded - using modular JavaScript');
</script>
{% endblock %}