<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Seguimiento de tu pedido #<%= pedido.id %></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="/" class="logo">← Volver a la tienda</a>
  </nav>

  <main class="page">
    <div class="card" style="max-width: 620px; margin: 0 auto;">
      <% if (esNuevo) { %>
        <p class="alert alert-ok">✓ ¡Recibimos tu pedido #<%= pedido.id %>!</p>
      <% } %>

      <div class="page-head" style="margin-bottom: 1rem;">
        <div>
          <h1 style="font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin: 0;">Pedido #<%= pedido.id %></h1>
          <p class="page-sub" style="margin-top: 0.3rem;">
            <span class="badge <%= pedido.estado === 'cancelado' ? 'badge-off' : 'badge-ok' %>"><%= pedido.estado.replace('_', ' ').toUpperCase() %></span>
          </p>
        </div>
      </div>

      <div class="table-wrap">
        <table>
          <thead><tr><th>Producto</th><th>Cant.</th><th>Subtotal</th></tr></thead>
          <tbody>
            <% pedido.items.forEach(function (item) { %>
              <tr>
                <td data-label="Producto"><%= item.nombreProducto %></td>
                <td data-label="Cant."><%= item.cantidad %></td>
                <td data-label="Subtotal">$<%= (item.precioUnitario * item.cantidad).toFixed(2) %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
      <p style="text-align:right; margin-top: 1rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--ink);">
        Total: $<%= pedido.total %>
      </p>

      <h3 style="font-family: var(--font-display); margin: 1.6rem 0 0.6rem;">Método de pago: <%= pedido.metodoPago.nombre %></h3>
      <p style="white-space: pre-wrap; background: var(--bg); padding: 1rem; border-radius: 8px; font-size: 0.9rem;"><%= pedido.metodoPago.datosPago %></p>
      <% if (pedido.metodoPago.instrucciones) { %>
        <p style="font-size: 0.85rem; color: var(--ink-soft);"><%= pedido.metodoPago.instrucciones %></p>
      <% } %>

      <h3 style="font-family: var(--font-display); margin: 1.6rem 0 0.6rem;">Comprobante de pago</h3>
      <% if (pedido.comprobanteUrl) { %>
        <p class="alert alert-ok" style="font-size: 0.85rem;">Ya recibimos tu comprobante. El negocio lo va a revisar y confirmar tu pago.</p>
        <img src="<%= pedido.comprobanteUrl %>" alt="Comprobante subido" style="max-width: 220px; border-radius: 8px; border: 1px solid var(--line); display: block; margin-bottom: 0.8rem;" />
        <p class="page-sub" style="margin-bottom: 0.5rem;">¿Te equivocaste de imagen? Subí otra para reemplazarla.</p>
      <% } %>
      <form action="/pedido/<%= pedido.codigoSeguimiento %>/comprobante" method="POST" enctype="multipart/form-data">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
        <div class="form-group">
          <input type="file" name="comprobante" accept="image/*" required />
          <p class="page-sub" style="margin: 0.3rem 0 0;">Foto o captura del pago (JPG, PNG, WEBP o GIF, máx. 5MB).</p>
        </div>
        <button type="submit" class="btn btn-primary btn-full"><%= pedido.comprobanteUrl ? 'Subir otro comprobante' : 'Subir comprobante' %></button>
      </form>

      <h3 style="font-family: var(--font-display); margin: 1.6rem 0 0.6rem;">Guardá este link</h3>
      <p class="page-sub" style="margin-bottom: 0.4rem;">Con esto podés volver a ver el estado de tu pedido y subir el comprobante más tarde.</p>
      <input type="text" readonly value="<%= urlSeguimiento %>" onclick="this.select()" style="width: 100%; font-size: 0.85rem;" />
    </div>
  </main>

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