<section class="section">
  <div class="section-header">
    <p class="eyebrow">NFC Writer</p>
    <h1><%= event.title %></h1>
  </div>
  <div class="notice warning"><strong>SIMULARE NFC - NU ESTE SCRIERE REALA PE BRATARA.</strong> Modul marcheaza `nfc_write_jobs.status = simulation` si nu pretinde suport hardware.</div>
  <form id="nfc-writer-form" class="checkout-form">
    <label>Participant / bilet
      <select name="ticket_id" required>
        <% tickets.forEach((ticket) => { %>
          <option value="<%= ticket.id %>"><%= ticket.code %> - <%= ticket.holder_name %> - <%= ticket.ticket_type_name || '' %> - check-in <%= ticket.checkin_status || 'none' %></option>
        <% }) %>
      </select>
    </label>
    <label>UID bratara <input name="wristband_uid" required placeholder="UID citit de operator"></label>
    <button>Simuleaza scriere NFC</button>
  </form>
  <div id="nfc-result" class="scan-result-panel neutral">Asteapta operatie.</div>
</section>
<script>
document.getElementById('nfc-writer-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  const body = Object.fromEntries(new FormData(event.target).entries());
  const response = await fetch(location.pathname + '/simulate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-csrf-token': '<%= csrfToken %>' },
    body: JSON.stringify(body)
  });
  const data = await response.json();
  const box = document.getElementById('nfc-result');
  box.className = `scan-result-panel ${data.ok ? 'warning' : 'invalid'}`;
  box.innerHTML = data.ok
    ? `<h2>SIMULARE NFC</h2><p>${data.warning}</p><p>Bratara: ${data.wristband.public_code}</p><p>Write job: ${data.write_job_id}</p>`
    : `<h2>Scriere esuata</h2><p>${data.error}</p>`;
});
</script>
