{% extends 'shared/base.html' %} {% load custom_filters %} {% load static %} {% block content %}
<style>
  #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;
    }
  }
  .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>

  // 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 = $('#especiesTable').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
      ]
    });

    // Restaurando o estado da pesquisa se necessário
    var termoPesquisa = sessionStorage.getItem('termoPesquisaLotes');
    if (termoPesquisa) {
      dataTable.search(termoPesquisa).draw();
    }

    // Salvando o estado da pesquisa
    $('#especiesTable_filter input').on('keyup', function() {
      sessionStorage.setItem('termoPesquisaLotes', $(this).val());
      dataTable.search($.fn.dataTable.ext.type.search['diacritics-and-ligatures']($(this).val())).draw();
    });

    // 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
    };

    // Configurando tempo de desaparecimento de mensagens
    setTimeout(function () {
      $("#messages").fadeOut("fast");
    }, 5000);
  });
</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 Espécies</h5>
        </div>
        <div class="col-auto">
          <a href="{% url 'cadastro_de_especies' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Adicionar nova Espécie <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 py-3">
    <div class="content-fluid table-responsive">
      <table id="especiesTable" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
        <thead class="bg-success bg-gradient text-white">
          <tr>
            <th>Nome Popular</th>
            <th>Nome Científico</th>
            <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
          </tr>
        </thead>
        <tbody>
          {% for dados in cards %}
          <tr>
            <td>{{ dados.nome_popular }}</td>
            <td class="custom-paragraph truncate-text">{{ dados.especies }}</td>
            <td class="text-center">
              <a href="{% url 'editar_especie' dados.id %}" class="btn btn-default tooltip-custom">
                <i class="fa-solid fa-pencil"></i>
                <span class="tooltip-text">Editar Espécie</span>
              </a>
  
              <a href="{% url 'deletar_especies' dados.id %}" class="btn btn-danger tooltip-custom delete-esp" data-bs-toggle="modal" data-bs-target="#deleteModal" data-esp-id="{{ dados.id }}" data-especiename="{{ dados.especies }}" data-especienamepopular="{{ dados.nome_popular }}">
                <i class="fa fa-trash"></i>
                <span class="tooltip-text">Deletar Espécie</span>
              </a>
  
              <a class="btn btn-success tooltip-custom especiesDetails" data-bs-toggle="modal" data-bs-target="#especiesTableModal" data-especie="{{ dados.especies }}" data-nome="{{ dados.nome_popular }}" data-risco="{{ dados.risco_extincao }}" data-estados="{{ dados.presenca_estados }}" data-familia="{{ dados.familia }}" data-bioma="{{ dados.bioma }}" data-formacao_vegetal="{{ dados.formacao_vegetal }}" data-fitofisionomias="{{ dados.fitofisionomias }}" data-img="{{ dados.foto_especie }}">
                <i class="fa-solid fa-magnifying-glass" id="staticBackdrop"></i>
                <span class="tooltip-text">Detalhes da Espécie</span>
              </a>
  
              <!-- Botão "Mais Ações" -->
              <a class="btn btn-default tooltip-custom" data-bs-toggle="modal" data-bs-target="#moreActionsModal-{{ dados.id }}">
                <i class="fa-solid fa-bars"></i>
                <span class="tooltip-text">Mais Ações</span>
              </a>
  
              <!-- Modal "Mais Ações" -->
              <div class="modal fade" id="moreActionsModal-{{ dados.id }}" tabindex="-1" aria-labelledby="moreActionsModalLabel-{{ dados.id }}" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="moreActionsModalLabel-{{ dados.id }}">Mais Ações</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <div class="list-group">
                        {% if dados.id %}
                          {% if dados.producao_existente %}
                          <a href="{% url 'editar_prod_mudas' dados.id %}" class="list-group-item list-group-item-action">Editar Produção de Muda</a>
                          <a href="{% url 'cadastro_lote' dados.id %}" class="list-group-item list-group-item-action">Cadastrar Lotes</a>
                          {% else %}
                          <a href="{% url 'cadastro_prod_mudas' dados.id %}" class="list-group-item list-group-item-action">Cadastrar Produção de Muda</a>
                          {% endif %}
                          {% if dados.informacao_existente %}
                          <a href="{% url 'editar_plantio_outras_informacoes' dados.id %}" class="list-group-item list-group-item-action">Editar Outras Informações</a>
                          {% else %}
                          <a href="{% url 'plantio_outras_info' dados.id %}" class="list-group-item list-group-item-action">Cadastrar Outras Informações</a>
                          {% endif %}
                        {% else %}
                          <a class="list-group-item list-group-item-action disabled">Erro: ID da espécie não encontrado</a>
                        {% endif %}
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Fim do Modal "Mais Ações" -->
  
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  
</div>


