{% extends "base.html" %}

{% block title %}Modo Estudio - Balotario Licencia A-I{% endblock %}

{% block content %}
<div class="text-center mb-4">
    <h2 class="fw-bold text-primary">
        <i class="fas fa-book me-2"></i>
        Modo Estudio
    </h2>
    <p class="text-muted">Revisa todas las preguntas con sus respuestas correctas</p>
</div>

<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 mb-3">
                    <h6 class="mb-0">Filtros de Estudio</h6>
                    <button class="btn btn-sm btn-outline-primary" id="reset-filters">
                        <i class="fas fa-refresh me-1"></i>Resetear
                    </button>
                </div>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Desde pregunta:</label>
                        <input type="number" class="form-control" id="start-question" min="1" max="200" value="1">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Hasta pregunta:</label>
                        <input type="number" class="form-control" id="end-question" min="1" max="200" value="200">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">&nbsp;</label>
                        <button class="btn btn-primary w-100" id="apply-filters">
                            <i class="fas fa-filter me-1"></i>Aplicar Filtros
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h6 class="text-white mb-3">Progreso de Estudio</h6>
                <div class="row">
                    <div class="col-6">
                        <h4 class="text-white" id="current-question">1</h4>
                        <small>Pregunta Actual</small>
                    </div>
                    <div class="col-6">
                        <h4 class="text-white" id="total-questions">0</h4>
                        <small>Total</small>
                    </div>
                </div>
                <div class="progress mt-3">
                    <div class="progress-bar bg-light" id="study-progress" style="width: 0%"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="loading" class="loading">
    <div class="spinner"></div>
</div>

<div id="study-content" style="display: none;">
    <div class="question-card fade-in" id="question-container">
        <!-- Question content is loaded here -->
    </div>

    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-secondary" id="prev-btn" disabled>
            <i class="fas fa-chevron-left me-2"></i>Anterior
        </button>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary" id="show-answer">
                <i class="fas fa-eye me-2"></i>Mostrar Respuesta
            </button>
            <button class="btn btn-outline-primary" id="hide-answer" style="display: none;">
                <i class="fas fa-eye-slash me-2"></i>Ocultar Respuesta
            </button>
        </div>
        <button class="btn btn-primary" id="next-btn">
            Siguiente<i class="fas fa-chevron-right ms-2"></i>
        </button>
    </div>

    <!-- Question Navigator -->
    <div class="card mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="card-title mb-0">
                    <i class="fas fa-map me-2"></i>Navegador de Preguntas
                </h6>
                <div class="d-flex gap-2 align-items-center">
                    <small class="text-muted">Ir a:</small>
                    <input type="number" class="form-control form-control-sm" id="jump-to-question"
                           min="1" max="200" placeholder="#" style="width: 60px;">
                    <button class="btn btn-sm btn-outline-primary" id="jump-btn" title="Ir a pregunta">
                        <i class="fas fa-arrow-right"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-warning" id="reset-visited-btn" title="Limpiar preguntas visitadas">
                        <i class="fas fa-redo"></i>
                    </button>
                </div>
            </div>
            <div id="question-navigator" class="question-navigator">
                <!-- Question navigation buttons will be generated here -->
            </div>
            <div class="mt-2 d-flex justify-content-between align-items-center">
                <div class="navigator-legend">
                    <small class="text-muted">
                        <span class="badge bg-primary me-2">●</span>Actual
                        <span class="badge bg-success me-2 ms-2">●</span>Visitada
                        <span class="badge bg-outline-secondary me-2 ms-2">○</span>Pendiente
                    </small>
                </div>
                <small class="text-muted" id="navigator-progress">0 de 0 visitadas</small>
            </div>
        </div>
    </div>
</div>

<div id="no-questions" class="text-center" style="display: none;">
    <div class="card">
        <div class="card-body">
            <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
            <h5>No se encontraron preguntas</h5>
            <p class="text-muted">Ajusta los filtros para ver las preguntas disponibles.</p>
        </div>
    </div>
</div>

<style>
/* Question Navigator Styles */
.question-navigator {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.question-nav-btn {
    width: 35px;
    height: 35px;
    border: 1px solid #dee2e6;
    background: white;
    color: #6c757d;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-nav-btn:hover {
    border-color: #3498db;
    background: #e3f2fd;
    transform: translateY(-1px);
}

.question-nav-btn.current {
    background: #3498db;
    color: white;
    border-color: #2980b9;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.question-nav-btn.visited {
    background: #27ae60;
    color: white;
    border-color: #229954;
}

.question-nav-btn.visited:hover {
    background: #2ecc71;
    border-color: #27ae60;
}

.navigator-legend .badge {
    font-size: 0.7rem;
    padding: 0.25em 0.4em;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .question-navigator {
        max-height: 150px;
        gap: 3px;
        padding: 6px;
    }

    .question-nav-btn {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .navigator-legend {
        display: none;
    }

    #jump-to-question {
        width: 50px !important;
    }
}

/* Tablet responsive */
@media (min-width: 577px) and (max-width: 768px) {
    .question-navigator {
        max-height: 180px;
    }

    .question-nav-btn {
        width: 32px;
        height: 32px;
    }
}

/* Smooth scrolling for navigator */
.question-navigator {
    scroll-behavior: smooth;
}

/* Jump to question input styling */
#jump-to-question {
    text-align: center;
    font-weight: bold;
}

#jump-to-question:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

/* Reset visited button styling */
#reset-visited-btn {
    transition: all 0.2s ease;
}

#reset-visited-btn:hover {
    background: #ffc107;
    border-color: #ffc107;
    color: #000;
    transform: translateY(-1px);
}

#reset-visited-btn:active {
    transform: scale(0.95);
}

/* Mobile adjustments for navigator controls */
@media (max-width: 576px) {
    .card-title {
        font-size: 0.9rem;
    }

    #reset-visited-btn, #jump-btn {
        padding: 0.25rem 0.5rem;
    }

    #reset-visited-btn i, #jump-btn i {
        font-size: 0.8rem;
    }
}
</style>
{% endblock %}

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