{% extends 'adminlte/base.html' %}

{% block title %}
  Editar Prova
{% endblock %}

{% block content %}
<div class="container mt-4">
  <h1 class="h3 mb-4">Editar Prova</h1>
  <form method="POST">
    {% csrf_token %}
    
    <div class="mb-3">
      <label for="titulo">Título da Prova</label>
      <input type="text" class="form-control" id="titulo" name="titulo" value="{{ prova.titulo }}" required />
    </div>

    <div class="mb-3">
      <label for="turma_id">Turmas</label>
      <select class="form-select" id="turma_id" name="turmas" multiple required>
        {% for turma in turmas %}
          <option value="{{ turma.id }}" {% if turma in prova.turmas.all %}selected{% endif %}>
            {{ turma.nome }} - {{ turma.ano }}
          </option>
        {% endfor %}
      </select>
      <small class="form-text text-muted">Segure Ctrl (Windows) ou Command (Mac) para selecionar várias turmas.</small>
    </div>

    <div class="mb-3">
      <label for="num_questoes">Número de Questões</label>
      <input type="number" class="form-control" id="num_questoes" name="num_questoes" value="{{ gabaritos|length }}" min="1" required />
    </div>

    <div class="mb-3 text-end">
      <button type="button" id="add-questao" class="btn btn-success">
        <i class="bi bi-plus-circle"></i> Adicionar Questão
      </button>
    </div>

    <div id="gabarito-questoes" class="mb-4">
      {% for gab in gabaritos %}
      <div class="mb-3" id="questao-{{ forloop.counter }}">
        <div class="row align-items-center">
          <div class="col-md-1">
            <label class="form-label">Q{{ gab.numero_questao }}</label>
          </div>
          <div class="col-md-4">
            <select name="respostas[]" class="form-select" required>
              <option value="">Selecione a resposta</option>
              <option value="A" {% if gab.resposta_correta == 'A' %}selected{% endif %}>A</option>
              <option value="B" {% if gab.resposta_correta == 'B' %}selected{% endif %}>B</option>
              <option value="C" {% if gab.resposta_correta == 'C' %}selected{% endif %}>C</option>
              <option value="D" {% if gab.resposta_correta == 'D' %}selected{% endif %}>D</option>
              <option value="E" {% if gab.resposta_correta == 'E' %}selected{% endif %}>E</option>
            </select>
          </div>
          <div class="col-md-2">
            <button type="button" class="btn btn-danger btn-sm" onclick="removerQuestao({{ forloop.counter }})">
              <i class="bi bi-trash"></i> Remover
            </button>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <button type="submit" class="btn btn-primary">
      <i class="bi bi-save"></i> Salvar Alterações
    </button>
  </form>
</div>

<script>
  let questaoCount = {{ gabaritos|length }};

  document.getElementById('add-questao').addEventListener('click', function () {
    const numTotal = parseInt(document.getElementById('num_questoes').value);
    const container = document.getElementById('gabarito-questoes');

    if (isNaN(numTotal) || numTotal <= 0) {
      alert('Informe primeiro o número de questões!');
      return;
    }

    if (questaoCount >= numTotal) {
      alert('Você já adicionou todas as questões permitidas.');
      return;
    }

    questaoCount++;

    const div = document.createElement('div');
    div.classList.add('mb-3');
    div.setAttribute('id', `questao-${questaoCount}`);
    div.innerHTML = `
      <div class="row align-items-center">
        <div class="col-md-1">
          <label class="form-label">Q${questaoCount}</label>
        </div>
        <div class="col-md-4">
          <select name="respostas[]" class="form-select" required>
            <option value="">Selecione a resposta</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
          </select>
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-danger btn-sm" onclick="removerQuestao(${questaoCount})">
            <i class="bi bi-trash"></i> Remover
          </button>
        </div>
      </div>
    `;
    container.appendChild(div);
  });

  function removerQuestao(id) {
    const div = document.getElementById(`questao-${id}`);
    if (div) {
      div.remove();
      questaoCount--;
    }
  }

  // ✅ **Validação antes de salvar o formulário**
  document.querySelector('form').addEventListener('submit', function(event) {
    const numTotal = parseInt(document.getElementById('num_questoes').value);
    const atual = document.querySelectorAll('select[name="respostas[]"]').length;

    if (numTotal !== atual) {
      event.preventDefault();
      alert(`O número de questões adicionadas (${atual}) não corresponde ao número informado (${numTotal}).`);
    }
  });
</script>
{% endblock %}