{% extends "base.html" %}

{% block title %}Ranking de Vendedor - CapeSystem{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-trophy text-warning me-2"></i>Ranking de Vendedor</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>

<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">Vendedor</label>
                    <select name="vendedor" class="form-select form-select-sm">
                        <option value="">Todos</option>
                        {% for item in vendedores_disponiveis %}
                        <option value="{{ item.referencia }}" {% if vendedor_ref == item.referencia %}selected{% endif %}>{{ item.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="faturamento" {% if classificar == 'faturamento' %}selected{% endif %}>Fat.</option>
                        <option value="quantidade" {% if classificar == 'quantidade' %}selected{% endif %}>Vendas</option>
                        <option value="ticket" {% if classificar == 'ticket' %}selected{% endif %}>Ticket</option>
                        <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Nome</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="desc" {% if ordem == 'desc' %}selected{% endif %}>Desc.</option>
                        <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Asc.</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>

<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">Vendedores no ranking</h6>
                <h3 class="mb-0">{{ resumo.total_vendedores }}</h3>
                <small>com vendas no período</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">Total de vendas</h6>
                <h3 class="mb-0">{{ resumo.total_vendas }}</h3>
                <small>documentos contabilizados</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 vendido</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">Ticket médio</h6>
                <h3 class="mb-0">R$ {{ "%.2f"|format(resumo.ticket_medio) }}</h3>
                <small>média por venda</small>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <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 vendedores</h5>
            </div>
            <div class="card-body">
                <canvas id="graficoTop10" style="max-height: 250px;"></canvas>
            </div>
        </div>
    </div>
    <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> Participação no faturamento</h5>
            </div>
            <div class="card-body">
                <canvas id="graficoShare" style="max-height: 250px;"></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 detalhado</h5>
        <span class="badge bg-primary">{{ ranking|length }} vendedores</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tabelaRankingVendedor">
                <thead class="table-light cabecalho-colunas-preto">
                    <tr>
                        <th class="text-center">#</th>
                        <th>Código</th>
                        <th>Vendedor</th>
                        <th>Origem</th>
                        <th class="text-end">Qtd. Vendas</th>
                        <th class="text-end">Faturamento</th>
                        <th class="text-end">Ticket Médio</th>
                        <th class="text-end">Participação</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in ranking %}
                    <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>{{ item.codigo or '-' }}</code></td>
                        <td>
                            <strong>{{ item.nome }}</strong>
                        </td>
                        <td>
                            {% if item.tipo == 'pessoa' %}
                            <span class="badge bg-info-subtle text-info-emphasis">Cadastro</span>
                            {% elif item.tipo == 'usuario' %}
                            <span class="badge bg-secondary-subtle text-secondary-emphasis">Usuário</span>
                            {% else %}
                            <span class="badge bg-light text-dark">Sem vínculo</span>
                            {% endif %}
                        </td>
                        <td class="text-end">{{ item.qtd_vendas }}</td>
                        <td class="text-end text-success fw-bold">R$ {{ "%.2f"|format(item.faturamento) }}</td>
                        <td class="text-end">R$ {{ "%.2f"|format(item.ticket_medio) }}</td>
                        <td class="text-end">
                            <span class="badge bg-primary">{{ "%.2f"|format(item.participacao) }}%</span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">Nenhuma venda encontrada para os filtros informados</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light fw-bold">
                    <tr>
                        <td colspan="4">TOTAL</td>
                        <td class="text-end">{{ resumo.total_vendas }}</td>
                        <td class="text-end text-success">R$ {{ "%.2f"|format(resumo.faturamento) }}</td>
                        <td class="text-end">R$ {{ "%.2f"|format(resumo.ticket_medio) }}</td>
                        <td class="text-end">100,00%</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 share = {{ dados_share|tojson|safe }};

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.75)',
                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>';
}

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

function exportarExcel() {
    const tabela = document.getElementById('tabelaRankingVendedor');
    const wb = XLSX.utils.table_to_book(tabela);
    XLSX.writeFile(wb, 'ranking_vendedor_{{ 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 %}