{% extends "base.html" %}

{% block title %}Vendas por Produto - CapeSystem{% endblock %}

{% block content %}
<!-- Cabeçalho -->
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-box-seam text-primary me-2"></i>Vendas por Produto</h4>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-success" onclick="exportarExcel()">
            <i class="bi bi-file-earmark-excel"></i> Excel
        </button>
        <button class="btn btn-outline-primary" onclick="window.print()">
            <i class="bi bi-printer"></i> Imprimir
        </button>
    </div>
</div>

<!-- Filtros -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-3">
        <form method="GET">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label form-label-sm text-muted mb-1">Empresa</label>
                    <select name="empresa_id" class="form-select form-select-sm">
                        {% 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>
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm text-muted mb-1">Data inicial</label>
                    <input type="date" name="data_inicio" class="form-control form-control-sm" value="{{ data_inicio.strftime('%Y-%m-%d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm text-muted mb-1">Data final</label>
                    <input type="date" name="data_fim" class="form-control form-control-sm" value="{{ data_fim.strftime('%Y-%m-%d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm text-muted mb-1">Grupo</label>
                    <select name="grupo" class="form-select form-select-sm">
                        <option value="">Todos os Grupos</option>
                        {% for g in grupos %}
                        <option value="{{ g.id }}" {% if grupo_id == g.id %}selected{% endif %}>{{ g.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-1">
                    <label class="form-label form-label-sm text-muted mb-1">Ordenar por</label>
                    <select name="classificar" class="form-select form-select-sm">
                        <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Código</option>
                        <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Nome</option>
                        <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Descrição</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label class="form-label form-label-sm text-muted mb-1">Ordem</label>
                    <select name="ordem" class="form-select form-select-sm">
                        <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Crescente</option>
                        <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Decrescente</option>
                    </select>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary btn-sm w-100">
                        <i class="bi bi-search"></i> Filtrar
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Resumo -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-primary text-white">
            <div class="card-body text-center">
                <h6 class="mb-1">Total de Itens</h6>
                <h3 class="mb-0">{{ resumo.total_itens }}</h3>
                <small>produtos vendidos</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-success text-white">
            <div class="card-body text-center">
                <h6 class="mb-1">Quantidade Total</h6>
                <h3 class="mb-0">{{ "%.2f"|format(resumo.quantidade_total) }}</h3>
                <small>unidades</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-info text-white">
            <div class="card-body text-center">
                <h6 class="mb-1">Faturamento</h6>
                <h3 class="mb-0">R$ {{ "%.2f"|format(resumo.faturamento) }}</h3>
                <small>valor total</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-warning text-dark">
            <div class="card-body text-center">
                <h6 class="mb-1">Lucro Bruto</h6>
                <h3 class="mb-0">R$ {{ "%.2f"|format(resumo.lucro_bruto) }}</h3>
                <small>{{ "%.1f"|format(resumo.margem) }}% margem</small>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Gráfico Top 10 -->
    <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-bar-chart text-primary"></i> Top 10 Produtos (Faturamento)</h5>
            </div>
            <div class="card-body">
                <canvas id="graficoTop10" style="max-height: 250px;"></canvas>
            </div>
        </div>
    </div>
    
    <!-- Gráfico por Grupo -->
    <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-pie-chart text-success"></i> Vendas por Grupo</h5>
            </div>
            <div class="card-body">
                <canvas id="graficoPorGrupo" style="max-height: 250px;"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Tabela de Produtos -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-list-ul"></i> Detalhamento por Produto</h5>
        <span class="badge bg-primary">{{ produtos|length }} produtos</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tabelaProdutos">
                <thead class="table-light cabecalho-colunas-preto">
                    <tr>
                        <th class="text-center">#</th>
                        <th>Código</th>
                        <th>Produto</th>
                        <th>Grupo</th>
                        <th class="text-end">Qtd</th>
                        <th class="text-end">Preço Médio</th>
                        <th class="text-end">Custo Médio</th>
                        <th class="text-end">Faturamento</th>
                        <th class="text-end">Custo Total</th>
                        <th class="text-end">Lucro</th>
                        <th class="text-end">Margem</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in produtos %}
                    <tr>
                        <td class="text-center">
                            {% if loop.index <= 3 %}
                            <span class="badge bg-warning text-dark">{{ loop.index }}º</span>
                            {% else %}
                            {{ loop.index }}
                            {% endif %}
                        </td>
                        <td><code>{{ p.codigo or '-' }}</code></td>
                        <td>
                            <strong>{{ p.nome[:40] }}</strong>
                            {% if p.nome|length > 40 %}...{% endif %}
                        </td>
                        <td>{{ p.grupo or '-' }}</td>
                        <td class="text-end">{{ "%.2f"|format(p.quantidade) }}</td>
                        <td class="text-end">R$ {{ "%.2f"|format(p.preco_medio) }}</td>
                        <td class="text-end text-muted">R$ {{ "%.2f"|format(p.custo_medio) }}</td>
                        <td class="text-end text-success fw-bold">R$ {{ "%.2f"|format(p.faturamento) }}</td>
                        <td class="text-end text-danger">R$ {{ "%.2f"|format(p.custo_total) }}</td>
                        <td class="text-end {% if p.lucro >= 0 %}text-success{% else %}text-danger{% endif %}">
                            R$ {{ "%.2f"|format(p.lucro) }}
                        </td>
                        <td class="text-end">
                            <span class="badge {% if p.margem >= 30 %}bg-success{% elif p.margem >= 15 %}bg-warning text-dark{% else %}bg-danger{% endif %}">
                                {{ "%.1f"|format(p.margem) }}%
                            </span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="11" class="text-center text-muted py-4">
                            Nenhuma venda no período selecionado
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light fw-bold">
                    <tr>
                        <td colspan="4">TOTAL</td>
                        <td class="text-end">{{ "%.2f"|format(resumo.quantidade_total) }}</td>
                        <td></td>
                        <td></td>
                        <td class="text-end text-success">R$ {{ "%.2f"|format(resumo.faturamento) }}</td>
                        <td class="text-end text-danger">R$ {{ "%.2f"|format(resumo.custo_total) }}</td>
                        <td class="text-end">R$ {{ "%.2f"|format(resumo.lucro_bruto) }}</td>
                        <td class="text-end">{{ "%.1f"|format(resumo.margem) }}%</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
<script src="{{ url_for('static', filename='vendor/chartjs/chart.umd.min.js') }}"></script>
<script>
const top10 = {{ dados_top10|tojson|safe }};
const porGrupo = {{ dados_por_grupo|tojson|safe }};

// Gráfico Top 10 - Barras verticais
if (top10 && top10.labels && top10.labels.length > 0) {
    new Chart(document.getElementById('graficoTop10').getContext('2d'), {
        type: 'bar',
        data: {
            labels: top10.labels,
            datasets: [{
                label: 'Faturamento (R$)',
                data: top10.valores,
                backgroundColor: 'rgba(13, 110, 253, 0.7)',
                borderColor: '#0d6efd',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: { 
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'R$ ' + value.toLocaleString('pt-BR');
                        }
                    }
                },
                x: {
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45
                    }
                }
            }
        }
    });
} else {
    document.getElementById('graficoTop10').parentElement.innerHTML = '<p class="text-center text-muted py-5">Sem dados para exibir</p>';
}

