<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pedido #<%= pedido.id %> | 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: 'pedidos' }) %>

  <main class="page">
    <a href="/panel/pedidos" class="back-link">← Volver a pedidos</a>
    <div class="page-head">
      <div>
        <h1>Pedido #<%= pedido.id %></h1>
        <p class="page-sub">
          <span class="badge <%= pedido.estado === 'cancelado' ? 'badge-off' : 'badge-ok' %>"><%= pedido.estado.replace('_',' ').toUpperCase() %></span>
        </p>
      </div>
    </div>

    <div class="split-2 split-2--wide-left">
      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0;">Productos</h3>
        <div class="table-wrap">
          <table>
            <thead><tr><th>Producto</th><th>Cant.</th><th>Precio</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="Precio">$<%= item.precioUnitario %></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 elegido</h3>
        <p><strong><%= pedido.metodoPago.nombre %></strong></p>
        <p style="white-space: pre-wrap; font-size: 0.85rem; color: var(--ink-soft);"><%= pedido.metodoPago.datosPago %></p>
        <p class="page-sub">Revisá que el pago haya llegado a esta cuenta antes de confirmarlo abajo.</p>

        <h3 style="font-family: var(--font-display); margin: 1.6rem 0 0.6rem;">Comprobante de pago</h3>
        <% if (pedido.comprobanteUrl) { %>
          <a href="<%= pedido.comprobanteUrl %>" target="_blank">
            <img src="<%= pedido.comprobanteUrl %>" alt="Comprobante" style="max-width: 220px; border-radius: 8px; border: 1px solid var(--line); display: block;" />
          </a>
          <p class="page-sub" style="margin-top: 0.4rem;">Click para verlo en tamaño completo.</p>
        <% } else { %>
          <p class="page-sub">El comprador todavía no subió el comprobante.</p>
        <% } %>
      </div>

      <div>
        <div class="card" style="margin-bottom: 1rem;">
          <h3 style="font-family: var(--font-display); margin-top:0;">Datos del comprador</h3>
          <p><strong><%= pedido.clienteNombre %></strong></p>
          <p><%= pedido.clienteTelefono %></p>
          <% if (pedido.clienteEmail) { %><p><%= pedido.clienteEmail %></p><% } %>
          <% if (pedido.clienteDireccion) { %><p style="white-space: pre-wrap;"><%= pedido.clienteDireccion %></p><% } %>
          <% if (pedido.notas) { %><p class="page-sub">Notas: <%= pedido.notas %></p><% } %>
        </div>

        <div class="card">
          <h3 style="font-family: var(--font-display); margin-top:0;">Actualizar estado</h3>

          <% if (siguienteEstado) { %>
            <form action="/panel/pedidos/<%= pedido.id %>/estado" method="POST" style="margin-bottom: 0.8rem;">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <input type="hidden" name="estado" value="<%= siguienteEstado %>" />
              <button type="submit" class="btn btn-primary btn-full">
                Marcar como "<%= siguienteEstado.replace('_',' ') %>"
              </button>
            </form>
          <% } %>

          <% if (linkWhatsAppActual && pedido.estado !== 'pendiente_pago') { %>
            <a href="<%= linkWhatsAppActual %>" target="_blank" class="btn btn-outline btn-full" style="margin-bottom: 0.8rem;">
              Avisar por WhatsApp
            </a>
          <% } %>

          <% if (pedido.estado !== 'cancelado' && pedido.estado !== 'entregado') { %>
            <form action="/panel/pedidos/<%= pedido.id %>/estado" method="POST" onsubmit="return confirm('¿Cancelar este pedido?');">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <input type="hidden" name="estado" value="cancelado" />
              <button type="submit" class="btn btn-danger btn-full">Cancelar pedido</button>
            </form>
          <% } %>
        </div>
      </div>
    </div>
  </main>
</body>
</html>
