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

{% block title %}
  Editar Aluno
{% endblock %}

{% block content %}
  <div class="container-fluid">
    <div class="row mb-4">
      <div class="col">
        <h1 class="h3">Editar Aluno</h1>
      </div>
      <div class="col text-end">
        <a href="{% url 'listar_alunos' %}" 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="nome" class="form-label">Nome do Aluno</label>
            <input type="text" class="form-control" id="nome" name="nome" value="{{ aluno.nome }}" required />
          </div>

          <!-- Seleção de Curso -->
          <div class="mb-3">
            <label for="curso_id" class="form-label">Curso</label>
            <select class="form-select" id="curso_id" name="curso_id" required>
              <option value="">Selecione um curso</option>
              {% for curso in cursos %}
                <option value="{{ curso.id }}" {% if curso.id == curso_selecionado %}selected{% endif %}>
                  {{ curso.nome }}
                </option>
              {% endfor %}
            </select>
          </div>

          <!-- Seleção de Turma -->
          <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 }}" {% if turma.id == aluno.turma.id %}selected{% endif %}>
                  {{ turma.nome }} - {{ turma.ano }}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="text-end">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-save"></i> Salvar
            </button>
            <a href="{% url 'listar_alunos' %}" class="btn btn-secondary">
              <i class="bi bi-x-circle"></i> Cancelar
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
{% endblock %}
{% block scripts %}
  <script>
    document.getElementById('curso_id').addEventListener('change', function () {
      const cursoId = this.value;
      const turmaSelect = document.getElementById('turma_id');

      if (cursoId) {
        fetch(`/api/turmas_por_curso/${cursoId}/`)
          .then(response => {
            if (!response.ok) {
              throw new Error(`Erro ao carregar turmas: ${response.statusText}`);
            }
            return response.json();
          })
          .then(data => {
            turmaSelect.innerHTML = '<option value="">Selecione uma turma</option>';
            data.forEach(turma => {
              turmaSelect.innerHTML += `<option value="${turma.id}">${turma.nome} - ${turma.ano}</option>`;
            });
            turmaSelect.disabled = false;
          })
          .catch(error => {
            console.error(error);
            alert("Erro ao carregar as turmas. Verifique o console para mais detalhes.");
          });
      } else {
        turmaSelect.innerHTML = '<option value="">Primeiro selecione um curso</option>';
        turmaSelect.disabled = true;
      }
    });
  </script>
{% endblock %}