{% extends "base.html" %}

{% block title %}Painel Executivo - CapeSystem{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-speedometer2 text-primary"></i> Painel Executivo</h1>
    <div class="d-flex gap-2">
        <select id="empresaFiltro" class="form-select" style="width: 260px;" onchange="atualizarPeriodo()">
            {% for emp in empresas_disponiveis %}
            <option value="{{ emp.id }}" {% if empresa_id_selecionada == emp.id %}selected{% endif %}>
                {{ emp.nome or ('Empresa ' ~ emp.id) }}
            </option>
            {% endfor %}
        </select>
        <select id="periodoFiltro" class="form-select" style="width: 200px;" onchange="atualizarPeriodo()">
            <option value="hoje" {% if periodo == 'hoje' %}selected{% endif %}>Hoje</option>
            <option value="semana" {% if periodo == 'semana' %}selected{% endif %}>Esta Semana</option>
            <option value="mes" {% if periodo == 'mes' or not periodo %}selected{% endif %}>Este Mês</option>
            <option value="ano" {% if periodo == 'ano' %}selected{% endif %}>Este Ano</option>
        </select>
        <button class="btn btn-outline-primary" onclick="window.print()">
            <i class="bi bi-printer"></i> Imprimir
        </button>
    </div>
</div>

<!-- KPIs Principais -->
<div class="row mb-4">
    <!-- Faturamento -->
    <div class="col-md-3 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="text-muted mb-1">Faturamento</h6>
                        <h3 class="mb-0 text-success">R$ {{ "%.2f"|format(kpis.faturamento_total) }}</h3>
                        <small class="text-muted">{{ kpis.total_vendas }} vendas</small>
                    </div>
                    <div class="bg-success-subtle p-3 rounded">
                        <i class="bi bi-currency-dollar text-success fs-4"></i>
                    </div>
                </div>
                {% if kpis.variacao_faturamento != 0 %}
                <div class="mt-2">
                    <span class="badge {% if kpis.variacao_faturamento > 0 %}bg-success{% else %}bg-danger{% endif %}">
                        <i class="bi bi-arrow-{% if kpis.variacao_faturamento > 0 %}up{% else %}down{% endif %}"></i>
                        {{ "%.1f"|format(kpis.variacao_faturamento|abs) }}% vs período anterior
                    </span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Ticket Médio -->
    <div class="col-md-3 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="text-muted mb-1">Ticket Médio</h6>
                        <h3 class="mb-0 text-primary">R$ {{ "%.2f"|format(kpis.ticket_medio) }}</h3>
                        <small class="text-muted">por venda</small>
                    </div>
                    <div class="bg-primary-subtle p-3 rounded">
                        <i class="bi bi-receipt text-primary fs-4"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Contas a Receber -->
    <div class="col-md-3 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="text-muted mb-1">A Receber</h6>
                        <h3 class="mb-0 text-info">R$ {{ "%.2f"|format(kpis.total_a_receber) }}</h3>
                        <small class="text-danger">{{ kpis.total_vencido }} vencido</small>
                    </div>
                    <div class="bg-info-subtle p-3 rounded">
                        <i class="bi bi-wallet2 text-info fs-4"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Contas a Pagar -->
    <div class="col-md-3 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="text-muted mb-1">A Pagar</h6>
                        <h3 class="mb-0 text-warning">R$ {{ "%.2f"|format(kpis.total_a_pagar) }}</h3>
                        <small class="text-muted">próximos 30 dias</small>
                    </div>
                    <div class="bg-warning-subtle p-3 rounded">
                        <i class="bi bi-credit-card text-warning fs-4"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Gráficos e Tabelas -->
<div class="row mb-4">
    <!-- Gráfico de Vendas por Dia -->
    <div class="col-md-8 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0">
                <h5 class="mb-0"><i class="bi bi-graph-up text-primary"></i> Evolução de Vendas</h5>
            </div>
            <div class="card-body">
                <div style="position: relative; height: 250px;">
                    <canvas id="graficoVendas"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Top Produtos -->
    <div class="col-md-4 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 d-flex justify-content-between">
                <h5 class="mb-0"><i class="bi bi-trophy text-warning"></i> Top 5 Produtos</h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    {% for produto in top_produtos %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge bg-primary me-2">{{ loop.index }}º</span>
                            {{ produto.nome[:30] }}{% if produto.nome|length > 30 %}...{% endif %}
                        </div>
                        <div class="text-end">
                            <strong class="text-success">R$ {{ "%.2f"|format(produto.total) }}</strong>
                            <br><small class="text-muted">{{ produto.qtd }} un</small>
                        </div>
                    </div>
                    {% else %}
                    <div class="list-group-item text-center text-muted">
                        Nenhuma venda no período
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Formas de Pagamento -->
    <div class="col-md-4 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0">
                <h5 class="mb-0"><i class="bi bi-pie-chart text-info"></i> Formas de Pagamento</h5>
            </div>
            <div class="card-body">
                <div style="position: relative; height: 200px;">
                    <canvas id="graficoPagamentos"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Vendas por Vendedor -->
    <div class="col-md-4 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0">
                <h5 class="mb-0"><i class="bi bi-people text-success"></i> Vendas por Vendedor</h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    {% for vendedor in vendedores %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <i class="bi bi-person-circle text-primary me-2"></i>
                            {{ vendedor.nome[:25] }}{% if vendedor.nome|length > 25 %}...{% endif %}
                        </div>
                        <div class="text-end">
                            <strong class="text-success">R$ {{ "%.2f"|format(vendedor.total) }}</strong>
                            <br><small class="text-muted">{{ vendedor.qtd }} vendas</small>
                        </div>
                    </div>
                    {% else %}
                    <div class="list-group-item text-center text-muted">
                        Nenhuma venda no período
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Alertas -->
    <div class="col-md-4 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0">
                <h5 class="mb-0"><i class="bi bi-exclamation-triangle text-danger"></i> Alertas</h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    {% if alertas.estoque_baixo > 0 %}
                    <a href="{{ url_for('estoque_controle') }}?filtro=baixo" class="list-group-item list-group-item-action list-group-item-warning">
                        <i class="bi bi-box-seam me-2"></i>
                        <strong>{{ alertas.estoque_baixo }}</strong> produtos com estoque baixo
                    </a>
                    {% endif %}
                    {% if alertas.contas_vencidas > 0 %}
                    <a href="{{ url_for('contas_receber') }}?status=vencido" class="list-group-item list-group-item-action list-group-item-danger">
                        <i class="bi bi-calendar-x me-2"></i>
                        <strong>{{ alertas.contas_vencidas }}</strong> contas vencidas
                    </a>
                    {% endif %}
                    {% if alertas.certificados_vencendo > 0 %}
                    <a href="{{ url_for('certificados') }}" class="list-group-item list-group-item-action list-group-item-info">
                        <i class="bi bi-shield-exclamation me-2"></i>
                        <strong>{{ alertas.certificados_vencendo }}</strong> certificados vencendo
                    </a>
                    {% endif %}
                    {% if alertas.estoque_baixo == 0 and alertas.contas_vencidas == 0 and alertas.certificados_vencendo == 0 %}
                    <div class="list-group-item text-center text-success">
                        <i class="bi bi-check-circle me-2"></i> Nenhum alerta pendente
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tabela de Últimas Vendas -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-clock-history text-secondary"></i> Últimas Vendas</h5>
        <a href="{{ url_for('vendas') }}" class="btn btn-sm btn-outline-primary">Ver todas</a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Data</th>
                        <th>Cliente</th>
                        <th>Itens</th>
                        <th class="text-end">Valor</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for venda in ultimas_vendas %}
                    <tr>
                        <td>{{ venda.data_venda.strftime('%d/%m %H:%M') }}</td>
                        <td>
                            {% if venda.pessoa %}
                                {{ venda.pessoa.nome[:30] }}
                            {% elif venda.cliente %}
                                {{ venda.cliente.nome[:30] }}
                            {% else %}
                                <span class="text-muted">Consumidor</span>
                            {% endif %}
                        </td>
                        <td>{{ venda.itens|length }} itens</td>
                        <td class="text-end"><strong>R$ {{ "%.2f"|format(venda.valor_total) }}</strong></td>
                        <td>
                            {% if venda.status == 'finalizada' %}
                                <span class="badge bg-success">Finalizada</span>
                            {% elif venda.status == 'pendente' %}
                                <span class="badge bg-warning">Pendente</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ venda.status }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">
                            Nenhuma venda no período
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='vendor/chartjs/chart.umd.min.js') }}"></script>
<script>
// Dados para gráficos
const dadosVendas = {{ dados_grafico_vendas|tojson|safe }};
const dadosPagamentos = {{ dados_grafico_pagamentos|tojson|safe }};

