{% extends 'shared/base.html' %}
{% load static %}
{% block content %}
{% load estoque_extras %}
<style>
    /* Seus estilos aqui */
</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">Itens Próximos do Vencimento</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 Itens Próximos do Vencimento -->
    <div class="card">
        <div class="content">
            <div class="canvas-wrapper">
                <table id="tabelaItensVencimento" class="table table-striped table-bordered">
                    <thead class="bg-success bg-gradient text-white">
                        <tr>
                            <th>Nome do Item</th>
                            <th>Categoria</th>
                            <th>Data de Validade</th>
                            <th>Dias Restantes</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in itens_vencendo %}
                        <tr>
                            <td>{{ item.nome }}</td>
                            <td>{{ item.categoria.nome }}</td>
                            <td>{{ item.data_validade|date:"d/m/Y" }}</td>
                            <td>{{ item.dias_restantes }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script>
    $(document).ready(function () {
        // Inicializa a tabela com DataTables
        $('#tabelaItensVencimento').DataTable({
            "order": [[3, "asc"]], // Ordena pela coluna Dias Restantes
            "columnDefs": [
                { "type": "num", "targets": 3 }
            ]
        });

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