<?php
/**
 * ================================================================================
 * Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
 * ================================================================================
 * Financeiro / Mix de Pagamento — TODAS as formas que movimentaram caixa.
 *
 * Diferença vs telas existentes:
 *  - SEM filtro de operação (override venda) — espelha o relatório do ERP
 *  - Agrupa em 8 categorias lógicas (Dinheiro, Cartão Débito, Cartão Crédito,
 *    Pix, A Prazo, Cheque, Delivery, Cortesia, Outros)
 *  - Mostra também a lista nua de formas individuais (15-ish)
 * ================================================================================
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-credit-card-2-front me-2 text-accent"></i>Mix de Pagamento</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<form method="get" action="/financeiro/mix-pagamento" class="pbi-filtro-barra mb-3" id="mpFiltro">
    <div class="pbi-filtro-row">
        <div class="pbi-filtro-field"><label class="pbi-filtro-label">De</label>
            <input type="date" name="data_ini" value="<?= \App\Core\View::e($filtros['dataIni'] ?? '') ?>" class="pbi-filtro-input form-control"></div>
        <div class="pbi-filtro-field"><label class="pbi-filtro-label">Até</label>
            <input type="date" name="data_fim" value="<?= \App\Core\View::e($filtros['dataFim'] ?? '') ?>" class="pbi-filtro-input form-control"></div>
        <button type="submit" class="pbi-btn-filtrar btn"><i class="bi bi-funnel me-1"></i>Filtrar</button>
    </div>
</form>

<div class="pbi-hint mb-3" style="margin-top:0">
    Todas as formas que entraram no caixa no período. <strong>Visão fiel ao ERP Fire Sistemas</strong> — inclui cortesia, crediário e delivery (que ficam de fora do "Mix por Vendas"). Variações de capitalização ("Pix"/"PIX") são unificadas.
</div>

<!-- KPIs -->
<div class="pbi-kpi-grid mb-4">
    <div class="pbi-kpi-card"><div class="pbi-kpi-label">Total no período</div><div class="pbi-kpi-value" id="mpK_total">—</div></div>
    <div class="pbi-kpi-card"><div class="pbi-kpi-label">Formas distintas</div><div class="pbi-kpi-value" id="mpK_formas">—</div></div>
    <div class="pbi-kpi-card"><div class="pbi-kpi-label">Grupos</div><div class="pbi-kpi-value" id="mpK_grupos">—</div></div>
    <div class="pbi-kpi-card" style="border-left:4px solid #ec4899"><div class="pbi-kpi-label">Cortesia</div><div class="pbi-kpi-value" id="mpK_cortesia" style="color:#ec4899">R$ 0,00</div></div>
</div>

<div class="row g-3">
    <!-- Donut por grupo -->
    <div class="col-12 col-lg-5">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-pie-chart-fill me-2"></i> Por grupo (8 categorias)</div>
            <div id="mpChart" style="height:340px"></div>
        </div>
    </div>
    <!-- Tabela por grupo -->
    <div class="col-12 col-lg-7">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-stack me-2"></i> Ranking por grupo</div>
            <div class="table-responsive">
                <table class="table pbi-table mb-0">
                    <thead><tr><th>Grupo</th><th class="text-end">Qtd</th><th class="text-end">Valor</th><th class="text-end">% do total</th></tr></thead>
                    <tbody id="mpGruposBody"><tr><td colspan="4" class="text-center py-4 text-muted"><i class="bi bi-hourglass-split"></i> Carregando…</td></tr></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Tabela detalhada por forma individual -->
<div class="pbi-card mt-3">
    <div class="pbi-card-header"><i class="bi bi-list-ul me-2"></i> Detalhe — todas as formas individuais (fiel ao ERP Fire Sistemas)</div>
    <div class="table-responsive">
        <table class="table pbi-table mb-0">
            <thead><tr><th style="width:60px">Cód</th><th>Forma</th><th class="text-end">Qtd</th><th class="text-end">Valor</th><th class="text-end">% do total</th></tr></thead>
            <tbody id="mpDetalheBody"><tr><td colspan="5" class="text-center py-4 text-muted">—</td></tr></tbody>
        </table>
    </div>
</div>

<div id="mpErro" class="alert alert-danger mt-3" style="display:none"></div>

<script src="/assets/js/echarts.min.js"></script>
<script>
(function () {
    const fmtBR  = (n) => 'R$ ' + Number(n || 0).toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    const fmtInt = (n) => Number(n || 0).toLocaleString('pt-BR');
    const fmtPct = (n) => Number(n || 0).toFixed(1) + '%';
    const $ = (id) => document.getElementById(id);

    function apiFetch(url) {
        return fetch(url, {credentials:'same-origin'})
            .then(r => r.ok ? r.json() : r.json().then(j => Promise.reject(j.erro || r.statusText)));
    }

    let chart = null;

    function carregar() {
        const di = document.querySelector('[name=data_ini]').value;
        const df = document.querySelector('[name=data_fim]').value;
        const qs = new URLSearchParams({data_ini:di, data_fim:df});

        $('mpErro').style.display = 'none';
        $('mpGruposBody').innerHTML = '<tr><td colspan="4" class="text-center py-4 text-muted"><i class="bi bi-hourglass-split"></i> Analisando…</td></tr>';
        $('mpDetalheBody').innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted"><i class="bi bi-hourglass-split"></i> Analisando…</td></tr>';

        apiFetch('/api/financeiro/mix-pagamento?' + qs.toString()).then(data => {
            const tot = Number(data.total || 0);
            const grupos = data.grupos || [];
            const detalhe = data.detalhe || [];

            $('mpK_total').textContent  = fmtBR(tot);
            $('mpK_formas').textContent = fmtInt(detalhe.length);
            $('mpK_grupos').textContent = fmtInt(grupos.length);

            const cortesia = grupos.find(g => g.GRUPO.includes('Cortesia'));
            $('mpK_cortesia').textContent = fmtBR(cortesia ? cortesia.VALOR : 0);

            // Donut
            if (typeof echarts !== 'undefined') {
                if (!chart) chart = echarts.init($('mpChart'));
                chart.setOption({
                    tooltip: { trigger:'item', formatter: p => `<strong>${p.name}</strong><br>${fmtBR(p.value)} (${p.percent}%)` },
                    legend: { bottom: 0, left: 'center' },
                    series: [{
                        type:'pie', radius:['45%','70%'], avoidLabelOverlap:true,
                        itemStyle: { borderRadius:4, borderColor:'#fff', borderWidth:2 },
                        label: { show:false },
                        data: grupos.map(g => ({ name: g.GRUPO, value: g.VALOR }))
                    }]
                }, true);
            }

            // Tabela por grupo
            if (grupos.length === 0) {
                $('mpGruposBody').innerHTML = '<tr><td colspan="4" class="text-center py-4 text-muted">Nenhum dado no período.</td></tr>';
            } else {
                $('mpGruposBody').innerHTML = grupos.map(g => {
                    const pct = tot > 0 ? (g.VALOR / tot) * 100 : 0;
                    return `<tr>
                        <td><strong>${g.GRUPO}</strong> <span class="text-muted small">${g.FORMAS.map(f=>f.nome).join(', ')}</span></td>
                        <td class="text-end">${fmtInt(g.QTD)}</td>
                        <td class="text-end"><strong>${fmtBR(g.VALOR)}</strong></td>
                        <td class="text-end">${fmtPct(pct)}</td>
                    </tr>`;
                }).join('');
            }

            // Tabela detalhada
            if (detalhe.length === 0) {
                $('mpDetalheBody').innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted">—</td></tr>';
            } else {
                $('mpDetalheBody').innerHTML = detalhe.map(r => {
                    const pct = tot > 0 ? (r.VALOR / tot) * 100 : 0;
                    return `<tr>
                        <td><small class="text-muted">${r.COD ?? '—'}</small></td>
                        <td>${r.FORMA}</td>
                        <td class="text-end">${fmtInt(r.QTD)}</td>
                        <td class="text-end">${fmtBR(r.VALOR)}</td>
                        <td class="text-end">${fmtPct(pct)}</td>
                    </tr>`;
                }).join('');
            }
        }).catch(e => {
            $('mpGruposBody').innerHTML = '';
            $('mpDetalheBody').innerHTML = '';
            $('mpErro').textContent = 'Erro: ' + e;
            $('mpErro').style.display = '';
        });
    }

    $('mpFiltro').addEventListener('submit', (e) => { e.preventDefault(); carregar(); });
    carregar();
    window.addEventListener('resize', () => chart && chart.resize());
})();
</script>
