<%- 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">Merchant</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/merchant/dashboard" class="nav-link">Dashboard</a>
      <a href="/merchant/checkouts" class="nav-link">Checkouts</a>
      <a href="/merchant/pos" class="nav-link nav-link--active">POS Charge</a>
      <a href="/merchant/organization" class="nav-link">Organisation</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">

    <div id="pos-status" data-session-code="<%= checkout.sessionCode %>">

      <!-- ── Waiting pane ─────────────────────────────────────────────── -->
      <div id="waiting-pane" style="display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:flex-start">

        <!-- QR code -->
        <div style="text-align:center">
          <img src="<%= qrDataUrl %>" alt="Payment QR code"
               style="display:block;width:280px;height:280px;border-radius:var(--radius-md);border:3px solid var(--border)">
          <p class="text-muted" style="font-size:0.78rem;margin-top:8px;max-width:280px;word-break:break-all">
            <%= payUrl %>
          </p>
        </div>

        <!-- Order summary + status -->
        <div style="flex:1;min-width:260px">
          <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)">
            <h2 style="margin:0">Awaiting payment</h2>
            <span id="status-badge" class="status-pill status-pill--processing">processing</span>
          </div>

          <p class="text-muted" style="margin-bottom:var(--space-4)">
            Show this screen to the customer so they can scan the QR code with their phone.
          </p>

          <table class="data-table" style="margin-bottom:var(--space-3)">
            <tbody>
              <% for (const item of items) { %>
              <tr>
                <td><%= item.itemName %></td>
                <td class="text-muted" style="text-align:right">
                  <%= Number(item.quantity) !== 1 ? item.quantity + ' × ' : '' %>$<%= Number(item.unitPrice).toFixed(2) %>
                </td>
                <td style="text-align:right;font-weight:500">$<%= Number(item.lineTotal).toFixed(2) %></td>
              </tr>
              <% } %>
              <% if (Number(checkout.tax) > 0) { %>
              <tr>
                <td class="text-muted">Tax</td>
                <td></td>
                <td style="text-align:right" class="text-muted">$<%= Number(checkout.tax).toFixed(2) %></td>
              </tr>
              <% } %>
            </tbody>
            <tfoot>
              <tr>
                <td><strong>Total</strong></td>
                <td></td>
                <td style="text-align:right;font-weight:700;font-size:1.15rem">
                  $<%= Number(checkout.total).toFixed(2) %> <span class="text-muted"><%= checkout.currency %></span>
                </td>
              </tr>
            </tfoot>
          </table>

          <div style="display:flex;gap:var(--space-3);margin-top:var(--space-4)">
            <a href="/merchant/pos" class="btn btn-ghost">New charge</a>
            <form method="POST" action="/merchant/checkouts/<%= checkout.id %>/cancel" style="display:inline">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <button type="submit" class="btn btn-ghost btn-link--warn"
                      onclick="return confirm('Cancel this payment request?')">Cancel</button>
            </form>
          </div>
        </div>
      </div>

      <!-- ── Success pane (revealed by JS) ──────────────────────────── -->
      <div id="success-pane" style="display:none;text-align:center;padding:var(--space-8) 0">
        <div style="font-size:4rem;margin-bottom:var(--space-4)">✓</div>
        <h2 style="color:var(--success);font-size:2rem;margin-bottom:var(--space-2)">Payment received!</h2>
        <p class="text-muted" style="font-size:1.1rem;margin-bottom:var(--space-2)">
          $<%= Number(checkout.total).toFixed(2) %> <%= checkout.currency %>
        </p>
        <p class="text-muted" id="payer-name" style="margin-bottom:4px"></p>
        <p class="text-muted" style="font-size:0.85rem">at <span id="settled-at"></span></p>
        <div style="margin-top:var(--space-6);display:flex;gap:var(--space-3);justify-content:center">
          <a href="/merchant/pos" class="btn btn-primary">New charge</a>
          <a href="/merchant/checkouts/<%= checkout.id %>" class="btn btn-secondary">View receipt</a>
        </div>
      </div>

      <!-- ── Expired pane (revealed by JS) ──────────────────────────── -->
      <div id="expired-pane" style="display:none;text-align:center;padding:var(--space-8) 0">
        <h2 style="color:var(--ink-muted);margin-bottom:var(--space-2)">QR code expired</h2>
        <p class="text-muted" style="margin-bottom:var(--space-4)">The 15-minute window has passed.</p>
        <a href="/merchant/pos" class="btn btn-primary">New charge</a>
      </div>

    </div>

  </main>
</div>

<script src="/platform/merchant/js/pos-waiting.js"></script>

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