{% extends "base.html" %}

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-bookmark-star text-primary"></i> Vendas por Cota</h1>
    <div class="d-flex gap-2">
        <form class="d-flex gap-2" method="GET">
            <select name="empresa_id" class="form-select" style="width: 260px;">
                {% 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>
            <input type="date" name="data_inicio" class="form-control" value="{{ data_inicio.strftime('%Y-%m-%d') }}" style="width: 150px;">
            <input type="date" name="data_fim" class="form-control" value="{{ data_fim.strftime('%Y-%m-%d') }}" style="width: 150px;">
            <select name="classificar" class="form-select" style="width: 150px;">
                <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Faturamento</option>
                <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Cota</option>
                <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Cota</option>
            </select>
            <select name="ordem" class="form-select" style="width: 140px;">
                <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Decrescente</option>
                <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Crescente</option>
            </select>
            <div class="form-check d-flex align-items-center px-2 border rounded">
                <input class="form-check-input me-2" type="checkbox" value="1" id="incluirSemCota" name="incluir_sem_cota" {% if incluir_sem_cota %}checked{% endif %}>
                <label class="form-check-label small" for="incluirSemCota">Sem cota</label>
            </div>
            <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
        </form>
        <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>

<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 Cotas</h6>
                <h3 class="mb-0">{{ resumo.total_cotas }}</h3>
                <small>agrupamentos 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">
    <div class="col-md-12">
        <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 Cotas (Faturamento)</h5>
            </div>
            <div class="card-body">
                <canvas id="graficoTop10Cotas" style="max-height: 260px;"></canvas>
            </div>
        </div>
    </div>
</div>

<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-ol"></i> Ranking por Cota</h5>
        <span class="badge bg-primary">{{ cotas|length }} cotas</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tabelaCotas">
                <thead class="table-light cabecalho-colunas-preto">
                    <tr>
                        <th class="text-center">#</th>
                        <th>Cota</th>
                        <th class="text-center">Produtos</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 item in cotas %}
                    <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><strong>{{ item.cota }}</strong></td>
                        <td class="text-center">{{ item.total_produtos }}</td>
                        <td class="text-end">{{ "%.2f"|format(item.quantidade) }}</td>
                        <td class="text-end">R$ {{ "%.2f"|format(item.preco_medio) }}</td>
                        <td class="text-end text-muted">R$ {{ "%.2f"|format(item.custo_medio) }}</td>
                        <td class="text-end text-success fw-bold">R$ {{ "%.2f"|format(item.faturamento) }}</td>
                        <td class="text-end text-danger">R$ {{ "%.2f"|format(item.custo_total) }}</td>
                        <td class="text-end {% if item.lucro >= 0 %}text-success{% else %}text-danger{% endif %}">
                            R$ {{ "%.2f"|format(item.lucro) }}
                        </td>
                        <td class="text-end">
                            <span class="badge {% if item.margem >= 30 %}bg-success{% elif item.margem >= 15 %}bg-warning text-dark{% else %}bg-danger{% endif %}">
                                {{ "%.1f"|format(item.margem) }}%
                            </span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="10" class="text-center text-muted py-4">
                            Nenhuma venda encontrada para as cotas no período selecionado
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light fw-bold">
                    <tr>
                        <td colspan="3">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 top10Cotas = {{ dados_top10|tojson|safe }};

if (top10Cotas && top10Cotas.labels && top10Cotas.labels.length > 0) {
    new Chart(document.getElementById('graficoTop10Cotas').getContext('2d'), {
        type: 'bar',
        data: {
            labels: top10Cotas.labels,
            datasets: [{
                label: 'Faturamento (R$)',
                data: top10Cotas.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: 35,
                        minRotation: 35
                    }
                }
            }
        }
    });
} else {
    document.getElementById('graficoTop10Cotas').parentElement.innerHTML = '<p class="text-center text-muted py-5">Sem dados para exibir</p>';
}

function exportarExcel() {
    const table = document.getElementById('tabelaCotas');
    const wb = XLSX.utils.table_to_book(table);
    XLSX.writeFile(wb, 'vendas_por_cota_{{ data_inicio.strftime("%Y%m%d") }}_{{ data_fim.strftime("%Y%m%d") }}.xlsx');
}
</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 %}