{% extends 'shared/base.html' %}
{% load static %}
{% 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({
      responsive: true,
      fixedHeader: true,
      autoWidth: false,
      language: {
        url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/Portuguese-Brasil.json"
      }
    });

    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">
    <div class="row flex-between-center">
      <div class="col-md d-flex align-items-center">
        <h5 class="mb-2 mb-md-0">Relatório de Semeaduras</h5>
      </div>
    </div>
  </div>
</div>

<div id="messages" class="col-md-12">
  {% for message in messages %}
    <div class="alert alert-dismissible fade show {% if message.tags == 'success' %}alert-success{% elif message.tags == 'error' %}alert-danger{% endif %}">
      {{ message }}
    </div>
  {% endfor %}
</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_semeadura_pdf' %}?periodo={{ request.GET.periodo }}&inicio={{ request.GET.inicio }}&fim={{ request.GET.fim }}"
                 class="btn btn-primary w-100" target="_blank" rel="noopener noreferrer">PDF</a>
            </div>
          </form>
        </div>

        {% if records and records.count > 0 %}
          <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úmero do Lote</th>
                  <th>Data de Semeio</th>
                  <th>Qtd. Sementes Utilizadas (kg)</th>
                  <th>Registrado Por</th>
                </tr>
              </thead>
              <tbody>
                {% for item in records %}
                  <tr>
                    <td>
                      {% if item.lote and item.lote.especie %}
                        {{ item.lote.especie.nome_popular }} ({{ item.lote.especie.especies }})
                      {% else %}
                        <em class="text-muted">[Sem Espécie]</em>
                      {% endif %}
                    </td>
                    <td>{{ item.lote.numero_lote }}</td>
                    <td>{{ item.data_semeia|date:"d/m/Y" }}</td>
                    <td class="text-end">{{ item.qtd_sementes_utilizada|floatformat:2 }}</td>
                    <td>{{ item.registrado_por.username }}</td>
                  </tr>
                {% endfor %}
              </tbody>
              <tfoot>
                <tr class="table-success fw-bold text-end">
                  <td colspan="3" class="text-end">Total:</td>
                  <td class="text-end">{{ total_sementes|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>
  document.addEventListener('DOMContentLoaded', function() {
    var tooltips = document.querySelectorAll('.tooltip-custom');
    tooltips.forEach(function(tooltip) {
      tooltip.addEventListener('mouseover', function() {
        var tooltipText = this.querySelector('.tooltip-text');
        tooltipText.style.visibility = 'visible';
        tooltipText.style.opacity = '1';
      });
      tooltip.addEventListener('mouseout', function() {
        var tooltipText = this.querySelector('.tooltip-text');
        tooltipText.style.visibility = 'hidden';
        tooltipText.style.opacity = '0';
      });
    });
  });
</script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const periodoSelect = document.getElementById('periodo');
    const inicioInput = document.getElementById('inicio');
    const fimInput = document.getElementById('fim');

    periodoSelect.addEventListener('change', function () {
      const today = new Date();

      if (this.value === 'semana') {
        // Obter segunda-feira
        const dayOfWeek = today.getDay();
        const diffToMonday = (dayOfWeek === 0 ? -6 : 1) - dayOfWeek;
        const monday = new Date(today);
        monday.setDate(today.getDate() + diffToMonday);

        // Obter domingo
        const sunday = new Date(monday);
        sunday.setDate(monday.getDate() + 6);

        // Formatar como yyyy-mm-dd
        const formatDate = (d) => d.toISOString().split('T')[0];

        inicioInput.value = formatDate(monday);
        fimInput.value = formatDate(sunday);
      }

      else if (this.value === 'hoje') {
        const todayStr = today.toISOString().split('T')[0];
        inicioInput.value = todayStr;
        fimInput.value = todayStr;
      }

      else if (this.value === 'mes') {
        const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        inicioInput.value = firstDay.toISOString().split('T')[0];
        fimInput.value = lastDay.toISOString().split('T')[0];
      }

      else if (this.value === 'ano') {
        const firstDay = new Date(today.getFullYear(), 0, 1);
        const lastDay = new Date(today.getFullYear(), 11, 31);
        inicioInput.value = firstDay.toISOString().split('T')[0];
        fimInput.value = lastDay.toISOString().split('T')[0];
      }

      else {
        inicioInput.value = '';
        fimInput.value = '';
      }
    });
  });
</script>


{% endblock %}