<?php /* Vendas > PDV: busca responsiva com imagem e localização */ ?>
<div class="page-header" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;">
  <div>
    <h1>PDV</h1>
    <p class="muted">Interface otimizada para venda rápida</p>
  </div>
  <div>
    <a href="/dashboard" class="btn btn-secondary">Voltar</a>
    <span id="negModeBadge" class="badge" style="display:none;margin-left:0.5rem;background:#8b0000;color:#fff;">Modo estoque negativo ATIVO</span>
  </div>
</div>

<div class="grid" style="display:grid;grid-template-columns: 2fr 1fr; gap:1rem; align-items:start;">
  <div class="card">
    <h2>Busca de Produtos</h2>
    <p class="muted">Digite código, EAN ou nome para localizar rapidamente</p>
    <div style="display:flex;gap:0.5rem;align-items:center;">
      <input id="pdvSearch" class="input" placeholder="Código / EAN / Nome" style="flex:1;" autocomplete="off">
      <button id="pdvSearchBtn" class="btn">Buscar</button>
    </div>
    <div id="pdvResults" style="margin-top:0.75rem;display:grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap:0.75rem;"></div>
  </div>
  <div class="card">
    <h2>Totais</h2>
    <p>Subtotal: R$ 0,00</p>
    <p>Descontos: R$ 0,00</p>
    <p><strong>Total: R$ 0,00</strong></p>
    <div class="form-group" style="margin-top:0.5rem;">
      <label for="pdvClienteIdInput">Cliente (ID opcional)</label>
      <div style="display:flex;gap:0.5rem;align-items:center;">
        <input id="pdvClienteIdInput" class="input" placeholder="Ex.: 123" style="flex:1;" autocomplete="off">
        <button id="btnSelecionarCliente" class="btn btn-secondary">Selecionar</button>
      </div>
      <div id="pdvClienteInfo" class="muted" style="margin-top:0.25rem;">Nenhum cliente selecionado</div>
    </div>
    <button id="btnPuxarVenda" class="btn btn-secondary" style="width:100%; margin-bottom:0.5rem;">Puxar Venda Não Faturada</button>
    <button id="btnEmitirNfce" class="btn" style="width:100%;">Emitir NFC-e</button>
    <button class="btn btn-secondary" style="width:100%; margin-top:0.5rem;">Fechamento de Caixa (Z)</button>
  </div>
</div>

<div class="card" style="margin-top:1rem;">
  <h2>Atalhos de Teclado</h2>
  <p class="muted">Melhore sua velocidade no PDV com estes atalhos:</p>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.5rem;margin-top:0.5rem;">
    <div style="border:1px solid #e5e7eb;border-radius:6px;padding:0.5rem;">F2 — Buscar produto</div>
    <div style="border:1px solid #e5e7eb;border-radius:6px;padding:0.5rem;">F8 — Puxar venda não faturada</div>
    <div style="border:1px solid #e5e7eb;border-radius:6px;padding:0.5rem;">F9 — Emitir NFC-e</div>
    <div style="border:1px solid #e5e7eb;border-radius:6px;padding:0.5rem;">F10 — Fechar caixa</div>
    <div style="border:1px solid #e5e7eb;border-radius:6px;padding:0.5rem;">ESC — Cancelar/fechar modal</div>
    <div style="border:1px solid #e5e7eb;border-radius:6px;padding:0.5rem;">Enter — Confirmar ação</div>
  </div>
  <script>
  (function(){
    document.addEventListener('keydown', function(e){
      if (e.key === 'F2') { const s=document.getElementById('pdvSearch'); if(s){ s.focus(); e.preventDefault(); }}
      if (e.key === 'F8') { const b=document.getElementById('btnPuxarVenda'); if(b){ b.click(); e.preventDefault(); }}
      if (e.key === 'F9') { const b=document.getElementById('btnEmitirNfce'); if(b){ b.click(); e.preventDefault(); }}
      if (e.key === 'F10') { const b=document.getElementById('btnCashClose'); if(b){ b.click(); e.preventDefault(); }}
      if (e.key === 'Escape') { const m=document.getElementById('modalPuxarVenda'); if(m){ m.remove(); e.preventDefault(); }}
    });
  })();
  </script>
