{% extends "base.html" %}

{% block title %}Dashboard Food{% endblock %}

{% block extra_css %}
<style>
    .food-dashboard {
        padding: 1.2rem 0 2rem;
        background:
            radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 28%),
            radial-gradient(circle at top right, rgba(245, 158, 11, 0.10), transparent 25%),
            linear-gradient(180deg, #f8fbff 0%, #eff5ff 48%, #eef2ff 100%);
        min-height: calc(100vh - 120px);
    }

    .food-hero {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 16px;
        padding: 0.65rem 1.2rem;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
        backdrop-filter: blur(8px);
        margin-bottom: 1rem;
    }

    .food-hero-title {
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: #0f172a;
        margin-bottom: 0;
    }

    .hero-badges {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .hero-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        background: rgba(59, 130, 246, 0.08);
        color: #1e40af;
        font-weight: 600;
        font-size: 0.78rem;
    }

    .hero-pill.warm {
        background: rgba(245, 158, 11, 0.12);
        color: #92400e;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-end;
        align-items: center;
    }

    .btn-hero {
        border-radius: 10px;
        padding: 0.4rem 0.9rem;
        font-weight: 700;
        font-size: 0.88rem;
    }

    .section-shell {
        background: rgba(255, 255, 255, 0.90);
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 22px;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    .section-shell .card,
    .section-shell.card,
    .data-card {
        border: none;
        background: transparent;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.2rem;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255,255,255,0.9));
    }

    .section-title {
        font-size: 1.02rem;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .section-subtitle {
        font-size: 0.78rem;
        color: #64748b;
        margin: 0.2rem 0 0;
    }

    .card-stat {
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 20px;
        transition: all 0.25s ease;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 35px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        height: 100%;
    }
    
    .card-stat:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 42px rgba(15, 23, 42, 0.10);
    }

    .card-stat .card-body {
        padding: 1.2rem;
    }
    
    .stat-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.55rem;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    .stat-label {
        color: #64748b;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.05;
        margin-top: 0.15rem;
    }

    .stat-trace {
        margin-top: 0.45rem;
        color: #94a3b8;
        font-size: 0.78rem;
        font-weight: 600;
    }
    
    .mesa-mini {
        width: 58px;
        height: 58px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
        font-size: 1.1rem;
        cursor: pointer;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .mesa-mini:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 28px rgba(15, 23, 42, 0.18);
    }
    
    .mesa-livre { background: #10B981; }
    .mesa-ocupada { background: #EF4444; }
    .mesa-reservada { background: #F59E0B; }

    .mapa-legenda {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .mapa-legenda-item {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.82rem;
        color: #475569;
        font-weight: 700;
    }

    .mapa-legenda-dot {
        width: 12px;
        height: 12px;
        border-radius: 999px;
    }
    
    .producao-item {
        border-left: 4px solid #3b82f6;
        padding: 0.9rem 1rem;
        margin-bottom: 0.5rem;
        background: #f8fafc;
        border-radius: 0 12px 12px 0;
    }
    
    .producao-item.urgente {
        border-left-color: #ef4444;
        background: #fef2f2;
    }
    
    .tempo-espera {
        font-size: 0.85rem;
        color: #64748b;
    }
    
    .tempo-espera.urgente {
        color: #ef4444;
        font-weight: 600;
    }
    
    .origem-badge {
        font-size: 0.72rem;
        padding: 0.28rem 0.6rem;
        border-radius: 999px;
        font-weight: 700;
    }
    
    .origem-mesa { background: #dbeafe; color: #1e40af; }
    .origem-pdvweb { background: #fef3c7; color: #92400e; }
    .origem-delivery { background: #dcfce7; color: #166534; }
    
    .garcom-rank {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 10px;
    }
    
    .rank-1 { background: #fef3c7; color: #92400e; }
    .rank-2 { background: #e5e7eb; color: #374151; }
    .rank-3 { background: #fef3c7; color: #b45309; }
    .rank-other { background: #f3f4f6; color: #6b7280; }

    .quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .quick-actions .quick-action-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border-radius: 12px;
        padding: 0.68rem 0.95rem;
        font-weight: 700;
        color: #475569;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(148, 163, 184, 0.32);
        box-shadow: none;
        transition: all 0.18s ease;
    }

    .quick-actions .quick-action-link i {
        color: #2563eb;
    }

    .quick-actions .quick-action-link:hover,
    .quick-actions .quick-action-link:focus {
        color: #1e293b;
        background: #f8fbff;
        border-color: rgba(37, 99, 235, 0.34);
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
        transform: translateY(-1px);
    }

    .quick-actions .quick-action-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
    }

    .data-card .table {
        margin-bottom: 0;
    }

    .data-card .table thead th {
        color: #64748b;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom-width: 1px;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

    .data-card .table tbody td {
        vertical-align: middle;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .muted-placeholder {
        text-align: center;
        color: #94a3b8;
        padding: 1.4rem;
        font-weight: 600;
    }

    .refresh-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        color: #64748b;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .refresh-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #22c55e;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
    }

    @media (max-width: 991.98px) {
        .hero-actions,
        .refresh-meta {
            justify-content: flex-start;
        }
    }

    @media (max-width: 767.98px) {
        .food-dashboard {
            padding-top: 0.7rem;
        }

        .food-hero-title {
            font-size: 1.45rem;
        }

        .hero-pill {
            width: 100%;
            justify-content: center;
        }

        .btn-hero,
        .quick-actions .btn,
        .mesa-mini {
            min-height: 52px;
        }

        .mesa-mini {
            width: 54px;
            height: 54px;
        }

        .stat-value {
            font-size: 1.7rem;
        }

        .section-header {
            align-items: flex-start;
            flex-direction: column;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="food-dashboard">
<div class="container-fluid">
    <div class="food-hero">
        <div class="d-flex flex-wrap align-items-center gap-3">
            <div class="me-auto">
                <div class="food-hero-title"><i class="fas fa-chart-bar me-2 text-primary"></i>Dashboard Food</div>
            </div>
            <div class="hero-badges">
                <span class="hero-pill"><i class="fas fa-sync-alt"></i> Auto 30s</span>
                <span class="hero-pill warm"><i class="fas fa-bolt"></i> Operação rápida</span>
                <div class="refresh-meta ms-1">
                    <span class="refresh-dot"></span>
                    <span>Monitor ativo</span>
                    <span id="dashboard-last-update">Atualizando…</span>
                </div>
            </div>
            <div class="hero-actions">
                <a href="{{ url_for('food.delivery_painel') }}" class="btn btn-warning btn-hero">
                    <i class="fas fa-motorcycle me-1"></i>Delivery
                </a>
                <a href="{{ url_for('food.pdv_mesas') }}" class="btn btn-primary btn-hero">
                    <i class="fas fa-utensils me-1"></i>Controle de Mesas
                </a>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-12">
            <div class="section-shell p-3">
            <div class="quick-actions">
                <a href="{{ url_for('food.producao_cozinha') }}" class="btn quick-action-link">
                    <i class="fas fa-fire me-1"></i> Cozinha
                </a>
                <a href="{{ url_for('food.garcom_mobile') }}" class="btn quick-action-link">
                    <i class="fas fa-mobile-alt me-1"></i> Central App Garçom
                </a>
                <a href="{{ url_for('food.perfis_garcom_food') }}" class="btn quick-action-link">
                    <i class="fas fa-user-shield me-1"></i> Perfis App Garçom
                </a>
                <a href="{{ url_for('food.fichas_tecnicas') }}" class="btn quick-action-link">
                    <i class="fas fa-clipboard-list me-1"></i> Fichas Técnicas
                </a>
                <a href="{{ url_for('food.cadastro_entregadores') }}" class="btn quick-action-link">
                    <i class="fas fa-motorcycle me-1"></i> Entregadores
                </a>
                <a href="{{ url_for('food.configuracoes_mesas') }}" class="btn quick-action-link">
                    <i class="fas fa-cog me-1"></i> Config. Mesas
                </a>
                <a href="{{ url_for('food.configuracoes_balanca') }}" class="btn quick-action-link">
                    <i class="fas fa-weight me-1"></i> Config. Balança
                </a>
                <a href="{{ url_for('food.relatorio_comissao_garcom') }}" class="btn quick-action-link">
                    <i class="fas fa-user-tie me-1"></i> Comissão Garçom
                </a>
                <a href="{{ url_for('food.relatorio_historico_comandas') }}" class="btn quick-action-link">
                    <i class="fas fa-history me-1"></i> Histórico de Comandas
                </a>
                <a href="{{ url_for('food.mapa_atendimento_food') }}" class="btn quick-action-link">
                    <i class="fas fa-route me-1"></i> Mapa Atendimento
                </a>
            </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card card-stat">
                <div class="card-body d-flex align-items-center">
                    <div class="stat-icon bg-success bg-opacity-10 text-success me-3">
                        <i class="fas fa-chair"></i>
                    </div>
                    <div>
                        <div class="stat-label">Mesas Disponíveis</div>
                        <div class="stat-value" id="mesas-disponiveis">--</div>
                        <div class="stat-trace">Operação pronta para giro</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stat">
                <div class="card-body d-flex align-items-center">
                    <div class="stat-icon bg-danger bg-opacity-10 text-danger me-3">
                        <i class="fas fa-users"></i>
                    </div>
                    <div>
                        <div class="stat-label">Mesas Ocupadas</div>
                        <div class="stat-value" id="mesas-ocupadas">--</div>
                        <div class="stat-trace">Atendimento em andamento</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stat">
                <div class="card-body d-flex align-items-center">
                    <div class="stat-icon bg-primary bg-opacity-10 text-primary me-3">
                        <i class="fas fa-receipt"></i>
                    </div>
                    <div>
                        <div class="stat-label">Vendas Hoje</div>
                        <div class="stat-value" id="vendas-qtd">--</div>
                        <div class="stat-trace">Pedidos concluídos no dia</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stat">
                <div class="card-body d-flex align-items-center">
                    <div class="stat-icon bg-warning bg-opacity-10 text-warning me-3">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div>
                        <div class="stat-label">Faturamento Hoje</div>
                        <div class="stat-value" id="faturamento">R$ --</div>
                        <div class="stat-trace">Receita acumulada da operação</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card card-stat border-start border-4 border-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small"><i class="fas fa-utensils me-1"></i>Mesas</div>
                            <div class="fs-5 fw-bold" id="vendas-mesas-total">R$ --</div>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-primary" id="vendas-mesas-qtd">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stat border-start border-4 border-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small"><i class="fas fa-motorcycle me-1"></i>Delivery</div>
                            <div class="fs-5 fw-bold" id="vendas-delivery-total">R$ --</div>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-success" id="vendas-delivery-qtd">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stat border-start border-4 border-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small"><i class="fas fa-chart-line me-1"></i>Ticket Médio</div>
                            <div class="fs-5 fw-bold" id="ticket-medio">R$ --</div>
                        </div>
                        <div class="text-end">
                            <i class="fas fa-trending-up text-info fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stat border-start border-4 border-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small"><i class="fas fa-route me-1"></i>Em Rota</div>
                            <div class="fs-5 fw-bold" id="delivery-rota-card">0</div>
                        </div>
                        <div class="text-end">
                            <i class="fas fa-motorcycle text-success fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="section-shell data-card h-100">
                <div class="section-header">
                    <div>
                        <h5 class="section-title"><i class="fas fa-motorcycle me-2 text-success"></i>Status Delivery</h5>
                        <p class="section-subtitle">Fila rápida dos pedidos externos</p>
                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="display-6 fw-bold text-warning" id="delivery-pendentes">0</div>
                            <small class="text-muted">Pendentes/Preparo</small>
                        </div>
                        <div class="col-6">
                            <div class="display-6 fw-bold text-primary" id="delivery-rota">0</div>
                            <small class="text-muted">Em Rota</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="section-shell data-card h-100">
                <div class="section-header">
                    <div>
                        <h5 class="section-title"><i class="fas fa-user-tie me-2 text-primary"></i>Top Garçons/Atendentes</h5>
                        <p class="section-subtitle">Ranking do dia por volume e resultado</p>
                    </div>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Nome</th>
                                <th class="text-center">Vendas</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody id="top-garcons">
                            <tr><td colspan="4" class="text-center text-muted py-3">Carregando...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="section-shell data-card h-100">
                <div class="section-header">
                    <div>
                        <h5 class="section-title"><i class="fas fa-th me-2"></i>Mapa de Mesas</h5>
                        <p class="section-subtitle">Acesso rápido ao salão e ocupação atual</p>
                    </div>
                    <small class="text-muted fw-semibold">Clique para acessar</small>
                </div>
                <div class="card-body p-4">
                    <div class="mapa-legenda">
                        <span class="mapa-legenda-item"><span class="mapa-legenda-dot mesa-livre"></span>Livre</span>
                        <span class="mapa-legenda-item"><span class="mapa-legenda-dot mesa-ocupada"></span>Ocupada</span>
                        <span class="mapa-legenda-item"><span class="mapa-legenda-dot mesa-reservada"></span>Reservada</span>
                    </div>
                    <div class="d-flex flex-wrap gap-2" id="mapa-mesas">
                        <div class="muted-placeholder">Carregando...</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 mb-4">
            <div class="section-shell data-card h-100">
                <div class="section-header">
                    <div>
                        <h5 class="section-title"><i class="fas fa-fire me-2"></i>Produção (Cozinha)</h5>
                        <p class="section-subtitle">Pedidos que pedem ação imediata da equipe</p>
                    </div>
                    <a href="{{ url_for('food.producao_cozinha') }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
                        Ver Tudo
                    </a>
                </div>
                <div class="card-body p-4" id="producao-lista" style="max-height: 320px; overflow-y: auto;">
                    <div class="muted-placeholder">Carregando...</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="section-shell data-card">
                <div class="section-header">
                    <div>
                        <h5 class="section-title"><i class="fas fa-history me-2"></i>Últimas Vendas</h5>
                        <p class="section-subtitle">Últimos movimentos concluídos no módulo</p>
                    </div>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Origem</th>
                                <th>Hora</th>
                                <th class="text-center">Itens</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody id="ultimas-vendas">
                            <tr><td colspan="4" class="text-center text-muted">Carregando...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 mb-4">
            <div class="section-shell data-card">
                <div class="section-header">
                    <div>
                        <h5 class="section-title"><i class="fas fa-star me-2"></i>Produtos Mais Vendidos</h5>
                        <p class="section-subtitle">Itens com maior saída no dia</p>
                    </div>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Produto</th>
                                <th class="text-center">Qtd</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody id="produtos-top">
                            <tr><td colspan="3" class="text-center text-muted">Carregando...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    carregarDashboard();
    setInterval(carregarDashboard, 30000);
});

function atualizarMetaDashboard() {
    const el = document.getElementById('dashboard-last-update');
    if (!el) return;
    const agora = new Date();
    el.textContent = 'Atualizado às ' + agora.toLocaleTimeString('pt-BR', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
}

function formatarMoeda(valor) {
    return 'R$ ' + valor.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2});
}

function carregarDashboard() {
    fetch('/food/dashboard/dados')
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const d = data.dashboard;
                
                // Stats principais
                document.getElementById('mesas-disponiveis').textContent = d.mesas.livres;
                document.getElementById('mesas-ocupadas').textContent = d.mesas.ocupadas;
                document.getElementById('vendas-qtd').textContent = d.vendas_hoje.quantidade;
                document.getElementById('faturamento').textContent = formatarMoeda(d.vendas_hoje.total);
                
                // Vendas por origem
                document.getElementById('vendas-mesas-total').textContent = formatarMoeda(d.vendas_por_origem.mesas.total);
                document.getElementById('vendas-mesas-qtd').textContent = d.vendas_por_origem.mesas.qtd;
                document.getElementById('vendas-delivery-total').textContent = formatarMoeda(d.vendas_por_origem.delivery.total);
                document.getElementById('vendas-delivery-qtd').textContent = d.vendas_por_origem.delivery.qtd;
                
                // Ticket médio
                document.getElementById('ticket-medio').textContent = formatarMoeda(d.vendas_hoje.ticket_medio);
                
                // Delivery status
                document.getElementById('delivery-pendentes').textContent = d.delivery.pendentes;
                document.getElementById('delivery-rota').textContent = d.delivery.em_rota;
                const rotaCard = document.getElementById('delivery-rota-card');
                if (rotaCard) rotaCard.textContent = d.delivery.em_rota;
                
                // Top garçons
                const topGarconsEl = document.getElementById('top-garcons');
                if (d.top_garcons && d.top_garcons.length > 0) {
                    topGarconsEl.innerHTML = d.top_garcons.map((g, i) => {
                        const rankClass = i === 0 ? 'rank-1' : i === 1 ? 'rank-2' : i === 2 ? 'rank-3' : 'rank-other';
                        const medalha = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : (i + 1);
                        return `
                            <tr>
                                <td><span class="garcom-rank ${rankClass}">${medalha}</span></td>
                                <td>${g.nome}</td>
                                <td class="text-center">${g.qtd_vendas}</td>
                                <td class="text-end fw-bold">${formatarMoeda(g.total_vendido)}</td>
                            </tr>
                        `;
                    }).join('');
                } else {
                    topGarconsEl.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3">Nenhuma venda hoje</td></tr>';
                }
                
                // Produtos mais vendidos
                const produtosEl = document.getElementById('produtos-top');
                if (d.top_produtos && d.top_produtos.length > 0) {
                    produtosEl.innerHTML = d.top_produtos.slice(0, 5).map(p => `
                        <tr>
                            <td>${p.nome}</td>
                            <td class="text-center">${p.quantidade}</td>
                            <td class="text-end">${formatarMoeda(p.total)}</td>
                        </tr>
                    `).join('');
                } else {
                    produtosEl.innerHTML = '<tr><td colspan="3" class="text-center text-muted">Nenhum produto vendido</td></tr>';
                }
                
                // Últimas vendas
                const ultimasEl = document.getElementById('ultimas-vendas');
                if (d.ultimas_vendas && d.ultimas_vendas.length > 0) {
                    ultimasEl.innerHTML = d.ultimas_vendas.slice(0, 5).map(v => {
                        const origemOriginal = v.origem || '';
                        const origemLabel = origemOriginal === 'Balcão' ? 'PDV Web' : origemOriginal;
                        let origemClass = 'origem-mesa';
                        if (origemOriginal === 'Balcão' || origemOriginal === 'PDV Web') origemClass = 'origem-pdvweb';
                        if (origemOriginal === 'Delivery') origemClass = 'origem-delivery';
                        return `
                            <tr>
                                <td><span class="origem-badge ${origemClass}">${origemLabel}</span></td>
                                <td>${v.hora}</td>
                                <td class="text-center">${v.itens}</td>
                                <td class="text-end">${formatarMoeda(v.total)}</td>
                            </tr>
                        `;
                    }).join('');
                } else {
                    ultimasEl.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Nenhuma venda hoje</td></tr>';
                }

                atualizarMetaDashboard();
            }
        });
    
    // Mapa de mesas
    fetch('/food/mesas')
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const container = document.getElementById('mapa-mesas');
                if (data.mesas && data.mesas.length > 0) {
                    container.innerHTML = data.mesas.map(m => `
                        <div class="mesa-mini mesa-${m.status}" 
                             onclick="window.location.href='{{ url_for('food.pdv_mesas') }}'" title="Mesa ${m.numero} - ${m.status}">
                            ${m.numero}
                        </div>
                    `).join('');
                } else {
                    container.innerHTML = '<div class="muted-placeholder">Nenhuma mesa cadastrada</div>';
                }
            }
        });
    
    // Produção
    fetch('/food/producao/ordens?status=pendente,em_preparo')
        .then(r => r.json())
        .then(data => {
            if (data.success && data.ordens && data.ordens.length > 0) {
                const container = document.getElementById('producao-lista');
                container.innerHTML = data.ordens.slice(0, 5).map(o => {
                    const tempo = Math.floor((Date.now() - new Date(o.data_criacao).getTime()) / 60000);
                    const urgente = tempo > 15;
                    return `
                        <div class="producao-item ${urgente ? 'urgente' : ''}">
                            <div class="d-flex justify-content-between">
                                <strong>${o.mesa_label || (o.mesa_numero ? `Mesa ${o.mesa_numero}` : 'PDV Web')}</strong>
                                <span class="tempo-espera ${urgente ? 'urgente' : ''}">${tempo} min</span>
                            </div>
                            <div class="text-muted small">${o.produto_nome} x${o.quantidade}</div>
                        </div>
                    `;
                }).join('');
            } else {
                document.getElementById('producao-lista').innerHTML = 
                    '<div class="muted-placeholder">Nenhum pedido em produção</div>';
            }
        });
}
</script>
{% endblock %}