{% 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')
          .toLowerCase(); // Convertendo para minúsculas
  };

  $(document).ready(function() {
    var dataTable = $('#example').DataTable({
      columnDefs: [
        { type: 'date-br', targets: 2 }, // 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">Lista completa de Estufa</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="row">
        <div class="col-md-6 offset-md-4">
          <form method="get" action="{% url 'lista_estufa_completa' %}" class="d-flex">
            <div class="me-2">
              <select class="form-select filter-custom" name="ano" id="ano">
                <option value="" selected>Todos os Anos</option>
                {% for ano in anos_disponiveis %}
                <option value="{{ ano|date:'Y' }}">{{ ano|date:'Y' }}</option>
                {% endfor %}
              </select>
            </div>
            <button class="btn btn-sm btn-success btn-lg" type="submit">Filtrar</button>
          </form>
        </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>N° Lote</th>
            <th>Espécie (Nome vulgar + Nome científico)</th>
            <th>Data Semeio</th>
            <th>Mortalidades</th>
            <th>Seleção</th>
            <th>Mudas Previstas</th>
            <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
          </tr>
        </thead>
        <tbody>
          {% for estufa in estufas %}
          <tr class="{% if estufa.repique_nao_finalizado %}highlight-not-finalized{% endif %}">
            <td class="align-middle">{{ estufa.numero_muda }}</td>
            <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
              title="{{ estufa.nome_popular }} + {{ estufa.especies }}">
              {{ estufa.nome_popular }} + {{ estufa.especies }}
            </td>
            <td class="align-middle">{{ estufa.data_semeia|date:"d/m/Y"|default:"N/A" }}</td>
            <td class="align-middle">{{ estufa.total_estufa|default:0 }}</td>
            <td class="align-middle">{{ estufa.total_quantidade_selecao|default:0 }}</td>
            <td class="align-middle">{{ estufa.resto_selecao_estufa_repique }}</td>
            <td class="text-center">
              <div class="dropdown tooltip-custom">
                <a class="btn btn-default" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="fa-solid fa-bars"></i>
                </a>
                <ul class="dropdown-menu p-3">
                  <li>
                    <button type="button" class="btn btn-primary w-100 show-details" data-bs-toggle="modal" data-bs-target="#exampleModal"
                    data-semeadura-id="{{ estufa.semeadura_id }}" data-estufa-ids="{{ estufa.estufa_ids }}"
                    data-numero-lote="{{ estufa.numero_muda }}" data-estufa-dates="{{ estufa.estufa_dates|join:',' }}"
                    data-estufa-quantities="{{ estufa.estufa_quantities|join:',' }}"><i class="fa-solid fa-magnifying-glass" id="staticBackdrop"></i> Detalhes Mortalidade
                    </button>
                  </li>
                  <li><hr class="dropdown-divider"></li>
                  <li>
                    <button type="button" class="btn btn-warning w-100 show-details1" data-bs-toggle="modal" data-bs-target="#exampleModal1"
                    data-semeadura-id="{{ estufa.semeadura_id }}" data-selecao-ids="{{ estufa.selecao_ids }}"
                    data-numero-lote="{{ estufa.numero_muda }}"
                    data-selecao-dates="{{ estufa.selecao_dates|join:',' }}"
                    data-selecao-quantities="{{ estufa.selecao_quantities|join:',' }}">
                   <i class="fa-solid fa-magnifying-glass" id="staticBackdrop"></i> Detalhes Seleção
                    </button>
                  </li>
                  <li><hr class="dropdown-divider"></li>
                  <li>
                    <a href="{% url 'finalizar_estufa' estufa.semeadura_id %}" class="btn btn-danger text-white delete-lt mx-1 w-100"
                    data-bs-toggle="modal" data-bs-target="#deleteModal" data-lt-id="{{ estufa.semeadura_id }}"
                    data-numerolote="{{ estufa.numero_muda}}" data-especie="{{ estufa.especies}}"
                    data-nomepopular="{{ estufa.nome_popular}}">
                    Finalizar</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      
    </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 estufa? 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" id="finalizarEstufaForm">
          {% 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" data-form-id="#finalizarEstufaForm"
          data-url-estufa="{% url 'finalizar_estufa' 0 %}">Confirmar</button>
      </div>
    </div>
  </div>
</div>

<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 de Mortalidades</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</th>
                  <th>Qtd (Mortalidade)</th>
                  <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="exampleModal1" 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 da Seleção</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="dataTable2">
              <thead class="bg-success bg-gradient text-white">
                <tr>
                  <th>N° Lote</th>
                  <th>Data de Seleção</th>
                  <th>Qtd (Seleção)</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
    });

    $('#dataTable2').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 a mortalidade? 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 class="modal fade modal-delconf" id="confirmacaoModal1" 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 a seleção? 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="confirmarExclusao1"><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> Estufa 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 estufa.
</div>

<div id="mensagemSucessoExcluir1" class="alert alert-success" role="alert" style="display: none;">
  <i class="fa-solid fa-circle-check"></i>
  <strong class="mx-1">Sucesso!</strong> Seleção excluída com êxito.
</div>
<div id="mensagemErroExcluir1" 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 seleção.
</div>

<script src="{% static 'assets/js/estufaList.js' %}"></script>

<script>
  jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "custom-sort-pre": function (a) {
      var parts = a.split('.');
      var number = parseInt(parts[0]);
      var year = parseInt(parts[1]);
      var series = parts[2];
      return year * 1000000 + number * 100 + (series.charCodeAt(0) - 'A'.charCodeAt(0));
    },
    "custom-sort-asc": function (a, b) {
      return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "custom-sort-desc": function (a, b) {
      return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
  });

  $(document).ready(function () {
    if ($.fn.DataTable.isDataTable('#example')) {
      $('#example').DataTable().destroy();
    }

    $('#example').DataTable();
  });

  function voltar() {
    window.history.back();
  }
</script>
{% endblock %}