{% 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>
<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 Protocolos</h5>
                </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">
      <div class="content">
          <ul class="nav nav-tabs mb-2" id="protocoloTabs">
              <li class="nav-item">
                  <a class="nav-link active" style="color: #198754;" data-bs-toggle="tab" href="#protocolosAbertos">Protocolos Abertos</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" data-bs-toggle="tab" style="color: #198754;" href="#protocolosFinalizados">Protocolos Finalizados</a>
              </li>
          </ul>
  
          <div class="tab-content">
              <!-- Conteúdo da Tab de Protocolos Abertos -->
              <div id="protocolosAbertos" class="tab-pane fade show active">
                  <div class="content-fluid table-responsive">
                      <table id="abertosTable" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
                          <thead class="bg-success bg-gradient text-white">
                              <tr>
                                  <th scope="col">Número do Protocolo</th>
                                  <th scope="col">Data de Criação</th>
                                  <th scope="col">Quantidade de Mudas</th>
                                  <th scope="col">Nome Cliente / Empresa</th>
                                  <th class="text-center"><i class="fa fa-cog"></i></th>
                              </tr>
                          </thead>
                          <tbody>
                              {% for dados in grouped_data %}
                              <tr>
                                  <td class="align-middle">{{ dados.numero_protocolo }}</td>
                                  <td class="align-middle">{{ dados.data_criacao }}</td>
                                  <td class="align-middle">{{ dados.quantidade_mudas }}</td>
                                  <td class="align-middle">{{ dados.cliente_nome }}</td>
                                  <td class="text-center">
                                      <button id="editInfoButton_{{ dados.numero_protocolo }}" class="btn btn-default tooltip-custom" data-bs-toggle="modal" data-bs-target="#editInfoModal" data-url="{% url 'editar_info' dados.numero_protocolo %}">
                                          <i class="fa fa-pencil"></i>
                                          <span class="tooltip-text">Editar Informação</span>
                                      </button>
                                      <a id="editProtocoloButton_{{ dados.numero_protocolo }}" href="{% url 'editar_protocolo' dados.numero_protocolo %}" class="btn btn-success tooltip-custom">
                                          <i class="fas fa-seedling"></i>
                                          <span class="tooltip-text">Editar Protocolo</span>
                                      </a>
                                      <button id="addMudaButton_{{ dados.numero_protocolo }}" class="btn btn-primary tooltip-custom" data-bs-toggle="modal" data-bs-target="#addMudaModal" data-url="{% url 'adicionar_muda' dados.numero_protocolo %}">
                                          <i class="fa-solid fa-plus"></i>
                                          <span class="tooltip-text">Adicionar Muda</span>
                                      </button>
                                      <button type="button" class="btn btn-danger tooltip-custom delete-lt mx-1" data-bs-toggle="modal" data-bs-target="#deleteModal" data-protocolo-id="{{ dados.numero_protocolo }}">
                                          <i class="fa fa-trash"></i>
                                          <span class="tooltip-text">Excluir Protocolo</span>
                                      </button>
                                      <a class="btn btn-default tooltip-custom" data-bs-toggle="modal" data-bs-target="#moreActionsModal-{{ dados.numero_protocolo }}">
                                          <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.numero_protocolo }}" tabindex="-1" aria-labelledby="moreActionsModalLabel-{{ dados.numero_protocolo }}" aria-hidden="true">
                                          <div class="modal-dialog">
                                              <div class="modal-content">
                                                  <div class="modal-header">
                                                      <h5 class="modal-title" id="moreActionsModalLabel-{{ dados.numero_protocolo }}">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">
                                                          <a href="{% url 'protocolo_pdf' dados.numero_protocolo %}" class="list-group-item list-group-item-action">
                                                              <i class="fa-solid fa-file-pdf"></i> Baixar PDF
                                                          </a>
                                                          <a href="{% url 'protocolo_pdf_sem_monetario' dados.numero_protocolo %}" class="list-group-item list-group-item-action">
                                                              <i class="fa-solid fa-file-pdf"></i> Baixar PDF com valores ocultos
                                                          </a>
                                                          <a href="{% url 'termo_conformidade_pdf' dados.numero_protocolo %}" class="list-group-item list-group-item-action">
                                                              <i class="fa-solid fa-file-pdf"></i> Baixar PDF Termo de Conformidade
                                                          </a>
                                                          <a href="{% url 'finalizar_protocolo' dados.numero_protocolo %}" class="list-group-item list-group-item-action">
                                                              <i class="fa fa-check"></i> Finalizar Protocolo
                                                          </a>
                                                      </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>
  
            <!-- Conteúdo da Tab de Protocolos Finalizados -->
            <div id="protocolosFinalizados" class="tab-pane fade">
              <div class="content-fluid table-responsive">
                  <table id="finalizadosTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                      <thead class="bg-success bg-gradient text-white">
                          <tr>
                              <th scope="col">Número do Protocolo</th>
                              <th scope="col">Data de Criação</th>
                              <th scope="col">Quantidade de Mudas</th>
                              <th scope="col">Nome Cliente / Empresa</th>
                              <th class="text-center"><i class="fa fa-cog"></i></th>
                          </tr>
                      </thead>
                      <tbody>
                          {% for dados in grouped_finalizados %}
                          <tr>
                              <td class="align-middle">{{ dados.numero_protocolo }}</td>
                              <td class="align-middle">{{ dados.data_criacao }}</td>
                              <td class="align-middle">{{ dados.quantidade_mudas }}</td>
                              <td class="align-middle">{{ dados.cliente_nome }}</td>
                              <td class="text-center">
                                <a class="btn btn-default tooltip-custom" data-bs-toggle="modal" data-bs-target="#moreActionsModal-{{ dados.numero_protocolo }}">
                                    <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.numero_protocolo }}" tabindex="-1" aria-labelledby="moreActionsModalLabel-{{ dados.numero_protocolo }}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="moreActionsModalLabel-{{ dados.numero_protocolo }}">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">
                                                    <a href="{% url 'protocolo_pdf' dados.numero_protocolo %}" class="list-group-item list-group-item-action">
                                                        <i class="fa-solid fa-file-pdf"></i> Baixar PDF
                                                    </a>
                                                    <a href="{% url 'protocolo_pdf_sem_monetario' dados.numero_protocolo %}" class="list-group-item list-group-item-action">
                                                        <i class="fa-solid fa-file-pdf"></i> Baixar PDF com valores ocultos
                                                    </a>
                                                    <a href="{% url 'termo_conformidade_pdf' dados.numero_protocolo %}" class="list-group-item list-group-item-action">
                                                        <i class="fa-solid fa-file-pdf"></i> Baixar PDF Termo de Conformidade
                                                    </a>
                                                </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>
  </div>
