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

{% block content %}

<script>
  $(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>
  .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>

<!-- CABEÇALHO -->
<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">Consulta de Repiques por Funcionário</h5>
      </div>
    </div>
  </div>
</div>

<!-- MENSAGENS -->
<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="col-12 p-4">
        <!-- FORMULÁRIO DE FILTRO EM DESTAQUE -->
        <div class="filtro-destaque mb-4">
          <h5 class="mb-3 text-success">Filtrar por Funcionário e Período</h5>

          <form method="get" class="row g-3">
            <div class="col-md-4">
              <label for="funcionario" class="form-label">Funcionário</label>
              <select name="funcionario" id="funcionario" class="form-select">
                <option value="">Todos</option>
                {% for f in funcionarios %}
                  <option value="{{ f.id }}" {% if request.GET.funcionario == f.id|stringformat:"s" %}selected{% endif %}>
                    {{ f.nome_completo }}
                  </option>
                {% endfor %}
              </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-2 align-self-end">
              <button type="submit" class="btn btn-success w-100">Filtrar</button>
            </div>
          </form>
        </div>

        <!-- TABELA -->
        {% if repiques %}
          <div class="table-responsive">
            <table class="table table-bordered table-green-striped" id="relatorioTable">
              <thead class="table-success text-center">
                <tr>
                  <th>Funcionário</th>
                  <th>Espécie</th>
                  <th>Número Muda</th>
                  <th>Última Data</th>
                  <th>Total Repicado</th>
                </tr>
              </thead>
              <tbody>
                {% for repique in repiques %}
                  <tr>
                    <td>{{ repique.funcionario__nome_completo }}</td>
                    <td>
                      {{ repique.semeadura__lote__especie__nome_popular }}
                      ({{ repique.semeadura__lote__especie__especies }})
                    </td>
                    <td>{{ repique.semeadura__numero_muda }}</td>
                    <td>{{ repique.ultima_data|date:"d/m/Y" }}</td>
                    <td>{{ repique.total_repicado|floatformat:2 }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <p class="text-muted mt-3">Nenhum resultado encontrado com os filtros aplicados.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% endblock %}