<?php /* WMS • Analytics (usa renderWithLayout) */ ?>
<nav aria-label="breadcrumb" style="margin-bottom:0.75rem;">
  <ol class="breadcrumb" style="display:flex; gap:0.5rem; list-style:none; padding:0; margin:0;">
    <li><a href="/">ERP</a></li>
    <li>›</li>
    <li><a href="/wms">WMS</a></li>
    <li>›</li>
    <li aria-current="page">Analytics</li>
  </ol>
</nav>

  <div class="card">
    <div style="display:flex; align-items:center; justify-content:space-between;">
      <h1 style="margin:0;">WMS • Analytics</h1>
    <div class="actions" style="display:flex; gap:8px;">
      <button id="refresh" class="btn">Atualizar</button>
      <button id="btnLast7" class="btn btn-secondary" title="Definir período para últimos 7 dias">Usar últimos 7 dias</button>
      <button id="btnClear" class="btn btn-secondary" title="Limpar filtros">Limpar filtros</button>
      <span id="lastGen" class="muted"></span>
    </div>
  </div>
  <div id="statusMsg" class="muted" aria-live="polite" style="margin-top:6px;"></div>
  <div id="periodInfo" class="muted" style="margin-top:6px;"></div>
  <div id="fallbackBadge" style="display:none; margin-top:6px; font-size:12px; background:#fff3cd; color:#856404; padding:4px 8px; border:1px solid #ffeeba; border-radius:6px; width:max-content;">Exibindo fallback: últimos 7 dias</div>

  <div class="filters" style="display:flex; gap:8px; align-items:end; margin-top:12px;">
    <div>
      <label for="fDe" class="muted">De (dd-mm-yyyy)</label>
      <input id="fDe" type="date" style="width:160px;" />
    </div>
    <div>
      <label for="fAte" class="muted">Até (dd-mm-yyyy)</label>
      <input id="fAte" type="date" style="width:160px;" />
    </div>
    <div>
      <label for="fCat" class="muted">Categoria/Produto</label>
      <input id="fCat" type="text" placeholder="SKU/Código" style="width:180px;" />
    </div>
    <div>
      <label for="fTipo" class="muted">Tipo</label>
      <select id="fTipo" style="width:160px;">
        <option value="">Todos</option>
        <option value="recebimento">Recebimento</option>
        <option value="expedicao">Expedição</option>
      </select>
    </div>
    
  </div>

  <div class="grid" style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top:12px;">
    <div class="card">
      <h3>Totais do período</h3>
      <div class="grid" style="display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px;">
        <div>
          <div class="muted">Recebimento</div>
          <div id="kpiRec" style="font-size:28px; font-weight:600;">0</div>
        </div>
        <div>
          <div class="muted">Expedição</div>
          <div id="kpiShip" style="font-size:28px; font-weight:600;">0</div>
        </div>
      </div>
      <div style="margin-top:8px;">
        <div class="muted">Progresso Recebimento (meta)</div>
        <div aria-label="Progresso Recebimento" class="progress" style="height:12px; background:#eee; border-radius:6px; overflow:hidden;">
          <div id="progRec" style="height:12px; width:0%; background:#2b8a3e;"></div>
        </div>
      </div>
      <div style="margin-top:8px;">
        <div class="muted">Progresso Expedição vs Recebimento</div>
        <div aria-label="Progresso Expedição" class="progress" style="height:12px; background:#eee; border-radius:6px; overflow:hidden;">
          <div id="progShip" style="height:12px; width:0%; background:#1c7ed6;"></div>
        </div>
      </div>
    </div>

    <div class="card">
      <h3>Série últimos 7 dias (recebimento)</h3>
      <table class="table">
        <thead><tr><th>Dia</th><th>Quantidade</th></tr></thead>
        <tbody id="rec7"></tbody>
      </table>
      <div id="rec7Chart" style="display:flex; gap:4px; align-items:flex-end; height:120px; margin-top:6px;"></div>
    </div>

    <div class="card">
      <h3>Série últimos 7 dias (expedição)</h3>
      <table class="table">
        <thead><tr><th>Dia</th><th>Quantidade</th></tr></thead>
        <tbody id="ship7"></tbody>
      </table>
      <div id="ship7Chart" style="display:flex; gap:4px; align-items:flex-end; height:120px; margin-top:6px;"></div>
    </div>
  </div>

  <div class="grid" style="display:grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top:12px;">
    <div class="card">
      <h3>Últimos eventos (tempo real)</h3>
      <table class="table">
        <thead><tr><th>Quando</th><th>Tipo</th><th>Payload</th></tr></thead>
        <tbody id="events"></tbody>
      </table>
    </div>
    <div class="card">
      <h3>Alertas</h3>
      <ul id="alerts"></ul>
    </div>
  </div>

  <div class="card" style="margin-top:12px;">
    <h3>Gestor Coletor — Resumo (24h)</h3>
    <div id="collectorBars" style="display:flex; gap:8px; flex-wrap:wrap;"></div>
    <div id="collectorInfo" class="muted" style="margin-top:6px;"></div>
  </div>

  <div class="card" style="margin-top:12px;">
    <h3>Exportações</h3>
    <div class="actions" style="display:flex; gap:8px;">
      <a class="btn" href="/api/wms/mobile/receiving/export.csv">Exportar Recebimento (CSV)</a>
      <a class="btn btn-secondary" href="/api/wms/mobile/shipping/export.csv">Exportar Expedição (CSV)</a>
    </div>
    
  </div>
</div>

<script src="/js/dashboard/wms_analytics.js"></script>