{% 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>
<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 Clientes</h5>
        </div>
        <div class="col-auto">
          <a href="{% url 'cadastro_cliente' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Adicionar novo cliente físico <span
                class="fas fa-plus me-1" data-fa-transform="shrink-3"></span></button>
          </a>
        </div>
        <div class="col-auto">
          <a href="{% url 'cadastro_empresa' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Adicionar novo cliente jurídico <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">
    <div class="content">
      <ul class="nav nav-tabs mb-2" id="myTabs">
        <li class="nav-item">
          <a class="nav-link active" style="color: #198754;" data-toggle="tab" href="#content1">Cliente Físico</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" style="color: #198754;" href="#content2">Cliente jurídico</a>
        </li>
      </ul>

      <div class="tab-content">
        <div id="content1" class="tab-pane active">
          <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
            width="100%">
            <thead class="bg-success bg-gradient text-white">
              <tr>
                <th>Nome do Cliente</th>
                <th>Tel. Cel</th>
                <th>Email</th>
                <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
              </tr>
            </thead>
            <tbody>
              {% for dados_fisico in cards_fisico %}
              <tr>
                <td>{{ dados_fisico.nome_completo }}</td>
                <td>{{ dados_fisico.telefone_celular }}</td>
                <td>{{ dados_fisico.email }}</td>
                <td class="text-center">
                  <a href="{% url 'editar_cliente' dados_fisico.id %}" class="btn btn-default tooltip-custom">
                    <i class="fa-solid fa-pencil"></i>
                    <span class="tooltip-text">Editar Cliente</span>
                  </a>
                
                  <a href="{% url 'deletar_cliente' dados_fisico.id %}" class="btn btn-danger tooltip-custom delete-cliente-f"
                    data-bs-toggle="modal" data-bs-target="#deleteModalF" data-client-id-f="{{ dados_fisico.id }}"
                    data-clientenamef="{{ dados_fisico.nome_completo }}">
                    <i class="fa fa-trash"></i>
                    <span class="tooltip-text">Deletar Cliente</span>
                  </a>
                
                  <a class="btn btn-success tooltip-custom show-details" data-bs-toggle="modal" data-bs-target="#exampleModal"
                    data-nome="{{ dados_fisico.nome_completo }}" data-email="{{ dados_fisico.email }}"
                    data-cpf="{{ dados_fisico.cpf }}" data-uf="{{ dados_fisico.uf }}"
                    data-cidade="{{ dados_fisico.cidade }}" data-telefone_celular="{{ dados_fisico.telefone_celular }}"
                    data-telefone_residencial="{{ dados_fisico.telefone_residencial }}">
                    <i class="fa-solid fa-magnifying-glass" id="staticBackdrop"></i>
                    <span class="tooltip-text">Ver Detalhes</span>
                  </a>
                </td>
                
              </tr>
              {% endfor %}
            </tbody>
          </table>

        </div>
        <div id="content2" class="tab-pane">

          <table id="example2" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
            width="100%">
            <thead class="bg-success bg-gradient text-white">
              <tr>
                <th>Nome Fantasia</th>
                <th>CNPJ</th>
                <th>Email</th>
                <th>Tel. Cel</th>
                <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
              </tr>
            </thead>
            <tbody>
              {% for dados_juridico in cards_juridico %}
              <tr>
                <td>{{ dados_juridico.nome_fantasia }}</td>
                <td>{{ dados_juridico.cnpj }}</td>
                <td>{{ dados_juridico.email }}</td>
                <td>{{ dados_juridico.telefone_celular }}</td>
                <td class="text-center">
                  <a href="{% url 'editar_juridico' dados_juridico.id %}" class="btn btn-default tooltip-custom">
                    <i class="fa-solid fa-pencil"></i>
                    <span class="tooltip-text">Editar Jurídico</span>
                  </a>
                
                  <a href="{% url 'deletar_juridico' dados_juridico.id %}" class="btn btn-danger tooltip-custom delete-cliente-j"
                    data-bs-toggle="modal" data-bs-target="#deleteModalJ" data-client-id-j="{{ dados_juridico.id }}"
                    data-clientenamej="{{ dados_juridico.nome_fantasia }}">
                    <i class="fa fa-trash"></i>
                    <span class="tooltip-text">Deletar Jurídico</span>
                  </a>
                
                  <a class="btn btn-success tooltip-custom show-details" data-bs-toggle="modal" data-bs-target="#exampleModalJuridico"
                    data-nome_fantasia="{{ dados_juridico.nome_fantasia }}" data-email="{{ dados_juridico.email }}"
                    data-cnpj="{{ dados_juridico.cnpj }}" data-uf="{{ dados_juridico.uf }}"
                    data-cidade="{{ dados_juridico.cidade }}"
                    data-telefone_celular="{{ dados_juridico.telefone_celular }}"
                    data-telefone_residencial="{{ dados_juridico.telefone_residencial }}">
                    <i class="fa-solid fa-magnifying-glass" id="staticBackdrop"></i>
                    <span class="tooltip-text">Ver Detalhes</span>
                  </a>
                </td>
                
              </tr>
              {% endfor %}
            </tbody>
          </table>

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


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="" 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>
      <div class="modal-body">
        <!-- Adicione mais campos conforme necessário -->
        <table class="table table-hover table-bordered text-start table-dark-bordered">
          <tbody>
            <th class="text-center bg-success bg-gradient text-white" scope="row" colspan="2">Informações do cliente
              Físico</th>
            <tr>
              <th scope="row">Nome:</th>
              <td><span id="modal-nome"></span></td>
            </tr>
            <tr>
              <th scope="row">Email:</th>
              <td><span id="modal-email"></span></td>
            </tr>
            <tr>
              <th scope="row">CPF:</th>
              <td><span id="modal-cpf"></span></td>
            </tr>
            <tr>
              <th scope="row">UF:</th>
              <td><span id="modal-uf"></span></td>
            </tr>
            <tr>
              <th scope="row">Cidade:</th>
              <td><span id="modal-cidade"></span></td>
            </tr>
            <tr>
              <th scope="row">Telefone Celular:</th>
              <td><span id="modal-telefone_celular"></span></td>
            </tr>
            <tr>
              <th scope="row">Telefone Residencial:</th>
              <td><span id="modal-telefone_residencial"></span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- MODAL DE DELETE -->
<div class="modal fade" id="deleteModalF" 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="clienteInfoF" class="text-start"></p>
        </form>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" id="cancelDeleteF" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteF">Deletar</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="exampleModalJuridico" tabindex="-1" aria-labelledby="" 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>
      <div class="modal-body">
        <!-- Adicione mais campos conforme necessário -->
        <table class="table table-hover table-bordered text-start table-dark-bordered">
          <tbody>
            <th class="text-center bg-success bg-gradient text-white" scope="row" colspan="2">Informações do cliente
              Jurídico</th>
            <tr>
              <th scope="row">Nome Fantasia:</th>
              <td><span id="modal-nome_fantasia"></span></td>
            </tr>
            <tr>
              <th scope="row">Email:</th>
              <td><span id="modal-emailj"></span></td>
            </tr>
            <tr>
              <th scope="row">CNPJ:</th>
              <td><span id="modal-cnpj"></span></td>
            </tr>
            <tr>
              <th scope="row">UF:</th>
              <td><span id="modal-ufj"></span></td>
            </tr>
            <tr>
              <th scope="row">Cidade:</th>
              <td><span id="modal-cidadej"></span></td>
            </tr>
            <tr>
              <th scope="row">Telefone Celular:</th>
              <td><span id="modal-telefone_celularj"></span></td>
            </tr>
            <tr>
              <th scope="row">Telefone Residencial:</th>
              <td><span id="modal-telefone_residencialj"></span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- MODAL DE DELETE -->
<div class="modal fade" id="deleteModalJ" 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="clienteInfoJ" class="text-start"></p>
        </form>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" id="cancelDeleteJ" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteJ">Deletar</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    $("#example").DataTable();
  });

  setTimeout(function () {
    $("#messages").fadeOut("fast");
  }, 5000);

  $(document).on("click", ".delete-cliente-f", function () {
    var clienteIdF = $(this).data("client-id-f");
    var clienteNameF = $(this).data("clientenamef");

    // Exibir informações do usuário no modal
    $("#clienteInfoF").text("Nome do Cliente: " + clienteNameF);
    $("#confirmDeleteF").attr("data-client-id-f", clienteIdF);
    $("#deleteModalF").modal("show");
  });

  $(document).on("click", "#confirmDeleteF", function () {
    var clienteIdF = $(this).data("client-id-f");
    window.location.href = '{% url "deletar_cliente" 0 %}'.replace("0", clienteIdF);
  });

  $(document).on("click", "#cancelDeleteF, .close-modal", function () {
    $("#deleteModalF").modal("hide");
  });

  $(document).on("click", ".show-details", function () {
    var nome = $(this).data('nome');
    var email = $(this).data('email');
    var cpf = $(this).data('cpf');
    var uf = $(this).data('uf');
    var cidade = $(this).data('cidade');
    var telefone_celular = $(this).data('telefone_celular');
    var telefone_residencial = $(this).data('telefone_residencial');


    $('#modal-nome').text(nome);
    $('#modal-email').text(email);
    $('#modal-cpf').text(cpf);
    $('#modal-uf').text(uf);
    $('#modal-cidade').text(cidade);
    $('#modal-telefone_celular').text(telefone_celular);
    $('#modal-telefone_residencial').text(telefone_residencial);

  });
