<%- include('../shared/_head', { title: title, portalCss: '/platform/merchant/css/portal.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--merchant">Merchant</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/merchant/dashboard" class="nav-link">Dashboard</a>
      <a href="/merchant/organization" class="nav-link"><%= org.name %></a>
      <a href="/merchant/checkouts" class="nav-link nav-link--active">Requests</a>
      <a href="/merchant/pos" class="nav-link">POS Charge</a>
      <span class="nav-divider">·</span>
      <span class="nav-user"><%= merchantUser.fullName %></span>
      <form method="POST" action="/merchant/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 requests</h1>
        <p class="text-muted"><%= org.name %></p>
      </div>
      <a href="/merchant/checkouts/new" class="btn btn-primary btn--sm">New request</a>
    </div>

    <!-- ── Summary counts ────────────────────────────────────────────── -->
    <% if (counts) { %>
    <div class="count-strip">
      <div class="count-item"><span class="count-value"><%= Number(counts.total) || 0 %></span><span class="count-label">Total</span></div>
      <div class="count-item"><span class="count-value"><%= Number(counts.draft) || 0 %></span><span class="count-label">Draft</span></div>
      <div class="count-item"><span class="count-value"><%= Number(counts.delivered) || 0 %></span><span class="count-label">Awaiting payer</span></div>
      <div class="count-item count-item--success"><span class="count-value"><%= Number(counts.settled) || 0 %></span><span class="count-label">Settled</span></div>
    </div>
    <% } %>

    <!-- ── Request list ───────────────────────────────────────────────── -->
    <% if (!checkouts.length) { %>
    <div class="empty-state">
      <p>No payment requests yet. Create one to send to a payer.</p>
      <a href="/merchant/checkouts/new" class="btn btn-primary btn--sm">New request →</a>
    </div>
    <% } else { %>
    <div class="data-table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Code</th>
            <th>Payer</th>
            <th>Location</th>
            <th>Total</th>
            <th>Status</th>
            <th>Created</th>
          </tr>
        </thead>
        <tbody>
          <% for (const cr of checkouts) { %>
          <tr onclick="location.href='/merchant/checkouts/<%= cr.id %>'" style="cursor:pointer">
            <td><span class="mono"><a href="/merchant/checkouts/<%= cr.id %>"><%= cr.sessionCode %></a></span></td>
            <td>
              <div><strong><%= cr.payerName %></strong></div>
              <div class="text-muted" style="font-size:0.8rem"><%= cr.payerEmail %></div>
            </td>
            <td><%= cr.locationName || '—' %></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>
    <% } %>
  </main>
</div>

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