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

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

  function voltar() {
    window.history.back();
  }
</script>
<style>
  .linha-entrada-zero {
        background-color: #ffcccc;  /* Cor de fundo vermelho claro (pode ajustar conforme necessário) */
    }
</style>
<script>
  $(document).ready(function() {
      $('#example').DataTable({
      });
  });
</script>

<div class="content">
  <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">Estoque de Sementes</h5>
        </div>
        <div class="col-auto">
            <button class="btn btn-light me-1 mb-1" type="button" onclick="voltar()">Voltar <span class="fas fa-arrow-left me-1"
                data-fa-transform="shrink-3"></span></button>
        </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="content-fluid table-responsive">
        <div class="container">
          <div class="row">
            <div class="col-md-6 offset-md-4"> <!-- Ajuste o tamanho da coluna conforme necessário -->
              <form method="get" action="{% url 'lista_lotes' %}" class="d-flex">
                <div class="me-2">
                  <select class="form-select filter-custom" name="ano" id="ano">
                    <option value="" {% if not ano_selecionado %}selected{% endif %}>Todos os Anos</option>
                    {% for ano in anos_disponiveis %}
                      <option value="{{ ano|date:'Y' }}" {% if ano_selecionado|default:'' == ano|date:'Y' %}selected{% endif %}>{{ ano|date:'Y' }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="me-2">
                  <select class="form-select filter-custom" name="mes" id="mes">
                    <option value="" {% if not mes_selecionado %}selected{% endif %}>Todos os Meses</option>
                    {% for mes in meses %}
                      <option value="{{ mes.numero }}" {% if mes_selecionado|default:'' == mes.numero|stringformat:"s" %}selected{% endif %}>{{ mes.nome }}</option>
                    {% endfor %}
                  </select>
                </div>
                <button class="btn btn-sm btn-success btn-lg" type="submit">Filtrar</button>
              </form>
            </div>
          </div>
        </div>
      <table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
        <thead class="bg-success bg-gradient text-white">
            <tr>
                <th class="custom-sort">N° Lote</th>
                <th>Data Lote</th>
                <th>Espécie (Nome vulgar + Nome científico)</th>
                <th>Est. Média de Mudas - Qtd </th>
                <th>Qtd Semenentes Restante </th>
                <th>Fornecedor</th>
                <th>Estado</th>
                <!-- <th class="text-center tamanho"><i class="fa fa-cog"></i></th> -->
            </tr>
        </thead>
        <tbody>
          {% for lote in lotes %}
          <tr {% if lote.entrada_sementes_kg == 0 %}class="linha-entrada-zero"{% endif %}>
            <td class="align-middle">{{ lote.numero_lote }}</td>
            <td class="align-middle">{{ lote.data_lote|date:"d/m/Y" }}</td>
            <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top" title="{{ lote.especie.nome_popular }} + {{ lote.especie.especies }}">{{ lote.especie.nome_popular }} + {{ lote.especie.especies }}</td>
            <td class="align-middle">{{ lote.estimativa_media |floatformat:2 }} Qtd</td>
            <td class="align-middle">{{ lote.entrada_sementes_kg }} Kg</td>
            <td class="align-middle">{{ lote.fornecedor }}</td>
            <td class="text-center">

              {% if lote.entrada_sementes_kg == 0 %}
              Lote Vazio
              {% else %}
              {{ lote.entrada_sementes_kg }}
              {% endif %}
            </td>
          <!-- <td class="text-center">

          <a href="{% url 'editar_semeadura_lote' especie_id=lote.especie.id lote_id=lote.id %}" class="btn btn-default"><i
            class="fa fa-pencil"></i></a>
            </td> -->
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="{% static 'assets/js/estoqueList.js' %}"></script>  
{% endblock %}