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

{% block content %}

<script>
  // Configuração do DataTable
  $(document).ready(function() {
    $('#relatorioTable').DataTable({
      responsive: 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>
    /* Estilização básica do menu */
    .menu-relatorios {
      border-bottom: 2px solid #198754;
    }
  
    /* Links do menu */
    .menu-link {
      color: #198754;
      text-decoration: none;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 4px;
    }
  
    .menu-link:hover {
      background-color: #e9f5eb;
    }
  
    /* Estilo para o link ativo */
    .menu-link.active {
      background-color: #198754;
      color: #ffffff;
    }
  
    /* Anos dispostos em linha */
    .anos-relatorios a {
      display: inline-block;
      margin: 0 10px;
    }
  
    /* Meses dispostos em linha abaixo dos anos */
    .meses-relatorios a {
      display: inline-block;
      margin: 0 8px;
    }
  
    /* Ajuste de responsividade */
    @media (max-width: 768px) {
      .anos-relatorios, .meses-relatorios {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
  
      .menu-link {
        margin-bottom: 5px;
      }
    }
  </style>

<!-- CABEÇALHO SUPERIOR EM FORMATO DE "CARD" -->
<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 Repiques</h5>
      </div>
    </div>
  </div>
</div>

<!-- MENSAGENS DE ERRO / SUCESSO -->
<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>

<!-- CONTEÚDO PRINCIPAL -->
<div class="card py-3">
  <div class="container-fluid">
    <div class="row">
        <div class="menu-relatorios py-3">
            <!-- Relatório Semanal -->
            <a href="{% url 'relatorio_semanal_repique' %}" class="menu-link {% if mode == 'weekly' %}active{% endif %}">
              Relatório Semanal
            </a>
          
            <!-- Anos (dispostos em linha e alinhados à esquerda) -->
            <div class="anos-relatorios mt-3">
              {% for ano in list_years %}
                <a href="{% url 'relatorio_mensal_repique' year=ano %}" class="menu-link {% if mode == 'monthly' and ano == year %}active{% endif %}">
                  {{ ano|stringformat:"d" }}
                </a>
              {% endfor %}
            </div>
          
            <!-- Meses (sempre exibidos abaixo dos anos) -->
            <div class="meses-relatorios mt-2">
              {% for m in month_list_data %}
                <a href="{% url 'relatorio_mensal_repique_month' year=year month=m.number %}" class="menu-link {% if month == m.number %}active{% endif %}">
                  {{ m.name }}
                </a>
              {% endfor %}
            </div>
          </div>

      <div class="col-12 p-4">
        <!-- TÍTULO DEPENDENDO DO MODO (SEMANAL OU MENSAL) -->
        {% if mode == 'weekly' %}
          <h2>Relatório Semanal</h2>
          <p class="text-muted">
            Exibindo registros da semana atual:
            {{ monday|date:"d/m/Y" }} a {{ sunday|date:"d/m/Y" }}.
          </p>
          <a href="{% url 'relatorio_semanal_repique_pdf' %}" class="btn btn-primary mb-3" target="_blank" rel="noopener noreferrer">
            Gerar PDF
          </a>
        {% elif mode == 'monthly' %}
          <h2>Relatório Mensal</h2>
          {% if month %}
            <p class="text-muted">
              Ano: <strong>{{ year|stringformat:"d" }}</strong> |
              Mês: <strong>{{ selected_month_name }}</strong>
            </p>
          {% else %}
            <p class="text-muted">
              Exibindo registros do ano: <strong>{{ year|stringformat:"d" }}</strong>
            </p>
          {% endif %}
        {% endif %}

        <!-- TABELA -->
        {% if records and records.count > 0 %}
          <div class="content-fluid table-responsive mt-3">
            <table id="relatorioTable" class="table table-striped table-bordered nowrap">
                <thead class="bg-success bg-gradient text-white">
                  <tr>
                    <th>Espécie</th>
                    <th>Num. 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>
                        {% if item.semeadura and item.semeadura.lote and item.semeadura.lote.especie %}
                          {{ item.semeadura.lote.especie.nome_popular }} ({{ item.semeadura.lote.especie.especies }})
                        {% else %}
                          <em class="text-muted">[Sem Espécie]</em>
                        {% endif %}
                      </td>
                      <td>
                        {% if item.semeadura and item.semeadura.lote %}
                          {{ item.semeadura.lote.numero_lote }}
                        {% else %}
                          <em class="text-muted">[Sem Lote]</em>
                        {% endif %}
                      </td>
                      <td>{{ item.data_repique|date:"d/m/Y" }}</td>
                      <td>{{ item.quantidade_repicada|format_brazilian }}</td>
                      <td>
                        {% if item.registrado_por %}
                          {{ item.registrado_por.username|default:item.registrado_por }}
                        {% else %}
                          <em class="text-muted">[Não informado]</em>
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="3" style="text-align: left; font-weight: bold;">Total de Repiques:</td>
                    <td colspan="2" style="font-weight: bold;">{{ total_repiques|format_brazilian }}</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>

{% endblock %}