<%# locals: fora (Analytics::NotasForaOperacao), inicio, fim (Date)
    NFs entregues no período que não constam em nenhuma planilha de operação —
    os planos avulsos / de inclusão. Contam no dashboard financeiro e antes
    sumiam daqui (o INNER JOIN com a tabela da operação as descartava). %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
  <div class="flex flex-wrap items-center justify-between gap-3 px-6 py-4 border-b border-white/5">
    <div>
      <p class="text-white font-bold flex items-center gap-2">
        <%= icone :parcial, cor: 'text-amber-400', espaco: false %>
        Notas fora da operação
      </p>
      <p class="text-xs text-gray-500 mt-0.5">
        Entregues em <%= inicio.strftime('%d/%m/%Y') %> – <%= fim.strftime('%d/%m/%Y') %>
        sem constar em nenhuma planilha <code class="text-gray-400">gade_entregas_*</code> — planos avulsos e de inclusão.
      </p>
    </div>
    <div class="flex items-center gap-4 text-sm">
      <span class="text-gray-400">NFs <strong class="text-white text-lg"><%= fora.total %></strong></span>
      <span class="text-gray-400">entregues <strong class="text-green-400 text-lg"><%= fora.entregues %></strong></span>
      <span class="text-gray-400">recusas <strong class="text-blue-400 text-lg"><%= fora.nao_entregues %></strong></span>
      <% if fora.pendentes.positive? %>
        <span class="text-gray-400">pendentes <strong class="text-yellow-400 text-lg"><%= fora.pendentes %></strong></span>
      <% end %>
    </div>
  </div>

  <% if fora.total.zero? %>
    <p class="px-6 py-8 text-center text-gray-500 text-sm">
      Nenhuma nota fora das planilhas de operação neste período.
    </p>
  <% else %>
    <%# Quebra por plano de origem — é aqui que "(Avulsa)" e "INCLUSÃO" se separam.
        Se o espelho não guardar o plano, cai para unidade (ver #agrupamento). %>
    <% rotulo_grupo, grupos = fora.agrupamento %>
    <div class="flex flex-wrap items-center gap-2 px-6 py-3 border-b border-white/5">
      <span class="text-xs text-gray-500 uppercase tracking-wider"><%= rotulo_grupo %>:</span>
      <% grupos.first(8).each do |grupo| %>
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs text-gray-300">
          <%= grupo[:nome] %> <strong class="text-white"><%= grupo[:total] %></strong>
        </span>
      <% end %>
    </div>

    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-white/5 text-gray-400 text-xs uppercase tracking-wider">
          <tr>
            <th class="text-left px-6 py-3 font-medium">NF</th>
            <th class="text-left px-4 py-3 font-medium">Destinatário</th>
            <th class="text-left px-4 py-3 font-medium">Plano</th>
            <th class="text-left px-4 py-3 font-medium">Motorista</th>
            <th class="text-left px-4 py-3 font-medium">Unidade</th>
            <th class="text-left px-4 py-3 font-medium">Data</th>
            <th class="text-left px-4 py-3 font-medium">Resultado</th>
            <th class="text-left px-4 py-3 font-medium">Motivo</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-white/5">
          <% fora.listagem.each do |linha| %>
            <tr class="hover:bg-white/5">
              <td class="px-6 py-2.5 text-white font-mono"><%= linha['reference_id'] %></td>
              <td class="px-4 py-2.5 text-gray-300 max-w-[22rem] truncate" title="<%= fora.titulo(linha) %>"><%= fora.titulo(linha) || '—' %></td>
              <td class="px-4 py-2.5 text-gray-400"><%= fora.plano(linha) || '—' %></td>
              <td class="px-4 py-2.5 text-gray-300"><%= linha['driver'].presence || '— sem motorista' %></td>
              <td class="px-4 py-2.5 text-gray-300"><%= linha['contact_name'].presence || '—' %></td>
              <td class="px-4 py-2.5 text-gray-400 whitespace-nowrap">
                <%= (linha['checkout'].presence || linha['planned_date'].presence)&.to_date&.strftime('%d/%m/%Y') || '—' %>
              </td>
              <td class="px-4 py-2.5">
                <span class="<%= fora.sucesso?(linha) ? 'text-green-400' : 'text-yellow-400' %>"><%= fora.resultado(linha) %></span>
              </td>
              <td class="px-4 py-2.5 text-gray-400"><%= linha['observation'].presence || '—' %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>

    <% if fora.truncada? %>
      <p class="px-6 py-3 text-xs text-gray-500 border-t border-white/5">
        Mostrando as <%= Analytics::NotasForaOperacao::LIMITE %> mais recentes de <%= fora.total %>.
      </p>
    <% end %>
  <% end %>
</div>
