<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Finalizar compra</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>
  <nav class="navbar">
    <a href="/carrito" class="logo">← Volver al carrito</a>
  </nav>

  <main class="page">
    <h1 style="font-family: var(--font-display); color: var(--ink);">Finalizar compra</h1>

    <div class="split-2 split-2--wide-right">
      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0;">Tu pedido</h3>
        <% items.forEach(function (item) { %>
          <p style="display:flex; justify-content:space-between; font-size:0.85rem;">
            <span><%= item.cantidad %>x <%= item.producto.nombre %></span>
            <span><%= (item.subtotalLocal && item.subtotalLocal.moneda !== 'USD') ? item.subtotalLocal.formateado : ('$' + item.subtotal) %></span>
          </p>
        <% }) %>
        <p style="text-align:right; margin-top:1rem; font-family: var(--font-display); font-size:1.15rem; color: var(--ink);">
          <% if (totalLocal && totalLocal.moneda !== 'USD') { %>
            Total: <%= totalLocal.formateado %>
            <span style="display:block; font-size:0.8rem; color:var(--ink-faint); font-family: var(--font-body);">≈ $<%= total %> USD</span>
          <% } else { %>
            Total: $<%= total %>
          <% } %>
        </p>
      </div>

      <div class="card">
        <% if (error) { %><p class="alert alert-error"><%= error %></p><% } %>

        <% if (metodosPago.length === 0) { %>
          <p class="alert alert-error">Esta tienda todavía no configuró ningún método de pago. Contactanos directamente para completar tu compra.</p>
        <% } else { %>
          <form action="/checkout" method="POST">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
            <h3 style="font-family: var(--font-display); margin-top:0;">Tus datos</h3>
            <div class="form-group">
              <label>Nombre completo</label>
              <input type="text" name="clienteNombre" required />
            </div>
            <div class="form-group">
              <label>Teléfono (WhatsApp)</label>
              <input type="text" name="clienteTelefono" placeholder="584121234567" required />
            </div>
            <div class="form-group">
              <label>Email (opcional)</label>
              <input type="email" name="clienteEmail" />
            </div>
            <div class="form-group">
              <label>Dirección de envío (opcional)</label>
              <textarea name="clienteDireccion" rows="2"></textarea>
            </div>
            <div class="form-group">
              <label>Notas (opcional)</label>
              <input type="text" name="notas" />
            </div>

            <h3 style="font-family: var(--font-display); margin: 1.4rem 0 0.8rem;">Método de pago</h3>
            <% metodosPago.forEach(function (m, i) { %>
              <label class="checkbox-row" style="align-items:flex-start; margin-bottom: 0.7rem;">
                <input type="radio" name="metodoPagoId" value="<%= m.id %>" <%= i === 0 ? 'checked' : '' %> required style="margin-top: 3px;" />
                <span><strong><%= m.nombre %></strong></span>
              </label>
            <% }) %>

            <button type="submit" class="btn btn-primary btn-full" style="margin-top: 1rem;">Confirmar pedido</button>
          </form>
        <% } %>
      </div>
    </div>
  </main>

  <%- include('partials/footer-publico', { negocio }) %>
</body>
</html>
