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

<div class="auth-shell auth-shell--wide" style="max-width:520px">

  <div style="text-align:center;margin-bottom:var(--space-6)">
    <div class="brand-name" style="font-size:1.5rem;font-weight:700;margin-bottom:4px">BeezifiPay</div>
    <div class="text-muted">Payment request from</div>
    <div style="font-size:1.25rem;font-weight:700;margin-top:4px"><%= checkout.orgName %></div>
  </div>

  <% if (errors && errors.length) { %>
  <div class="banner banner--error" style="margin-bottom:var(--space-4)">
    <% for (const e of errors) { %><p><%= e %></p><% } %>
  </div>
  <% } %>

  <!-- ── Order summary ──────────────────────────────────────────────── -->
  <div style="background:var(--surface-sunken);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-5)">
    <% for (const item of items) { %>
    <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)">
      <span><%= item.itemName %>
        <% if (Number(item.quantity) !== 1) { %><span class="text-muted"> × <%= item.quantity %></span><% } %>
      </span>
      <span style="font-weight:500">$<%= Number(item.lineTotal).toFixed(2) %></span>
    </div>
    <% } %>
    <% if (Number(checkout.tax) > 0) { %>
    <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)">
      <span class="text-muted">Tax</span>
      <span class="text-muted">$<%= Number(checkout.tax).toFixed(2) %></span>
    </div>
    <% } %>
    <div style="display:flex;justify-content:space-between;padding:10px 0 0;font-size:1.25rem;font-weight:700">
      <span>Total</span>
      <span>$<%= Number(checkout.total).toFixed(2) %> <span class="text-muted" style="font-size:0.85rem"><%= checkout.currency %></span></span>
    </div>
  </div>

  <!-- ── Card selection ─────────────────────────────────────────────── -->
  <% if (methods.length) { %>
  <form method="POST" action="/pay/<%= checkout.sessionCode %>/pay">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <div class="field">
      <label>Pay with</label>
      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
        <% for (const m of methods) { %>
        <label style="display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:2px solid var(--border);border-radius:var(--radius-md);cursor:pointer">
          <input type="radio" name="methodId" value="<%= m.id %>"
                 <%= m.isDefault ? 'checked' : '' %>
                 style="accent-color:var(--primary);width:18px;height:18px">
          <span style="flex:1">
            <strong><%= m.network %></strong> <span class="mono text-muted"><%= m.maskedAccount %></span>
            <% if (m.expiresMonth && m.expiresYear) { %>
              <span class="text-muted" style="font-size:0.8rem"> · expires <%= String(m.expiresMonth).padStart(2,'0') %>/<%= m.expiresYear %></span>
            <% } %>
          </span>
          <span class="text-muted" style="font-size:0.8rem"><%= m.billingType %></span>
        </label>
        <% } %>
      </div>
    </div>

    <button type="submit" class="btn btn-primary" style="width:100%;font-size:1.1rem;padding:14px">
      Pay $<%= Number(checkout.total).toFixed(2) %>
    </button>
  </form>

  <p style="text-align:center;margin-top:var(--space-3)">
    <a href="/payer/methods" class="text-muted" style="font-size:0.85rem">+ Add a different card</a>
  </p>

  <% } else { %>
  <div class="banner banner--warn" style="margin-bottom:var(--space-4)">
    <p>You have no saved cards. <a href="/payer/methods">Add a payment method</a> to continue.</p>
  </div>
  <% } %>

  <p class="text-muted" style="text-align:center;font-size:0.8rem;margin-top:var(--space-5)">
    Signed in as <strong><%= payerAccount.email %></strong>
    · <a href="/payer/logout?returnTo=/pay/<%= checkout.sessionCode %>">Switch account</a>
  </p>

</div>

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