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

<form method="get" action="/pessoal/performance" 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>

<!-- ── Layout: ranking + gráfico mensal ──────────────────────────────────── -->
<div class="row g-3 mb-4">
    <div class="col-lg-7">
        <div class="pbi-card h-100">
            <div class="pbi-card-header d-flex justify-content-between">
                <span><i class="bi bi-trophy me-2"></i>Ranking de Performance</span>
                <small class="text-muted" id="perf-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">Garçons ordenados do que mais vendeu para o que menos vendeu. <strong>Ticket Médio</strong> = valor médio por mesa atendida. <strong>Cancels.</strong> = pedidos cancelados.</div>
            </div>
            <div id="perf-body">
                <div class="table-responsive">
                    <table class="pbi-table">
                        <thead><tr>
                            <th>#</th><th>Garçom</th>
                            <th class="text-end">Mesas</th>
                            <th class="text-end">Faturamento</th>
                            <th class="text-end">Ticket Médio</th>
                            <th class="text-end">Cancels.</th>
                            <th class="text-end">Tx. Serviço</th>
                        </tr></thead>
                        <tbody>
                        <?php for ($i = 0; $i < 6; $i++): ?>
                        <tr>
                            <?php foreach ([30,130,50,80,80,50,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>
    </div>
    <div class="col-lg-5">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-graph-up me-2"></i>Evolução Mensal <span id="ano-label"><?= $filtros['anoSel']??date('Y') ?></span>
                <div class="pbi-hint mb-2" style="margin-top:0">Faturamento da equipe mês a mês no ano, para ver em quais meses vendeu mais.</div>
            </div>
            <div id="chartMensal" style="height:280px">
                <div class="d-flex align-items-center justify-content-center h-100">
                    <div class="spinner-border spinner-border-sm text-accent me-2" role="status"></div>
                    <span class="text-muted small">Carregando…</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
window.__PESSOAL_PERF = {
    dataIni: <?= json_encode($filtros['dataIni']??'') ?>,
    dataFim: <?= json_encode($filtros['dataFim']??'') ?>,
    anoSel:  <?= (int)($filtros['anoSel']??date('Y')) ?>
};
</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_PERF.dataIni;
var fim    = window.__PESSOAL_PERF.dataFim;
var anoSel = window.__PESSOAL_PERF.anoSel;
var qs = '?data_ini='+encodeURIComponent(ini)+'&data_fim='+encodeURIComponent(fim)+'&ano='+anoSel;

function fmtR(v){return 'R$ '+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();
    });
}

var medalhas = ['🥇','🥈','🥉'];

function renderPerformance(linhas) {
    document.getElementById('perf-badge').textContent = linhas.length + ' garçons';
    if (!linhas.length) {
        document.getElementById('perf-body').innerHTML =
            '<p class="text-center text-muted py-4">Sem dados no período.</p>';
        return;
    }
    var rows = linhas.map(function(r, i){
        var pos = i < 3 ? medalhas[i] : (i+1);
        return '<tr>'
            + '<td>'+pos+'</td>'
            + '<td>'+esc(r.GARCOM||'—')+'</td>'
            + '<td class="text-end">'+parseInt(r.QTD_MESAS||0)+'</td>'
            + '<td class="text-end fw-bold text-accent">'+fmtR(r.FATURAMENTO||0)+'</td>'
            + '<td class="text-end">'+fmtR(r.TICKET_MEDIO||0)+'</td>'
            + '<td class="text-end text-danger">'+parseInt(r.CANCELAMENTOS||0)+'</td>'
            + '<td class="text-end">'+fmtR(r.TX_SERVICO||0)+'</td>'
            + '</tr>';
    }).join('');
    document.getElementById('perf-body').innerHTML =
        '<div class="table-responsive"><table class="pbi-table">'
        + '<thead><tr><th>#</th><th>Garçom</th>'
        + '<th class="text-end">Mesas</th><th class="text-end">Faturamento</th>'
        + '<th class="text-end">Ticket Médio</th><th class="text-end">Cancels.</th>'
        + '<th class="text-end">Tx. Serviço</th>'
        + '</tr></thead><tbody>'+rows+'</tbody></table></div>';
}

function renderMensal(mensal, ano) {
    document.getElementById('ano-label').textContent = ano || anoSel;
    if (!mensal.length || typeof echarts === 'undefined') {
        document.getElementById('chartMensal').innerHTML =
            '<p class="text-center text-muted py-4">Sem dados.</p>';
        return;
    }
    var meses = ['','Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
    var labels = mensal.map(function(r){return meses[parseInt(r.MES)]||r.MES;});
    var fats   = mensal.map(function(r){return Math.round(parseFloat(r.FATURAMENTO||0)*100)/100;});
    var c = echarts.init(document.getElementById('chartMensal'));
    c.setOption({
        backgroundColor:'transparent',
        tooltip:{trigger:'axis'},
        xAxis:{type:'category',data:labels,axisLabel:{color:'#64748b',rotate:30}},
        yAxis:{type:'value',axisLabel:{color:'#64748b',formatter:function(v){return 'R$'+v.toLocaleString('pt-BR');}}},
        series:[{type:'bar',data:fats,itemStyle:{color:'#4f8ef7'}}]
    });
    window.addEventListener('resize',function(){c.resize();});
}

window.addEventListener('DOMContentLoaded', function(){
    apiFetch('/api/pessoal/performance'+qs)
        .then(function(d){
            renderPerformance(d.linhas||[]);
            renderMensal(d.mensal||[], d.anoSel);
        })
        .catch(function(e){
            document.getElementById('perf-body').innerHTML=
                '<div class="px-3 py-3 alert alert-warning small">Erro: '+esc(e.message)+'</div>';
            document.getElementById('chartMensal').innerHTML=
                '<p class="text-center text-muted py-4">Erro ao carregar.</p>';
        });
});

})();
</script>
