<section class="section">
  <div class="section-header">
    <p class="eyebrow">Vendor POS online</p>
    <h1><%= event.title %></h1>
  </div>
  <form id="vendor-pos-form" class="checkout-form">
    <select name="vendor_id" required><% vendors.forEach((vendor) => { %><option value="<%= vendor.id %>"><%= vendor.name %></option><% }) %></select>
    <select name="terminal_id" required><% terminals.forEach((terminal) => { %><option value="<%= terminal.id %>"><%= terminal.name %></option><% }) %></select>
    <input name="wristband_token" placeholder="Token bratara" required>
    <input name="amount" type="number" step="0.01" min="0.01" placeholder="Suma" required>
    <button>Confirma plata</button>
  </form>
  <div id="pos-result" class="scan-result-panel neutral">Asteapta plata.</div>
</section>
<script>
document.getElementById('vendor-pos-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  const body = Object.fromEntries(new FormData(event.target).entries());
  body.idempotency_key = `central-pos:${Date.now()}:${Math.random().toString(16).slice(2)}`;
  const response = await fetch('/api/festival/<%= event.id %>/vendor-pos/purchase', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-csrf-token': '<%= csrfToken %>' },
    body: JSON.stringify(body)
  });
  const data = await response.json();
  const box = document.getElementById('pos-result');
  box.className = `scan-result-panel ${data.ok ? 'valid' : 'invalid'}`;
  box.innerHTML = data.ok ? `<h2>Plata acceptata</h2><p>Sold ramas: ${data.wallet?.balance ?? '-'}</p>` : `<h2>Plata respinsa</h2><p>${data.result}</p>`;
});
</script>
