/* === public/pos.css === */
<style id="spo-styles">
.spo-container{display:grid;grid-template-columns:380px 1fr;gap:24px}
.spo-left{border:1px solid #e5e7eb;padding:16px;border-radius:12px;background:#fff}
.spo-left form label{display:flex;flex-direction:column;margin-bottom:10px;font-size:13px}
.spo-left input[type=text],.spo-left input[type=email],.spo-left input[type=tel]{padding:10px;border:1px solid #d1d5db;border-radius:8px}
.spo-cart{width:100%;border-collapse:collapse;margin-top:8px}
.spo-cart th,.spo-cart td{border-bottom:1px solid #eee;padding:8px}
.spo-cart th.qty,.spo-cart td.qty{width:88px;text-align:center}
.spo-cart th.rm,.spo-cart td.rm{width:40px;text-align:right}
.spo-place{margin-top:12px;padding:10px 14px;border-radius:10px;background:#111827;color:#fff;border:none;cursor:pointer}
.spo-status{margin-top:10px;font-size:13px;color:#065f46}
.spo-right{min-width:0}
.spo-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
.spo-search{padding:10px;border:1px solid #d1d5db;border-radius:8px;width:280px}
.spo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.spo-card{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;display:flex;flex-direction:column;gap:8px}
.spo-card img{width:100%;height:140px;object-fit:contain;background:#fafafa;border-radius:8px}
.spo-card h4{font-size:14px;line-height:1.3;margin:0}
.spo-stock{font-size:12px;color:#374151}
.spo-add{margin-top:auto;padding:8px;border-radius:8px;border:1px solid #111827;background:#111827;color:#fff;cursor:pointer}
@media(max-width:980px){.spo-container{grid-template-columns:1fr}}
</style>

/* === public/pos.js === */
<script id="spo-script">
(function(){
  const $root = document.querySelector('[data-spo]');
  if(!$root) return;
  const grid = $root.querySelector('#spo-grid');
  const searchInput = $root.querySelector('.spo-search');
  const cartBody = $root.querySelector('.spo-cart tbody');
  const placeBtn = $root.querySelector('.spo-place');
  const statusEl = $root.querySelector('.spo-status');

  const REST = SecurePOS.rest.base.replace(/\/$/, '');
  const NONCE = SecurePOS.rest.nonce;

  let products = [];
  let cart = new Map(); // id -> {id,name,qty}

  function sanitizeStr(s){ return (s||'').toString().trim(); }
  function renderGrid(list){
    grid.innerHTML='';
    list.forEach(p => {
      const card = document.createElement('div');
      card.className='spo-card';
      const img = document.createElement('img');
      img.loading='lazy';
      img.alt = p.name;
      img.src = p.image || '';
      const h4 = document.createElement('h4'); h4.textContent = p.name;
      const st = document.createElement('div'); st.className='spo-stock'; st.textContent = 'Stock: ' + (p.quantity ?? 0);
      const btn = document.createElement('button'); btn.type='button'; btn.className='spo-add'; btn.textContent='Add';
      btn.addEventListener('click', ()=> addToCart(p));
      card.append(img,h4,st,btn);
      grid.append(card);
    });
    grid.setAttribute('aria-busy','false');
  }

  function filterProducts(){
    const q = searchInput.value.toLowerCase();
    if(!q){ renderGrid(products); return; }
    const list = products.filter(p => p.name.toLowerCase().includes(q));
    renderGrid(list);
  }

  function addToCart(p){
    const ex = cart.get(p.id) || {id:p.id, name:p.name, qty:0};
    ex.qty = Math.min(999, ex.qty + 1);
    cart.set(p.id, ex);
    renderCart();
  }

  function renderCart(){
    cartBody.innerHTML='';
    for (const it of cart.values()){
      const tr = document.createElement('tr');
      const tdN = document.createElement('td'); tdN.textContent = it.name;
      const tdQ = document.createElement('td'); tdQ.className='qty';
      const inp = document.createElement('input'); inp.type='number'; inp.min='1'; inp.max='999'; inp.value=it.qty; inp.inputMode='numeric'; inp.addEventListener('change',()=>{
        let v = parseInt(inp.value||'1',10); if(!Number.isFinite(v)||v<1) v=1; if(v>999) v=999; it.qty=v; renderCart();
      });
      tdQ.append(inp);
      const tdR = document.createElement('td'); tdR.className='rm';
      const rm = document.createElement('button'); rm.type='button'; rm.textContent='×'; rm.addEventListener('click',()=>{ cart.delete(it.id); renderCart(); });
      tdR.append(rm);
      tr.append(tdN, tdQ, tdR); cartBody.append(tr);
    }
  }

  function getCustomer(){
    const form = $root.querySelector('#spo-customer');
    const fd = new FormData(form);
    const obj = Object.fromEntries(fd.entries());
    return {
      name: sanitizeStr(obj.name),
      email: sanitizeStr(obj.email),
      phone: sanitizeStr(obj.phone),
      business: sanitizeStr(obj.business)
    };
  }

  function setStatus(msg, err){ statusEl.textContent = msg || ''; statusEl.style.color = err ? '#b91c1c' : '#065f46'; }

  // Fetch products from secured WP REST (server-to-server to POS)
  async function loadProducts(){
    try{
      const res = await fetch(REST + '/products?filter[brand_id]=&filter[sub_brand_id]=&filter[product_category_id]=&page[size]=0&warehouse_id=1');
      if(!res.ok) throw new Error('HTTP '+res.status);
      const data = await res.json();
      products = Array.isArray(data)? data : [];
      renderGrid(products);
    }catch(e){
      setStatus('Failed to load products. Please try again later.', true);
    }
  }

  searchInput.addEventListener('input', filterProducts);
  placeBtn.addEventListener('click', async function(){
    setStatus('');
    if(cart.size===0){ setStatus('Please add at least one product.', true); return; }
    const cust = getCustomer();
    if(!cust.name||!cust.email||!cust.phone||!cust.business){ setStatus('Please fill all required customer details.', true); return; }

    // Build cart array
    const items = Array.from(cart.values()).map(it=>({ id: it.id, name: it.name, qty: it.qty }));

    // POST to WP REST (nonce-protected) – server will email + build WhatsApp link
    try{
      const res = await fetch(REST + '/order', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': NONCE },
        body: JSON.stringify({ customer: cust, cart: items })
      });
      const data = await res.json();
      if(!res.ok){ throw new Error(data && data.message || 'Order failed'); }
      setStatus('Order placed successfully!');
      if(data.whatsapp){ window.open(data.whatsapp, '_blank'); }
      cart.clear(); renderCart(); $root.querySelector('#spo-customer').reset();
    }catch(e){ setStatus(e.message || 'Failed to place order.', true); }
  });

  loadProducts();
})();
</script>