{% extends 'shared/base.html' %} {% load custom_filters %} {% load static %} {% block content %}
<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')
          .replace(/[ç]/g, 'c')
          .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>

  
<style>
  /* Estilos para a tabela */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2;
  }

  /* Estilos para os botões de remoção */
  .remove-button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 2px;
    cursor: pointer;
  }

  .remove-button:hover {
    background-color: #d32f2f;
  }

  /* Estilos para os totais no rodapé da tabela */
  .totals-row {
    font-weight: bold;
  }

  /* Estilos para o botão de envio */
  #submit-button {
    display: none;
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 10px 0;
    cursor: pointer;
  }

  #submit-button:hover {
    background-color: #45a049;
  }
</style>

<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>
<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">Lista de Aclimatação</h5>
        </div>
        <div class="col-auto">
          <a href="{% url 'cadastro_protocolo' %}" class="btn btn-light">Ficha de Protocolo</a>
          <a href="{% url 'lista_saidas_completa' %}" class="btn btn-light">Lista Completa</a>
          </a>
          <!-- <button class="btn btn-danger me-1 mb-1" type="button">Gerar PDF <span class="fas fa-plus me-1"
              data-fa-transform="shrink-3"></span></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 my-2 shadow-sm border-0">
    <div class="card-body bg-light rounded">
      <h6 class="mb-3 ">Opções</h6>
      <div class="d-flex align-items-center">
        <form method="POST" action="{% url 'desmarcar_venda' %}">
          {% csrf_token %}
          <button type="submit" class="btn btn-warning mb-3">Desmarcar Todos os itens como Venda</button>
      </form>
      </div>
    </div>
  </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 Semeadura</th>
                    <th>Espécie (Nome vulgar + Nome científico)</th>
                    <th>Mortalidades</th>
                    <th>Mudas Selecionadas</th>
                    <th>Para Venda</th>
                </tr>
            </thead>
            <tbody>
                {% for saida in saidas %}
                <tr>
                    <td class="align-middle">{{ saida.numero_muda }}</td>
                    <td class="align-middle">{{ saida.data_semeia|date:"d/m/Y" }}</td>
                    <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top" title="{{ saida.nome_popular }} + {{ saida.especies }}">{{ saida.nome_popular }} + {{ saida.especies }}</td>
                    <td class="align-middle">{{ saida.total_mortalidade_estufa|default:0 }}</td>
                    <td class="align-middle">{{ saida.diferenca_qtd|default:0 }}</td>
                    <td>
                        <a href="{% url 'marcar_venda' saida.semeadura_id %}" class="btn tooltip-custom {% if saida.saida_venda %}btn-danger{% else %}btn-secondary{% endif %} w-100">
                            Venda
                            <span class="tooltip-text">Marcar Venda</span>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

</div>

<style>
  .custom-modal-content {
    width: 90vw;
    /* Define a largura do modal para 90% da largura da viewport */
    max-width: none;
    /* Remove o limite máximo de largura */
  }

  .modal-xl .modal-dialog {
    max-width: 90vw;
    /* Define a largura máxima para o modal-xl */
  }
</style>

<div class="modal fade" id="saidasModal" tabindex="-1" aria-labelledby="aclimatacaoModalLabel" aria-hidden="true">
  <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>
        <h4 class="modal-title">Registrar Saida</h4>
      </div>
      <div class="modal-body">
        <form method="post" action="" id="saida-form">
          {% csrf_token %}
          <!-- Campos do formulário -->
          <!-- Adicione o campo oculto para semeadura_id -->
          <input type="hidden" name="semeadura_id" id="semeadura_id" value="">

          <div class="mb-3 text-start">
            <label for="data_saidas" class="form-label">Data da Saída <span class="text-danger">*</span></label>
            <input type="date" class="form-control" id="data_saidas" name="data_saidas" required>
          </div>
          <div class="mb-3 text-start">
            <label for="quantidade_saidas" class="form-label">Saída de Mudas <span class="text-danger">*</span></label>
            <input type="number" class="form-control" id="quantidade_saidas" name="quantidade_saidas" required>
          </div>
          <!-- Adicione mais campos conforme necessário -->

          <!-- Botões do formulário -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            <button type="submit" class="btn btn-primary">Salvar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal de Finalizar -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-finaly">
    <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="fa-solid fa-exclamation"></i>
        </div>
        <h4 class="modal-title w-100">Tem certeza?</h4>
      </div>
      <div class="modal-body">
        <p>Você realmente deseja Finalizar essa saida? Este processo não pode ser desfeito.</p>
      </div>
      <p id="numeroLote" class="text-start"></p>
      <p id="nomeespecie" class="text-start"></p>
      <p id="nomepopular" class="text-start"></p>
      <div class="div2 py-2">
        <form class="px-2 px-md-3 py-2" method="post">
          {% csrf_token %}
          <div class="mb-3">
            <label for="motivo_exclusao" class="form-label"><strong>Motivo da Finalizaçã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="Erro no Cadastro">Erro no Cadastro</option>
              <option value="Duplicidade de Registros">Duplicidade de Registros</option>
              <option value="Descontinuidade do Monitoramento">Descontinuidade do Monitoramento</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">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">Finalizar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal de exibição de dados --><!-- Adicione o modal ao seu template -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-finaly modal-lg">
    <div class="modal-content">
      <div class="modal-header flex-column">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <h4 class="modal-title">Detalhes do Repique</h4>
      </div>
      <div class="modal-body">
        <div class="content-fluid" id="modal-example">
          <div class="table-responsive">
            <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="dataTable">
              <thead class="bg-success bg-gradient text-white">
                <tr>
                  <th>N° Lote</th>
                  <th>Data de Repique</th>
                  <th>Qtd (Saida)</th>
                  <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    $('#dataTable').DataTable({
      "paging": false, // Desativa a paginação
      "info": false, // Remove o controle de quantidade de itens
      "searching": false // Remove a caixa de pesquisa
    });
  });
</script>

<div class="modal fade modal-delconf" id="confirmacaoModal" tabindex="-1" role="dialog" data-bs-backdrop="static"
  data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content bg-light">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-trash-alt"></i> Confirmação</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <p>Tem certeza de que deseja excluir permanentemente o repique? Esta ação não pode ser desfeita.</p>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmarExclusao"><i class="fas fa-check"></i>
          Confirmar</button>
      </div>

    </div>
  </div>
</div>

<div id="mensagemSucessoExcluir" class="alert alert-success" role="alert" style="display: none;">
  <i class="fa-solid fa-circle-check"></i>
  <strong class="mx-1">Sucesso!</strong> Saida excluída com êxito.
</div>
<div id="mensagemErroExcluir" class="alert alert-danger" role="alert" style="display: none;">
  <i class="fa-solid fa-circle-exclamation"></i>
  <strong class="mx-1">Erro!</strong> Ocorreu um problema ao tentar excluir a Saida.
</div>

<script src="{% static 'assets/js/saidaList.js' %}"></script>
<script>
  var urlFinalizarSaidas = '{% url "finalizar_saidas" 0 %}';
</script>

{% endblock %}