{% extends "base.html" %}

{% block title %}Dashboard - Controle Financeiro{% endblock %}

{% block head %}
<style>
    .atalho-card {
        transition: all 0.2s ease;
        cursor: pointer;
        border: 1px solid #dee2e6;
    }
    .atalho-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: var(--bs-primary);
    }
    .atalho-card .icon-wrapper {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        margin: 0 auto 15px;
    }
    .atalho-card .icon-wrapper-sm {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }
    .periodo-btn.active {
        background-color: var(--bs-primary) !important;
        color: white !important;
    }
    .atalho-selecionavel {
        cursor: pointer;
        transition: all 0.2s;
    }
    .atalho-selecionavel:hover {
        background-color: #f8f9fa;
    }
    .atalho-selecionavel.selecionado {
        background-color: #e8f4fd;
        border-left: 4px solid var(--bs-primary);
    }
    .mini-card {
        border-radius: 12px;
    }
    .mini-card .value {
        font-size: 1.3rem;
        font-weight: 700;
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-speedometer2"></i> Dashboard</h4>
    <div class="d-flex gap-2 align-items-center">
        {# Seletor Multi-Empresa #}
        {% if empresas|length > 1 %}
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownEmpresas" data-bs-toggle="dropdown">
                <i class="bi bi-building"></i> 
                {% if empresas_selecionadas|length == 0 or empresas_selecionadas|length == empresas|length %}
                    Todas Empresas
                {% else %}
                    {{ empresas_selecionadas|length }} empresa(s)
                {% endif %}
            </button>
            <ul class="dropdown-menu dropdown-menu-end" style="min-width: 250px;">
                <li>
                    <a class="dropdown-item" href="#" onclick="selecionarTodasEmpresas()">
                        <i class="bi bi-check-all"></i> Todas as Empresas
                    </a>
                </li>
                <li><hr class="dropdown-divider"></li>
                {% for emp in empresas %}
                <li>
                    <a class="dropdown-item d-flex align-items-center" href="#" onclick="toggleEmpresa({{ emp.id }})">
                        <input type="checkbox" class="form-check-input me-2 empresa-check" 
                               value="{{ emp.id }}" 
                               {% if emp.id in empresas_selecionadas or empresas_selecionadas|length == 0 %}checked{% endif %}>
                        {{ emp.nome }}
                    </a>
                </li>
                {% endfor %}
                <li><hr class="dropdown-divider"></li>
                <li class="px-3 py-2">
                    <button class="btn btn-primary btn-sm w-100" onclick="aplicarFiltroEmpresas()">
                        <i class="bi bi-filter"></i> Aplicar
                    </button>
                </li>
            </ul>
        </div>
        {% endif %}
        
        {# Filtro de Período #}
        <form method="GET" class="d-flex align-items-center gap-2">
            <label class="mb-0"><i class="bi bi-calendar3"></i></label>
            <input type="month" name="mes" class="form-control form-control-sm" 
                   value="{{ mes_filtro }}" onchange="this.form.submit()" style="width: 150px;">
        </form>
        
        {# Botão Configurar Atalhos #}
        <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalAtalhos">
            <i class="bi bi-gear"></i> Personalizar
        </button>
    </div>
</div>

{# Cards Resumo Compacto - KPIs Principais #}
<div class="row g-2 mb-3">
    <div class="col-md-2 col-6">
        <div class="card mini-card bg-success text-white h-100">
            <div class="card-body py-2 px-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="opacity-75" style="font-size: 0.7rem;">Vendas Gerais</small>
                        <div class="value" style="font-size: 1.1rem;">R$ {{ "%.2f"|format(total_vendas_gerais|default(0)) }}</div>
                        <small class="opacity-75" style="font-size: 0.65rem;">{{ qtd_vendas_gerais|default(0) }} vendas</small>
                    </div>
                    <i class="bi bi-cart fs-3 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card mini-card bg-primary text-white h-100">
            <div class="card-body py-2 px-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="opacity-75" style="font-size: 0.7rem;">Vendas Faturadas</small>
                        <div class="value" style="font-size: 1.1rem;">R$ {{ "%.2f"|format(total_vendas_faturadas|default(0)) }}</div>
                        <small class="opacity-75" style="font-size: 0.65rem;">{{ qtd_vendas_faturadas|default(0) }} NF-e</small>
                    </div>
                    <i class="bi bi-file-earmark-text fs-3 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card mini-card bg-info text-white h-100">
            <div class="card-body py-2 px-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="opacity-75" style="font-size: 0.7rem;">Receitas do Mês</small>
                        <div class="value" style="font-size: 1.1rem;">R$ {{ "%.2f"|format(receitas_mes) }}</div>
                    </div>
                    <i class="bi bi-arrow-down-circle fs-3 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card mini-card bg-danger text-white h-100">
            <div class="card-body py-2 px-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="opacity-75" style="font-size: 0.7rem;">Despesas do Mês</small>
                        <div class="value" style="font-size: 1.1rem;">R$ {{ "%.2f"|format(despesas_mes) }}</div>
                    </div>
                    <i class="bi bi-arrow-up-circle fs-3 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card mini-card {% if receitas_mes - despesas_mes >= 0 %}bg-dark{% else %}bg-warning{% endif %} text-white h-100">
            <div class="card-body py-2 px-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="opacity-75" style="font-size: 0.7rem;">Resultado</small>
                        <div class="value" style="font-size: 1.1rem;">R$ {{ "%.2f"|format(receitas_mes - despesas_mes) }}</div>
                    </div>
                    <i class="bi bi-graph-up-arrow fs-3 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card mini-card bg-secondary text-white h-100">
            <div class="card-body py-2 px-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="opacity-75" style="font-size: 0.7rem;">Saldo Total</small>
                        <div class="value" style="font-size: 1.1rem;">R$ {{ "%.2f"|format(saldo_total) }}</div>
                    </div>
                    <i class="bi bi-wallet2 fs-3 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

{# Gráfico + Atalhos lado a lado #}
<div class="row mb-3">
    {# Gráfico de Evolução - Esquerda #}
    <div class="col-lg-8 col-md-7 mb-3">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                <h6 class="mb-0"><i class="bi bi-graph-up text-primary"></i> Evolução de Vendas</h6>
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-primary periodo-btn active" data-periodo="dia" onclick="alterarPeriodo('dia')">Dia</button>
                    <button type="button" class="btn btn-outline-primary periodo-btn" data-periodo="mes" onclick="alterarPeriodo('mes')">Mês</button>
                    <button type="button" class="btn btn-outline-primary periodo-btn" data-periodo="ano" onclick="alterarPeriodo('ano')">Ano</button>
                </div>
            </div>
            <div class="card-body p-2">
                <div style="position: relative; height: 220px;">
                    <canvas id="graficoVendas"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    {# Atalhos de Acesso Rápido - Direita #}
    <div class="col-lg-4 col-md-5 mb-3">
        <div class="card">
            <div class="card-header bg-white py-2">
                <h6 class="mb-0"><i class="bi bi-lightning"></i> Acesso Rápido</h6>
            </div>
            <div class="card-body py-2">
                <div class="row g-2">
                    {% if atalhos_usuario and atalhos_usuario|length > 0 %}
                        {% for atalho in atalhos_usuario %}
                        <div class="col-4">
                            <a href="{{ atalho.url }}" class="text-decoration-none">
                                <div class="card atalho-card text-center py-2 h-100">
                                    <div class="card-body p-1">
                                        <div class="icon-wrapper-sm bg-{{ atalho.cor }}-subtle text-{{ atalho.cor }} mx-auto mb-1">
                                            <i class="bi bi-{{ atalho.icone }}"></i>
                                        </div>
                                        <small class="text-dark d-block" style="font-size: 0.75rem;">{{ atalho.nome }}</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        {% endfor %}
                    {% else %}
                        {# Atalhos padrão - 6 atalhos em grid 3x2 #}
                        <div class="col-4">
                            <a href="{{ url_for('nova_venda') }}" class="text-decoration-none">
                                <div class="card atalho-card text-center py-2 h-100">
                                    <div class="card-body p-1">
                                        <div class="icon-wrapper-sm bg-success-subtle text-success mx-auto mb-1">
                                            <i class="bi bi-cart-plus"></i>
                                        </div>
                                        <small class="text-dark d-block" style="font-size: 0.75rem;">Nova Venda</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ url_for('caixa') }}" class="text-decoration-none">
                                <div class="card atalho-card text-center py-2 h-100">
                                    <div class="card-body p-1">
                                        <div class="icon-wrapper-sm bg-primary-subtle text-primary mx-auto mb-1">
                                            <i class="bi bi-cash-stack"></i>
                                        </div>
                                        <small class="text-dark d-block" style="font-size: 0.75rem;">Caixa</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ url_for('produtos') }}" class="text-decoration-none">
                                <div class="card atalho-card text-center py-2 h-100">
                                    <div class="card-body p-1">
                                        <div class="icon-wrapper-sm bg-warning-subtle text-warning mx-auto mb-1">
                                            <i class="bi bi-box-seam"></i>
                                        </div>
                                        <small class="text-dark d-block" style="font-size: 0.75rem;">Produtos</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ url_for('pessoas', tipo='cliente') }}" class="text-decoration-none">
                                <div class="card atalho-card text-center py-2 h-100">
                                    <div class="card-body p-1">
                                        <div class="icon-wrapper-sm bg-info-subtle text-info mx-auto mb-1">
                                            <i class="bi bi-people"></i>
                                        </div>
                                        <small class="text-dark d-block" style="font-size: 0.75rem;">Clientes</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ url_for('contas_receber') }}" class="text-decoration-none">
                                <div class="card atalho-card text-center py-2 h-100">
                                    <div class="card-body p-1">
                                        <div class="icon-wrapper-sm bg-danger-subtle text-danger mx-auto mb-1">
                                            <i class="bi bi-inbox"></i>
                                        </div>
                                        <small class="text-dark d-block" style="font-size: 0.75rem;">Contas Receber</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ url_for('pdv') }}" class="text-decoration-none">
                                <div class="card atalho-card text-center py-2 h-100">
                                    <div class="card-body p-1">
                                        <div class="icon-wrapper-sm bg-secondary-subtle text-secondary mx-auto mb-1">
                                            <i class="bi bi-display"></i>
                                        </div>
                                        <small class="text-dark d-block" style="font-size: 0.75rem;">PDV</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{# Cards de Pendências - Contas a Receber e Pagar #}
<div class="row">
    <div class="col-md-6 mb-3">
        <div class="card border-warning h-100">
            <div class="card-header bg-warning d-flex justify-content-between align-items-center py-2">
                <h6 class="mb-0"><i class="bi bi-inbox"></i> Contas a Receber</h6>
                <span class="badge bg-dark">{{ contas_receber_abertas|length }}</span>
            </div>
            <div class="card-body py-2">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="text-warning mb-0">R$ {{ "%.2f"|format(total_a_receber) }}</h4>
                        <small class="text-muted">pendentes no mês</small>
                    </div>
                    <a href="{{ url_for('contas_receber') }}" class="btn btn-sm btn-warning">
                        <i class="bi bi-eye"></i> Ver
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-3">
        <div class="card border-danger h-100">
            <div class="card-header bg-danger text-white d-flex justify-content-between align-items-center py-2">
                <h6 class="mb-0"><i class="bi bi-receipt"></i> Contas a Pagar</h6>
                <span class="badge bg-light text-dark">{{ contas_pagar_abertas|length }}</span>
            </div>
            <div class="card-body py-2">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="text-danger mb-0">R$ {{ "%.2f"|format(total_a_pagar) }}</h4>
                        <small class="text-muted">pendentes no mês</small>
                    </div>
                    <a href="{{ url_for('contas_pagar') }}?status=pendente" class="btn btn-sm btn-danger">
                        <i class="bi bi-eye"></i> Ver
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{# Modal de Configuração de Atalhos #}
<div class="modal fade cape-modal-standard" id="modalAtalhos" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="bi bi-gear"></i> Personalizar Atalhos do Dashboard</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-3">Selecione até 6 atalhos para exibir no seu dashboard:</p>
                
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="mb-3"><i class="bi bi-star text-warning"></i> Favoritos</h6>
                        <div id="atalhosSelecionados" class="border rounded p-2 min-vh-25" style="min-height: 200px;">
                            <small class="text-muted">Arraste itens aqui ou clique para adicionar</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3"><i class="bi bi-list"></i> Opções Disponíveis</h6>
                        <div class="list-group" style="max-height: 400px; overflow-y: auto;">
                            {% for opcao in opcoes_atalhos %}
                            <div class="list-group-item list-group-item-action atalho-selecionavel d-flex align-items-center"
                                 data-url="{{ opcao.url }}" data-nome="{{ opcao.nome }}" 
                                 data-icone="{{ opcao.icone }}" data-cor="{{ opcao.cor }}"
                                 onclick="toggleAtalho(this)">
                                <i class="bi bi-{{ opcao.icone }} text-{{ opcao.cor }} me-3 fs-5"></i>
                                <span>{{ opcao.nome }}</span>
                                <i class="bi bi-plus-circle ms-auto text-success icone-add"></i>
                                <i class="bi bi-check-circle ms-auto text-primary icone-check d-none"></i>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="salvarAtalhos()">
                    <i class="bi bi-check-lg"></i> Salvar Atalhos
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Dados do gráfico vindos do backend
const dadosGrafico = {{ dados_grafico|tojson|safe if dados_grafico else '{}' }};
let graficoVendas = null;

// Funções de atalhos
let atalhosSelecionados = [];

document.addEventListener('DOMContentLoaded', function() {
    // Inicializar gráfico
    inicializarGrafico('dia');
    
    carregarAtalhosSalvos();
    
    // Quando o modal de atalhos for aberto, atualizar a marcação visual
    const modalAtalhos = document.getElementById('modalAtalhos');
    if (modalAtalhos) {
        modalAtalhos.addEventListener('shown.bs.modal', function() {
            marcarItensSelecionados();
        });
    }
});

function inicializarGrafico(periodo) {
    const canvas = document.getElementById('graficoVendas');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    
    // Dados baseados no período
    let dados = dadosGrafico[periodo] || {
        labels: [],
        vendas_recebidas: [],
        vendas_faturadas: [],
        despesas: []
    };
    
    if (graficoVendas) {
        graficoVendas.destroy();
        graficoVendas = null;
    }
    
    graficoVendas = new Chart(ctx, {
        type: 'line',
        data: {
            labels: dados.labels,
            datasets: [
                {
                    label: 'Vendas Recebidas',
                    data: dados.vendas_recebidas,
                    borderColor: '#0d6efd',
                    backgroundColor: 'rgba(13, 110, 253, 0.1)',
                    fill: true,
                    tension: 0.3,
                    borderWidth: 2
                },
                {
                    label: 'Vendas Faturadas (NF-e)',
                    data: dados.vendas_faturadas,
                    borderColor: '#198754',
                    backgroundColor: 'rgba(25, 135, 84, 0.1)',
                    fill: true,
                    tension: 0.3,
                    borderWidth: 2,
                    borderDash: [5, 5]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: false,
            plugins: {
                legend: { 
                    display: true,
                    position: 'top',
                    labels: {
                        boxWidth: 12,
                        padding: 10,
                        font: {
                            size: 11
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += 'R$ ' + context.parsed.y.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'R$ ' + value.toLocaleString('pt-BR');
                        }
                    }
                }
            }
        }
    });
}

function alterarPeriodo(periodo) {
    // Atualizar botões
    document.querySelectorAll('.periodo-btn').forEach(btn => {
        btn.classList.remove('active');
        if (btn.dataset.periodo === periodo) {
            btn.classList.add('active');
        }
    });
    
    // Buscar dados via AJAX
    const campoMes = document.querySelector('input[name="mes"]');
    const mesRef = (campoMes && campoMes.value) ? campoMes.value : '';
    const params = new URLSearchParams({ periodo });
    if (mesRef) {
        params.append('mes_referencia', mesRef);
    }

    fetch(`{{ url_for('api_dashboard_grafico') }}?${params.toString()}`)
        .then(response => response.json())
        .then(data => {
            if (data && data.error) {
                throw new Error(data.error);
            }
            dadosGrafico[periodo] = data;
            inicializarGrafico(periodo);
        })
        .catch(err => {
            console.error('Erro ao carregar dados:', err);
        });
}

function carregarAtalhosSalvos() {
    // Atalhos já salvos pelo usuário
    const salvos = {{ atalhos_usuario|tojson|safe if atalhos_usuario else '[]' }};
    atalhosSelecionados = salvos;
    atualizarListaAtalhos();
    
    // Marcar visualmente os itens já selecionados na lista de opções
    marcarItensSelecionados();
}

function marcarItensSelecionados() {
    // Primeiro, desmarcar todos
    document.querySelectorAll('.atalho-selecionavel').forEach(el => {
        el.classList.remove('selecionado');
        el.querySelector('.icone-add').classList.remove('d-none');
        el.querySelector('.icone-check').classList.add('d-none');
    });
    
    // Marcar os que estão selecionados
    atalhosSelecionados.forEach(atalho => {
        document.querySelectorAll('.atalho-selecionavel').forEach(el => {
            if (el.dataset.url === atalho.url) {
                el.classList.add('selecionado');
                el.querySelector('.icone-add').classList.add('d-none');
                el.querySelector('.icone-check').classList.remove('d-none');
            }
        });
    });
}

function toggleAtalho(elemento) {
    const url = elemento.dataset.url;
    const nome = elemento.dataset.nome;
    const icone = elemento.dataset.icone;
    const cor = elemento.dataset.cor;
    
    const index = atalhosSelecionados.findIndex(a => a.url === url);
    
    if (index >= 0) {
        // Remover
        atalhosSelecionados.splice(index, 1);
        elemento.classList.remove('selecionado');
        elemento.querySelector('.icone-add').classList.remove('d-none');
        elemento.querySelector('.icone-check').classList.add('d-none');
    } else {
        // Adicionar (máximo 6)
        if (atalhosSelecionados.length >= 6) {
            alert('Máximo de 6 atalhos permitidos!');
            return;
        }
        atalhosSelecionados.push({ url, nome, icone, cor });
        elemento.classList.add('selecionado');
        elemento.querySelector('.icone-add').classList.add('d-none');
        elemento.querySelector('.icone-check').classList.remove('d-none');
    }
    
    atualizarListaAtalhos();
}

function atualizarListaAtalhos() {
    const container = document.getElementById('atalhosSelecionados');
    if (atalhosSelecionados.length === 0) {
        container.innerHTML = '<small class="text-muted">Arraste itens aqui ou clique para adicionar</small>';
        return;
    }
    
    container.innerHTML = atalhosSelecionados.map((a, i) => `
        <div class="d-flex align-items-center p-2 border-bottom">
            <span class="badge bg-secondary me-2">${i + 1}</span>
            <i class="bi bi-${a.icone} text-${a.cor} me-2"></i>
            <span>${a.nome}</span>
            <button class="btn btn-sm btn-link text-danger ms-auto" onclick="removerAtalho(${i})">
                <i class="bi bi-x-circle"></i>
            </button>
        </div>
    `).join('');
}

function removerAtalho(index) {
    const removido = atalhosSelecionados.splice(index, 1)[0];
    
    // Desmarcar na lista de opções
    document.querySelectorAll('.atalho-selecionavel').forEach(el => {
        if (el.dataset.url === removido.url) {
            el.classList.remove('selecionado');
            el.querySelector('.icone-add').classList.remove('d-none');
            el.querySelector('.icone-check').classList.add('d-none');
        }
    });
    
    atualizarListaAtalhos();
}

function salvarAtalhos() {
    fetch('{{ url_for("salvar_dashboard_atalhos") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ atalhos: atalhosSelecionados })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erro ao salvar: ' + data.error);
        }
    })
    .catch(err => {
        console.error('Erro:', err);
        alert('Erro ao salvar atalhos');
    });
}

// Multi-empresa
function toggleEmpresa(id) {
    const checkbox = event.target.closest('.dropdown-item').querySelector('input[type="checkbox"]');
    checkbox.checked = !checkbox.checked;
    event.stopPropagation();
    event.preventDefault();
}

function selecionarTodasEmpresas() {
    document.querySelectorAll('.empresa-check').forEach(cb => cb.checked = true);
}

function aplicarFiltroEmpresas() {
    const empresas = [];
    document.querySelectorAll('.empresa-check:checked').forEach(cb => {
        empresas.push(parseInt(cb.value));
    });
    
    fetch('{{ url_for("salvar_dashboard_empresas") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ empresas })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) location.reload();
    });
}
</script>
{% endblock %}