<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pagos de <%= licencia.Cliente.nombre %> | SistemasPro</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/estilos.css" />
</head>
<body>
  <%- include('partials/nav', { activo: 'clientes' }) %>

  <main class="page">
    <a href="/clientes" class="back-link">← Volver a clientes</a>
    <div class="page-head">
      <div>
        <h1><%= licencia.Cliente.nombre %></h1>
        <p class="page-sub">
          <%= licencia.Sistema.nombre %> ·
          <span class="badge <%= licencia.activa ? 'badge-ok' : 'badge-off' %>"><%= licencia.activa ? 'ACTIVO' : 'SUSPENDIDO' %></span>
          · <%= licencia.periodicidad %><% if (licencia.precio) { %> ($<%= licencia.precio %>)<% } %>
          · próximo pago: <%= licencia.fechaVencimiento || '—' %>
        </p>
      </div>
    </div>

    <div class="card-grid" style="align-items: start;">
      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0;">Registrar pago</h3>
        <form action="/licencias/<%= licencia.id %>/pagos" method="POST">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <div class="form-group">
            <label>Monto</label>
            <input type="number" step="0.01" name="monto" value="<%= licencia.precio || '' %>" required />
          </div>
          <div class="form-group">
            <label>Fecha del pago</label>
            <input type="date" name="fechaPago" required />
          </div>
          <div class="form-group">
            <label>Método</label>
            <select name="metodo" required>
              <option value="transferencia">Transferencia</option>
              <option value="zelle">Zelle</option>
              <option value="efectivo">Efectivo</option>
              <option value="otro">Otro</option>
            </select>
          </div>
          <div class="form-group">
            <label>Próximo pago (opcional)</label>
            <input type="date" name="proximoPago" />
            <span class="form-hint">Si lo dejás vacío, se calcula solo según la periodicidad (<%= licencia.periodicidad %>).</span>
          </div>
          <div class="form-group">
            <label>Notas (opcional)</label>
            <input type="text" name="notas" />
          </div>
          <button type="submit" class="btn btn-primary btn-full">Guardar pago</button>
        </form>
      </div>

      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0;">Historial</h3>
        <% if (pagos.length === 0) { %>
          <p style="color: var(--ink-faint); font-size: 0.85rem;">Todavía no hay pagos registrados.</p>
        <% } else { %>
          <div class="table-wrap">
            <table>
              <thead><tr><th>Fecha</th><th>Monto</th><th>Método</th><th>Notas</th></tr></thead>
              <tbody>
                <% pagos.forEach(function (p) { %>
                  <tr>
                    <td data-label="Fecha"><%= p.fechaPago %></td>
                    <td data-label="Monto">$<%= p.monto %></td>
                    <td data-label="Método"><%= p.metodo %></td>
                    <td data-label="Notas"><%= p.notas || '—' %></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        <% } %>
      </div>
    </div>
  </main>
</body>
</html>
