<%- 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/requests" class="nav-link nav-link--active">Requests</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 class="mono"><%= checkout.sessionCode %></h1>
        <p class="text-muted">From <strong><%= checkout.orgName %></strong></p>
      </div>
      <span class="status-pill-lg status-pill--<%= checkout.status %>"><%= checkout.status.replace(/_/g, ' ') %></span>
    </div>

    <%- include('../shared/_errors', { errors }) %>

    <div class="detail-grid">
      <!-- ── Invoice ───────────────────────────────────────────── -->
      <section class="org-section detail-card">
        <h2>Invoice from <%= checkout.orgName %></h2>
        <% if (checkout.locationName) { %>
        <p class="text-muted"><%= checkout.locationName %></p>
        <% } %>

        <% if (checkout.merchantNotes) { %>
        <div class="banner" style="background:var(--surface-sunken);border:1px solid var(--border);margin:var(--space-4) 0">
          <%= checkout.merchantNotes %>
        </div>
        <% } %>

        <div class="invoice-items">
          <% for (const item of items) { %>
          <div class="invoice-item">
            <div>
              <strong><%= item.itemName %></strong>
              <% if (item.description) { %><div class="text-muted" style="font-size:0.85rem"><%= item.description %></div><% } %>
              <span class="text-muted">× <%= item.quantity %> @ $<%= Number(item.unitPrice).toFixed(2) %></span>
            </div>
            <strong>$<%= Number(item.lineTotal).toFixed(2) %></strong>
          </div>
          <% } %>
        </div>

        <div class="invoice-totals">
          <div class="inline-kv"><span>Subtotal</span><strong>$<%= Number(checkout.subtotal).toFixed(2) %></strong></div>
          <div class="inline-kv"><span>Tax</span><strong>$<%= Number(checkout.tax).toFixed(2) %></strong></div>
          <div class="inline-kv total-row"><span>Total due</span><strong>$<%= Number(checkout.total).toFixed(2) %></strong></div>
        </div>

        <% if (checkout.status === 'settled') { %>
        <div class="settle-badge">
          Payment settled<% if (checkout.settledAt) { %> · <%= new Date(checkout.settledAt).toLocaleString() %><% } %>
        </div>
        <% } %>

        <% if (checkout.declineReason) { %>
        <div class="banner banner--error" style="margin-top:var(--space-4)">
          You declined this request: <%= checkout.declineReason %>
        </div>
        <% } %>

        <% if (checkout.status === 'expired') { %>
        <div class="banner banner--warn" style="margin-top:var(--space-4)">
          This request expired.
        </div>
        <% } %>
      </section>

      <!-- ── Actions ───────────────────────────────────────────── -->
      <div class="detail-sidebar">
        <% if (checkout.status === 'delivered') { %>
        <section class="org-section">
          <h2>Approve payment</h2>
          <% if (!methods.length) { %>
          <div class="banner banner--warn">
            You don't have any payment methods saved. <a href="/payer/methods">Add one →</a>
          </div>
          <% } else { %>
          <form method="POST" action="/payer/requests/<%= checkout.id %>/approve" class="approve-form">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <div class="field">
              <label for="methodId">Pay with</label>
              <select id="methodId" name="methodId" required>
                <% for (const m of methods) { %>
                <option value="<%= m.id %>" <%= m.isDefault ? 'selected' : '' %>>
                  <%= m.label %> · <%= m.network %> <%= m.maskedAccount %>
                </option>
                <% } %>
              </select>
            </div>
            <div class="amount-confirm">
              Authorising <strong>$<%= Number(checkout.total).toFixed(2) %></strong> to <%= checkout.orgName %>
            </div>
            <button type="submit" class="btn btn-primary btn--full">
              Approve — $<%= Number(checkout.total).toFixed(2) %>
            </button>
          </form>
          <% } %>
        </section>

        <section class="org-section" style="margin-top:var(--space-4)">
          <h2>Decline</h2>
          <form method="POST" action="/payer/requests/<%= checkout.id %>/decline">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <div class="field">
              <label for="declineReason">Reason <span class="field-hint">(optional)</span></label>
              <input type="text" id="declineReason" name="declineReason"
                     placeholder="e.g. Wrong amount" maxlength="255">
            </div>
            <button type="submit" class="btn btn-secondary btn--full"
                    onclick="return confirm('Decline this payment request?')">
              Decline request
            </button>
          </form>
        </section>
        <% } else if (checkout.status === 'settled' && checkout.methodLabel) { %>
        <section class="org-section">
          <h2>Payment method</h2>
          <p><strong><%= checkout.methodLabel %></strong></p>
          <p class="text-muted"><%= checkout.methodNetwork %> · <%= checkout.methodMasked %></p>
        </section>
        <% } %>

        <section class="org-section">
          <h2>Request details</h2>
          <div class="detail-kv"><span>Reference</span><span class="mono"><%= checkout.sessionCode %></span></div>
          <div class="detail-kv"><span>From</span><span><%= checkout.orgName %></span></div>
          <div class="detail-kv"><span>Created</span><span><%= new Date(checkout.createdAt).toLocaleString() %></span></div>
          <% if (checkout.expiresAt && checkout.status === 'delivered') { %>
          <div class="detail-kv"><span>Expires</span><span><strong><%= new Date(checkout.expiresAt).toLocaleString() %></strong></span></div>
          <% } %>
          <% if (checkout.approvedAt) { %>
          <div class="detail-kv"><span>Approved</span><span><%= new Date(checkout.approvedAt).toLocaleString() %></span></div>
          <% } %>
        </section>
      </div>
    </div>
  </main>
</div>

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