{% 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 Fornecedores</h5>
                </div>
                <div class="col-auto">
                    <a href="{% url 'cadastro_fornecedores' %}">
                        <button class="btn btn-light me-1 mb-1" type="button">Adicionar novo Fornecedor 
                            <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>
                        </button>
                    </a>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCriarCategoria">
                        Criar Categoria
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal para Criar Categoria -->
<div class="modal fade" id="modalCriarCategoria" tabindex="-1" aria-labelledby="modalCriarCategoriaLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCriarCategoriaLabel">Criar Nova Categoria</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <form id="formCriarCategoria" method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="nome" class="form-label">Nome da Categoria</label>
                        <input type="text" class="form-control" id="nome" name="nome" required>
                    </div>
                    <div class="mb-3">
                        <label for="observacao" class="form-label">Observação</label>
                        <textarea class="form-control" id="observacao" name="observacao"></textarea>
                    </div>
                    <button type="submit" class="btn btn-success w-100">Salvar Categoria</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    document.getElementById('formCriarCategoria').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);

        fetch("{% url 'cadastro_categoria_ajax' %}", {
            method: "POST",
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);  // Exibe uma mensagem de sucesso
                const modal = bootstrap.Modal.getInstance(document.getElementById('modalCriarCategoria'));
                modal.hide();  // Fecha o modal
                location.reload();  // Atualiza a página para exibir a nova categoria
            } else {
                alert("Erro: " + (data.errors ? data.errors : data.message));
            }
        })
        .catch(error => console.error('Erro:', error));
    });
</script>

    <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">
            <div id="content2" class="tab-pane">
                <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 Fantasia</th>
                            <th>CNPJ</th>
                            <th>Email</th>
                            <th>Tel. Cel</th>
                            <th>Categoria</th>
                            <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for dados_fornecedores in cards_fornecedores %}
                        <tr>
                            <td>{{ dados_fornecedores.nome_fantasia }}</td>
                            <td>{{ dados_fornecedores.cnpj }}</td>
                            <td>{{ dados_fornecedores.email }}</td>
                            <td>{{ dados_fornecedores.telefone_celular }}</td>
                            <td>{{ dados_fornecedores.categoria.nome }}</td>
                            <td class="text-center">
                                <a href="{% url 'editar_fornecedores' dados_fornecedores.id %}" class="btn btn-default tooltip-custom">
                                  <i class="fa-solid fa-pencil"></i>
                                  <span class="tooltip-text">Editar Fornecedor</span>
                                </a>
                              
                                <a href="" class="btn btn-danger tooltip-custom delete-fornecedor" data-bs-toggle="modal" data-bs-target="#deleteModalFornecedor"
                                  data-fornecedor-id="{{ dados_fornecedores.id }}" data-fornecedorname="{{ dados_fornecedores.nome_fantasia }}">
                                  <i class="fa fa-trash"></i>
                                  <span class="tooltip-text">Deletar Fornecedor</span>
                                </a>
                              
                                <a class="btn btn-success tooltip-custom show-details" data-bs-toggle="modal" data-bs-target="#exampleModalFornecedor"
                                  data-nome_fantasia="{{ dados_fornecedores.nome_fantasia }}" data-email="{{ dados_fornecedores.email }}"
                                  data-cnpj="{{ dados_fornecedores.cnpj }}" data-uf="{{ dados_fornecedores.uf }}"
                                  data-cidade="{{ dados_fornecedores.cidade }}" data-telefone_celular="{{ dados_fornecedores.telefone_celular }}"
                                  data-telefone_residencial="{{ dados_fornecedores.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 class="modal fade" id="exampleModalFornecedor" 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
                            Fornecedor
                        </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="deleteModalFornecedor" 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">
                <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="fornecedorInfo" class="text-start"></p>
                </form>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" id="cancelDeleteFornecedor"
                    data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteFornecedor">Deletar</button>
            </div>
        </div>
    </div>
</div>

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

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

<script>

    $(document).on("click", ".delete-fornecedor", function () {
        var fornecedorId = $(this).data("fornecedor-id");
        var fornecedorname = $(this).data("fornecedorname");

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

        // Exibir informações do usuário no modal
        $("#fornecedorInfo").text("Nome do Cliente: " + fornecedorname);
        $("#confirmDeleteFornecedor").attr("data-fornecedor-id", fornecedorId);
        $("#deleteModalFornecedor").modal("show");
    });

    $(document).on("click", "#confirmDeleteFornecedor", function () {
        var fornecedorId = $(this).data("fornecedor-id");
        window.location.href = '{% url "deletar_fornecedores" 0 %}'.replace("0", fornecedorId);
    });

    $(document).on("click", "#cancelDeleteFornecedor, .close-modal", function () {
        $("#deleteModalFornecedor").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 %}