{% extends 'shared/base.html' %}
{% load static %}
{% block content %}
{% load estoque_extras %}
<style>
    /* Estilos para o tooltip */
    .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">
    <!-- Título da página e botões -->
    <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 Itens de Estoque</h5>
                </div>
                <!-- <div class="col-auto">
                    <a href="{% url 'criar_item_estoque' %}">
                        <button class="btn btn-light me-1 mb-1" type="button">Adicionar novo Item
                            <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 flex-column">
                    <h5 class="modal-title" id="modalCriarCategoriaLabel">Criar Nova Categoria de Insumo</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="id_nome" class="form-label">Nome da Categoria</label>
                            <input type="text" class="form-control" id="id_nome" name="nome" required>
                        </div>
                        <div class="mb-3">
                            <label for="id_descricao" class="form-label">Descrição</label>
                            <textarea class="form-control" id="id_descricao" name="descricao" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-success w-100">Salvar Categoria</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Mensagens de sucesso ou erro -->
    <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>

    <!-- Tabela de Itens de Estoque -->
    <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 do Item</th>
                            <th>Categoria</th>
                            <th>Quantidade</th>
                            <th>Data de Validade</th>
                            <th>Fornecedor</th>
                            <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in itens %}
                        <tr {% if item.vencido %} class="table-danger" {% elif item.proximo_vencimento %}
                            class="table-warning" {% endif %}>
                            <td>{{ item.nome }}</td>
                            <td>{{ item.categoria.nome }}</td>
                            <td>{{ item.quantidade|formatar_quantidade:item.unidade_medida }} {{ item.get_unidade_medida_display|lower }}</td>
                            <td>
                                {% if item.data_validade %}
                                {{ item.data_validade|date:"d/m/Y" }}
                                {% else %}
                                N/A
                                {% endif %}
                            </td>
                            <td>{{ item.fornecedor.nome_fantasia }}</td>
                            <td class="text-center">
                                <a href="{% url 'editar_item_estoque' item.id %}"
                                    class="btn btn-default tooltip-custom">
                                    <i class="fa-solid fa-pencil"></i>
                                    <span class="tooltip-text">Editar Item</span>
                                </a>
                                <a href="#" class="btn btn-danger tooltip-custom delete-item" data-bs-toggle="modal"
                                    data-bs-target="#deleteModalItem" data-item-id="{{ item.id }}"
                                    data-item-nome="{{ item.nome }}">
                                    <i class="fa fa-trash"></i>
                                    <span class="tooltip-text">Deletar Item</span>
                                </a>
                                <!-- <a class="btn btn-success tooltip-custom show-details" data-bs-toggle="modal"
                                    data-bs-target="#modalDetalhesItem" data-item-nome="{{ item.nome }}"
                                    data-categoria="{{ item.categoria.nome }}" data-quantidade="{{ item.quantidade }}"
                                    data-unidade="{{ item.get_unidade_medida_display }}"
                                    data-fornecedor="{{ item.fornecedor.nome_fantasia }}"
                                    data-localizacao="{{ item.localizacao }}" data-validade="{{ item.data_validade|date:'d/m/Y' }}"
                                    data-custo="{{ item.custo_unitario }}" data-notas="{{ item.notas }}">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <span class="tooltip-text">Ver Detalhes</span>
                                </a> -->
                                <a href="{% url 'registrar_movimentacao' %}?item_id={{ item.id }}"
                                    class="btn btn-secondary btn-sm">Movimentar</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modais e Scripts -->
