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

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

{% block content %}
<div class="container mt-4">
  <h1 class="h3 mb-4">Cadastrar 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" 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 }}">{{ 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="periodo_id">Período Letivo</label>
      <select class="form-select" id="periodo_id" name="periodo_id" required>
        <option value="">Selecione um período</option>
        {% for periodo in periodos %}
          <option value="{{ periodo.id }}">{{ periodo.nome }} - {{ periodo.ano }}</option>
        {% endfor %}
      </select>
    </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" 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">
    </div>

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

<script>
  let questaoCount = 0;

  // Função para adicionar uma nova questão
  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);
  });

  // Função para remover a questão
  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 %}