<%# app/views/consolidacao_entregas/validar.html.erb — PASSO 2: Validar entregas %>
<% content_for :title, "Validar — #{@motorista}" %>

<div class="max-w-6xl mx-auto lg:h-[calc(100vh-4rem)] lg:flex lg:flex-col" data-controller="validacao"
     data-validacao-url-value="<%= classificar_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
     data-validacao-massa-url-value="<%= classificar_em_massa_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
     data-validacao-motorista-value="<%= @motorista %>"
     data-validacao-total-value="<%= @total_entregas %>"
     data-validacao-veiculos-value="<%= @veiculos_sel.to_json %>"
     data-validacao-preco-extraordinaria-value="<%= @precos[:extraordinaria] %>">

  <%# Cabeçalho + controles fixos no topo (no desktop); só a lista de NFs rola. %>
  <div class="lg:shrink-0">

  <%# Cabeçalho compacto: voltar, identificação e progresso numa faixa só.
      Espaço vertical aqui é CARO — tudo isto fica fixo e é subtraído da lista,
      que é o que o ADM realmente precisa ver. Antes eram 178px em dois cards. %>
  <div class="flex flex-wrap items-center gap-x-3 gap-y-2 mb-2">
    <%= link_to wizard_consolidacao_path(@consolidacao), title: 'Voltar (Passo 1)',
        class: 'shrink-0 inline-flex items-center justify-center gap-1 bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-[#2a2a2a] hover:border-orange-500 font-semibold px-3 h-11 rounded-lg text-sm' do %>
      ←<span class="hidden sm:inline">Passo 1</span>
    <% end %>

    <%# basis-40: o nome não pode ser espremido até virar "P…" — se não couber
        com o resto, a linha quebra em vez de esmagar a identificação. %>
    <div class="min-w-0 flex-1 basis-40">
      <h1 class="text-xl lg:text-2xl font-bold text-white flex items-center gap-2 truncate"><%= icone :caminhao, espaco: false %> <%= @motorista %></h1>
      <p class="text-gray-400 text-sm truncate"><%= @consolidacao.nome %> · <%= l @consolidacao.data_inicio, format: :short %> → <%= l @consolidacao.data_fim, format: :short %></p>
    </div>

    <%# Progresso ao lado do título (em vez de um card de 70px só p/ ele). No
        celular vai para uma linha própria, no fim, para não brigar pelo espaço.
        Números em branco/negrito: esta é a informação que o ADM confere o tempo
        todo enquanto classifica — compactar não pode custar a leitura dela. %>
    <p class="order-last w-full text-left sm:order-none sm:w-auto sm:shrink-0 sm:text-right text-sm text-gray-400">
      <% if @veiculos_sel.any? %><span class="text-gray-300"><%= icone :caminhao %> <%= @veiculos_sel.join(', ') %></span> — <% end %>
      <span class="text-white font-semibold"><span data-validacao-target="contadorClassificadas"><%= @classificadas %></span>/<span data-validacao-target="contadorTotal"><%= @total_entregas %></span></span>
      classificadas
      <span data-validacao-target="manuaisInfo" class="<%= 'hidden' unless @manuais.positive? %> text-blue-400">·
        +<span data-validacao-target="contadorManuais"><%= @manuais %></span> manuais</span>
      <span class="text-orange-500 font-bold ml-1 text-base" data-validacao-target="percentual"></span>
    </p>

    <%= link_to revisar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista),
        class: 'shrink-0 bg-orange-500 hover:bg-orange-600 text-black font-bold px-4 h-11 rounded-lg flex items-center gap-1 text-sm' do %>
      Revisar<span class="hidden sm:inline"> (Passo 3)</span><%= icone :avancar, cor: nil %>
    <% end %>
  </div>

  <%# Barra com 2 segmentos: laranja = elegíveis classificadas · azul = manuais %>
  <div class="w-full bg-[#0a0a0a] rounded-full h-2 flex overflow-hidden mb-2">
    <div data-validacao-target="barra" class="h-2 bg-orange-500 transition-all duration-300" style="width: 0%"></div>
    <div data-validacao-target="barraManuais" class="h-2 bg-blue-500 transition-all duration-300" style="width: 0%"></div>
  </div>

  <%# Fechar por veículo — filtra a tela por carro, mostra o estado (pronto/
      consolidado/arquivado) e permite CONSOLIDAR o veículo selecionado.
      Só aparece quando o motorista usou mais de um veículo no período. %>
  <% pode_fechar_veiculo = !(@consolidacao.finalizada? && !current_user.pode?('consolidacao.editar_finalizada')) %>
  <% if @veiculos_status.size > 1 %>
    <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-3 mb-3">
      <div class="flex items-center gap-2 mb-2 flex-wrap">
        <span class="text-gray-400 text-sm font-semibold"><%= icone :veiculo %> Fechar por veículo:</span>
        <span class="text-gray-600 text-xs">clique no nome para filtrar; consolide o carro quando estiver 100% (<%= icone :travado, cor: nil, tamanho: 'w-3.5 h-3.5' %>)</span>
      </div>
      <div class="flex flex-wrap gap-2">
        <%# Chip "Todos" — limpa a seleção (mostra todos os carros) %>
        <%= link_to validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista),
            class: "px-3 py-2 rounded-lg text-sm font-semibold border min-h-[40px] flex items-center
                    #{@veiculos_sel.empty? ? 'border-orange-500 text-orange-400 bg-orange-500/10' : 'border-[#2a2a2a] text-gray-300 hover:border-orange-500'}" do %>
          Todos
        <% end %>

        <% @veiculos_status.each do |v| %>
          <% selecionado = @veiculos_sel.include?(v[:vehicle]) %>
          <%# Alterna este veículo dentro da seleção atual (multi-seleção) %>
          <% nova_sel = selecionado ? (@veiculos_sel - [v[:vehicle]]) : (@veiculos_sel + [v[:vehicle]]) %>
          <%# Cor determinística: selecionado(laranja) > consolidado(verde+cadeado) >
              pronto(verde) > arquivado(cinza tracejado) > neutro. %>
          <% cor = if selecionado then 'border-orange-500 text-orange-400 bg-orange-500/10'
                   elsif v[:fechado] then 'border-green-500 text-green-400 bg-green-500/10'
                   elsif v[:completo] then 'border-green-600/50 text-green-400'
                   elsif v[:arquivado] then 'border-dashed border-[#3a3a3a] text-gray-500'
                   else 'border-[#2a2a2a] text-gray-300 hover:border-orange-500' end %>
          <%= link_to validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista, vehicle: nova_sel.presence),
              data: { 'validacao-target': 'chipVeiculo', vehicle: v[:vehicle], eligible: v[:eligible] },
              class: "px-3 py-2 rounded-lg text-sm font-semibold border min-h-[40px] flex items-center gap-2 transition-colors #{cor}" do %>
            <span data-chip-lock class="<%= 'hidden' unless v[:fechado] %>"><%= icone :travado, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %></span>
            <span><%= v[:vehicle] %></span>
            <span class="text-xs <%= v[:completo] ? 'text-green-400' : 'text-gray-500' %>">
              <span data-chip-feito><%= v[:classificadas] %></span>/<span data-chip-total><%= v[:eligible] %></span>
              <span data-chip-check class="<%= 'hidden' unless v[:completo] %>"><%= icone :confirmar, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %></span>
            </span>
          <% end %>
        <% end %>
      </div>

      <%# Ação de consolidação — opera sobre o veículo único selecionado. %>
      <% if pode_fechar_veiculo %>
        <% sel_unico    = @veiculos_sel.size == 1 ? @veiculos_sel.first : nil %>
        <% status_unico = sel_unico && @veiculos_status.find { |v| v[:vehicle] == sel_unico } %>
        <div class="mt-3 pt-3 border-t border-[#2a2a2a]">
          <% if status_unico.nil? %>
            <p class="text-gray-500 text-xs">Selecione <strong>um</strong> veículo (clique no nome) para consolidá-lo separadamente.</p>
          <% elsif status_unico[:fechado] %>
            <div class="flex items-center gap-2 flex-wrap">
              <span class="text-green-400 text-sm font-semibold"><%= icone :travado, cor: nil %> <%= sel_unico %> consolidado.</span>
              <%= button_to reabrir_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
                  method: :post,
                  params: { motorista: @motorista, vehicle: sel_unico, vehicle_sel: @veiculos_sel },
                  form: { data: { turbo_confirm: "Reabrir o veículo #{sel_unico} para edição?" } },
                  class: 'text-gray-400 hover:text-white border border-[#2a2a2a] hover:border-orange-500 px-3 py-2 rounded-lg text-xs min-h-[40px] inline-flex items-center gap-1.5' do %>
                <%= icone :destravado, cor: nil, tamanho: 'w-4 h-4' %> Reabrir veículo
              <% end %>
            </div>
          <% else %>
            <div class="flex items-center gap-2 flex-wrap">
              <%# Habilita só quando o carro está 100% classificado; o JS liga/desliga
                  conforme a barra do escopo selecionado chega (ou não) a 100%. %>
              <%= button_to fechar_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
                  method: :post,
                  params: { motorista: @motorista, vehicle: sel_unico, vehicle_sel: @veiculos_sel },
                  disabled: !status_unico[:completo],
                  data: { 'validacao-target': 'consolidarBtn' },
                  form: { data: { turbo_confirm: "Consolidar o veículo #{sel_unico}? Você poderá reabrir depois." } },
                  class: "font-bold px-4 py-2 rounded-lg text-xs min-h-[40px] inline-flex items-center gap-1.5 #{status_unico[:completo] ? 'bg-green-600 hover:bg-green-500 text-white cursor-pointer' : 'bg-[#2a2a2a] text-gray-600 cursor-not-allowed'}" do %>
                <%= icone :travado, cor: nil, tamanho: 'w-4 h-4' %> Consolidar este veículo
              <% end %>
              <%= button_to arquivar_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
                  method: :post,
                  params: { motorista: @motorista, vehicle: sel_unico, vehicle_sel: @veiculos_sel },
                  form: { data: { turbo_confirm: "Arquivar o veículo #{sel_unico}? Ele sai da finalização (as entregas já classificadas continuam no pagamento)." } },
                  class: 'text-gray-400 hover:text-white border border-[#2a2a2a] hover:border-red-500/50 px-3 py-2 rounded-lg text-xs min-h-[40px] inline-flex items-center gap-1.5' do %>
                <%= icone :arquivar, cor: nil, tamanho: 'w-4 h-4' %> Arquivar veículo
              <% end %>
              <span class="text-gray-500 text-xs" data-validacao-target="consolidarHint">
                <%= status_unico[:completo] ? 'Pronto para consolidar.' : 'Classifique 100% deste veículo para consolidar.' %>
              </span>
            </div>
          <% end %>
        </div>
      <% end %>
    </div>
  <% end %>

  <%# Barra de ações — uma linha só. O botão "Adicionar lançamento" (bloco
      abaixo, que carrega os modais) entra NESTA mesma faixa via flex `order`,
      sem precisar mover os modais de lugar. %>
  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl px-3 py-2 mb-2 flex flex-wrap items-center gap-x-3 gap-y-2">
    <label class="order-1 flex items-center gap-2 text-gray-300 text-sm cursor-pointer select-none h-11 whitespace-nowrap">
      <input type="checkbox" data-validacao-target="selecionarTodos"
             data-action="change->validacao#selecionarTodos"
             class="rounded text-orange-500 bg-[#0a0a0a] border-[#2a2a2a] w-5 h-5">
      Selecionar
      <%# Contador aparece só quando há seleção — é o retorno visual de que os
          pilares saíram do estado inerte. %>
      <span data-validacao-target="chipSelecao"
            class="hidden px-2 py-0.5 rounded-full bg-orange-500 text-black text-xs font-bold"><span data-validacao-target="contadorSelecao">0</span></span>
    </label>

    <%# Pilares SEMPRE visíveis: são a ação principal da tela e o ADM precisa
        vê-los para saber o que pode fazer. Sem seleção eles ficam esmaecidos
        (não escondidos) — a versão anterior os removia do DOM e obrigava a
        descobrir que existiam depois de marcar algo. %>
    <div data-validacao-target="grupoPilares"
         class="order-2 flex items-center gap-1.5 flex-wrap opacity-40 transition-opacity"
         title="Marque ao menos uma entrega para aplicar em massa">
      <button data-action="click->validacao#marcarSelecionados" data-tipo="entrega_normal"
              class="bg-orange-500 text-black font-bold px-3 h-11 rounded-lg text-xs">Normal</button>
      <button data-action="click->validacao#marcarSelecionados" data-tipo="retirada"
              class="bg-orange-800 text-white font-bold px-3 h-11 rounded-lg text-xs">Retirada</button>
      <button data-action="click->validacao#marcarSelecionados" data-tipo="bonus"
              class="bg-white text-black font-bold px-3 h-11 rounded-lg text-xs border border-orange-500">Bônus</button>
      <button data-action="click->validacao#marcarSelecionados" data-tipo="desconto"
              class="bg-black text-white font-bold px-3 h-11 rounded-lg text-xs border border-gray-700">Desconto</button>
      <button data-action="click->validacao#marcarSelecionados" data-tipo="extraordinaria"
              class="bg-purple-600 text-white font-bold px-3 h-11 rounded-lg text-xs">Extra</button>
      <button type="button" data-action="validacao#limparSelecao" data-validacao-target="btnLimpar"
              class="hidden text-gray-400 hover:text-white text-xs underline px-1">limpar</button>
    </div>

    <div class="order-4 ml-auto flex items-center gap-2">
      <%# Oculta/mostra o resumo lateral (mais largura para a lista) %>
      <button type="button" data-action="validacao#toggleResumo"
              class="text-gray-400 hover:text-white text-sm border border-[#2a2a2a] hover:border-orange-500 px-3 h-11 rounded-lg whitespace-nowrap">
        <%= icone :dashboard %> <span data-validacao-target="btnResumoLabel">Ocultar resumo</span>
      </button>
      <%= link_to params[:apenas_pendentes] == '1' ? 'Mostrar todas' : 'Apenas não classificadas',
          validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista, vehicle: @veiculos_sel.presence,
            apenas_pendentes: params[:apenas_pendentes] == '1' ? nil : '1'),
          class: 'text-orange-400 hover:text-orange-300 text-sm border border-orange-500/40 px-3 h-11 rounded-lg flex items-center' %>
    </div>

  <%# Caixa de ferramentas — concentra os lançamentos avulsos (registro manual de
      entrega e entrega de termo) num único botão com menu suspenso. Os modais e
      controllers existentes são reaproveitados; só o gatilho mudou.
      Fica DENTRO da barra de ações (order-2) para não custar uma linha própria;
      os modais são `fixed`, então não afetam o layout da faixa. %>
  <% unless @consolidacao.finalizada? && !current_user.pode?('consolidacao.editar_finalizada') %>
    <div class="order-3 relative"
         data-controller="ferramentas apontamento-manual apontamento-termo"
         data-apontamento-manual-apontar-manual-url-value="<%= apontar_manual_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
         data-apontamento-termo-apontar-termo-url-value="<%= apontar_termo_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
         data-apontamento-termo-motorista-value="<%= @motorista %>">

      <%# Botão único + menu suspenso %>
      <button type="button" data-action="ferramentas#toggle"
              class="inline-flex items-center justify-center gap-2 bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-dashed border-[#3a3a3a] hover:border-orange-500 font-semibold px-4 h-11 rounded-lg text-sm whitespace-nowrap">
        <%= icone :adicionar %> Adicionar lançamento
        <%= icone :expandir, cor: 'text-gray-500', espaco: false %>
      </button>

      <div data-ferramentas-target="menu"
           class="hidden absolute z-40 mt-2 w-72 bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl shadow-xl overflow-hidden">
        <button type="button" data-action="apontamento-manual#abrir ferramentas#fechar"
                class="w-full text-left px-4 py-3 hover:bg-[#2a2a2a] border-l-2 border-transparent hover:border-purple-500">
          <span class="block text-white font-semibold"><%= icone :apontamento %> Registrar entrega manualmente</span>
          <span class="block text-gray-500 text-xs">fora da base de rastreio</span>
        </button>
        <button type="button" data-action="apontamento-termo#abrir ferramentas#fechar"
                class="w-full text-left px-4 py-3 hover:bg-[#2a2a2a] border-t border-[#2a2a2a] border-l-2 border-l-transparent hover:border-l-blue-500">
          <span class="block text-white font-semibold"><%= icone :documento %> Entrega de termo</span>
          <span class="block text-gray-500 text-xs">sem nota/código — só quantidade</span>
        </button>
      </div>

      <%# Modal — registro manual de entrega %>
      <div data-apontamento-manual-target="modal" data-action="click->apontamento-manual#fundo"
           class="hidden fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
        <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto">
          <div class="flex items-center justify-between mb-1">
            <h2 class="text-xl font-bold text-white">Registro manual de entrega</h2>
            <button type="button" data-action="apontamento-manual#fechar"
                    class="text-gray-500 hover:text-white leading-none" aria-label="Fechar"><%= icone :fechar, cor: nil, tamanho: 'w-6 h-6', espaco: false %></button>
          </div>
          <p class="text-gray-400 text-sm mb-4">Lançe uma entrega à mão, sem buscar na base de rastreio. Use quando o motorista foi ao local mas a nota ficou registrada com outro motorista.</p>

          <p data-apontamento-manual-target="erro" class="hidden bg-red-500/10 text-red-400 border border-red-500/30 rounded-lg px-3 py-2 text-sm mb-3"></p>

          <%# Motorista (default = o motorista da tela; pode trocar) %>
          <label class="block text-gray-400 text-sm mb-1">Motorista</label>
          <input data-apontamento-manual-target="motorista" type="text" list="motoristas-consolidacao"
                 value="<%= @motorista %>" placeholder="Nome do motorista"
                 class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none mb-3">
          <datalist id="motoristas-consolidacao">
            <% Array(@motoristas_consolidacao).each do |nome| %>
              <option value="<%= nome %>"></option>
            <% end %>
          </datalist>

          <%# Veículo (Q3) — a qual carro este lançamento pertence (soma no balde dele) %>
          <label class="block text-gray-400 text-sm mb-1">Veículo <span class="text-gray-600">(opcional)</span></label>
          <select data-apontamento-manual-target="veiculo"
                  class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none mb-3">
            <option value="">— sem veículo —</option>
            <% @veiculos_status.map { |v| v[:vehicle] }.reject { |x| x == '(sem veículo)' }.each do |veic| %>
              <option value="<%= veic %>"><%= veic %></option>
            <% end %>
          </select>

          <%# NF + observação (texto livre) %>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
            <div>
              <label class="block text-gray-400 text-sm mb-1">NF <span class="text-gray-600">(opcional)</span></label>
              <input data-apontamento-manual-target="nf" type="text" inputmode="numeric" placeholder="Número da nota"
                     class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-gray-400 text-sm mb-1">Observação / local <span class="text-gray-600">(opcional)</span></label>
              <input data-apontamento-manual-target="obs" type="text" placeholder="Ex.: UBS Sacomã"
                     class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none">
            </div>
          </div>

          <%# Pilares (múltiplos) %>
          <label class="block text-gray-400 text-sm mb-2">Classificar como <span class="text-gray-600">(pode marcar mais de uma)</span></label>
          <div class="grid grid-cols-2 gap-2 mb-3">
            <% [['entrega_normal', :caminhao,       'Entrega Normal',         Configuracao.preco_entrega],
                ['retirada',       :retirada,       'Retirada',               Configuracao.preco_retirada],
                ['bonus',          :bonus,          'Bônus',                  Configuracao.preco_bonus],
                ['desconto',       :desconto,       'Desconto',               Configuracao.preco_desconto],
                ['extraordinaria', :extraordinaria, 'Entrega Extraordinária', Configuracao.preco_extraordinaria]].each do |tipo, ic, label, preco| %>
              <label class="flex items-center gap-2 bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-3 py-3 cursor-pointer hover:border-purple-500 text-sm text-white">
                <input type="checkbox" value="<%= tipo %>" data-apontamento-manual-target="tipoCheck"
                       <%= 'checked' if tipo == 'entrega_normal' %>
                       class="accent-purple-500">
                <span><%= icone ic %> <%= label %><br><span class="text-gray-500 text-xs"><%= moeda(preco) %></span></span>
              </label>
            <% end %>
          </div>

          <%# Valor customizado da Extraordinária (opcional) %>
          <div class="mb-4">
            <label class="block text-gray-400 text-sm mb-1">Valor da Extraordinária <span class="text-gray-600">(opcional — vazio usa o padrão)</span></label>
            <input data-apontamento-manual-target="valorExtra" type="text" inputmode="decimal" placeholder="<%= moeda(Configuracao.preco_extraordinaria) %>"
                   class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none">
          </div>

          <button type="button" data-action="apontamento-manual#adicionar"
                  class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3.5 rounded-lg min-h-[48px]">
            Adicionar apontamento <%= icone :confirmar, cor: nil, espaco: false %>
          </button>
        </div>
      </div>

      <%# Modal — entrega de termo %>
      <div data-apontamento-termo-target="modal" data-action="click->apontamento-termo#fundo"
           class="hidden fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
        <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl w-full max-w-md p-6">
          <div class="flex items-center justify-between mb-1">
            <h2 class="text-xl font-bold text-white flex items-center gap-2"><%= icone :documento, espaco: false %> Entrega de termo</h2>
            <button type="button" data-action="apontamento-termo#fechar"
                    class="text-gray-500 hover:text-white leading-none" aria-label="Fechar"><%= icone :fechar, cor: nil, tamanho: 'w-6 h-6', espaco: false %></button>
          </div>
          <p class="text-gray-400 text-sm mb-4">Entrega sem nota fiscal nem código de rastreio. Informe quantos termos de cada tipo foram entregues.</p>

          <p data-apontamento-termo-target="erro" class="hidden bg-red-500/10 text-red-400 border border-red-500/30 rounded-lg px-3 py-2 text-sm mb-3"></p>

          <%# Motorista (contexto da tela) %>
          <div class="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-4 py-3 mb-4">
            <p class="text-gray-500 text-xs">Motorista</p>
            <p class="text-white font-semibold"><%= icone :caminhao %> <%= @motorista %></p>
          </div>

          <%# Veículo (Q3) — a qual carro estes termos pertencem %>
          <label class="block text-gray-400 text-sm mb-1">Veículo <span class="text-gray-600">(opcional)</span></label>
          <select data-apontamento-termo-target="veiculo"
                  class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-blue-500 focus:outline-none mb-4">
            <option value="">— sem veículo —</option>
            <% @veiculos_status.map { |v| v[:vehicle] }.reject { |x| x == '(sem veículo)' }.each do |veic| %>
              <option value="<%= veic %>"><%= veic %></option>
            <% end %>
          </select>

          <%# Steppers de quantidade — termo normal e termo especial %>
          <div class="grid grid-cols-2 gap-3 mb-5">
            <div class="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg p-3">
              <p class="text-white text-sm font-semibold text-center"><%= icone :documento %> Termo Normal</p>
              <p class="text-blue-400 text-xs text-center mb-2"><%= moeda(@precos[:termo]) %> cada</p>
              <div class="flex items-center justify-center gap-2">
                <button type="button" data-action="apontamento-termo#menos"
                        class="w-10 h-10 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] hover:border-blue-500 text-white text-xl font-bold leading-none">−</button>
                <input data-apontamento-termo-target="quantidade" type="text" inputmode="numeric" value="1" readonly
                       class="w-14 text-center bg-[#1a1a1a] border border-[#2a2a2a] text-white text-xl font-bold rounded-lg py-2 focus:outline-none">
                <button type="button" data-action="apontamento-termo#mais"
                        class="w-10 h-10 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] hover:border-blue-500 text-white text-xl font-bold leading-none">+</button>
              </div>
            </div>
            <div class="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg p-3">
              <p class="text-white text-sm font-semibold text-center"><%= icone :termo_especial %> Termo Especial</p>
              <p class="text-cyan-400 text-xs text-center mb-2"><%= moeda(@precos[:termo_especial]) %> cada</p>
              <div class="flex items-center justify-center gap-2">
                <button type="button" data-action="apontamento-termo#menosEspecial"
                        class="w-10 h-10 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] hover:border-cyan-500 text-white text-xl font-bold leading-none">−</button>
                <input data-apontamento-termo-target="quantidadeEspecial" type="text" inputmode="numeric" value="0" readonly
                       class="w-14 text-center bg-[#1a1a1a] border border-[#2a2a2a] text-white text-xl font-bold rounded-lg py-2 focus:outline-none">
                <button type="button" data-action="apontamento-termo#maisEspecial"
                        class="w-10 h-10 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] hover:border-cyan-500 text-white text-xl font-bold leading-none">+</button>
              </div>
            </div>
          </div>

          <button type="button" data-action="apontamento-termo#adicionar"
                  class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3.5 rounded-lg min-h-[48px]">
            Adicionar termos <%= icone :confirmar, cor: nil, espaco: false %>
          </button>
        </div>
      </div>
    </div>
  <% end %>
  </div>
  <%# Fim da barra de ações %>

  </div>
  <%# Fim do cabeçalho fixo — abaixo só a lista de NFs rola. %>

  <div class="grid grid-cols-1 lg:grid-cols-4 gap-3 lg:flex-1 lg:min-h-0">

    <%# ── Lista de entregas (3 colunas) — área rolável ──── %>
    <div class="lg:col-span-3 space-y-2 lg:overflow-y-auto lg:pr-1" data-validacao-target="listaCol">
      <%# Busca na listagem — filtra os cards por NF, local, endereço ou veículo %>
      <div class="sticky top-0 z-20 bg-[#0a0a0a] pb-2">
        <div class="relative">
          <span class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"><%= icone :buscar, cor: 'text-gray-500', espaco: false %></span>
          <input type="search" data-validacao-target="busca" data-action="input->validacao#filtrarBusca"
                 placeholder="Buscar NF, local, endereço ou veículo…" autocomplete="off"
                 class="w-full bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-200 placeholder-gray-500 focus:border-orange-500 focus:outline-none">
        </div>
        <p data-validacao-target="buscaVazia" class="hidden text-gray-500 text-xs mt-2 px-1">Nenhuma nota encontrada para a busca.</p>
      </div>
      <% if @entregas.any? %>
        <% @entregas.each do |e| %>
          <% tipos_ativos = (@classificacoes[e.tracking_id] || []).map(&:tipo) %>
          <div class="bg-[#1a1a1a] border <%= e.falhada? ? 'border-red-500/50' : 'border-[#2a2a2a]' %> rounded-xl p-4 flex flex-col lg:flex-row lg:items-center gap-3"
               data-validacao-target="linha" data-tracking="<%= e.tracking_id %>"
               data-vehicle="<%= e.vehicle.presence || '(sem veículo)' %>"
               data-busca="<%= [e.numero_nf, e.local, e.address, e.vehicle].compact.join(' ').downcase %>"
               data-classificada="<%= tipos_ativos.any? ? '1' : '0' %>">

            <%# Checkbox seleção em massa %>
            <input type="checkbox" data-validacao-target="checkbox" value="<%= e.tracking_id %>"
                   data-action="change->validacao#atualizarSelecao"
                   class="rounded text-orange-500 bg-[#0a0a0a] border-[#2a2a2a] w-5 h-5">

            <%# Dados da entrega %>
            <div class="flex-1 min-w-0">
              <p class="text-white font-semibold truncate">
                NF <%= e.numero_nf %> · <%= e.local %>
                <% if e.falhada? %>
                  <span class="ml-1 align-middle text-[10px] font-bold uppercase tracking-wide bg-red-500/20 text-red-400 border border-red-500/40 px-1.5 py-0.5 rounded"><%= icone :alerta, cor: nil, tamanho: 'w-3.5 h-3.5' %> Insucesso</span>
                <% else %>
                  <span class="ml-1 align-middle text-[10px] font-bold uppercase tracking-wide bg-green-500/20 text-green-400 border border-green-500/40 px-1.5 py-0.5 rounded"><%= icone :confirmar, cor: nil, tamanho: 'w-3.5 h-3.5' %> Entregue</span>
                <% end %>
              </p>
              <p class="text-gray-400 text-xs truncate"><%= icone :local %> <%= e.address.presence || 'sem endereço' %></p>
              <p class="text-gray-500 text-xs">
                <%= icone :calendario %> <%= e.checkout&.strftime('%d/%m/%Y') || '—' %> · <%= icone :caminhao %> <%= e.vehicle.presence || 'sem veículo' %>
                <% if e.atraso_minutos > 0 %> · <%= icone :relogio, cor: 'text-amber-400' %> atraso <%= e.atraso_minutos %>min<% end %>
              </p>
            </div>

            <%# Toggles coloridos — laranja=normal, laranja escuro=retirada, branco=bônus, preto=desconto %>
            <div class="flex flex-wrap gap-1.5 lg:shrink-0" data-validacao-target="toggles" data-tracking="<%= e.tracking_id %>">
              <% [
                ['entrega_normal', 'Normal',   'bg-orange-500 text-black'],
                ['retirada',       'Retirada', 'bg-orange-800 text-white'],
                ['bonus',          'Bônus',    'bg-white text-black border border-orange-500'],
                ['desconto',       'Desc.',    'bg-black text-white border border-gray-700'],
                ['extraordinaria', 'Extra',    'bg-purple-600 text-white']
              ].each do |tipo, label, cores| %>
                <button data-action="click->validacao#classificar"
                        data-tracking="<%= e.tracking_id %>" data-tipo="<%= tipo %>"
                        class="toggle-btn <%= cores %> font-bold px-3 py-2.5 rounded-lg text-xs min-h-[44px] transition-all
                               <%= tipos_ativos.include?(tipo) ? 'ring-2 ring-green-400 scale-105' : 'opacity-50 hover:opacity-100' %>">
                  <%= label %>
                </button>
              <% end %>
            </div>
          </div>
        <% end %>
      <% else %>
        <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-10 text-center">
          <p class="mb-3"><%= icone :sucesso, tamanho: 'w-10 h-10', cor: 'text-green-500', espaco: false %></p>
          <p class="text-gray-400">Nenhuma entrega pendente neste filtro.</p>
        </div>
      <% end %>
    </div>

    <%# ── Resumo lateral (1 coluna) — rola junto se precisar ─────── %>
    <div class="lg:col-span-1 lg:overflow-y-auto" data-validacao-target="resumo">
      <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-5 space-y-4">
        <h3 class="text-white font-bold flex items-center gap-2"><%= icone :dashboard, espaco: false %> Resumo</h3>

        <div class="space-y-2 text-sm">
          <div class="flex justify-between items-center">
            <span class="flex items-center gap-2"><span class="w-3 h-3 bg-orange-500 rounded-full"></span> Normal</span>
            <span class="text-white font-bold" data-validacao-target="qtdNormal">0</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="flex items-center gap-2"><span class="w-3 h-3 bg-orange-800 rounded-full"></span> Retirada</span>
            <span class="text-white font-bold" data-validacao-target="qtdRetirada">0</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="flex items-center gap-2"><span class="w-3 h-3 bg-white rounded-full border border-orange-500"></span> Bônus</span>
            <span class="text-white font-bold" data-validacao-target="qtdBonus">0</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="flex items-center gap-2"><span class="w-3 h-3 bg-black border border-gray-600 rounded-full"></span> Desconto</span>
            <span class="text-white font-bold" data-validacao-target="qtdDesconto">0</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="flex items-center gap-2"><span class="w-3 h-3 bg-purple-600 rounded-full"></span> Extraordinária</span>
            <span class="text-white font-bold" data-validacao-target="qtdExtraordinaria">0</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="flex items-center gap-2"><span class="w-3 h-3 bg-blue-600 rounded-full"></span> Termo</span>
            <span class="text-white font-bold" data-validacao-target="qtdTermo">0</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="flex items-center gap-2"><span class="w-3 h-3 bg-cyan-600 rounded-full"></span> Termo Especial</span>
            <span class="text-white font-bold" data-validacao-target="qtdTermoEspecial">0</span>
          </div>
        </div>

        <div class="border-t border-[#2a2a2a] pt-4 flex justify-between items-center text-sm">
          <span class="flex items-center gap-2 text-blue-400"><span class="w-3 h-3 bg-blue-500 rounded-full"></span> Apontamentos manuais</span>
          <span class="text-blue-400 font-bold" data-validacao-target="qtdManuais"><%= @manuais %></span>
        </div>

        <div class="border-t border-[#2a2a2a] pt-4">
          <p class="text-gray-500 text-xs mb-1">Total do motorista</p>
          <p class="text-orange-500 font-black text-2xl" data-validacao-target="valorTotal">R$ 0,00</p>
        </div>

        <div class="border-t border-[#2a2a2a] pt-4 text-xs text-gray-500 space-y-1">
          <p><%= icone :dinheiro %> Normal: <%= moeda(@precos[:entrega_normal]) %></p>
          <p><%= icone :retirada %> Retirada: <%= moeda(@precos[:retirada]) %></p>
          <p><%= icone :bonus %> Bônus: <%= moeda(@precos[:bonus]) %></p>
          <p><%= icone :desconto %> Desconto: -<%= moeda(@precos[:desconto]) %></p>
          <p><%= icone :extraordinaria %> Extraordinária: <%= moeda(@precos[:extraordinaria]) %> (valor por entrega)</p>
          <p><%= icone :documento %> Termo: <%= moeda(@precos[:termo]) %></p>
          <p><%= icone :termo_especial %> Termo Especial: <%= moeda(@precos[:termo_especial]) %></p>
        </div>
      </div>
    </div>
  </div>
</div>

<%# Estado inicial para o Stimulus %>
<script type="application/json" id="validacao-estado-inicial">
  <% _todas = @classificacoes.values.flatten %>
  <%= raw({
    classificadas: @classificadas,
    manuais: @manuais,
    por_tipo: _todas.group_by(&:tipo).transform_values { |arr| arr.sum(&:quantidade) },
    valor_total: _todas.sum { |c| c.tipo == 'desconto' ? -c.valor_aplicado : c.valor_aplicado }.to_f
  }.to_json) %>
</script>