</div>

<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 text-center">
        <p>Você realmente deseja excluir este protocolo? <strong>Este processo não pode ser desfeito.</strong></p>
        <p class="text-danger"><strong>Atenção:</strong> As espécies inseridas neste protocolo irão voltar para o estoque.</p>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">Confirmar</button>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var deleteModal = document.getElementById('deleteModal');
    var confirmDeleteBtn = document.getElementById('confirmDelete');
    var protocoloId = null;
    
    // Captura o evento de abertura do modal
    deleteModal.addEventListener('show.bs.modal', function (event) {
      var button = event.relatedTarget; // Botão que acionou o modal
      protocoloId = button.getAttribute('data-protocolo-id'); // Captura o ID do protocolo
    });

    // Quando o usuário confirmar a exclusão
    confirmDeleteBtn.addEventListener('click', function () {
      if (protocoloId) {
        // Monta a URL dinamicamente
        var deleteUrl = "{% url 'excluir_protocolo' 0 %}".replace("0", protocoloId);
        
        // Cria um formulário temporário para enviar a requisição POST
        var form = document.createElement('form');
        form.method = 'post';
        form.action = deleteUrl;
        
        // Adiciona o CSRF token
        var csrfToken = '{{ csrf_token }}';
        var csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = 'csrfmiddlewaretoken';
        csrfInput.value = csrfToken;
        form.appendChild(csrfInput);

        // Adiciona o formulário ao corpo e submete
        document.body.appendChild(form);
        form.submit();
      }
    });
  });
</script>



<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="modal fade" id="editInfoModal" 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-blue">
            <i class="fas fa-pencil-alt text-primary"></i>
          </div>
          <h4 class="modal-title w-100">Editar Informações Basicas</h4>
        </div>
        <div class="modal-body">
            <!-- O formulário será carregado aqui via AJAX -->
        </div>
      </div>
    </div>
  </div>
  <!-- END -->

