<?php
/**
 * Estoque / Giro — shell instantâneo.
 * Tabela carregada via fetch() depois do DOM pronto.
 */
$actionUrl = '/estoque/giro';
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-arrow-repeat me-2 text-accent"></i>Estoque</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<?php include __DIR__ . '/_filtro.php'; ?>

<!-- ── Caixa de explicação (legenda visual) ────────────────────────────── -->
<div class="pbi-card mb-3" style="background:#f8fafc">
    <div style="padding:.75rem 1.25rem">
        <div class="mb-2"><strong>📦 Como ler esta tela:</strong> a coluna <strong>Cobertura</strong> mostra <em>"se eu não comprar mais, em quantos dias acaba esse produto?"</em>. O cálculo usa o ritmo de venda do período escolhido.</div>
        <div class="d-flex flex-wrap gap-3" style="font-size:.85rem">
            <div><span class="badge" style="background:#dc2626;color:#fff;font-size:.75rem">0 a 3 dias</span> <strong>Repor já</strong> — vai faltar logo</div>
            <div><span class="badge" style="background:#16a34a;color:#fff;font-size:.75rem">4 a 60 dias</span> <strong>Saudável</strong> — estoque equilibrado</div>
            <div><span class="badge" style="background:#f59e0b;color:#fff;font-size:.75rem">61 a 180 dias</span> <strong>Excesso</strong> — dinheiro parado na prateleira</div>
            <div><span class="badge" style="background:#64748b;color:#fff;font-size:.75rem">+ de 180 dias</span> <strong>Encalhado</strong> — produto morto ou erro de cadastro</div>
        </div>
    </div>
</div>

<!-- ── Tabela de Giro (async) ─────────────────────────────────────────────── -->
<div class="pbi-card" id="card-giro">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-arrow-repeat me-2"></i>Giro de Estoque</span>
        <small class="text-muted" id="giro-badge">
            <span class="pbi-skeleton d-inline-block" style="width:80px;height:.75rem;border-radius:3px">&nbsp;</span>
        </small>
    </div>
    <div id="giro-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>#</th><th>Código</th><th>Produto</th><th>Un</th>
                    <th class="text-end">Est. Atual</th>
                    <th class="text-end">Qtd Vendida</th>
                    <th class="text-end">Faturamento</th>
                    <th class="text-end">Cobertura</th>
                    <th class="text-end">Custo Unit.</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php for ($j = 0; $j < 9; $j++): ?>
                    <td><span class="pbi-skeleton d-inline-block" style="width:<?= [28,70,160,38,55,65,75,65,70][$j] ?>px;height:.75rem;border-radius:3px">&nbsp;</span></td>
                    <?php endfor; ?>
                </tr>
                <?php endfor; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
window.__ESTOQUE = {
    dataIni: <?= json_encode($filtros['dataIni']) ?>,
    dataFim: <?= json_encode($filtros['dataFim']) ?>,
    actionUrl: <?= json_encode($actionUrl) ?>
};
</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.__ESTOQUE.dataIni;
var fim = window.__ESTOQUE.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 ? 2 : d;
    return parseFloat(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: d, maximumFractionDigits: d });
}
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 showErr(elId, msg) {
    var el = document.getElementById(elId);
    if (el) el.innerHTML = '<div class="px-3 py-3 alert alert-warning small">'
        + '<i class="bi bi-exclamation-triangle me-2"></i>' + esc(msg) + '</div>';
}

function renderGiro(linhas, dataIni, dataFim) {
    var periodLabel = dataIni && dataFim ? ' — ' + dataIni + ' a ' + dataFim : '';
    document.getElementById('giro-badge').textContent = linhas.length + ' itens';
    // Update header with period
    var hdr = document.querySelector('#card-giro .pbi-card-header span');
    if (hdr) hdr.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>Giro de Estoque' + periodLabel;

    if (!linhas.length) {
        document.getElementById('giro-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum item encontrado no período.</p>';
        return;
    }
    // Régua de cor da Cobertura (4 faixas — alinhada com a legenda visual no topo):
    //   0-3 dias  → vermelho "Repor já"
    //   4-60      → verde    "Saudável"
    //   61-180    → amarelo  "Excesso"
    //   181+      → cinza    "Encalhado"
    function coberturaInfo(dias) {
        if (dias === 0) return { cls:'text-muted',    rotulo:'sem venda' };
        if (dias <= 3)  return { cls:'text-danger',   rotulo:'Repor já' };
        if (dias <= 60) return { cls:'text-success',  rotulo:'Saudável' };
        if (dias <= 180)return { cls:'text-warning',  rotulo:'Excesso — dinheiro parado' };
        return                  { cls:'text-secondary',rotulo:'Encalhado — produto morto ou erro de cadastro' };
    }
    var rows = linhas.map(function (r, i) {
        var dias  = parseFloat(r.DIAS_COBERTURA || 0);
        var info  = coberturaInfo(dias);
        var cobHtml = dias > 0
            ? '<span title="' + info.rotulo + '" style="cursor:help">' + fmtN(dias, 0) + ' dias</span>'
            : '<span class="text-muted" title="' + info.rotulo + '">—</span>';
        return '<tr>'
            + '<td class="text-muted">' + (i + 1) + '</td>'
            + '<td class="fw-semibold">' + esc(r.COD_ITEM || '') + '</td>'
            + '<td>' + esc(r.DESCRICAO || '') + '</td>'
            + '<td><span class="badge bg-secondary">' + esc(r.COD_UNIDADE || '-') + '</span></td>'
            + '<td class="text-end">' + fmtN(r.ESTOQUE_ATUAL || 0, 1) + '</td>'
            + '<td class="text-end">' + fmtN(r.QTD_VENDIDA || 0, 1) + '</td>'
            + '<td class="text-end">' + fmtR(r.FAT_VENDIDA || 0) + '</td>'
            + '<td class="text-end ' + info.cls + '">' + cobHtml + '</td>'
            + '<td class="text-end">' + fmtR(r.CUSTO_FINAL || 0) + '</td>'
            + '</tr>';
    }).join('');

    document.getElementById('giro-body').innerHTML =
        '<div class="table-responsive">'
        + '<table class="pbi-table">'
        + '<thead><tr>'
        + '<th>#</th><th>Código</th><th>Produto</th><th>Un</th>'
        + '<th class="text-end">Est. Atual</th>'
        + '<th class="text-end">Qtd Vendida</th>'
        + '<th class="text-end">Faturamento</th>'
        + '<th class="text-end">Cobertura</th>'
        + '<th class="text-end">Custo Unit.</th>'
        + '</tr></thead>'
        + '<tbody>' + rows + '</tbody>'
        + '</table></div>';
}

window.addEventListener('DOMContentLoaded', function () {
    apiFetch('/api/estoque/giro' + qs)
        .then(function (d) { renderGiro(d.linhas || [], d.dataIni, d.dataFim); })
        .catch(function (e) { showErr('giro-body', 'Erro ao carregar giro: ' + e.message); });
});

})();
</script>
