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

<style>
  .tooltip-custom {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-custom .tooltip-text {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Posiciona o tooltip acima do elemento */
  left: 50%;
  margin-left: -70px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-custom .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* Bottom do tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip-custom:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

</style>
<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>
<!-- Pode ser colocado no início do bloco <script> já existente -->
  <script>
    // Extendendo os tipos de ordenação e busca
    jQuery.extend(jQuery.fn.dataTableExt.oSort, {
      "date-br-pre": function (a) {
        if (a === null || a === "") {
          return 0;
        }
        var brDate = a.split('/');
        return (brDate[2] + brDate[1] + brDate[0]) * 1;
      },
      "date-br-asc": function (a, b) {
        return a - b;
      },
      "date-br-desc": function (a, b) {
        return b - a;
      }
    });
  
    $.fn.dataTable.ext.type.search['diacritics-and-ligatures'] = function(data) {
        return !data ? '' : data
            .replace(/[áàãâä]/g, 'a')
            .replace(/[éèêë]/g, 'e')
            .replace(/[íìîï]/g, 'i')
            .replace(/[óòõôö]/g, 'o')
            .replace(/[úùûü]/g, 'u')
            .toLowerCase(); // Convertendo para minúsculas
    };
  
    $(document).ready(function() {
      var dataTable = $('#example').DataTable({
        columnDefs: [
          { type: 'date-br', targets: 1 }, // Configurando ordenação por data
          { type: 'diacritics-and-ligatures', targets: '_all' } // Aplicando busca sem diacríticos e ligaturas a todas as colunas
        ]
      });
  
      // Extensão para buscar com acentos
      $.fn.dataTable.ext.type.search.string = function(data) {
        var originalData = data;
        var normalizedData = !data ? '' : data
            .replace(/[áàãâä]/g, 'a')
            .replace(/[éèêë]/g, 'e')
            .replace(/[íìîï]/g, 'i')
            .replace(/[óòõôö]/g, 'o')
            .replace(/[úùûü]/g, 'u')
            .replace(/[ç]/g, 'c')
            .toLowerCase();
        return originalData + ' ' + normalizedData; // Concatenando as versões original e normalizada
      };
    });
  </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">
          <a href="{% url 'lista_lotes' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Lista Completa </button>
          </a>
        </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">
      <table id="example" class="table table-striped table-bordered nowrap " cellspacing="0" width="100%">
        <thead class="bg-success bg-gradient text-white">
          <tr>
            <th>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>Restante </th>
            <th>Fornecedor</th>
            <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
          </tr>
        </thead>
        <tbody>
          {% for lote in lotes %}
          <tr>
            <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">
              <a href="{% url 'editar_lote' especie_id=lote.especie.id lote_id=lote.id %}" class="btn btn-default tooltip-custom">
                <i class="fa fa-pencil"></i>
                <span class="tooltip-text">Editar Lote</span>
              </a>
      
              <a href="{% url 'excluir_lote' lote.id %}" class="btn btn-danger tooltip-custom delete-lt" data-bs-toggle="modal" data-bs-target="#deleteModal" data-lt-id="{{ lote.id }}" data-lotename="{{ lote.numero_lote }}" data-lotenameespecie="{{ lote.especie.especies }}">
                <i class="fa fa-trash"></i>
                <span class="tooltip-text">Excluir Lote</span>
              </a>
      
              <a class="btn btn-success tooltip-custom show-details" data-bs-toggle="modal" data-bs-target="#exampleModal" data-nome-especie="{{ lote.especie.especies }}" data-numero-lote="{{ lote.numero_lote }}" data-data-lote="{{ lote.data_lote }}" data-fornecedorlt="{{ lote.fornecedor }}" data-qtd-sementes-minimo="{{ lote.qtd_sementes_minimo }}" data-qtd-sementes-maximo="{{ lote.qtd_sementes_maximo }}" data-entrada-sementes-kg="{{ lote.entrada_sementes_kg }}" data-estimativa-minima="{{ lote.estimativa_minima }}" data-estimativa-maxima="{{ lote.estimativa_maxima }}" data-estimativa-media="{{ lote.estimativa_media }}" data-img="{{ lote.especie.foto_especie }}">
                <i class="fa-solid fa-magnifying-glass" id="staticBackdrop"></i>
                <span class="tooltip-text">Ver Detalhes</span>
              </a>
      
              <a href="{% url 'semeadura_lote' especie_id=lote.especie.id lote_id=lote.id %}" class="btn btn-default tooltip-custom">
                <i class="fas fa-seedling"></i>
                <span class="tooltip-text">Semeadura do Lote</span>
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>



<style>
  .teste {
    width: 550px;
  }

  @media (max-width: 767px) {
    .teste {
      width: auto;
      /* ou width: 100%; */
    }
  }

  /* Adicionando um tom mais escuro às bordas da tabela */
  .table-dark-bordered,
  .table-dark-bordered th,
  .table-dark-bordered td {
    border-color: #555;
    /* Troque pela cor desejada */
  }
  #pageHeaderTitle {
    margin: 2rem 0;
    text-transform: uppercase;
    text-align: center;
    font-size: 2.5rem;
  }

  /* Cards */
  .postcard {
    flex-wrap: wrap;
    display: flex;

    box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
    border-radius: 10px;
    margin: 0 0 2rem 0;
    overflow: hidden;
    position: relative;
    color: black;

    &.dark {
      background-color: #ffffff;
    }

    h1,
    .h1 {
      margin-bottom: 0.5rem;
      font-weight: 500;
      line-height: 1.2;
    }

    .small {
      font-size: 80%;
    }

    .postcard__title {
      font-size: 1.75rem;
    }

    .postcard__img {
      max-height: 180px;
      width: 100%;
      object-fit: cover;
      position: relative;
    }

    .postcard__img_link {
      display: contents;
    }

    .postcard__bar {
      width: 50px;
      height: 10px;
      margin: 10px 0;
      border-radius: 5px;
      background-color: green;
      transition: width 0.2s ease;
    }

    .postcard__text {
      padding: 1.5rem;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .postcard__preview-txt {
      text-overflow: ellipsis;
      text-align: justify;
      height: 100%;
    }

    .postcard__tagbox {
      display: flex;
      flex-flow: row wrap;
      font-size: 14px;
      margin: 20px 0 0 0;
      padding: 0;
      justify-content: center;
    }
  }

  @media screen and (min-width: 769px) {
    .postcard {
      flex-wrap: inherit;

      .postcard__title {
        font-size: 2rem;
      }

      .postcard__tagbox {
        justify-content: start;
      }

      .postcard__img {
        max-width: 300px;
        max-height: 100%;
        transition: transform 0.3s ease;
      }

      .postcard__text {
        padding: 3rem;
        width: 100%;
      }

      .media.postcard__text:before {
        content: "";
        position: absolute;
        display: block;
        background: #18151f;
        top: -20%;
        height: 130%;
        width: 55px;
      }

      &:hover .postcard__img {
        transform: scale(1.1);
      }

      &:nth-child(2n+1) {
        flex-direction: row;
      }

      &:nth-child(2n+0) {
        flex-direction: row-reverse;
      }

      &:nth-child(2n+1) .postcard__text::before {
        left: -12px !important;
        transform: rotate(4deg);
      }

      &:nth-child(2n+0) .postcard__text::before {
        right: -12px !important;
        transform: rotate(-4deg);
      }
    }
  }

  @media screen and (min-width: 1024px) {
    .postcard__text {
      padding: 2rem 3.5rem;
    }

    .postcard__text:before {
      content: "";
      position: absolute;
      display: block;

      top: -20%;
      height: 130%;
      width: 55px;
    }
  }
</style>
<!-- MODAL DE VISUALIZAÇÃO DE INFORMAÇÕES -->

<div class="modal fade modal-view" id="exampleModal" tabindex="-1" role="dialog"
  aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">

    <section class="dark">

      <div class="container py-4">
        <article class="postcard dark green">
          <a class="postcard__img_link" href="#">
            <img class="postcard__img" id="modal-img" src="" alt="Image Title" />
          </a>
          <div class="postcard__text">
            <h1 class="postcard__title" id="modal-especie"></h1>
            <div class="postcard__bar"></div>
            <div class="postcard__preview-txt pb-2">
              <strong>N° Lote:</strong>
              <span id="modal-numeroLote"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Data do lote:</strong>
              <span id="modal-dataLote"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Entrada de Sementes - Kg:</strong>
              <span id="modal-loteEntrada"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Fornecedor:</strong>
              <span id="modal-fornecedor"></span>
            </div>
            <div class="postcard__bar"></div>
              <div class="postcard__preview-txt pb-2">
                <strong>Estimativa Mínima de Mudas:</strong>
                <span id="modal-estimativa-min"></span>
              </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Estimativa Máxima de Mudas:</strong>
              <span id="modal-estimativa-max"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Estimativa Média de Mudas:</strong>
              <span id="modal-estimativa-med"></span>
            </div>
          </div>
        </article>
      </div>
    </section>
  </div>
</div>


<!-- MODAL PARA EXCLUSÃO DE ESPECIE -->
<div class="modal fade" id="deleteModal" data-excluir-lote-url="{% url 'excluir_lote' 0 %}" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true" data-lote-id="{{ lote.id }}">
  <div class="modal-dialog modal-dialog-centered modal-delete">
    <div class="modal-content">
      <div class="modal-header flex-column">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="icon-box">
          <i class="material-icons fa-solid fa-xmark"></i>
        </div>
        <h4 class="modal-title w-100">Tem certeza?</h4>
      </div>
      <div class="modal-body">
        <p>Você realmente deseja excluir esse Lote? Este processo não pode ser desfeito.</p>
      </div>
      <p id="loteNameEspecie" class="text-start"></p>
      <p id="loteInfo" class="text-start"></p>
      <form id="deleteForm" method="post">
        {% csrf_token %}
        <!-- Adicione um select para o motivo da exclusão dentro do formulário -->
        <div class="mb-3">
          <label for="motivo_exclusao" class="form-label"><strong>Motivo da exclusão <span
                class="text-danger">*</span></strong></label>
          <select class="form-select" id="motivo_exclusao" name="motivo_exclusao" required>
            <option value="Mudança de Status">Mudança de Status</option>
            <option value="Descontinuidade do Monitoramento">Descontinuidade do Monitoramento</option>
            <option value="Erro no Cadastro">Erro no Cadastro</option>
            <option value="Duplicidade de Registros">Duplicidade de Registros</option>
            <option value="Outros">Outros</option>
            <!-- Adicione outras opções conforme necessário -->
          </select>
        </div>
        <!-- Campo de input para "Outros" -->
        <div class="mb-3" id="outroMotivoContainer" style="display: none;">
          <label for="motivo_exclusao_outros" class="form-label"><strong>Outro motivo:</strong></label>
          <textarea type="text" class="form-control" id="motivo_exclusao_outros"
            name="motivo_exclusao_outros"></textarea>
        </div>
      </form>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" id="cancelDelete">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">Deletar</button>
      </div>
    </div>
  </div>
</div>
<!-- END -->


<!-- MODAL DE DELETE -->
<div class="modal fade" id="deleteModal" data-excluir-lote-url="{% url 'excluir_lote' 0 %}" tabindex="-1"
  aria-labelledby="deleteModalLabel" aria-hidden="true" data-lote-id="{{ lote.id }}">
  <div class="modal-dialog modal-dialog-centered modal-delete">
    <div class="modal-content">
      <div class="modal-header flex-column">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="icon-box">
          <i class="material-icons fa-solid fa-xmark"></i>
        </div>
        <h4 class="modal-title w-100">Tem certeza?</h4>
      </div>
      <div class="modal-body">
        <form id="deleteForm" method="post">
          {% csrf_token %}
          <p class="line">Você realmente deseja excluir esses registros? Este processo não pode ser desfeito.</p>
          <p id="loteNameEspecie" class="text-start"></p>
          <p id="loteInfo" class="text-start"></p>
          <!-- Adicione um select para o motivo da exclusão dentro do formulário -->
          <div class="mb-3">
            <label for="motivo_exclusao" class="form-label"><strong>Motivo da exclusão <span
                  class="text-danger">*</span></strong></label>
            <select class="form-select" id="motivo_exclusao" name="motivo_exclusao" required>
              <option value="Mudança de Status">Mudança de Status</option>
              <option value="Descontinuidade do Monitoramento">Descontinuidade do Monitoramento</option>
              <option value="Erro no Cadastro">Erro no Cadastro</option>
              <option value="Duplicidade de Registros">Duplicidade de Registros</option>
              <option value="Outros">Outros</option>
              <!-- Adicione outras opções conforme necessário -->
            </select>
          </div>
          <!-- Campo de input para "Outros" -->
          <div class="mb-3" id="outroMotivoContainer" style="display: none;">
            <label for="motivo_exclusao_outros" class="form-label"><strong>Outro motivo:</strong></label>
            <textarea type="text" class="form-control" id="motivo_exclusao_outros"
              name="motivo_exclusao_outros"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" id="cancelDelete" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">Deletar</button>
      </div>
    </div>
  </div>
</div>
<!-- END -->
<script src="{% static 'assets/js/estoqueList.js' %}"></script>

{% endblock %}