{% extends 'shared/base.html' %}
{% load static %}
{% load custom_filters %}

{% block content %}
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.bootstrap4.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
<script>
  $(document).ready(function () {
    $('#relatorioTable').DataTable({
      fixedHeader: true,
      responsive: true,
      autoWidth: false,
      language: {
        url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/Portuguese-Brasil.json"
      }
    });

    const formatar = d => d.toISOString().split('T')[0];
    $('#periodo').on('change', function () {
      const hoje = new Date();
      const diaSemana = hoje.getDay();
      const mes = hoje.getMonth();
      const ano = hoje.getFullYear();

      if (this.value === 'hoje') {
        $('#inicio').val(formatar(hoje));
        $('#fim').val(formatar(hoje));
      } else if (this.value === 'semana') {
        const segunda = new Date(hoje);
        segunda.setDate(hoje.getDate() - ((diaSemana + 6) % 7));
        const domingo = new Date(segunda);
        domingo.setDate(segunda.getDate() + 6);
        $('#inicio').val(formatar(segunda));
        $('#fim').val(formatar(domingo));
      } else if (this.value === 'mes') {
        const primeiroDia = new Date(ano, mes, 1);
        const ultimoDia = new Date(ano, mes + 1, 0);
        $('#inicio').val(formatar(primeiroDia));
        $('#fim').val(formatar(ultimoDia));
      } else if (this.value === 'ano') {
        $('#inicio').val(formatar(new Date(ano, 0, 1)));
        $('#fim').val(formatar(new Date(ano, 11, 31)));
      } else {
        $('#inicio').val('');
        $('#fim').val('');
      }
    });

    setTimeout(() => $("#messages").fadeOut("fast"), 5000);
  });
</script>

<style>
  .filtro-destaque {
    border: 2px solid #198754;
    background-color: #f0fdf4;
    padding: 20px;
    border-radius: 10px;
  }
  .table-green-striped tbody tr:nth-child(odd) { background-color: #e9f7ef; }
  .table-green-striped tbody tr:nth-child(even) { background-color: #d4f4dc; }
</style>

<div class="card my-2">
  <div class="card-body bg-success bg-gradient text-white rounded-2">
    <h5 class="mb-0">Relatório de Estufa</h5>
  </div>
</div>

<div class="card py-3">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 p-4">
        <div class="filtro-destaque mb-4">
          <h5 class="mb-3 text-success">Filtrar por Período</h5>
          <form method="get" class="row g-3">
            <div class="col-md-3">
              <label for="periodo" class="form-label">Período Rápido</label>
              <select name="periodo" id="periodo" class="form-select">
                <option value="">Tudo</option>
                <option value="hoje" {% if request.GET.periodo == 'hoje' %}selected{% endif %}>Hoje</option>
                <option value="semana" {% if request.GET.periodo == 'semana' %}selected{% endif %}>Esta Semana</option>
                <option value="mes" {% if request.GET.periodo == 'mes' %}selected{% endif %}>Este Mês</option>
                <option value="ano" {% if request.GET.periodo == 'ano' %}selected{% endif %}>Este Ano</option>
              </select>
            </div>
            <div class="col-md-3">
              <label for="inicio" class="form-label">Data Início</label>
              <input type="date" id="inicio" name="inicio" class="form-control" value="{{ request.GET.inicio }}">
            </div>
            <div class="col-md-3">
              <label for="fim" class="form-label">Data Fim</label>
              <input type="date" id="fim" name="fim" class="form-control" value="{{ request.GET.fim }}">
            </div>
            <div class="col-md-3 align-self-end d-flex gap-2">
              <button type="submit" class="btn btn-success w-100">Filtrar</button>
              <a href="{% url 'relatorio_geral_estufa_pdf' %}?periodo={{ request.GET.periodo }}&inicio={{ request.GET.inicio }}&fim={{ request.GET.fim }}" class="btn btn-primary w-100" target="_blank">PDF</a>
            </div>
          </form>
        </div>

        {% if records %}
        <div class="table-responsive">
          <table class="table table-bordered table-green-striped" id="relatorioTable">
            <thead class="table-success text-center">
              <tr>
                <th>Espécie</th>
                <th>Núm. Lote</th>
                <th>Qtd Selecionada</th>
                <th>Registrado Por</th>
              </tr>
            </thead>
            <tbody>
              {% for item in records %}
                <tr>
                  <td>{{ item.semeadura.lote.especie.nome_popular }} ({{ item.semeadura.lote.especie.especies }})</td>
                  <td>{{ item.semeadura.lote.numero_lote }}</td>
                  <td class="text-end">{{ item.quantidade_selecao|floatformat:2 }}</td>
                  <td>{{ item.registrado_por.username|default:"[Não informado]" }}</td>
                </tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="fw-bold">
                <td colspan="2" class="text-end">Total Seleção:</td>
                <td class="text-end">{{ total_selecao|floatformat:2 }}</td>
                <td></td>
              </tr>
            </tfoot>
          </table>
        </div>
        {% else %}
          <p class="text-muted mt-3">Nenhum registro encontrado.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}