{% extends "base.html" %}

{% block title %}Simulacro Oficial AVANZO - En Curso | MINEDUCYT El Salvador{% endblock %}

{% block content %}
<div class="container py-4">

  <!-- BARRA DE CONTROL DEL EXAMEN -->
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 p-3 bg-white rounded-3 border shadow-sm mb-4">
    <div>
      <span class="badge bg-primary text-uppercase px-2 py-1 small">Evaluación Activa</span>
      <h5 class="fw-bold mb-0 text-dark">Prueba Oficial AVANZO &bull; Simulación Real</h5>
      <span id="student-display-info" class="text-muted small">Estudiante: Cargando...</span>
    </div>

    <div class="d-flex align-items-center gap-3">
      <div class="text-end">
        <span class="text-muted small d-block">Tiempo Restante:</span>
        <div id="timer-container" class="badge bg-primary fs-5 px-3 py-1 font-monospace">
          <i class="bi bi-stopwatch me-1"></i> <span id="exam-timer">60:00</span>
        </div>
      </div>

      <button onclick="examApp.confirmSubmit()" class="btn btn-outline-danger fw-bold btn-sm py-2 px-3">
        <i class="bi bi-box-arrow-right me-1"></i> Entregar Examen
      </button>
    </div>
  </div>

  <div class="row g-4">
    <!-- COLUMNA PRINCIPAL: PREGUNTA Y OPCIONES -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white">
        <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-4">
          <div>
            <span id="q-category" class="badge bg-light text-primary border px-3 py-1 fw-bold text-uppercase"></span>
            <h4 id="q-number" class="fw-bold text-dark mb-0 mt-2">Pregunta 1 de {{ total }}</h4>
          </div>
          <div>
            <button id="btn-flag" class="btn btn-outline-warning text-dark btn-sm">
              <i class="bi bi-flag me-1"></i> Marcar Duda
            </button>
          </div>
        </div>

        <!-- ENUNCIADO -->
        <div class="mb-4">
          <p id="q-text" class="fs-5 text-dark lh-base mb-0" style="white-space: pre-line;"></p>
        </div>

        <!-- OPCIONES A, B, C, D -->
        <div id="q-options" class="mb-4">
          <!-- Renderizado dinámico por JS -->
        </div>

        <!-- BOTONES DE NAVEGACIÓN -->
        <div class="d-flex justify-content-between align-items-center pt-3 border-top">
          <button id="btn-prev" class="btn btn-outline-secondary px-4 fw-semibold">
            <i class="bi bi-arrow-left me-1"></i> Anterior
          </button>
          <span id="answered-progress" class="text-muted small fw-semibold">0 de {{ total }} respondidas</span>
          <button id="btn-next" class="btn btn-primary px-4 fw-bold">
            Siguiente <i class="bi bi-arrow-right ms-1"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- COLUMNA LATERAL: MATRIZ DE PREGUNTAS -->
    <div class="col-lg-4">
      <div class="card border-0 shadow-sm rounded-4 p-4 bg-white sticky-top" style="top: 85px;">
        <h6 class="fw-bold text-dark text-uppercase small mb-3 border-bottom pb-2">
          <i class="bi bi-grid-3x3-gap-fill text-primary me-1"></i> Matriz de Navegación
        </h6>

        <div class="d-flex justify-content-between small text-muted mb-3 flex-wrap gap-1" style="font-size: 0.75rem;">
          <span><span class="d-inline-block rounded-circle bg-success me-1" style="width: 10px; height: 10px;"></span>Respondida</span>
          <span><span class="d-inline-block rounded-circle bg-warning me-1" style="width: 10px; height: 10px;"></span>Duda/Bandera</span>
          <span><span class="d-inline-block rounded-circle bg-light border me-1" style="width: 10px; height: 10px;"></span>Sin Responder</span>
        </div>

        <!-- MATRIZ DE BOTONES -->
        <div id="matrix-container" class="exam-matrix mb-4">
          <!-- Renderizado por JS -->
        </div>

        <div class="p-3 bg-light rounded-3 border text-center">
          <small class="text-muted d-block mb-2">¿Terminaste de revisar todas tus respuestas?</small>
          <button onclick="examApp.confirmSubmit()" class="btn btn-success w-100 fw-bold py-2 shadow-sm">
            <i class="bi bi-check-circle-fill me-1"></i> Finalizar y Obtener Boleta
          </button>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- MODAL PARA PEDIR O CONFIRMAR NIE DEL ESTUDIANTE -->
<div class="modal fade" id="nieModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4 border-0 shadow-lg">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title fw-bold">
          <i class="bi bi-person-badge-fill me-2"></i> Identificación del Estudiante
        </h5>
      </div>
      <div class="modal-body p-4">
        <p class="text-muted small mb-3">
          Ingresa tus datos oficiales para que aparezcan registrados en tu <strong>Boleta Oficial de Resultados AVANZO</strong> con código de verificación.
        </p>

        <div class="mb-3">
          <label class="form-label fw-semibold small">Nombre Completo del Estudiante:</label>
          <input type="text" id="modal-student-name" class="form-control" placeholder="Ej. Carlos Antonio Gómez Rivas">
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold small">NIE (Número de Identificación Estudiantil):</label>
          <input type="text" id="modal-student-nie" class="form-control font-monospace" placeholder="Ej. 12345678" maxlength="10">
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold small">Instituto / Complejo Educativo:</label>
          <input type="text" id="modal-student-school" class="form-control" placeholder="Ej. Complejo Educativo Barrio La Cruz">
        </div>
      </div>
      <div class="modal-footer bg-light">
        <button type="button" onclick="saveStudentIdAndStart()" class="btn btn-primary fw-bold px-4">
          Comenzar Examen <i class="bi bi-play-fill ms-1"></i>
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  const examQuestions = {{ questions | tojson }};
  let examApp = null;

  document.addEventListener("DOMContentLoaded", () => {
    let sName = localStorage.getItem("avanzo_student_name");
    let sNie = localStorage.getItem("avanzo_student_nie");
    let sSchool = localStorage.getItem("avanzo_student_school");

    if (!sName || !sNie) {
      const nieModal = new bootstrap.Modal(document.getElementById('nieModal'));
      nieModal.show();
    } else {
      updateStudentHeader(sName, sNie, sSchool);
      examApp = new ExamManager(examQuestions, 60);
    }
  });

  function saveStudentIdAndStart() {
    const name = document.getElementById("modal-student-name").value.trim() || "Estudiante Bachillerato";
    const nie = document.getElementById("modal-student-nie").value.trim() || "00000000";
    const school = document.getElementById("modal-student-school").value.trim() || "Instituto Nacional";

    localStorage.setItem("avanzo_student_name", name);
    localStorage.setItem("avanzo_student_nie", nie);
    localStorage.setItem("avanzo_student_school", school);

    updateStudentHeader(name, nie, school);
    const modalEl = document.getElementById('nieModal');
    const modalInstance = bootstrap.Modal.getInstance(modalEl);
    if (modalInstance) modalInstance.hide();

    if (!examApp) {
      examApp = new ExamManager(examQuestions, 60);
    }
  }

  function updateStudentHeader(name, nie, school) {
    const el = document.getElementById("student-display-info");
    if (el) {
      el.innerHTML = `Estudiante: <strong>${name}</strong> (NIE: <span class="font-monospace text-primary">${nie}</span>) &bull; ${school}`;
    }
  }
</script>
{% endblock %}