</div>

<script>
(function(){
  const btnSelCli = document.getElementById('btnSelecionarCliente');
  const cliInput = document.getElementById('pdvClienteIdInput');
  const cliInfo = document.getElementById('pdvClienteInfo');
  window.pdvClienteSelecionado = null;
  if (btnSelCli) {
    btnSelCli.addEventListener('click', async () => {
      const raw = cliInput ? cliInput.value.trim() : '';
      const id = Number(raw);
      if (!id || id <= 0) { if (cliInfo) cliInfo.textContent = 'ID inválido'; return; }
      try {
        const res = await apiRequest('/api/clientes/' + id, { method: 'GET' });
        if (!res || !res.ok) { if (cliInfo) cliInfo.textContent = 'Cliente não encontrado'; return; }
        const j = await res.json();
        const c = j.data || j;
        window.pdvClienteSelecionado = { id: c.id, nome: c.nome };
        if (cliInfo) cliInfo.textContent = 'Selecionado: ' + (c.nome || ('ID ' + c.id));
      } catch (e) {
        if (cliInfo) cliInfo.textContent = 'Erro ao buscar cliente';
      }
    });
  }
})();
</script>

<div class="card" style="margin-top:1rem;">
  <p class="muted">Integrações fiscais (SEFAZ) e calculadora fiscal serão adicionadas aqui.</p>
  <p class="muted">Conformidade com NFC-e e relatórios Z previstos.</p>
  <p class="muted">Validações automáticas: CNPJ, CFOP, NCM, CST/PIS/COFINS, etc.</p>
  <p class="muted">NFC-e (homologação RJ - mock) ativada para testes.</p>
  <div id="nfceMsg" style="margin-top:0.5rem;"></div>
  <script>
  (function(){
    const btn = document.getElementById('btnEmitirNfce');
    const box = document.getElementById('nfceMsg');
    function setMsg(html, kind){ box.innerHTML = html ? ('<div class="alert '+(kind||'')+'">'+html+'</div>') : ''; }
    if (btn) {
      btn.addEventListener('click', async () => {
        try {
          const desc = prompt('Descrição do item (ex.: Venda PDV)') || 'Venda PDV';
          const valStr = prompt('Valor do item (ex.: 10,00)') || '0';
          const v = Number(String(valStr).replace(/\./g,'').replace(',','.'));
          if (!v || v <= 0) { setMsg('Valor inválido para emissão.', 'alert-error'); return; }
          setMsg('Emitindo NFC-e (homolog RJ, mock)…');
          const payload = {
            environment: 'homolog',
            items: [{ descricao: desc, quantidade: 1, preco: v, ncm: '00000000', cfop: '5102', csosn: '102', csts: { pis: '01', cofins: '01' } }]
          };
          const resp = await apiRequest('/api/fiscal/nfce/autorizar', { method: 'POST', body: JSON.stringify(payload) });
          const j = await resp.json();
          const d = j.data || j;
          if (!resp.ok) {
            const msgs = (d && d.messages) || (j.error && j.error.message) || 'Falha na emissão';
            const rej = (d && d.rejection_code) ? ` (cód. ${d.rejection_code})` : '';
            setMsg('Rejeição na NFC-e: ' + (Array.isArray(msgs) ? msgs.join('<br>') : (msgs + rej)), 'alert-error');
            return;
          }
          const totals = d.totals;
          const totalsHtml = totals ? (`<br><small>Totais: Subtotal R$ ${Number(totals.subtotal||0).toFixed(2)} | IBS R$ ${Number(totals.ibs||0).toFixed(2)} | CBS R$ ${Number(totals.cbs||0).toFixed(2)} | IS R$ ${Number(totals.is||0).toFixed(2)} | Total R$ ${Number(totals.total||0).toFixed(2)}</small>`) : '';
          setMsg(`NFC-e autorizada (mock). Chave: <code>${d.chave}</code><br>Protocolo: <code>${d.protocolo}</code>${totalsHtml}`, '');
        } catch (e) {
          console.error(e);
          setMsg('Erro ao emitir NFC-e: ' + (e.message || e), 'alert-error');
        }
      });
    }
  })();
  </script>
