{% extends "base.html" %}
{% block title %}Quiz: {{ module_name }} — Python 108{% endblock %}
{% block content %}
<div class="quiz-page">

  <div class="breadcrumb">
    <a href="{{ url_for('dashboard') }}">Dashboard</a>
    <span>›</span><span>Quiz</span>
    <span>›</span><span>{{ module_name }}</span>
  </div>

  <!-- Quiz header -->
  <div class="quiz-header">
    <div>
      <h1 class="quiz-title">{{ module_name }} Quiz</h1>
      <p class="quiz-sub">
        10 questions · Pass mark 7/10 (70%)
        {% if attempts > 0 %} · Attempt {{ attempts + 1 }}{% endif %}
      </p>
    </div>
    {% if best %}
    <div class="best-score-badge {% if best['passed'] %}best-passed{% else %}best-failed{% endif %}">
      Best: {{ best['score'] }}/{{ best['total'] }}
      {% if best['passed'] %}✓ Passed{% else %}Not yet{% endif %}
    </div>
    {% endif %}
  </div>

  <!-- Progress tracker -->
  <div class="quiz-progress-row">
    <span class="quiz-progress-label" id="q-label">Question 1 of {{ questions|length }}</span>
    <div class="quiz-prog-track">
      <div class="quiz-prog-fill" id="q-prog" style="width:0%"></div>
    </div>
  </div>

  <!-- Quiz container -->
  <div class="quiz-container" id="quiz-container">
    {% for q in questions %}
    {% set i = loop.index0 %}
    <div class="quiz-question" id="q-{{ i }}" style="display:{% if i==0 %}block{% else %}none{% endif %}">
      <div class="q-num">Question {{ i + 1 }} / {{ questions|length }}</div>
      <div class="q-text">{{ q.q }}</div>
      <div class="q-options" id="opts-{{ i }}">
        {% for opt in q.options %}
        {% set j = loop.index0 %}
        <button class="q-opt" id="opt-{{ i }}-{{ j }}"
                onclick="selectAnswer({{ i }}, {{ j }}, {{ q.answer }}, {{ q.explanation | tojson }})">
          <span class="opt-letter">{{ ['A','B','C','D'][j] }}</span>
          <span class="opt-text">{{ opt }}</span>
        </button>
        {% endfor %}
      </div>
      <div class="q-feedback" id="fb-{{ i }}" style="display:none"></div>
      <div class="q-nav" id="nav-{{ i }}" style="display:none;margin-top:1rem">
        {% if i < questions|length - 1 %}
        <button class="btn btn-primary" onclick="nextQuestion({{ i + 1 }})">
          Next question →
        </button>
        {% else %}
        <button class="btn btn-primary" onclick="submitQuiz()">
          See my results →
        </button>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Hidden form -->
  <form id="quiz-form" method="POST" action="{{ url_for('quiz_submit', slug=slug) }}" style="display:none">
    <input type="hidden" name="answers"        id="answers-input">
    <input type="hidden" name="questions_json" value="{{ questions_json | e }}">
  </form>

</div>

<script>
const TOTAL   = {{ questions|length }};
const answers = new Array(TOTAL).fill(null);
let   current = 0;

function selectAnswer(qIdx, chosenIdx, correctIdx, explanation) {
  if (answers[qIdx] !== null) return;
  answers[qIdx] = chosenIdx;

  const opts = document.querySelectorAll('#opts-' + qIdx + ' .q-opt');
  opts.forEach((btn, j) => {
    btn.disabled = true;
    if (j === correctIdx)                        btn.classList.add('opt-correct');
    if (j === chosenIdx && chosenIdx !== correctIdx) btn.classList.add('opt-wrong');
  });

  const fb        = document.getElementById('fb-' + qIdx);
  const isCorrect = chosenIdx === correctIdx;
  fb.innerHTML = `
    <span class="fb-icon">${isCorrect ? '✓' : '✗'}</span>
    <span class="fb-verdict">${isCorrect ? 'Correct!' : 'Incorrect.'}</span>
    <span class="fb-explain">${explanation}</span>`;
  fb.className = 'q-feedback ' + (isCorrect ? 'fb-correct' : 'fb-wrong');
  fb.style.display = 'flex';

  document.getElementById('nav-' + qIdx).style.display = 'block';

  const done = answers.filter(a => a !== null).length;
  document.getElementById('q-prog').style.width = (done / TOTAL * 100) + '%';
}

function nextQuestion(nextIdx) {
  document.getElementById('q-' + current).style.display = 'none';
  document.getElementById('q-' + nextIdx).style.display = 'block';
  current = nextIdx;
  document.getElementById('q-label').textContent =
    'Question ' + (nextIdx + 1) + ' of ' + TOTAL;
  window.scrollTo({top: 0, behavior: 'smooth'});
}

function submitQuiz() {
  for (let i = 0; i < TOTAL; i++) {
    if (answers[i] === null) answers[i] = -1;
  }
  document.getElementById('answers-input').value = JSON.stringify(answers);
  document.getElementById('quiz-form').submit();
}
</script>
{% endblock %}