<!doctype html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#111827">
  <meta name="csrf-token" content="<%= csrfToken %>">
  <title>Configurare scanner</title>
  <link rel="manifest" href="/public/scanner/manifest.json">
  <link rel="stylesheet" href="/public/assets/css/scanner.css">
</head>
<body class="scanner-shell">
  <main class="scanner-setup">
    <header class="scanner-topbar">
      <div>
        <div class="scanner-brand">Eventor Scanner Setup</div>
        <div class="scanner-meta">Setari locale pentru device. Nu se salveaza date personale.</div>
      </div>
      <a class="scanner-link-button" href="/scanner<%= event ? '?eventId=' + event.id : '' %>">Scanner</a>
    </header>

    <form id="scanner-setup-form" class="scanner-setup-form">
      <label>Device name <input name="deviceName" autocomplete="off"></label>
      <label>Device type
        <select name="deviceType">
          <% deviceOptions.profiles.forEach((profile) => { %>
            <option value="<%= profile.key %>"><%= profile.label %></option>
          <% }) %>
        </select>
      </label>
      <label>Event
        <select name="eventId">
          <% events.forEach((item) => { %>
            <option value="<%= item.id %>" <%= event && Number(item.id) === Number(event.id) ? 'selected' : '' %>><%= item.title %></option>
          <% }) %>
        </select>
      </label>
      <label>Gate
        <select name="gateId">
          <option value="">Fara poarta</option>
          <% gates.forEach((gate) => { %>
            <option value="<%= gate.id %>"><%= gate.name %> / <%= gate.type %></option>
          <% }) %>
        </select>
      </label>
      <label>Zone
        <select name="zoneId">
          <option value="">Automat dupa poarta</option>
          <% zones.forEach((zone) => { %>
            <option value="<%= zone.id %>"><%= zone.name %></option>
          <% }) %>
        </select>
      </label>
      <label>Scan mode default
        <select name="scanMode">
          <option value="entry">Intrare</option>
          <option value="exit">Iesire</option>
          <option value="validate">Validare</option>
        </select>
      </label>
      <label>API target
        <select name="apiTarget">
          <option value="central">Central</option>
          <option value="local_gateway">Local Gateway</option>
        </select>
      </label>
      <label>Local gateway URL/IP <input name="localGatewayUrl" placeholder="http://192.168.10.2:3001"></label>
      <label>Gateway code <input name="gatewayCode" autocomplete="off"></label>
      <label>Device code <input name="deviceCode" autocomplete="off"></label>
      <label>Pairing token <input name="pairingToken" autocomplete="off"></label>
      <label>Scan terminator
        <select name="scanTerminator">
          <option value="ENTER">ENTER</option>
          <option value="TAB">TAB</option>
          <option value="NONE">NONE</option>
        </select>
      </label>
      <label>Strip prefix <input name="stripPrefix" autocomplete="off"></label>
      <label>Strip suffix <input name="stripSuffix" autocomplete="off"></label>
      <label>Debounce ms <input name="debounceMs" type="number" min="200" step="100"></label>
      <label>Timeout API ms <input name="requestTimeoutMs" type="number" min="1000" step="500"></label>
      <label><input name="soundEnabled" type="checkbox" checked> Sunet activ</label>
      <label>Volum <input name="soundVolume" type="range" min="0" max="1" step="0.1" value="0.8"></label>
      <button type="submit">Save configuration local</button>
      <button type="button" id="test-api">Test API connection</button>
    </form>

    <section class="scanner-test-panel">
      <div class="scanner-section-title">Test scan field</div>
      <input id="test-scan-field" autocomplete="off" placeholder="Scaneaza aici">
      <pre id="test-output">Astept scanare.</pre>
    </section>
  </main>

  <script>
    window.EventorScannerSetup = {
      csrfToken: "<%= csrfToken %>",
      defaults: <%- JSON.stringify(deviceOptions.defaults) %>
    };
  </script>
  <script src="/public/assets/js/scanner-setup.js"></script>
</body>
</html>
