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

<div class="dashboard-header" style="margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center;">
  <div>
    <h1 class="text-gradient">Financeiro</h1>
    <p style="color: var(--text-muted);">Controle de receitas e despesas.</p>
  </div>
  <a href="/admin/financeiro/novo" class="btn btn-primary">
    <i class="fas fa-plus"></i> Novo Lançamento
  </a>
</div>

<div class="dashboard-grid" style="margin-bottom: 30px;">
  <div class="card stat-card">
    <h3>Receitas (Pagas)</h3>
    <div class="value" style="color: var(--success);">R$ <%= receita.toFixed(2) %></div>
  </div>
  <div class="card stat-card">
    <h3>Despesas (Pagas)</h3>
    <div class="value" style="color: var(--danger);">R$ <%= despesa.toFixed(2) %></div>
  </div>
  <div class="card stat-card">
    <h3>Saldo Líquido</h3>
    <div class="value" style="color: <%= saldo >= 0 ? 'var(--success)' : 'var(--danger)' %>;">R$ <%= saldo.toFixed(2) %></div>
  </div>
</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;">Tipo</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Descrição</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Valor</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Vencimento</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Status</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Ações</th>
        </tr>
      </thead>
      <tbody>
        <% if (lancamentos.length > 0) { %>
          <% lancamentos.forEach(l => { %>
            <tr style="border-bottom: 1px solid rgba(42, 52, 74, 0.5);">
              <td style="padding: 15px;">
                <% if(l.tipo === 'receita') { %>
                  <span style="color: var(--success);"><i class="fas fa-arrow-up"></i> Receita</span>
                <% } else { %>
                  <span style="color: var(--danger);"><i class="fas fa-arrow-down"></i> Despesa</span>
                <% } %>
              </td>
              <td style="padding: 15px; font-weight: 600;"><%= l.descricao %></td>
              <td style="padding: 15px; font-weight: bold;">R$ <%= parseFloat(l.valor).toFixed(2) %></td>
              <td style="padding: 15px; color: var(--text-muted); font-size: 0.9rem;">
                <%= l.data_vencimento ? new Date(l.data_vencimento).toLocaleDateString('pt-BR', {timeZone: 'UTC'}) : '--' %>
              </td>
              <td style="padding: 15px;">
                <% if(l.status === 'pago') { %>
                  <span style="background: rgba(0,255,136,0.1); color: var(--success); padding: 4px 8px; border-radius: 4px; font-size: 0.85rem;"><i class="fas fa-check"></i> Pago</span>
                <% } else { %>
                  <span style="background: rgba(255,71,87,0.1); color: var(--danger); padding: 4px 8px; border-radius: 4px; font-size: 0.85rem;"><i class="fas fa-clock"></i> Pendente</span>
                <% } %>
              </td>
              <td style="padding: 15px;">
                <% if(l.status === 'pendente') { %>
                  <form action="/admin/financeiro/pago/<%= l.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: none; border-radius: 4px; margin-right: 5px;" title="Marcar como Pago">
                      <i class="fas fa-check-double"></i>
                    </button>
                  </form>
                <% } %>
                <form action="/admin/financeiro/delete/<%= l.id %>" method="POST" style="display:inline;" onsubmit="return confirm('Excluir lançamento?');">
                  <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="6" style="padding: 30px; text-align: center; color: var(--text-muted);">Nenhum lançamento financeiro.</td></tr>
        <% } %>
      </tbody>
    </table>
  </div>
</div>
<%- include('../partials/footer') %>