</div>

<div class="card" style="margin-top:1rem;">
  <h2>Caixa</h2>
  <div id="cashStatus" class="muted">Verificando status do caixa…</div>
  <div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.5rem;">
    <button id="btnCashOpen" class="btn">Abrir Caixa</button>
    <button id="btnCashSuprimento" class="btn btn-secondary">Suprimento</button>
    <button id="btnCashSangria" class="btn btn-secondary">Sangria</button>
    <button id="btnCashClose" class="btn" style="background:#dc2626; color:white;">Fechar Caixa</button>
  </div>
  <p class="muted" style="margin-top:0.5rem;">Dica: use valores numéricos com vírgula ou ponto (ex.: 100,00).</p>
  <div id="cashMsg" style="margin-top:0.5rem;"></div>
  <script>
  (function(){
    const statusEl = document.getElementById('cashStatus');
    const msgEl = document.getElementById('cashMsg');
    const btnOpen = document.getElementById('btnCashOpen');
    const btnSupr = document.getElementById('btnCashSuprimento');
    const btnSang = document.getElementById('btnCashSangria');
    const btnClose = document.getElementById('btnCashClose');

    function setMsg(html, kind){ msgEl.innerHTML = html ? ('<div class="alert '+(kind||'')+'">'+html+'</div>') : ''; }
    function parseMoneyBRL(str){ if (!str) return NaN; const s = (''+str).replace(/\./g,'').replace(',','.').replace(/[^0-9.\-]/g,''); const n = parseFloat(s); return Number.isFinite(n) ? n : NaN; }

    async function refreshSession(){
      setMsg('', '');
      statusEl.textContent = 'Verificando status do caixa…';
      try {
        const res = await apiRequest('/api/pdv/caixas/sessao-atual', { method:'GET' });
        if (!res || !res.ok) { statusEl.textContent = 'Falha ao consultar caixa'; return; }
        const json = await res.json();
        if (json.open && json.session){
          const s = json.session;
          statusEl.textContent = 'Caixa ABERTO — Abertura: ' + (s.opened_at || '') + ' | Valor inicial: R$ ' + Number(s.initial_amount||0).toFixed(2).replace('.',',');
          btnOpen.disabled = true; btnSupr.disabled = false; btnSang.disabled = false; btnClose.disabled = false;
        } else {
          statusEl.textContent = 'Caixa FECHADO';
          btnOpen.disabled = false; btnSupr.disabled = true; btnSang.disabled = true; btnClose.disabled = true;
        }
      } catch (e){ statusEl.textContent = 'Erro de rede ao consultar caixa'; }
    }

    btnOpen.addEventListener('click', async ()=>{
      const v = prompt('Informe o valor inicial do caixa (ex.: 100,00):', '0,00');
      if (v === null) return; const n = parseMoneyBRL(v);
      if (!Number.isFinite(n) || n < 0) { setMsg('Valor inválido para abertura.', 'alert-error'); return; }
      const res = await apiRequest('/api/pdv/caixas/abrir', { method:'POST', body: JSON.stringify({ valor_inicial: n }) });
      if (res && res.ok) { setMsg('Caixa aberto com sucesso.', 'alert-success'); refreshSession(); }
      else { setMsg('Falha ao abrir caixa.', 'alert-error'); }
    });

    btnSupr.addEventListener('click', async ()=>{
      const v = prompt('Valor de suprimento:', '0,00'); if (v === null) return; const n = parseMoneyBRL(v);
      if (!Number.isFinite(n) || n <= 0) { setMsg('Valor inválido para suprimento.', 'alert-error'); return; }
      const motivo = prompt('Motivo (opcional):', 'Suprimento');
      const res = await apiRequest('/api/pdv/caixas/suprimento', { method:'POST', body: JSON.stringify({ valor: n, motivo }) });
      if (res && res.ok) { setMsg('Suprimento registrado.', 'alert-success'); refreshSession(); }
      else { setMsg('Falha ao registrar suprimento.', 'alert-error'); }
    });

    btnSang.addEventListener('click', async ()=>{
      const v = prompt('Valor de sangria:', '0,00'); if (v === null) return; const n = parseMoneyBRL(v);
      if (!Number.isFinite(n) || n <= 0) { setMsg('Valor inválido para sangria.', 'alert-error'); return; }
      const motivo = prompt('Motivo (opcional):', 'Sangria');
      const res = await apiRequest('/api/pdv/caixas/sangria', { method:'POST', body: JSON.stringify({ valor: n, motivo }) });
      if (res && res.ok) { setMsg('Sangria registrada.', 'alert-success'); refreshSession(); }
      else { setMsg('Falha ao registrar sangria.', 'alert-error'); }
    });

    btnClose.addEventListener('click', async ()=>{
      if (!confirm('Deseja fechar o caixa agora?')) return;
      const res = await apiRequest('/api/pdv/caixas/fechar', { method:'POST' });
      if (res && res.ok) {
        try { const j = await res.json(); setMsg('Caixa fechado. Valor de fechamento: R$ ' + Number(j.closing_amount||0).toFixed(2).replace('.',','), 'alert-success'); } catch(e){ setMsg('Caixa fechado.', 'alert-success'); }
      } else { setMsg('Falha ao fechar caixa.', 'alert-error'); }
      refreshSession();
    });

    refreshSession();
  })();
  </script>
