<?php
/**
 * Mesas / Por Garçom — shell instantâneo.
 * Gráfico e tabela carregados via fetch() após o DOM pronto.
 * TTFB = tempo de render PHP (<10ms), sem nenhuma query Firebird aqui.
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-person-workspace me-2 text-accent"></i>Mesas</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<form method="get" action="/mesas/por-garcom" 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="row g-3 mb-4">
    <div class="col-lg-5">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-pie-chart me-2"></i>Faturamento por Garçom</div>
            <div class="pbi-hint mb-2" style="margin-top:0;padding:0 1rem">Os 5 garçons que mais faturaram no período.</div>
            <div id="chartGarcom" style="height:300px">
                <div class="d-flex align-items-center justify-content-center h-100 text-muted small">
                    <div class="spinner-border spinner-border-sm me-2 text-accent"></div>Carregando…
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-person-workspace me-2"></i>Ranking</div>
            <div class="pbi-hint mb-2" style="margin-top:0;padding:0 1rem">Desempenho de cada garçom. <strong>Ticket Médio</strong> = valor médio por mesa atendida. <strong>Tx. Serviço</strong> = taxa de serviço (os 10%) recolhida.</div>
            <div id="garcom-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">Pessoas</th>
                            <th class="text-end">Tx. Serviço</th>
                        </tr></thead>
                        <tbody>
                        <?php for ($i = 0; $i < 6; $i++): ?>
                        <tr>
                            <?php $widths = [25, 140, 45, 80, 80, 45, 75]; ?>
                            <?php foreach ($widths 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>

<!-- ── Config injetada pelo PHP para o JS usar ──────────────────────────── -->
<script>
window.__MESAS_GARCOM = {
    dataIni: <?= json_encode($filtros['dataIni'] ?? '') ?>,
    dataFim: <?= json_encode($filtros['dataFim'] ?? '') ?>,
    actionUrl: '/mesas/por-garcom'
};
</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 src="/assets/js/echarts.min.js"></script>
<script>
(function () {
'use strict';

var ini = window.__MESAS_GARCOM.dataIni;
var fim = window.__MESAS_GARCOM.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 fmtN(v, d) {
    d = d === undefined ? 0 : d;
    return parseFloat(v || 0).toLocaleString('pt-BR', {minimumFractionDigits:d, maximumFractionDigits:d});
}
function esc(s) {
    var d = document.createElement('div');
    d.textContent = s == null ? '' : String(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 renderGarcom(linhas) {
    // Tabela
    if (!linhas.length) {
        document.getElementById('garcom-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum dado encontrado no período.</p>';
    } else {
        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">' + fmtN(r.QTD_MESAS, 0) + '</td>'
                + '<td class="text-end fw-bold text-accent">' + fmtR(r.FATURAMENTO) + '</td>'
                + '<td class="text-end">' + fmtR(r.TICKET_MEDIO) + '</td>'
                + '<td class="text-end">' + fmtN(r.QTD_PESSOAS, 0) + '</td>'
                + '<td class="text-end">' + fmtR(r.TX_SERVICO) + '</td>'
                + '</tr>';
        }).join('');
        document.getElementById('garcom-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">Pessoas</th>'
            + '<th class="text-end">Tx. Serviço</th></tr></thead>'
            + '<tbody>' + rows + '</tbody></table></div>';
    }

    // Gráfico
    var top5 = linhas.slice(0, 5);
    var gLabels = top5.map(function(r){ return (r.GARCOM || '—').substring(0, 15); });
    var gFat    = top5.map(function(r){ return Math.round(parseFloat(r.FATURAMENTO || 0) * 100) / 100; });

    var c = echarts.init(document.getElementById('chartGarcom'));
    c.setOption({
        backgroundColor: 'transparent',
        tooltip: {trigger: 'axis'},
        xAxis: {type: 'category', data: gLabels, axisLabel: {color: '#64748b', rotate: 20}},
        yAxis: {type: 'value', axisLabel: {color: '#64748b', formatter: function(v){ return 'R$' + v.toLocaleString('pt-BR'); }}},
        series: [{type: 'bar', data: gFat, itemStyle: {color: '#4f8ef7'}, emphasis: {itemStyle: {color: '#3a6fd8'}}, cursor: 'pointer'}]
    });
    c.on('click', function() {
        window.location.href = '/mesas/historico?data_ini=' + encodeURIComponent(ini) + '&data_fim=' + encodeURIComponent(fim);
    });
    window.addEventListener('resize', function(){ c.resize(); });
}

window.addEventListener('DOMContentLoaded', function () {
    apiFetch('/api/mesas/por-garcom' + qs)
        .then(function (d) {
            renderGarcom(d.linhas || []);
        })
        .catch(function (e) {
            document.getElementById('garcom-body').innerHTML =
                '<div class="px-3 py-3 alert alert-warning small"><i class="bi bi-exclamation-triangle me-2"></i>' + esc(e.message) + '</div>';
            document.getElementById('chartGarcom').innerHTML =
                '<div class="p-3 text-muted small text-center">Erro ao carregar gráfico</div>';
        });
});

})();
</script>
