<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Métodos de pago | Trokkmart</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: 'metodos-pago' }) %>

  <main class="page">
    <div class="page-head">
      <div>
        <h1>Métodos de pago</h1>
        <p class="page-sub">Lo que tus clientes ven al finalizar su compra. Ellos pagan por fuera del sistema (transferencia, Zelle, etc.) y vos confirmás el pago desde "Pedidos".</p>
      </div>
    </div>

    <div class="split-2 split-2--wide-right">
      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0;">Nuevo método</h3>
        <% if (error) { %><p class="alert alert-error"><%= error %></p><% } %>
        <form action="/panel/metodos-pago" method="POST">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <div class="form-group">
            <label>Nombre (lo que ve el cliente)</label>
            <input type="text" name="nombre" placeholder="Ej: Zelle, Pago Móvil Banesco" required />
          </div>
          <div class="form-group">
            <label>Tipo</label>
            <select name="tipo" required>
              <option value="zelle">Zelle</option>
              <option value="pago_movil">Pago Móvil</option>
              <option value="transferencia">Transferencia bancaria</option>
              <option value="paypal">PayPal</option>
              <option value="efectivo">Efectivo / contra entrega</option>
              <option value="otro">Otro</option>
            </select>
          </div>
          <div class="form-group">
            <label>Datos para pagar</label>
            <textarea name="datosPago" rows="3" placeholder="Ej: Titular Juan Pérez, banco Banesco, teléfono 0412-1234567, cédula V-12345678" required></textarea>
          </div>
          <div class="form-group">
            <label>Instrucciones extra (opcional)</label>
            <input type="text" name="instrucciones" placeholder="Ej: Enviar captura del pago por WhatsApp" />
          </div>
          <button type="submit" class="btn btn-primary btn-full">Agregar método</button>
        </form>
      </div>

      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0;">Configurados</h3>
        <% if (metodos.length === 0) { %>
          <p style="color: var(--ink-faint); font-size: 0.85rem;">Todavía no cargaste ningún método de pago. Sin al menos uno activo, tus clientes no van a poder finalizar la compra.</p>
        <% } else { %>
          <div class="table-wrap">
            <table>
              <thead><tr><th>Nombre</th><th>Tipo</th><th>Estado</th><th>Acciones</th></tr></thead>
              <tbody>
                <% metodos.forEach(function (m) { %>
                  <tr>
                    <td data-label="Nombre"><strong><%= m.nombre %></strong></td>
                    <td data-label="Tipo"><%= m.tipo %></td>
                    <td data-label="Estado"><span class="badge <%= m.activo ? 'badge-ok' : 'badge-off' %>"><%= m.activo ? 'ACTIVO' : 'OCULTO' %></span></td>
                    <td data-label="Acciones">
                      <form action="/panel/metodos-pago/<%= m.id %>/alternar" method="POST" style="display:inline;">
                        <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                        <button type="submit" class="btn btn-outline btn-sm"><%= m.activo ? 'Ocultar' : 'Activar' %></button>
                      </form>
                      <% if (usuarioActual && usuarioActual.rol === 'dueno') { %>
                        <form action="/panel/metodos-pago/<%= m.id %>/eliminar" method="POST" style="display:inline;" onsubmit="return confirm('¿Eliminar este método?');">
                          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                          <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                        </form>
                      <% } %>
                    </td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        <% } %>
      </div>
    </div>
  </main>
</body>
</html>