// Gráfico de Evolução de Vendas
const ctxVendas = document.getElementById('graficoVendas').getContext('2d');
new Chart(ctxVendas, {
    type: 'line',
    data: {
        labels: dadosVendas.labels,
        datasets: [{
            label: 'Faturamento (R$)',
            data: dadosVendas.valores,
            borderColor: '#0d6efd',
            backgroundColor: 'rgba(13, 110, 253, 0.1)',
            fill: true,
            tension: 0.3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        plugins: {
            legend: { display: false }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'R$ ' + value.toLocaleString('pt-BR');
                    }
                }
            }
        }
    }
});

// Gráfico de Formas de Pagamento
const ctxPagamentos = document.getElementById('graficoPagamentos').getContext('2d');
new Chart(ctxPagamentos, {
    type: 'doughnut',
    data: {
        labels: dadosPagamentos.labels,
        datasets: [{
            data: dadosPagamentos.valores,
            backgroundColor: [
                '#198754', '#0dcaf0', '#ffc107', '#dc3545', '#6c757d', '#0d6efd'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        plugins: {
            legend: { position: 'bottom' }
        }
    }
});

function atualizarPeriodo() {
    const periodo = document.getElementById('periodoFiltro').value;
    const empresaId = document.getElementById('empresaFiltro').value;
    const params = new URLSearchParams();
    params.set('periodo', periodo);
    if (empresaId) {
        params.set('empresa_id', empresaId);
    }
    window.location.href = '{{ url_for("painel_executivo") }}?' + params.toString();
}
</script>

<style>
@media print {
    .navbar, .sidebar, .btn, select { display: none !important; }
    .card { break-inside: avoid; }
}
</style>
{% endblock %}