<%- 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 portal-badge--admin">Admin</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/admin" class="nav-link">Dashboard</a>
      <a href="/admin/merchants" class="nav-link">Merchants</a>
      <a href="/admin/payers" class="nav-link">Payers</a>
      <a href="/admin/notifications" class="nav-link">Notifications</a>
      <a href="/admin/checkouts" class="nav-link nav-link--active">Checkouts</a>
      <a href="/admin/audit" class="nav-link">Audit log</a>
      <span class="nav-divider">·</span>
      <form method="POST" action="/admin/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">
    <div class="page-header">
      <h1>All checkouts</h1>
      <p class="text-muted">Most recent 200 payment requests across all organizations.</p>
    </div>

    <% if (checkouts.length) { %>
    <table class="data-table">
      <thead>
        <tr>
          <th>Session code</th>
          <th>Organization</th>
          <th>Payer</th>
          <th>Total</th>
          <th>Status</th>
          <th>Created</th>
        </tr>
      </thead>
      <tbody>
        <% for (const c of checkouts) { %>
        <tr>
          <td class="mono" style="font-size:0.85rem"><%= c.sessionCode %></td>
          <td><%= c.orgName %></td>
          <td><%= c.payerName %><br><span class="text-muted" style="font-size:0.8rem"><%= c.payerEmail %></span></td>
          <td>$<%= Number(c.total).toFixed(2) %> <span class="text-muted"><%= c.currency %></span></td>
          <td><span class="status-pill status-pill--<%= c.status %>"><%= c.status.replace(/_/g, ' ') %></span></td>
          <td class="text-muted" style="font-size:0.8rem"><%= new Date(c.createdAt).toLocaleString() %></td>
        </tr>
        <% } %>
      </tbody>
    </table>
    <% } else { %>
    <div class="empty-state"><p>No payment requests yet.</p></div>
    <% } %>
  </main>
</div>

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