{% 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"
      }
    });

    // Preencher datas automaticamente ao selecionar semana
    $('#periodo').on('change', function() {
      const hoje = new Date();
      const diaSemana = hoje.getDay();
      const segunda = new Date(hoje);
      segunda.setDate(hoje.getDate() - ((diaSemana + 6) % 7));
      const domingo = new Date(segunda);
      domingo.setDate(segunda.getDate() + 6);

      const formatar = d => d.toISOString().split('T')[0];

      if (this.value === 'semana') {
        $('#inicio').val(formatar(segunda));
        $('#fim').val(formatar(domingo));
      } else if (this.value === '') {
        $('#inicio').val('');
        $('#fim').val('');
      }
    });

    setTimeout(function() {
      $("#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 Repiques</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_repique_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>Data do Repique</th>
                <th>Qtd. Entrada (Transplante)</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>{{ item.data_repique|date:"d/m/Y" }}</td>
                  <td class="text-end">{{ item.quantidade_repicada|floatformat:2 }}</td>
                  <td>{{ item.registrado_por.username }}</td>
                </tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="fw-bold">
                <td colspan="3" class="text-end">Total de Repiques:</td>
                <td class="text-end">{{ total_repiques|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>

<script>
  // Tooltips customizados
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.tooltip-custom').forEach(function (tooltip) {
      tooltip.addEventListener('mouseover', function () {
        const tooltipText = this.querySelector('.tooltip-text');
        tooltipText.style.visibility = 'visible';
        tooltipText.style.opacity = '1';
      });
      tooltip.addEventListener('mouseout', function () {
        const tooltipText = this.querySelector('.tooltip-text');
        tooltipText.style.visibility = 'hidden';
        tooltipText.style.opacity = '0';
      });
    });
  });
</script>

<script>
  $(document).ready(function () {
    // Evita erro de reinitialização
    if (!$.fn.DataTable.isDataTable('#relatorioTable')) {
      $('#relatorioTable').DataTable({
        responsive: true,
        autoWidth: false,
        language: {
          url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/Portuguese-Brasil.json"
        }
      });
    }

    // Função para formatar data para yyyy-mm-dd
    const formatar = (data) => data.toISOString().split('T')[0];

    // Lógica para preencher automaticamente o período
    $('#periodo').on('change', function () {
      const hoje = new Date();
      const diaSemana = hoje.getDay(); // 0 (domingo) a 6 (sábado)
      const ano = hoje.getFullYear();
      const mes = hoje.getMonth();

      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') {
        const primeiroDia = new Date(ano, 0, 1);
        const ultimoDia = new Date(ano, 11, 31);
        $('#inicio').val(formatar(primeiroDia));
        $('#fim').val(formatar(ultimoDia));
      } else {
        $('#inicio').val('');
        $('#fim').val('');
      }
    });

    // Oculta mensagens após 5 segundos
    setTimeout(function () {
      $("#messages").fadeOut("fast");
    }, 5000);
  });
</script>



{% endblock %}