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

{% block title %}
  Cadastrar Prova
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row mb-4">
    <div class="col">
      <h1 class="h3">Cadastrar Prova</h1>
    </div>
    <div class="col text-end">
      <a href="{% url 'listar_provas' %}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
      </a>
    </div>
  </div>

  <div class="card shadow">
    <div class="card-body">
      <form method="POST">
        {% csrf_token %}
        
        <div class="mb-3">
          <label for="titulo" class="form-label">Título da Prova</label>
          <input type="text" class="form-control" id="titulo" name="titulo" placeholder="Digite o título da prova" required />
        </div>

        <div class="mb-3">
          <label for="turma_id" class="form-label">Turma</label>
          <select class="form-select" id="turma_id" name="turma_id" required>
            <option value="">Selecione uma turma</option>
            {% for turma in turmas %}
              <option value="{{ turma.id }}">{{ turma.nome }} - {{ turma.ano }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="mb-3">
          <label for="num_questoes" class="form-label">Número de Questões</label>
          <input type="number" class="form-control" id="num_questoes" name="num_questoes" min="1" placeholder="Digite o número de questões" 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">
          <!-- As questões serão adicionadas aqui -->
        </div>

        <div class="text-end">
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-save"></i> Salvar Prova e Gabarito
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  let questaoCount = 0;

  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_${questaoCount}" 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 %}