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

<div class="auth-shell auth-shell--wide">
  <div class="auth-card">
    <div class="auth-brand">
      <span class="brand-name">BeezifiPay</span>
      <div class="portal-badge portal-badge--merchant">Merchant</div>
    </div>

    <h1 class="auth-title">New payment request</h1>
    <p class="auth-subtitle"><%= org.name %></p>

    <%- include('../shared/_errors', { errors }) %>

    <form method="POST" action="/merchant/checkouts/new" class="auth-form" id="checkout-form">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">

      <!-- ── Payer ────────────────────────────────────────────────── -->
      <div class="form-section">
        <h3 class="form-section-title">Payer</h3>
        <div class="field">
          <label for="payerEmail">Payer email address <span class="required">*</span></label>
          <input type="email" id="payerEmail" name="payerEmail"
                 value="<%= typeof values.payerEmail !== 'undefined' ? values.payerEmail : '' %>"
                 placeholder="customer@example.com" required>
          <span class="field-hint">Must be a registered BeezifiPay payer account.</span>
        </div>
      </div>

      <!-- ── Location ────────────────────────────────────────────── -->
      <% if (locations.length) { %>
      <div class="form-section">
        <h3 class="form-section-title">Location <span class="field-hint">(optional)</span></h3>
        <div class="field">
          <label for="locationId">Store or service location</label>
          <select id="locationId" name="locationId">
            <option value="">— No specific location —</option>
            <% for (const loc of locations) { %>
            <option value="<%= loc.id %>" <%= (values.locationId == loc.id) ? 'selected' : '' %>>
              <%= loc.name %> (<%= loc.locationCode %>)
            </option>
            <% } %>
          </select>
        </div>
      </div>
      <% } %>

      <!-- ── Line items ───────────────────────────────────────────── -->
      <div class="form-section">
        <div class="section-header" style="margin-bottom:var(--space-3)">
          <h3 class="form-section-title">Line items</h3>
          <button type="button" class="btn btn-secondary btn--sm" id="add-item">+ Add item</button>
        </div>

        <div class="line-items-header">
          <span>Item name</span><span>Qty</span><span>Unit price</span><span></span>
        </div>

        <div id="line-items-body">
          <% const savedNames  = [].concat((values['item[name]']  || [''])); %>
          <% const savedQtys   = [].concat((values['item[qty]']   || [1])); %>
          <% const savedPrices = [].concat((values['item[price]'] || [0])); %>
          <% for (let i = 0; i < Math.max(savedNames.length, 1); i++) { %>
          <div class="line-item-row">
            <input type="text" name="item[name]" placeholder="Item name"
                   value="<%= savedNames[i] || '' %>" required>
            <input type="number" name="item[qty]" placeholder="1" min="0.001" step="any"
                   value="<%= savedQtys[i] || 1 %>" style="width:80px">
            <input type="number" name="item[price]" placeholder="0.00" min="0" step="0.01"
                   value="<%= savedPrices[i] || '' %>" style="width:110px">
            <button type="button" class="btn-link btn-link--warn remove-item">Remove</button>
          </div>
          <% } %>
        </div>

        <div class="totals-preview">
          <div class="field" style="max-width:180px">
            <label for="taxAmount">Tax amount ($)</label>
            <input type="number" id="taxAmount" name="taxAmount" min="0" step="0.01"
                   value="<%= typeof values.taxAmount !== 'undefined' ? values.taxAmount : '0' %>"
                   placeholder="0.00">
          </div>
          <div class="totals-summary" id="totals-summary">
            <div class="inline-kv"><span>Subtotal</span><strong id="preview-subtotal">$0.00</strong></div>
            <div class="inline-kv"><span>Tax</span><strong id="preview-tax">$0.00</strong></div>
            <div class="inline-kv total-row"><span>Total</span><strong id="preview-total">$0.00</strong></div>
          </div>
        </div>
      </div>

      <!-- ── Notes ────────────────────────────────────────────────── -->
      <div class="form-section">
        <h3 class="form-section-title">Merchant notes <span class="field-hint">(optional, payer visible)</span></h3>
        <div class="field">
          <textarea id="merchantNotes" name="merchantNotes" rows="3" maxlength="500"
                    placeholder="Order #1234 · Table 5 · Special instructions…"><%= typeof values.merchantNotes !== 'undefined' ? values.merchantNotes : '' %></textarea>
        </div>
      </div>

      <div class="form-actions">
        <a href="/merchant/checkouts" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">Create draft</button>
      </div>
    </form>
  </div>
</div>

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

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