<?php
/**
 * Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
 * (parte do Premium Express BI - Fire Sistemas)
 *
 * Vendas / Por Marca — shell instantâneo + fetch JSON em /api/vendas/por-marca
 * Paridade com a tela "Por Vendedor": KPIs + ranking horizontal + tabela.
 *
 * Importante: ITENS.COD_MARCA → MARCA.DESCRICAO. Quando o cadastro do ERP não
 * tiver a marca preenchida (caso do Real Prime), as vendas caem no bucket
 * "(sem marca)" — a tela mostra isso de boa fé.
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-tags me-2 text-accent"></i>Vendas por Marca</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<?php $actionUrl = '/vendas/por-marca'; $mostrarVendedor = false; include __DIR__ . '/_filtro.php'; ?>

<!-- KPIs (4) -->
<div class="pbi-kpi-grid mb-4" id="kpi-grid">
    <?php for ($i = 0; $i < 4; $i++): ?>
    <div class="pbi-kpi-card">
        <div class="pbi-kpi-label pbi-skeleton" style="width:60%;height:.8rem;border-radius:4px">&nbsp;</div>
        <div class="pbi-kpi-value pbi-skeleton mt-2" style="width:80%;height:1.6rem;border-radius:4px">&nbsp;</div>
    </div>
    <?php endfor; ?>
</div>
<div class="pbi-hint mb-3" style="margin-top:0">
    <strong>Marca</strong> = fabricante/marca cadastrada no produto do ERP.
    <strong>Part.%</strong> = quanto cada marca representa do faturamento total no período.
    <strong>Itens</strong> = soma das quantidades vendidas. Quando o cadastro do ERP não tiver marca
    preenchida, as vendas aparecem no bucket <em>(sem marca)</em>.
</div>

<!-- Ranking visual + Donut -->
<div class="row g-3 mb-3">
    <div class="col-12 col-lg-7">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-bar-chart-line me-2"></i>Ranking visual (Top 10)</div>
            <div id="chart-ranking" style="height:420px"></div>
        </div>
    </div>
    <div class="col-12 col-lg-5">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-pie-chart me-2"></i>Participação no faturamento</div>
            <div id="chart-donut" style="height:420px"></div>
        </div>
    </div>
</div>

<!-- Tabela completa -->
<div class="pbi-card" id="card-tabela">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-table me-2"></i>Ranking detalhado</span>
        <small class="text-muted" id="tabela-badge">
            <span class="pbi-skeleton d-inline-block" style="width:80px;height:.75rem;border-radius:3px">&nbsp;</span>
        </small>
    </div>
    <div id="tabela-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>#</th>
                    <th>Marca</th>
                    <th class="text-end">Notas</th>
                    <th class="text-end">Itens</th>
                    <th class="text-end">Ticket Médio</th>
                    <th class="text-end">Faturamento</th>
                    <th style="width:120px">Part.%</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php foreach ([20,180,45,55,80,90,80] as $w): ?>
                    <td><span class="pbi-skeleton d-inline-block" style="width:<?= $w ?>px;height:.75rem;border-radius:3px">&nbsp;</span></td>
                    <?php endforeach; ?>
                </tr>
                <?php endfor; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="/assets/js/echarts.min.js?v=<?= \App\Core\Versao::ATUAL ?>"></script>
<?php /* Libs de exportação (idempotente — só carrega 1x por página) */ ?>
<?php if (empty($GLOBALS['__pbi_export_loaded'])): $GLOBALS['__pbi_export_loaded'] = true; ?>
<script src="/vendor/export/jspdf.umd.min.js"></script>
<script src="/vendor/export/jspdf.plugin.autotable.min.js"></script>
<script src="/assets/libs/xlsx-js-style.min.js"></script>
<script src="/assets/js/export-relatorio-premium.js?v=<?= \App\Core\Versao::ATUAL ?>"></script>
<?php endif; ?>
<script>
window.__VENDAS_GM = {
    dataIni: <?= json_encode($filtros['data_ini']) ?>,
    dataFim: <?= json_encode($filtros['data_fim']) ?>,
    actionUrl: <?= json_encode($actionUrl) ?>,
    endpoint: '/api/vendas/por-marca',
    labelSingular: 'marca',
    labelPlural:   'marcas',
    rotuloColuna:  'Marca'
};
</script>

<style>
@keyframes pbi-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.pbi-skeleton { background:var(--pbi-border,#e2e8f0); animation:pbi-pulse 1.4s ease-in-out infinite; pointer-events:none; color:transparent!important; }
</style>

<?php include __DIR__ . '/_por-grupo-marca.js.php'; ?>
