<div class="section-title">
  <h1>Historial de pagos</h1>
  <a class="btn btn-ghost btn-sm" href="/admin">← Volver</a>
</div>

<!-- Totales recaudados -->
<section class="card">
  <h2>Total recaudado</h2>
  <% var monedas = Object.keys(totales); %>
  <% if (monedas.length === 0) { %>
    <p class="muted">Aún no hay pagos confirmados.</p>
  <% } else { %>
    <div class="stats">
      <% monedas.forEach(function (m) { %>
        <div class="stat">
          <div class="label"><%= pagos.length %> pago(s) confirmado(s)</div>
          <div class="value"><%= fmt.dinero(totales[m], m) %></div>
        </div>
      <% }); %>
    </div>
  <% } %>
</section>

<!-- Resumen por jugador -->
<section class="card">
  <h2>Resumen por jugador</h2>
  <% if (porJugador.length === 0) { %>
    <p class="muted">Sin pagos todavía.</p>
  <% } else { %>
    <table>
      <thead><tr><th>Jugador</th><th class="center">Quinielas pagadas</th><th>Total pagado</th></tr></thead>
      <tbody>
        <% porJugador.forEach(function (j) { %>
          <tr>
            <td><%= j.jugador %><div class="muted" style="font-size:.8rem"><%= j.email %></div></td>
            <td class="center"><%= j.cantidad %></td>
            <td><strong><%= fmt.dinero(j.total, j.moneda) %></strong></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  <% } %>
</section>

<!-- Detalle de pagos -->
<section class="card">
  <h2>Detalle de pagos confirmados</h2>
  <% if (pagos.length === 0) { %>
    <p class="muted">Sin pagos confirmados.</p>
  <% } else { %>
    <table>
      <thead>
        <tr><th>Jugador</th><th>Quiniela</th><th>Torneo</th><th>Monto</th><th>Confirmado</th><th>Por</th></tr>
      </thead>
      <tbody>
        <% pagos.forEach(function (p) { %>
          <tr>
            <td><%= p.jugador %><div class="muted" style="font-size:.8rem"><%= p.email %></div></td>
            <td><%= p.nombre || ('#' + p.id) %></td>
            <td class="muted"><%= p.torneo_nombre %></td>
            <td><%= fmt.dinero(p.monto, p.moneda) %></td>
            <td class="muted"><%= fmt.fecha(p.validada_en) %></td>
            <td class="muted"><%= p.validador || '—' %></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  <% } %>
</section>
