<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pedidos | 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" />
  <style>
    .badge-estado { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
    .badge-pago_confirmado, .badge-entregado { background: var(--ok-bg); color: var(--ok); }
    .badge-enviado, .badge-embalando { background: var(--warn-bg); color: var(--warn); }
    .badge-cancelado { background: var(--error-bg); color: var(--error); }
  </style>
</head>
<body>
  <%- include('partials/nav', { activo: 'pedidos' }) %>

  <main class="page">
    <div class="page-head">
      <div>
        <h1>Pedidos</h1>
        <p class="page-sub">Confirmá el pago apenas lo veas en tu cuenta, y andá actualizando el estado a medida que preparás el envío.</p>
      </div>
    </div>

    <div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom: 1.4rem;">
      <a href="/panel/pedidos" class="btn <%= !filtroEstado ? 'btn-primary' : 'btn-outline' %> btn-sm">Todos</a>
      <a href="/panel/pedidos?estado=pendiente_pago" class="btn <%= filtroEstado === 'pendiente_pago' ? 'btn-primary' : 'btn-outline' %> btn-sm">Pendiente de pago</a>
      <a href="/panel/pedidos?estado=pago_confirmado" class="btn <%= filtroEstado === 'pago_confirmado' ? 'btn-primary' : 'btn-outline' %> btn-sm">Pago confirmado</a>
      <a href="/panel/pedidos?estado=embalando" class="btn <%= filtroEstado === 'embalando' ? 'btn-primary' : 'btn-outline' %> btn-sm">Embalando</a>
      <a href="/panel/pedidos?estado=enviado" class="btn <%= filtroEstado === 'enviado' ? 'btn-primary' : 'btn-outline' %> btn-sm">Enviado</a>
      <a href="/panel/pedidos?estado=entregado" class="btn <%= filtroEstado === 'entregado' ? 'btn-primary' : 'btn-outline' %> btn-sm">Entregado</a>
    </div>

    <% if (pedidos.length === 0) { %>
      <div class="card empty-state">No hay pedidos <%= filtroEstado ? 'en este estado' : 'todavía' %>.</div>
    <% } else { %>
      <div class="table-wrap">
        <table>
          <thead><tr><th>#</th><th>Cliente</th><th>Método de pago</th><th>Total</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            <% pedidos.forEach(function (p) { %>
              <tr>
                <td data-label="#">#<%= p.id %></td>
                <td data-label="Cliente"><%= p.clienteNombre %><br><span style="color:var(--ink-faint); font-size:0.78rem;"><%= p.clienteTelefono %></span></td>
                <td data-label="Método de pago"><%= p.metodoPago ? p.metodoPago.nombre : '—' %></td>
                <td data-label="Total">$<%= p.total %></td>
                <td data-label="Estado"><span class="badge badge-estado badge-<%= p.estado %>"><%= p.estado.replace('_',' ').toUpperCase() %></span></td>
                <td data-label=""><a href="/panel/pedidos/<%= p.id %>" class="btn btn-outline btn-sm">Ver</a></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    <% } %>
  </main>
</body>
</html>
