<%# app/views/consolidacoes/preview_extrato.html.erb — renderizado sem layout, dentro do modal %>
<div class="bg-white text-black rounded-xl p-6 font-sans">

  <%# Cabeçalho estilo PDF %>
  <div class="bg-[#0a0a0a] rounded-lg p-4 mb-5 flex items-center gap-3">
    <div class="w-2 h-12 bg-orange-500 rounded"></div>
    <div>
      <p class="text-white font-black text-lg leading-tight">REEM TRANSPORTE</p>
      <p class="text-orange-500 text-xs">Extrato de Pagamento — Entregas</p>
    </div>
  </div>

  <%# Identificação %>
  <table class="w-full text-sm mb-5 border border-gray-200 rounded">
    <tr class="border-b border-gray-200">
      <td class="bg-gray-100 font-bold px-3 py-2 w-32">Motorista</td>
      <td class="px-3 py-2"><%= @motorista %></td>
    </tr>
    <tr class="border-b border-gray-200">
      <td class="bg-gray-100 font-bold px-3 py-2">Consolidação</td>
      <td class="px-3 py-2"><%= @consolidacao.nome %></td>
    </tr>
    <tr>
      <td class="bg-gray-100 font-bold px-3 py-2">Período</td>
      <td class="px-3 py-2"><%= l @consolidacao.data_inicio, format: :short %> a <%= l @consolidacao.data_fim, format: :short %></td>
    </tr>
  </table>

  <%# Proventos %>
  <table class="w-full text-sm mb-5">
    <thead>
      <tr class="bg-[#0a0a0a] text-white">
        <th class="text-left px-3 py-2">Descrição</th>
        <th class="text-right px-3 py-2">Qtd</th>
        <th class="text-right px-3 py-2">Valor</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
      <% ConsolidacaoEntrega::TIPO_CORES.each do |tipo, cfg| %>
        <% qtd = @resumo[tipo] || 0 %>
        <% next if qtd.zero? %>
        <% valor = @entregas.where(tipo: tipo).sum(:valor_aplicado) %>
        <tr>
          <td class="px-3 py-2"><%= cfg[:label] %></td>
          <td class="px-3 py-2 text-right"><%= qtd %></td>
          <td class="px-3 py-2 text-right font-semibold <%= tipo == 'desconto' ? 'text-red-600' : '' %>">
            <%= tipo == 'desconto' ? '-' : '+' %> <%= moeda(valor) %>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>

  <%# Total %>
  <div class="bg-orange-500 rounded-lg p-4 text-center">
    <p class="text-xs font-bold text-black/70">VALOR LÍQUIDO A RECEBER</p>
    <p class="text-3xl font-black text-black"><%= moeda(@total) %></p>
  </div>

  <p class="text-gray-400 text-xs text-center mt-4">
    O PDF final inclui o QR Code de acesso rápido ao painel do motorista.
  </p>
</div>