<!-- Modal para Detalhes do Item -->
<div class="modal fade" id="modalDetalhesItem" tabindex="-1" aria-labelledby="modalDetalhesItemLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-finaly">
        <div class="modal-content">
            <div class="modal-header flex-column">
                <h5 class="modal-title" id="modalDetalhesItemLabel">Detalhes do Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <table class="table table-hover table-bordered text-start table-dark-bordered">
                    <tbody>
                        <tr>
                            <th scope="row">Nome do Item:</th>
                            <td><span id="modal-item-nome"></span></td>
                        </tr>
                        <tr>
                            <th scope="row">Categoria:</th>
                            <td><span id="modal-item-categoria"></span></td>
                        </tr>
                        <tr>
                            <th scope="row">Quantidade:</th>
                            <td><span id="modal-item-quantidade"></span></td>
                        </tr>
                        <tr>
                            <th scope="row">Unidade:</th>
                            <td><span id="modal-item-unidade"></span></td>
                        </tr>
                        <tr>
                            <th scope="row">Fornecedor:</th>
                            <td><span id="modal-item-fornecedor"></span></td>
                        </tr>
                        <tr>
                            <th scope="row">Localização:</th>
                            <td><span id="modal-item-localizacao"></span></td>
                        </tr>
                        <tr>
                            <th scope="row">Data de Validade:</th>
                            <td><span id="modal-item-validade"></span></td>
                        </tr>
                        <tr>
                            <th scope="row">Custo Unitário:</th>
                            <td><span id="modal-item-custo"></span></td>
                        </tr>
                        <tr>
                            <th scope="row">Notas:</th>
                            <td><span id="modal-item-notas"></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Exclusão -->
<div class="modal fade" id="deleteModalItem" 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">
                <div class="icon-box">
                    <i class="material-icons fa-solid fa-xmark"></i>
                </div>
                <h4 class="modal-title w-100">Tem certeza?</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <p class="line">Você realmente deseja excluir este item? Este processo não pode ser desfeito.</p>
                <p id="itemInfo" class="text-start"></p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" id="cancelDeleteItem"
                    data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteItem">Deletar</button>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script>
    $(document).ready(function () {
        // Inicializa o DataTables e tooltips após o carregamento do DOM
        $("#example").DataTable();

        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';
            });
        });

        // Função para exibir detalhes do item no modal
        $(document).on("click", ".show-details", function () {
            var nome = $(this).data('item-nome');
            var categoria = $(this).data('categoria');
            var quantidade = $(this).data('quantidade');
            var unidade = $(this).data('unidade');
            var fornecedor = $(this).data('fornecedor');
            var localizacao = $(this).data('localizacao');
            var validade = $(this).data('validade');
            var custo = $(this).data('custo');
            var notas = $(this).data('notas');

            $('#modal-item-nome').text(nome);
            $('#modal-item-categoria').text(categoria);
            $('#modal-item-quantidade').text(quantidade);
            $('#modal-item-unidade').text(unidade);
            $('#modal-item-fornecedor').text(fornecedor);
            $('#modal-item-localizacao').text(localizacao);
            $('#modal-item-validade').text(validade ? validade : 'N/A');
            $('#modal-item-custo').text(custo ? custo : 'N/A');
            $('#modal-item-notas').text(notas ? notas : 'N/A');
        });

        // Função para lidar com a exclusão de um item
        $(document).on("click", ".delete-item", function () {
            var itemId = $(this).data("item-id");
            var itemNome = $(this).data("item-nome");

            // Exibir informações do item no modal
            $("#itemInfo").text("Nome do Item: " + itemNome);
            $("#confirmDeleteItem").attr("data-item-id", itemId);
            $("#deleteModalItem").modal("show");
        });

        $(document).on("click", "#confirmDeleteItem", function () {
            var itemId = $(this).data("item-id");
            window.location.href = '{% url "deletar_item_estoque" 0 %}'.replace("0", itemId);
        });

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

        // Script para criar categoria via AJAX
        $('#formCriarCategoria').on('submit', function (event) {
            event.preventDefault();
            console.log("Formulário submetido via AJAX");
            const formData = new FormData(this);

            fetch("{% url 'criar_categoria_insumo_ajax' %}", {
                method: "POST",
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            })
                .then(response => response.json())
                .then(data => {
                    console.log("Dados da resposta:", data);
                    if (data.success) {
                        alert(data.message);
                        const modal = bootstrap.Modal.getInstance(document.getElementById('modalCriarCategoria'));
                        modal.hide();
                        location.reload();
                    } else {
                        alert("Erro: " + JSON.stringify(data.errors));
                    }
                })
                .catch(error => console.error('Erro:', error));
        });

        // Script para ocultar mensagens após 5 segundos
        setTimeout(function () {
            $("#messages").fadeOut("fast");
        }, 5000);
    });
</script>
{% endblock %}