{% extends "base.html" %}

{% block title %}Práctica Guiada por Asignatura - AVANZO | MINEDUCYT El Salvador{% endblock %}

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

  <!-- HEADER -->
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
    <div>
      <span class="badge bg-primary text-uppercase px-2 py-1 small">Modalidad Formativa</span>
      <h3 class="fw-bold text-dark mb-1">Práctica Guiada por Asignatura</h3>
      <p class="text-muted mb-0">Resuelve ítems a tu propio ritmo con retroalimentación explicada paso a paso.</p>
    </div>
    <a href="{{ url_for('exam_view') }}" class="btn btn-warning fw-bold shadow-sm text-dark">
      <i class="bi bi-stopwatch me-1"></i> Ir al Simulacro Cronometrado
    </a>
  </div>

  <!-- FILTRO POR ASIGNATURAS -->
  <div class="d-flex flex-wrap gap-2 mb-4 pb-2 border-bottom">
    <a href="{{ url_for('practice_view') }}" class="btn btn-sm {% if not selected_category %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill px-3">
      Todas las Materias
    </a>
    {% for cat in categories %}
    <a href="{{ url_for('practice_view', materia=cat.id) }}" class="btn btn-sm {% if selected_category == cat.id %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill px-3">
      <i class="bi {{ cat.icon }} me-1"></i> {{ cat.name }}
    </a>
    {% endfor %}
  </div>

  <!-- LISTADO DE PREGUNTAS DE PRÁCTICA -->
  <div class="row g-4">
    {% for q in questions %}
    <div class="col-12">
      <div class="card border-0 shadow-sm rounded-4 p-4 bg-white" id="card-q-{{ q.id }}">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <span class="badge bg-light text-primary border px-3 py-1 fw-bold text-uppercase">
            {{ q.curricular_unit }}
          </span>
          <span class="badge bg-secondary-subtle text-secondary small">
            Dificultad: {{ q.difficulty }}
          </span>
        </div>

        <h5 class="fw-semibold text-dark mb-3 lh-base" style="white-space: pre-line;">
          {{ loop.index }}. {{ q.question }}
        </h5>

        <!-- OPCIONES -->
        <div class="mb-3">
          {% for opt in [('A', q.option_a), ('B', q.option_b), ('C', q.option_c), ('D', q.option_d)] %}
          <div class="mb-2">
            <input type="radio" name="practice_q_{{ q.id }}" id="p_opt_{{ q.id }}_{{ opt[0] }}" value="{{ opt[0] }}" class="option-input d-none">
            <label for="p_opt_{{ q.id }}_{{ opt[0] }}" class="option-label py-2" id="lbl_{{ q.id }}_{{ opt[0] }}">
              <span class="option-letter">{{ opt[0] }}</span>
              <span class="option-text">{{ opt[1] }}</span>
            </label>
          </div>
          {% endfor %}
        </div>

        <div class="d-flex justify-content-between align-items-center pt-2">
          <button onclick="checkPracticeAnswer({{ q.id }}, '{{ q.correct_option }}')" class="btn btn-outline-primary btn-sm fw-bold px-3" id="btn-check-{{ q.id }}">
            <i class="bi bi-patch-question me-1"></i> Comprobar Respuesta
          </button>
          <span class="text-muted small">Ítem #{{ q.id }}</span>
        </div>

        <!-- CAJA DE RETROALIMENTACIÓN (OCULTA POR DEFECTO) -->
        <div id="feedback-{{ q.id }}" class="mt-4 p-3 rounded-3 d-none">
          <div id="feedback-badge-{{ q.id }}" class="fw-bold mb-2"></div>

          <div class="mb-2">
            <strong class="text-dark small text-uppercase d-block mb-1">
              <i class="bi bi-check2-circle text-success me-1"></i> Justificación Paso a Paso:
            </strong>
            <p class="text-secondary small mb-2">{{ q.justification }}</p>
          </div>

          <div>
            <strong class="text-dark small text-uppercase d-block mb-1">
              <i class="bi bi-info-circle text-primary me-1"></i> Análisis de Distractores:
            </strong>
            <p class="text-muted small mb-0">{{ q.distractors_analysis }}</p>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
  function checkPracticeAnswer(qId, correctOption) {
    const selected = document.querySelector(`input[name="practice_q_${qId}"]:checked`);
    if (!selected) {
      alert("Por favor selecciona una opción antes de comprobar.");
      return;
    }

    const userOpt = selected.value;
    const feedbackBox = document.getElementById(`feedback-${qId}`);
    const feedbackBadge = document.getElementById(`feedback-badge-${qId}`);
    const checkBtn = document.getElementById(`btn-check-${qId}`);

    feedbackBox.classList.remove("d-none");
    checkBtn.disabled = true;

    if (userOpt === correctOption) {
      feedbackBox.className = "mt-4 p-3 rounded-3 bg-success-subtle border border-success text-success-emphasis";
      feedbackBadge.innerHTML = `<i class="bi bi-check-circle-fill text-success fs-5 me-1"></i> ¡CORRECTO! Opción ${correctOption}`;
    } else {
      feedbackBox.className = "mt-4 p-3 rounded-3 bg-danger-subtle border border-danger text-danger-emphasis";
      feedbackBadge.innerHTML = `<i class="bi bi-x-circle-fill text-danger fs-5 me-1"></i> INCORRECTO. La respuesta correcta era la opción ${correctOption}.`;
    }

    // Resaltar etiqueta correcta
    const correctLabel = document.getElementById(`lbl_${qId}_${correctOption}`);
    if (correctLabel) {
      correctLabel.style.borderColor = "#10b981";
      correctLabel.style.backgroundColor = "#ecfdf5";
      correctLabel.style.color = "#047857";
    }
  }
</script>
{% endblock %}