{% 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 Movimentações de Estoque</h5>
                </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 Movimentações de Estoque -->
    <div class="card">
        <div class="content">
            <div id="content2" class="tab-pane">
                <table id="movimentacoesTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
                    width="100%">
                    <thead class="bg-success bg-gradient text-white">
                        <tr>
                            <th>Data</th>
                            <th>Item</th>
                            <th>Tipo</th>
                            <th>Quantidade</th>
                            <th>Responsável</th>
                            <th>Observações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for movimentacao in movimentacoes %}
                        <tr>
                            <td>{{ movimentacao.data|date:"d/m/Y H:i" }}</td>
                            <td>{{ movimentacao.item.nome }}</td>
                            <td>{{ movimentacao.get_tipo_display }}</td>
                            <td>{{ movimentacao.quantidade|formatar_quantidade:movimentacao.item.unidade_medida }} {{ movimentacao.item.get_unidade_medida_display }}</td>
                            <td>{{ movimentacao.responsavel.username }}</td>
                            <td>{{ movimentacao.observacoes }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script>
    $(document).ready(function () {
        // Inicializa o DataTables
        $("#movimentacoesTable").DataTable();

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