<?php
/**
 * ================================================================================
 * Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
 * ================================================================================
 * Mesas / Faixas de Horário — quanto rende cada período da noite do bar.
 * Faixas: Esquenta (18-21) · Pico (21-00) · Madrugada (00-03) · Saideira (03-06) · Dia (06-18).
 * Inspirado em "daypart" do Linx Degust mas adaptado pra bar noturno BR.
 * ================================================================================
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-moon-stars-fill me-2 text-accent"></i>Faixas de Horário</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<form method="get" action="/mesas/faixas-horario" class="pbi-filtro-barra mb-3" id="fhFiltro">
    <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>Analisar</button>
    </div>
</form>

<div class="pbi-hint mb-3" style="margin-top:0">
    Quanto cada <strong>período da noite</strong> contribui pro faturamento. Útil pra escalar pessoal, ajustar promoção do Esquenta e decidir se vale ficar aberto até a Saideira.
</div>

<!-- Tabela de faixas (cards) -->
<div class="row g-3 mb-3" id="fhCards">
    <div class="col-12 text-center py-4 text-muted"><i class="bi bi-hourglass-split"></i> Carregando…</div>
</div>

<!-- Donut + Tabela -->
<div class="row g-3">
    <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> Distribuição</div>
            <div id="fhChart" style="height:340px"></div>
        </div>
    </div>
    <div class="col-12 col-lg-7">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-table me-2"></i> Detalhamento</div>
            <div class="table-responsive">
                <table class="table pbi-table mb-0">
                    <thead><tr>
                        <th>Faixa</th>
                        <th>Período</th>
                        <th class="text-end">Notas</th>
                        <th class="text-end">Faturamento</th>
                        <th class="text-end">Ticket Médio</th>
                        <th class="text-end">% do total</th>
                    </tr></thead>
                    <tbody id="fhTbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="fhErro" 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});
        $('fhErro').style.display = 'none';
        $('fhCards').innerHTML  = '<div class="col-12 text-center py-4 text-muted"><i class="bi bi-hourglass-split"></i> Analisando…</div>';
        $('fhTbody').innerHTML = '';

        apiFetch('/api/mesas/faixas-horario?' + qs.toString()).then(d => {
            const faixas = d.faixas || [];
            const total  = Number(d.totalGeral || 0);

            // Cards
            const cards = faixas.map(f => {
                const pct = total > 0 ? (f.total / total * 100).toFixed(1) : '0.0';
                return `<div class="col-6 col-md-4 col-lg" style="flex:1 1 0">
                    <div class="pbi-card h-100" style="border-top:4px solid ${f.cor}">
                        <div style="padding:1rem">
                            <div style="font-size:.95rem;color:#475569">${f.nome}</div>
                            <div class="text-muted small mb-2">${f.periodo}</div>
                            <div class="fw-bold" style="font-size:1.15rem;color:${f.cor}">${fmtBR(f.total)}</div>
                            <div class="text-muted small">${fmtInt(f.qtd)} notas · ${pct}% do total</div>
                        </div>
                    </div>
                </div>`;
            }).join('');
            $('fhCards').innerHTML = cards;

            // Donut
            if (typeof echarts !== 'undefined') {
                if (!chart) chart = echarts.init($('fhChart'));
                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:true, formatter: '{b}\n{d}%', fontSize:11 },
                        data: faixas.filter(f => f.total > 0).map(f => ({ name: f.nome, value: f.total, itemStyle:{color: f.cor} }))
                    }]
                }, true);
            }

            // Tabela
            $('fhTbody').innerHTML = faixas.map(f => {
                const pct = total > 0 ? (f.total / total * 100) : 0;
                return `<tr>
                    <td><strong style="color:${f.cor}">${f.nome}</strong></td>
                    <td class="text-muted small">${f.periodo}</td>
                    <td class="text-end">${fmtInt(f.qtd)}</td>
                    <td class="text-end"><strong>${fmtBR(f.total)}</strong></td>
                    <td class="text-end">${fmtBR(f.ticket)}</td>
                    <td class="text-end">${fmtPct(pct)}</td>
                </tr>`;
            }).join('');
        }).catch(e => {
            $('fhCards').innerHTML = '';
            $('fhErro').textContent = 'Erro: ' + e;
            $('fhErro').style.display = '';
        });
    }
    $('fhFiltro').addEventListener('submit', (e) => { e.preventDefault(); carregar(); });
    carregar();
    window.addEventListener('resize', () => chart && chart.resize());
})();
</script>