</div>

<script>
(function(){
  const input = document.getElementById('pdvSearch');
  const btn = document.getElementById('pdvSearchBtn');
  const results = document.getElementById('pdvResults');
  let negModeActive = false;

  // Sinalizar modo de estoque negativo (badge)
  (async function(){
    try {
      const res = await apiRequest('/api/estoque/configuracoes', { method:'GET' });
      if (res && res.ok){
        const j = await res.json();
        const s = j.data || j;
        negModeActive = !!s.permitir_estoque_negativo;
        const badge = document.getElementById('negModeBadge');
        if (badge) badge.style.display = negModeActive ? 'inline-block' : 'none';
      }
    } catch(e){ /* silencioso */ }
  })();

  function fmtCurrency(v){ try { return (new Intl.NumberFormat('pt-BR', { style:'currency', currency:'BRL' })).format(v||0); } catch(e){ return 'R$ ' + (v||0).toFixed(2).replace('.', ','); } }
  function fmtQty(v){ const n = Number(v||0); return (n % 1 === 0) ? n.toString() : n.toFixed(3); }

  function render(items){
    if (!Array.isArray(items) || items.length === 0){
      results.innerHTML = '<div class="muted" style="padding:0.5rem;">Nenhum produto encontrado</div>';
      return;
    }
    const cards = items.map(it => {
      const estoqueNum = Number(it.estoque||0);
      const estoqueIsNeg = estoqueNum < 0;
      const estoqueHtml = estoqueIsNeg
        ? `<span style="color:#b91c1c;font-weight:600;" title="Saldo negativo"><span style="margin-right:4px;">⚠️</span>${fmtQty(estoqueNum)}</span>`
        : fmtQty(estoqueNum);
      return `
      <div class="card" style="display:flex;gap:0.75rem;align-items:flex-start;">
        <img src="${it.image_url || '/assets/no-image.svg'}" alt="Imagem" style="width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid #eee;background:#fafafa;">
        <div style="flex:1;min-width:0;">
          <div style="display:flex;justify-content:space-between;gap:0.5rem;">
            <div style="font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${it.nome}">${it.nome}</div>
            <div style="color:#374151;">${fmtCurrency(it.preco)}</div>
          </div>
          <div class="muted" style="margin-top:0.25rem;display:flex;gap:0.75rem;flex-wrap:wrap;">
            <span>SKU: ${it.codigo}</span>
            <span>Estoque: ${estoqueHtml}</span>
          </div>
          <div class="muted" style="margin-top:0.25rem;">${it.location ? ('Localização: ' + it.location) : 'Localização: —'}</div>
        </div>
      </div>
    `;
    });
    results.innerHTML = cards.join('');
  }

  async function doSearch(){
    const q = input.value.trim();
    if (q === '') { results.innerHTML = ''; return; }
    const url = '/api/pdv/produtos/search?q=' + encodeURIComponent(q);
    const t0 = performance.now();
    const res = await apiRequest(url, { method:'GET' });
    if (!res) return;
    if (res.ok){
      const json = await res.json();
      render(json.data || []);
      const dt = performance.now() - t0;
      if (dt > 2000) {
        console.warn('Busca PDV acima de 2s:', dt);
      }
    } else {
      results.innerHTML = '<div class="alert alert-error">Erro na busca (' + res.status + ')</div>';
    }
  }

  let debounceTimer = null;
  input.addEventListener('input', () => {
    if (debounceTimer) clearTimeout(debounceTimer);
    debounceTimer = setTimeout(doSearch, 220);
  });
  input.addEventListener('keydown', (e) => { if (e.key === 'Enter') doSearch(); });
  btn.addEventListener('click', doSearch);
})();