</script>

<script>
  $(document).ready(function () {
    // Adicione um manipulador de eventos para os links da barra de navegação
    $("#myTabs a").click(function (e) {
      e.preventDefault();

      // Remova a classe 'active' de todos os links
      $("#myTabs 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>
<script>
  $(document).ready(function () {
    $("#example2").DataTable();
  });


  $(document).on("click", ".delete-cliente-j", function () {
    var clienteIdJ = $(this).data("client-id-j");
    var clienteNameJ = $(this).data("clientenamej");

    // Debug: Imprimir o valor do nome no console
    console.log("Valor do nome:", clienteNameJ);

    // Exibir informações do usuário no modal
    $("#clienteInfoJ").text("Nome do Cliente: " + clienteNameJ);
    $("#confirmDeleteJ").attr("data-client-id-j", clienteIdJ);
    $("#deleteModalJ").modal("show");
  });

  $(document).on("click", "#confirmDeleteJ", function () {
    var clienteIdJ = $(this).data("client-id-j");
    window.location.href = '{% url "deletar_juridico" 0 %}'.replace("0", clienteIdJ);
  });

  $(document).on("click", "#cancelDeleteJ, .close-modal", function () {
    $("#deleteModalJ").modal("hide");
  });

  $(document).on("click", ".show-details", function () {
    var nome_fantasia = $(this).data('nome_fantasia');
    var email = $(this).data('email');
    var cnpj = $(this).data('cnpj');
    var uf = $(this).data('uf');
    var cidade = $(this).data('cidade');
    var telefone_celular = $(this).data('telefone_celular');
    var telefone_residencial = $(this).data('telefone_residencial');


    $('#modal-nome_fantasia').text(nome_fantasia);
    $('#modal-emailj').text(email);
    $('#modal-cnpj').text(cnpj);
    $('#modal-ufj').text(uf);
    $('#modal-cidadej').text(cidade);
    $('#modal-telefone_celularj').text(telefone_celular);
    $('#modal-telefone_residencialj').text(telefone_residencial);

  });
</script>
{% endblock %}