<%- include('../shared/_head', { title: title, portalCss: '/platform/shared/css/base.css', bodyClass: 'merchant-portal dashboard-page' }) %>

<div class="dashboard-shell">
  <header class="dashboard-header">
    <div class="dashboard-brand">
      <span class="brand-name">BeezifiPay</span>
      <div class="portal-badge">Merchant</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/merchant/dashboard" class="nav-link">Dashboard</a>
      <a href="/merchant/checkouts" class="nav-link">Checkouts</a>
      <a href="/merchant/pos" class="nav-link nav-link--active">POS Charge</a>
      <a href="/merchant/organization" class="nav-link">Organisation</a>
      <span class="nav-divider">·</span>
      <span class="nav-user"><%= merchantUser.fullName %></span>
      <form method="POST" action="/merchant/logout" style="display:inline">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <button type="submit" class="btn-link">Sign out</button>
      </form>
    </nav>
  </header>

  <main class="dashboard-main">
    <%- include('../shared/_flash') %>

    <div class="page-header">
      <div>
        <h1>POS Charge</h1>
        <p class="text-muted">Enter items, then show the QR code to the customer to pay on their phone.</p>
      </div>
    </div>

    <% if (errors && errors.length) { %>
    <div class="banner banner--error">
      <% for (const e of errors) { %><p><%= e %></p><% } %>
    </div>
    <% } %>

    <div class="form-card" style="max-width:640px">
      <form method="POST" action="/merchant/pos/create">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">

        <div class="field">
          <label>Items</label>
          <div id="line-items-body">
            <div class="line-item-row">
              <input type="text" name="item[name]" placeholder="Item name" required>
              <input type="number" name="item[qty]" placeholder="1" min="0.001" step="any" value="1" style="width:80px">
              <input type="number" name="item[price]" placeholder="0.00" min="0" step="0.01" style="width:110px">
            </div>
          </div>
          <button type="button" id="add-item" class="btn-link" style="margin-top:8px">+ Add item</button>
        </div>

        <div class="field" style="max-width:200px">
          <label for="taxAmount">Tax / surcharge ($)</label>
          <input type="number" id="taxAmount" name="taxAmount" min="0" step="0.01" value="0" placeholder="0.00">
        </div>

        <div class="checkout-preview" style="margin:var(--space-4) 0;padding:var(--space-3) var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md)">
          <div style="display:flex;justify-content:space-between;margin-bottom:4px">
            <span class="text-muted">Subtotal</span><span id="preview-subtotal">$0.00</span>
          </div>
          <div style="display:flex;justify-content:space-between;margin-bottom:4px">
            <span class="text-muted">Tax</span><span id="preview-tax">$0.00</span>
          </div>
          <div style="display:flex;justify-content:space-between;font-weight:700;font-size:1.1rem;border-top:1px solid var(--border);padding-top:var(--space-2)">
            <span>Total</span><span id="preview-total">$0.00</span>
          </div>
        </div>

        <div class="field">
          <label for="merchantNotes">Notes <span class="text-muted">(optional)</span></label>
          <input type="text" id="merchantNotes" name="merchantNotes" placeholder="Table 4, order #123…" maxlength="500">
        </div>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary" style="font-size:1.1rem;padding:12px 32px">
            Generate QR &amp; Charge
          </button>
        </div>
      </form>
    </div>
  </main>
</div>

<script src="/platform/merchant/js/checkout-create.js"></script>

<%- include('../shared/_foot') %>
