<%- 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">Payment methods</a>
      <a href="/payer/dashboard/scan" class="nav-link">Scan to Pay</a>
      <a href="/payer/requests" class="nav-link nav-link--active">Requests<% if (pending.length) { %> <span class="nav-badge"><%= pending.length %></span><% } %></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') %>

    <h1>Payment requests</h1>

    <!-- ── Pending ──────────────────────────────────────────────── -->
    <% if (pending.length) { %>
    <section class="org-section" style="margin-top:var(--space-6)">
      <div class="section-header">
        <h2>Awaiting your response <span class="nav-badge nav-badge--inline"><%= pending.length %></span></h2>
      </div>
      <div class="request-cards">
        <% for (const cr of pending) { %>
        <a href="/payer/requests/<%= cr.id %>" class="request-card request-card--pending">
          <div class="request-card-header">
            <strong><%= cr.orgName %></strong>
            <span class="status-pill status-pill--pending">action needed</span>
          </div>
          <div class="request-card-amount">$<%= Number(cr.total).toFixed(2) %></div>
          <div class="request-card-meta">
            <span class="mono"><%= cr.sessionCode %></span>
            <% if (cr.expiresAt) { %>
            · Expires <%= new Date(cr.expiresAt).toLocaleDateString() %>
            <% } %>
          </div>
        </a>
        <% } %>
      </div>
    </section>
    <% } else { %>
    <div class="empty-state" style="margin-top:var(--space-6)">
      <p>No pending payment requests.</p>
    </div>
    <% } %>

    <!-- ── History ───────────────────────────────────────────────── -->
    <% if (history.length) { %>
    <section class="org-section" style="margin-top:var(--space-6)">
      <h2>History</h2>
      <div class="data-table-wrap">
        <table class="data-table">
          <thead>
            <tr><th>Code</th><th>Merchant</th><th>Total</th><th>Status</th><th>Date</th></tr>
          </thead>
          <tbody>
            <% for (const cr of history) { %>
            <tr onclick="location.href='/payer/requests/<%= cr.id %>'" style="cursor:pointer">
              <td><span class="mono"><a href="/payer/requests/<%= cr.id %>"><%= cr.sessionCode %></a></span></td>
              <td><%= cr.orgName %></td>
              <td><strong>$<%= Number(cr.total).toFixed(2) %></strong></td>
              <td><span class="status-pill status-pill--<%= cr.status %>"><%= cr.status.replace(/_/g,' ') %></span></td>
              <td class="text-muted" style="font-size:0.85rem"><%= new Date(cr.createdAt).toLocaleDateString() %></td>
            </tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </section>
    <% } %>
  </main>
</div>

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