// Funcionalidade para puxar vendas não faturadas
(function(){
  const btnPuxar = document.getElementById('btnPuxarVenda');
  if (!btnPuxar) return;
  
  btnPuxar.addEventListener('click', async () => {
    try {
      // Buscar vendas não faturadas
      const response = await fetch('/api/pdv/vendas-nao-faturadas?per_page=10', {
        headers: { 'Authorization': 'Bearer ' + (localStorage.getItem('token') || '') }
      });
      
      if (!response.ok) {
        alert('Erro ao buscar vendas não faturadas');
        return;
      }
      
      const data = await response.json();
      const vendas = data.data || [];
      
      if (vendas.length === 0) {
        alert('Nenhuma venda não faturada encontrada');
        return;
      }
      
      // Criar modal para seleção de venda
      const modalHtml = `
        <div id="modalPuxarVenda" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center;">
          <div style="background:white;padding:2rem;border-radius:8px;max-width:600px;width:90%;max-height:80%;overflow-y:auto;">
            <h3>Selecionar Venda Não Faturada</h3>
            <div style="margin:1rem 0;">
              ${vendas.map(v => `
                <div style="border:1px solid #ddd;padding:1rem;margin:0.5rem 0;border-radius:4px;cursor:pointer;" onclick="selecionarVenda(${v.id})">
                  <strong>Pedido #${v.numero}</strong><br>
                  <small>Cliente: ${v.cliente_nome || 'N/A'}</small><br>
                  <small>Valor: R$ ${Number(v.valor_total || 0).toFixed(2)}</small><br>
                  <small>Status: ${v.status}</small><br>
                  <small>Data: ${new Date(v.created_at).toLocaleDateString('pt-BR')}</small>
                </div>
              `).join('')}
            </div>
            <button onclick="fecharModalPuxar()" class="btn btn-secondary">Cancelar</button>
          </div>
        </div>
      `;
      
      document.body.insertAdjacentHTML('beforeend', modalHtml);
      
    } catch (error) {
      console.error('Erro ao puxar vendas:', error);
      alert('Erro ao buscar vendas não faturadas');
    }
  });
})();

// Funções globais para o modal de puxar vendas
function fecharModalPuxar() {
  const modal = document.getElementById('modalPuxarVenda');
  if (modal) modal.remove();
}

