Reem-Notas/app/views/motorista/dashboard/totais.html.erb

<%# app/views/motorista/dashboard/totais.html.erb — Meu total no período %>
<% content_for :title, 'Meu total no período' %>

<div class="max-w-2xl mx-auto">

  <div class="flex items-center justify-between gap-3 mb-4">
    <h1 class="text-2xl font-bold text-white">Meu total no período</h1>
    <%= link_to rotulo(:voltar, 'Voltar', cor: nil), motorista_dashboard_path,
        class: 'text-gray-300 hover:text-white border border-[#2a2a2a] px-4 py-3 rounded-xl min-h-[48px] flex items-center' %>
  </div>

  <%# ── Período ──────────────────────────────────────────── %>
  <%= form_with url: motorista_totais_path, method: :get,
      class: 'bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-4 mb-5 flex flex-wrap items-end gap-3' do |f| %>
    <div class="flex-1 basis-40 min-w-0">
      <label class="block text-gray-400 text-sm mb-1">De</label>
      <%= f.date_field :inicio, value: @inicio.strftime('%Y-%m-%d'),
          class: 'w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-xl px-3 py-3 text-base' %>
    </div>
    <div class="flex-1 basis-40 min-w-0">
      <label class="block text-gray-400 text-sm mb-1">Até</label>
      <%= f.date_field :fim, value: @fim.strftime('%Y-%m-%d'),
          class: 'w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-xl px-3 py-3 text-base' %>
    </div>
    <%= f.submit 'Ver', class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold rounded-xl cursor-pointer px-6 py-3 min-h-[48px]' %>
  <% end %>

  <%# ── Total fechado ────────────────────────────────────── %>
  <div class="bg-white rounded-2xl p-6 mb-5">
    <p class="text-gray-600 font-bold uppercase tracking-wide flex items-center gap-2">
      <%= icone :sucesso, cor: 'text-green-600', espaco: false %> Total fechado no período
    </p>
    <p class="text-gray-600 text-sm mt-1"><%= icone :calendario, cor: 'text-gray-500' %> <%= l @inicio, format: :short %> a <%= l @fim, format: :short %></p>
    <p class="text-black font-black text-4xl sm:text-5xl mt-2 leading-tight whitespace-nowrap"><%= moeda(@totais.total_geral) %></p>
    <div class="flex flex-wrap gap-x-6 gap-y-1 mt-3 text-base">
      <span class="text-green-700 font-bold"><%= icone :dinheiro, cor: 'text-green-700' %> Já pago: <%= moeda(@totais.total_pago) %></span>
      <span class="text-amber-700 font-bold"><%= icone :parcial, cor: 'text-amber-700' %> A receber: <%= moeda(@totais.total_pendente) %></span>
    </div>
    <p class="text-gray-600 text-sm mt-3">
      Soma de <%= @consolidacoes.size %> fechamento(s) da empresa neste período.
    </p>
  </div>

  <%= link_to rotulo(:baixar, 'Baixar relatório em PDF', cor: nil),
      motorista_totais_pdf_path(inicio: @inicio, fim: @fim),
      data: { turbo: false },
      class: 'w-full bg-orange-500 hover:bg-orange-600 text-black font-bold text-base px-6 py-4 rounded-xl min-h-[52px] flex items-center justify-center mb-6' %>

  <%# ── O que compõe o valor ─────────────────────────────── %>
  <h2 class="text-white font-bold text-xl mb-1 flex items-center gap-2"><%= icone :composicao, espaco: false %> O que forma esse valor</h2>
  <p class="text-gray-400 text-base mb-3">Cada fechamento abaixo entra na soma acima.</p>

  <% if @consolidacoes.any? %>
    <div class="space-y-3">
      <% @consolidacoes.each do |cm| %>
        <% c = cm.consolidacao %>
        <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-5">
          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 flex-wrap">
                <p class="text-white font-bold text-lg"><%= c.nome %></p>
                <%= badge_pagamento(cm.pago? ? :pago : :pendente) %>
              </div>
              <p class="text-gray-300 text-base mt-1">
                <%= icone :calendario %> <%= l c.data_inicio, format: :short %> a <%= l c.data_fim, format: :short %>
              </p>
              <p class="text-orange-500 font-black text-3xl mt-1 whitespace-nowrap"><%= moeda(cm.valor_total) %></p>
              <% if cm.pago? %>
                <p class="text-green-400 text-sm mt-1">
                  <%= icone :dinheiro, cor: 'text-green-400' %> Pago em <%= l cm.pago_em.to_date, format: :short %>
                  <% if cm.forma_pagamento.present? %>via <%= cm.forma_pagamento.humanize %><% end %>
                </p>
                <% if cm.nota_fiscal.present? %>
                  <p class="text-gray-300 text-sm mt-0.5"><%= icone :nota_fiscal %> Nota Fiscal: <%= cm.nota_fiscal %></p>
                <% end %>
              <% else %>
                <p class="text-amber-400 text-sm mt-1"><%= icone :parcial, cor: 'text-amber-400' %> Ainda não pago</p>
              <% end %>
            </div>
            <%= link_to rotulo(:baixar, 'Extrato deste fechamento', cor: nil),
                gerar_pdf_extrato_consolidacao_path(c, motorista: current_user.nome),
                data: { turbo: false },
                class: 'w-full md:w-auto bg-[#0a0a0a] border border-[#2a2a2a] hover:border-orange-500 text-white font-bold text-base px-5 py-4 rounded-xl min-h-[52px] flex items-center justify-center text-center' %>
          </div>
        </div>
      <% end %>
    </div>
  <% else %>
    <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-10 text-center">
      <p class="mb-3"><%= icone :vazio, tamanho: 'w-12 h-12', cor: 'text-gray-600', espaco: false %></p>
      <p class="text-gray-200 text-lg">Nenhum fechamento neste período.</p>
      <p class="text-gray-400 text-base mt-1">Escolha outro período acima — o fechamento aparece aqui quando a empresa finaliza a consolidação.</p>
    </div>
  <% end %>
</div>