<%- include('../partials/header') %>
<%- include('../partials/sidebar') %>

<div class="dashboard-header" style="margin-bottom: 30px;">
  <h1 class="text-gradient">Pedidos de Música</h1>
  <p style="color: var(--text-muted);">Veja o que seus ouvintes estão pedindo.</p>
</div>

<div class="card">
  <div style="overflow-x: auto;">
    <table style="width: 100%; border-collapse: collapse; text-align: left;">
      <thead>
        <tr style="border-bottom: 1px solid var(--border-color);">
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Ouvinte</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Música / Artista</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Mensagem</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Data</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Ações</th>
        </tr>
      </thead>
      <tbody>
        <% if (pedidos.length > 0) { %>
          <% pedidos.forEach(pedido => { %>
            <tr style="border-bottom: 1px solid rgba(42, 52, 74, 0.5); background: <%= pedido.lido ? 'transparent' : 'rgba(189,0,255,0.05)' %>;">
              <td style="padding: 15px; font-weight: 600;">
                <%= pedido.nome_ouvinte %> 
                <% if(pedido.bairro_cidade) { %><br><small style="color: var(--text-muted); font-weight: 400;"><%= pedido.bairro_cidade %></small><% } %>
              </td>
              <td style="padding: 15px; color: var(--neon-blue); font-weight: 600;"><i class="fas fa-music"></i> <%= pedido.artista_musica %></td>
              <td style="padding: 15px; color: var(--text-muted); font-size: 0.9rem;"><%= pedido.mensagem || '--' %></td>
              <td style="padding: 15px; color: var(--text-muted); font-size: 0.9rem;">
                <%= new Date(pedido.data_pedido).toLocaleString('pt-BR') %>
              </td>
              <td style="padding: 15px;">
                <% if (!pedido.lido) { %>
                  <form action="/admin/pedidos/lido/<%= pedido.id %>" method="POST" style="display:inline;">
                    <button type="submit" class="btn" style="background: var(--success); color: white; padding: 6px 12px; font-size: 0.8rem; border-radius: 4px; border: none; cursor: pointer; margin-right: 5px;" title="Marcar como lido">
                      <i class="fas fa-check"></i>
                    </button>
                  </form>
                <% } %>
                <form action="/admin/pedidos/delete/<%= pedido.id %>" method="POST" style="display:inline;" onsubmit="return confirm('Excluir este pedido?');">
                  <button type="submit" class="btn btn-danger" style="padding: 6px 12px; font-size: 0.8rem;">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </td>
            </tr>
          <% }) %>
        <% } else { %>
          <tr><td colspan="5" style="padding: 30px; text-align: center; color: var(--text-muted);">Nenhum pedido recebido.</td></tr>
        <% } %>
      </tbody>
    </table>
  </div>
</div>
<%- include('../partials/footer') %>