async function selecionarVenda(vendaId) {
  try {
    // Buscar detalhes da venda
    const response = await fetch(`/api/pdv/vendas-nao-faturadas/${vendaId}`, {
      headers: { 'Authorization': 'Bearer ' + (localStorage.getItem('token') || '') }
    });
    
    if (!response.ok) {
      alert('Erro ao carregar detalhes da venda');
      return;
    }
    
    const data = await response.json();
    const venda = data.data.order;
    const itens = data.data.items || [];
    
    // Fechar modal
    fecharModalPuxar();
    
    // Exibir detalhes da venda selecionada
    const detalhesHtml = `
      <div class="alert alert-info">
        <strong>Venda Puxada:</strong> ${venda.numero}<br>
        <strong>Cliente:</strong> ${venda.cliente_nome || 'N/A'}<br>
        <strong>Valor Total:</strong> R$ ${Number(venda.valor_total || 0).toFixed(2)}<br>
        <strong>Itens:</strong> ${itens.length} item(ns)<br>
        ${itens.map(item => `
          <div style="margin-left:1rem;font-size:0.9em;">
            • ${item.descricao || item.codigo} - Qtd: ${item.quantidade} - R$ ${Number(item.preco || 0).toFixed(2)}
          </div>
        `).join('')}
        <div style="margin-top:1rem;">
          <button onclick="finalizarVendaPuxada(${venda.id})" class="btn btn-primary">Finalizar e Emitir NFC-e</button>
          <button onclick="limparVendaPuxada()" class="btn btn-secondary">Limpar</button>
        </div>
      </div>
    `;
    
    const nfceMsg = document.getElementById('nfceMsg');
    if (nfceMsg) nfceMsg.innerHTML = detalhesHtml;
    
    // Armazenar dados da venda puxada
    window.vendaPuxada = { venda, itens };
    
  } catch (error) {
    console.error('Erro ao selecionar venda:', error);
    alert('Erro ao carregar venda selecionada');
  }
}

function limparVendaPuxada() {
  window.vendaPuxada = null;
  const nfceMsg = document.getElementById('nfceMsg');
  if (nfceMsg) nfceMsg.innerHTML = '';
}

async function finalizarVendaPuxada(vendaId) {
  if (!window.vendaPuxada) {
    alert('Nenhuma venda selecionada');
    return;
  }
  
  if (!confirm('Confirmar finalização da venda e emissão de NFC-e?')) return;
  
  try {
    // Emitir NFC-e para a venda puxada
    const response = await fetch('/api/fiscal/nfce/autorizar', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + (localStorage.getItem('token') || '')
      },
      body: JSON.stringify({
        sale_id: vendaId.toString(),
        descricao: `Venda ${window.vendaPuxada.venda.numero}`,
        valor: window.vendaPuxada.venda.valor_total
      })
    });
    
    const result = await response.json();
    const d = result;
    const nfceMsg = document.getElementById('nfceMsg');
    if (!response.ok) {
      const msgs = (d && d.messages) || (result.error && result.error.message) || 'Erro na emissão da NFC-e';
      const rej = (d && d.rejection_code) ? ` (cód. ${d.rejection_code})` : '';
      if (nfceMsg) {
        nfceMsg.innerHTML = `<div class="alert alert-error"><strong>Rejeição na NFC-e</strong>${rej}<br>${Array.isArray(msgs) ? msgs.join('<br>') : msgs}</div>`;
      } else {
        alert('Rejeição na NFC-e: ' + (Array.isArray(msgs) ? msgs.join('\n') : msgs));
      }
      return;
    }

    // Exibir resultado
    if (nfceMsg) {
      const totals = d.totals;
      const totalsHtml = totals ? (`<br><small>Totais: Subtotal R$ ${Number(totals.subtotal||0).toFixed(2)} | IBS R$ ${Number(totals.ibs||0).toFixed(2)} | CBS R$ ${Number(totals.cbs||0).toFixed(2)} | IS R$ ${Number(totals.is||0).toFixed(2)} | Total R$ ${Number(totals.total||0).toFixed(2)}</small>`) : '';
      nfceMsg.innerHTML = `
        <div class="alert alert-success">
          <strong>NFC-e Emitida com Sucesso!</strong><br>
          <strong>Chave:</strong> ${d.chave}<br>
          <strong>Protocolo:</strong> ${d.protocolo}<br>
          <strong>Venda:</strong> ${window.vendaPuxada.venda.numero}
          ${totalsHtml}
        </div>
      `;
    }
    
    // Limpar venda puxada
     window.vendaPuxada = null;
     
   } catch (error) {
     console.error('Erro ao finalizar venda:', error);
     alert('Erro ao finalizar venda puxada');
   }
 }
 </script>