<!-- Modal para adicionar muda -->
<div class="modal fade" id="addMudaModal" tabindex="-1" aria-labelledby="addMudaModalLabel" 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-blue">
            <i class="fas fa-pencil-alt text-primary"></i>
          </div>
          <h4 class="modal-title w-100">Adicionar Nova Muda</h4>
        </div>
        <div class="modal-body">
            <!-- O formulário será carregado aqui via AJAX -->
        </div>
      </div>
    </div>
  </div>
  <!-- END -->


<script>
document.addEventListener("DOMContentLoaded", function () {
    const editInfoModal = document.getElementById('editInfoModal');
    editInfoModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const url = button.getAttribute('data-url');

        const modalBody = editInfoModal.querySelector('.modal-body');
        modalBody.innerHTML = 'Carregando...';

        fetch(url)
            .then(response => response.text())
            .then(data => {
                console.log(data);  // Adicione este console.log para depuração
                modalBody.innerHTML = data;
            });
    });
});

</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const editInfoModal = document.getElementById('editInfoModal');
        editInfoModal.addEventListener('submit', function (event) {
            event.preventDefault();

            const form = event.target;
            const url = form.action;
            const formData = new FormData(form);

            fetch(url, {
                method: 'POST',
                body: formData,
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload(); // Recarregar a página se a atualização foi bem-sucedida
                    } else {
                        const modalBody = editInfoModal.querySelector('.modal-body');
                        modalBody.innerHTML = data.html; // Atualizar com os erros do formulário
                    }
                });
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const addMudaModal = document.getElementById('addMudaModal');
        addMudaModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const url = button.getAttribute('data-url');

            const modalBody = addMudaModal.querySelector('.modal-body');
            modalBody.innerHTML = 'Carregando...';

            fetch(url)
                .then(response => response.text())
                .then(data => {
                    modalBody.innerHTML = data;
                });
        });
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const addMudaModal = document.getElementById('addMudaModal');
        addMudaModal.addEventListener('submit', function (event) {
            event.preventDefault();

            const form = event.target;
            const url = form.action;
            const formData = new FormData(form);

            fetch(url, {
                method: 'POST',
                body: formData,
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload(); // Recarregar a página se a atualização foi bem-sucedida
                    } else {
                        const modalBody = addMudaModal.querySelector('.modal-body');
                        modalBody.innerHTML = data.html; // Atualizar com os erros do formulário
                    }
                });
        });
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const addMudaModal = document.getElementById('addMudaModal');
        addMudaModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const url = button.getAttribute('data-url');

            const modalBody = addMudaModal.querySelector('.modal-body');
            modalBody.innerHTML = 'Carregando...';

            fetch(url)
                .then(response => response.text())
                .then(data => {
                    modalBody.innerHTML = data;
                });
        });

        addMudaModal.addEventListener('submit', function (event) {
            event.preventDefault();

            const form = event.target;
            const url = form.action;
            const formData = new FormData(form);

            fetch(url, {
                method: 'POST',
                body: formData,
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload(); // Recarregar a página se a atualização foi bem-sucedida
                    } else {
                        const modalBody = addMudaModal.querySelector('.modal-body');
                        modalBody.innerHTML = data.html; // Atualizar com os erros do formulário
                    }
                });
        });
    });
</script>
<script>
    $(document).ready(function () {
        $('#abertosTable',).DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/Portuguese.json"
            }
        });
    });
</script>
<script>
  $(document).ready(function () {
      $('#finalizadosTable',).DataTable({
          "language": {
              "url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/Portuguese.json"
          }
      });
  });
</script>
<script>
  $(document).ready(function () {
      // Ativar o comportamento de alternar abas
      $("#protocoloTabs a").click(function (e) {
          e.preventDefault();

          // Remova a classe 'active' de todos os links
          $("#protocoloTabs a").removeClass("active");

          // Adicione a classe 'active' ao link clicado
          $(this).addClass("active");

          // Oculte todos os conteúdos
          $(".tab-pane").removeClass("active");

          // Mostre o conteúdo associado ao link clicado
          $($(this).attr("href")).addClass("active");
      });
  });
</script>
{% endblock %}