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

{% block title %}
  Cadastrar Gabarito
{% endblock %}

{% block content %}
  <div class="container-fluid">
    <div class="row mb-4">
      <div class="col">
        <h1 class="h3">Cadastrar Gabarito</h1>
      </div>
      <div class="col text-end">
        <a href="{% url 'listar_gabaritos' %}" 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="prova_id" class="form-label">Prova</label>
            <select class="form-select" id="prova_id" name="prova_id" required>
              <option value="">Selecione uma prova</option>
              {% for prova in provas %}
                <option value="{{ prova.id }}">{{ prova.titulo }}</option>
              {% endfor %}
            </select>
          </div>

          <hr />

          <div id="questoes-container">
            <div class="row mb-3" id="questao-1">
              <div class="col-md-2">
                <label class="form-label">Questão 1</label>
                <input type="text" class="form-control" name="questao" value="1" readonly />
                <select class="form-select mt-2" name="resposta[]" required>
                  <option value="">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>
          </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 class="text-end">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-save"></i> Salvar Gabarito
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
    // Script para adicionar mais questões
    let questaoCount = 1;

    document.getElementById('add-questao').addEventListener('click', function () {
      questaoCount++;

      const container = document.getElementById('questoes-container');
      const row = document.createElement('div');
      row.classList.add('row', 'mb-3');
      row.setAttribute('id', `questao-${questaoCount}`);
      row.innerHTML = `
        <div class="col-md-2">
          <label class="form-label">Questão ${questaoCount}</label>
          <input type="text" class="form-control" name="questao" value="${questaoCount}" readonly />
          <select class="form-select mt-2" name="resposta[]" required>
            <option value="">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>
      `;
      container.appendChild(row);
    });
  </script>
{% endblock %}