<?php
/**
 * Pessoal / Comissões — shell instantâneo.
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-cash-coin me-2 text-accent"></i>Pessoal</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<form method="get" action="/pessoal/comissoes" class="pbi-filtro-barra mb-3">
    <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"><strong>Comissão</strong> = valor pago ao garçom sobre o que ele vendeu no período. <strong>Taxa de Serviço</strong> = os 10% cobrados na conta do cliente.</div>

<!-- ── KPIs skeleton ─────────────────────────────────────────────────────── -->
<div class="pbi-kpi-grid mb-4" id="kpi-grid">
    <?php for ($i = 0; $i < 3; $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>

<!-- ── Gráfico (async) ───────────────────────────────────────────────────── -->
<div id="chart-container" style="display:none!important">
    <div class="pbi-card mb-4">
        <div class="pbi-card-header"><i class="bi bi-bar-chart me-2"></i>Faturamento × Comissão por Garçom
            <div class="pbi-hint mb-2" style="margin-top:0">Compara, lado a lado, quanto cada garçom vendeu (faturamento) e quanto vai receber de comissão.</div>
        </div>
        <div id="chartComissoes" style="height:300px"></div>
    </div>
</div>

<!-- ── Tabela (async) ────────────────────────────────────────────────────── -->
<div class="pbi-card" id="card-comissoes">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-cash-coin me-2"></i>Comissões por Garçom</span>
        <small class="text-muted" id="com-badge">
            <span class="pbi-skeleton d-inline-block" style="width:80px;height:.75rem;border-radius:3px">&nbsp;</span>
        </small>
        <div class="pbi-hint mb-2" style="margin-top:0"><strong>% Comissão</strong> = percentual combinado com o garçom. <strong>Comissão Calculada</strong> = quanto ele recebe (faturamento × %). <strong>Tx. Serviço</strong> = parte dos 10% da conta.</div>
    </div>
    <div id="com-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>#</th><th>Garçom</th>
                    <th class="text-end">% Comissão</th>
                    <th class="text-end">Faturamento</th>
                    <th class="text-end">Comissão Calculada</th>
                    <th class="text-end">Tx. Serviço</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 6; $i++): ?>
                <tr>
                    <?php foreach ([30,130,60,80,90,70] 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>
window.__PESSOAL_COM = {
    dataIni: <?= json_encode($filtros['dataIni']??'') ?>,
    dataFim: <?= json_encode($filtros['dataFim']??'') ?>
};
</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>

<script>
(function(){
'use strict';

var ini = window.__PESSOAL_COM.dataIni;
var fim = window.__PESSOAL_COM.dataFim;
var qs  = '?data_ini='+encodeURIComponent(ini)+'&data_fim='+encodeURIComponent(fim);

function fmtR(v){return 'R$ '+parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2});}
function fmtP(v){return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2})+'%';}
function esc(s){var d=document.createElement('div');d.textContent=s||'';return d.innerHTML;}
function apiFetch(url){
    return fetch(url,{credentials:'same-origin'}).then(function(r){
        if(!r.ok)return r.json().then(function(e){throw new Error(e.erro||'HTTP '+r.status);});
        return r.json();
    });
}

function renderComissoes(linhas) {
    var totalFat = linhas.reduce(function(s,r){return s+parseFloat(r.FATURAMENTO||0);},0);
    var totalCom = linhas.reduce(function(s,r){return s+parseFloat(r.COMISSAO_CALC||0);},0);

    // KPIs
    document.getElementById('kpi-grid').innerHTML =
        '<div class="pbi-kpi-card"><div class="pbi-kpi-label">Faturamento Total</div>'
        + '<div class="pbi-kpi-value text-accent">'+fmtR(totalFat)+'</div></div>'
        + '<div class="pbi-kpi-card"><div class="pbi-kpi-label">Total Comissões</div>'
        + '<div class="pbi-kpi-value text-warning">'+fmtR(totalCom)+'</div></div>'
        + '<div class="pbi-kpi-card"><div class="pbi-kpi-label">% Comissão s/ Fat.</div>'
        + '<div class="pbi-kpi-value">'+(totalFat>0?fmtP(totalCom/totalFat*100):'—')+'</div></div>';

    document.getElementById('com-badge').textContent = linhas.length + ' registros';

    if (!linhas.length) {
        document.getElementById('com-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum dado encontrado.</p>';
        return;
    }

    var rows = linhas.map(function(r, i){
        return '<tr>'
            + '<td class="text-muted">'+(i+1)+'</td>'
            + '<td>'+esc(r.GARCOM||'—')+'</td>'
            + '<td class="text-end">'+fmtP(r.COM_GERAL||0)+'</td>'
            + '<td class="text-end">'+fmtR(r.FATURAMENTO||0)+'</td>'
            + '<td class="text-end fw-bold text-warning">'+fmtR(r.COMISSAO_CALC||0)+'</td>'
            + '<td class="text-end">'+fmtR(r.TX_SERVICO||0)+'</td>'
            + '</tr>';
    }).join('');

    document.getElementById('com-body').innerHTML =
        '<div class="table-responsive"><table class="pbi-table">'
        + '<thead><tr><th>#</th><th>Garçom</th>'
        + '<th class="text-end">% Comissão</th><th class="text-end">Faturamento</th>'
        + '<th class="text-end">Comissão Calculada</th><th class="text-end">Tx. Serviço</th>'
        + '</tr></thead>'
        + '<tbody>'+rows+'</tbody>'
        + '<tfoot><tr class="pbi-table-total">'
        + '<td colspan="3" class="text-end fw-bold">Total:</td>'
        + '<td class="text-end fw-bold">'+fmtR(totalFat)+'</td>'
        + '<td class="text-end fw-bold text-warning">'+fmtR(totalCom)+'</td>'
        + '<td></td></tr></tfoot>'
        + '</table></div>';

    // Gráfico
    if (linhas.length && typeof echarts !== 'undefined') {
        document.getElementById('chart-container').style.removeProperty('display');
        var nomes = linhas.map(function(r){return (r.GARCOM||'—').substring(0,18);});
        var fats  = linhas.map(function(r){return Math.round(parseFloat(r.FATURAMENTO||0)*100)/100;});
        var coms  = linhas.map(function(r){return Math.round(parseFloat(r.COMISSAO_CALC||0)*100)/100;});
        var ax = {color:'#64748b',fontSize:11};
        var ch = echarts.init(document.getElementById('chartComissoes'));
        ch.setOption({backgroundColor:'transparent',
            tooltip:{trigger:'axis'},
            legend:{data:['Faturamento','Comissão'],textStyle:{color:'#475569'}},
            xAxis:{type:'category',data:nomes,axisLabel:{color:ax.color,fontSize:ax.fontSize,rotate:20}},
            yAxis:{type:'value',axisLabel:{color:ax.color,fontSize:ax.fontSize,formatter:function(v){return 'R$'+(v/1000).toFixed(0)+'k';}}},
            series:[
                {name:'Faturamento',type:'bar',data:fats,itemStyle:{color:'#4f8ef7'}},
                {name:'Comissão',type:'bar',data:coms,itemStyle:{color:'#f59e0b'}}
            ]});
        window.addEventListener('resize',function(){ch.resize();});
    }
}

window.addEventListener('DOMContentLoaded', function(){
    apiFetch('/api/pessoal/comissoes'+qs)
        .then(function(d){renderComissoes(d.linhas||[]);})
        .catch(function(e){
            document.getElementById('com-body').innerHTML=
                '<div class="px-3 py-3 alert alert-warning small">Erro: '+esc(e.message)+'</div>';
        });
});

})();
</script>