<div class="modal fade modal-view" id="especiesTableModal" tabindex="-1" role="dialog"
  aria-labelledby="especiesTableModalCenterTitle" 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-nome"></h1>
            <div class="postcard__bar"></div>
            <div class="postcard__preview-txt pb-2">
              <strong>Risco de Extinção:</strong>
              <span id="modal-risco"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Presença nos Estados:</strong>
              <span id="modal-estados"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Familía:</strong>
              <span id="modal-familia"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Bioma:</strong>
              <span id="modal-bioma"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Formação Vegetal:</strong>
              <span id="modal-formacao_vegetal"></span>
            </div>
            <div class="postcard__preview-txt pb-2">
              <strong>Fitofisionomias:</strong>
              <span id="modal-fitofisionomias"></span>
            </div>
          </div>
        </article>
      </div>
    </section>
  </div>
</div>

<!-- MODAL DE VISUALIZAÇÃO DE INFORMAÇÕES -->
<div class="modal fade modal-view" id="especiesTableModal" tabindex="-1" role="dialog"
  aria-labelledby="especiesTableModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content rounded-0">
      <div class="modal-body py-0">
        <div class="d-flex main-content">
          <div class="bg-image promo-img mr-3 d-none d-md-block">
            <img id="modal-img" src="" alt="Imagem da Espécie" style="width: 400px; height: 600px">
          </div>
          <div class="content-text p-4 px-5">
            <div class="text-end">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="text-start teste">
              <table class="table table-hover table-bordered text-start table-dark-bordered">
                </thead>
                <tbody>
                  <tr>
                    <th class="text-center bg-success bg-gradient text-white" scope="row" colspan="2" id="modal-nome">
                    </th>
                  </tr>
                  <tr>
                    <th scope="row"><strong>Risco de Extinção:</strong></th>
                    <td><span id="modal-risco"></span></td>
                  </tr>
                  <tr>
                    <th scope="row"><strong>Presença nos Estados:</strong></th>
                    <td><span id="modal-estados"></span></td>
                  </tr>
                  <tr>
                    <th scope="row"><strong>Familía:</strong></th>
                    <td><span id="modal-familia"></span></td>
                  </tr>
                  <tr>
                    <th scope="row"><strong>Bioma:</strong></th>
                    <td><span id="modal-bioma"></span></td>
                  </tr>
                  <tr>
                    <th scope="row"><strong>Formação Vegetal:</strong></th>
                    <td><span id="modal-formacao_vegetal"></span></td>
                  </tr>
                  <tr>
                    <th scope="row"><strong>Fitofisionomias:</strong></th>
                    <td><span id="modal-fitofisionomias"></span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END -->

<!-- MODAL PARA EXCLUSÃO DE ESPECIE -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" 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>
        <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 essa Espécie? Este processo não pode ser desfeito.</p>
      </div>
      <p id="especieInfoPopular" class="text-start"></p>
      <p id="especieInfo" class="text-start"></p>
      <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 -->

<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>
<script src="{% static 'assets/js/especiesList.js' %}"></script>
<script>
  var deleteUrl = "{% url 'deletar_especies' 0 %}";
</script>
{% endblock %}