<%- include('../shared/_head', { title: title, portalCss: '/platform/payer/css/portal.css', bodyClass: 'payer-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 portal-badge--payer">Payer</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/payer/dashboard" class="nav-link">My account</a>
      <a href="/payer/methods" class="nav-link nav-link--active">Payment methods</a>
      <a href="/payer/dashboard/scan" class="nav-link">Scan to Pay</a>
      <span class="nav-divider">·</span>
      <span class="nav-user"><%= payerAccount.fullName %></span>
      <form method="POST" action="/payer/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>Payment methods</h1>
        <p class="text-muted">Your securely stored cards and payment accounts.</p>
      </div>
    </div>

    <!-- ── Existing methods ─────────────────────────────────────────── -->
    <% if (methods.length) { %>
    <div class="methods-grid">
      <% for (const method of methods) { %>
      <div class="method-card <%= method.isDefault ? 'method-card--default' : '' %>">
        <div class="method-card-header">
          <div class="method-network"><%= method.network %></div>
          <% if (method.isDefault) { %>
          <span class="status-pill status-pill--success">Default</span>
          <% } %>
        </div>
        <div class="method-card-label"><%= method.label %></div>
        <div class="method-card-meta">
          <span class="mono"><%= method.maskedAccount %></span>
          <% if (method.expiresMonth && method.expiresYear) { %>
          · Expires <%= String(method.expiresMonth).padStart(2, '0') %>/<%= method.expiresYear %>
          <% } %>
        </div>
        <div class="method-card-type text-muted"><%= method.billingType %></div>
        <div class="method-card-actions">
          <% if (!method.isDefault) { %>
          <form method="POST" action="/payer/methods/<%= method.id %>/default" style="display:inline">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button type="submit" class="btn-link">Set default</button>
          </form>
          <% } %>
          <form method="POST" action="/payer/methods/<%= method.id %>/remove" style="display:inline">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button type="submit" class="btn-link btn-link--warn"
                    onclick="return confirm('Remove this payment method?')">Remove</button>
          </form>
        </div>
      </div>
      <% } %>
    </div>
    <% } else { %>
    <div class="empty-state">
      <p>No payment methods yet. Add a card below to get started.</p>
    </div>
    <% } %>

    <!-- ── Add method via Stripe Elements ─────────────────────────── -->
    <section class="org-section">
      <h2>Add a payment method</h2>
      <p class="text-muted">
        Your card details are encrypted and sent directly to Stripe.
        <strong>BeezifiPay never sees your raw card number.</strong>
      </p>

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

      <% if (stripePublishableKey) { %>
      <form id="add-method-form" class="auth-form" style="max-width:480px"
            data-stripe-key="<%= stripePublishableKey %>">
        <div class="field">
          <label for="card-nickname">Card nickname <span class="text-muted">(optional)</span></label>
          <input type="text" id="card-nickname" name="label" placeholder="My Visa" maxlength="120">
        </div>

        <div class="field">
          <label>Card details <span class="required">*</span></label>
          <div id="card-element" class="stripe-element-container"></div>
          <div id="card-errors" class="field-error" role="alert"></div>
        </div>

        <div class="form-actions">
          <button type="submit" id="add-btn" class="btn btn-primary">Save card</button>
        </div>
      </form>

      <form id="add-method-submit" method="POST" action="/payer/methods/add" style="display:none">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <input type="hidden" name="stripePaymentMethodId" id="stripe-pm-id">
        <input type="hidden" name="label" id="stripe-label">
      </form>
      <% } else { %>
      <div class="banner banner--warn">
        <p>Stripe is not configured. Payment method management is unavailable in this environment.</p>
      </div>
      <% } %>
    </section>
  </main>
</div>

<% if (stripePublishableKey) { %>
<script src="https://js.stripe.com/v3/"></script>
<script src="/platform/payer/js/stripe-methods.js"></script>
<% } %>

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