// Gráfico por Grupo
if (porGrupo && porGrupo.labels && porGrupo.labels.length > 0) {
    new Chart(document.getElementById('graficoPorGrupo').getContext('2d'), {
        type: 'doughnut',
        data: {
            labels: porGrupo.labels,
            datasets: [{
                data: porGrupo.valores,
                backgroundColor: [
                    '#0d6efd', '#198754', '#ffc107', '#dc3545', '#0dcaf0',
                    '#6c757d', '#fd7e14', '#20c997', '#6610f2', '#d63384'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: { position: 'right' }
            }
        }
    });
} else {
    document.getElementById('graficoPorGrupo').parentElement.innerHTML = '<p class="text-center text-muted py-5">Sem dados para exibir</p>';
}

function exportarExcel() {
    const table = document.getElementById('tabelaProdutos');
    const wb = XLSX.utils.table_to_book(table);
    XLSX.writeFile(wb, 'vendas_por_produto_{{ data_inicio.strftime("%Y%m%d") }}_{{ data_fim.strftime("%Y%m%d") }}.xlsx');
}
</script>
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>

<style>
.cabecalho-colunas-preto th {
    color: #000 !important;
}

@media print {
    .navbar, .sidebar, .btn, form { display: none !important; }
    .card { break-inside: avoid; }
    table { font-size: 10px; }
}
</style>
{% endblock %}