@php
    $moeda = fn ($v): string => $v === null ? '—' : number_format((float) $v, 2, ',', '.');
    $inteiro = fn ($v): string => number_format((int) $v, 0, ',', '.');
    $anterior = $comparativo['anterior'];
    $anoPassado = $comparativo['anoPassado'];
    $cabecalho = 'border-b border-fio bg-chao/70 text-[0.7rem] uppercase tracking-[0.06em] text-suave';
    $linhas = $tabela['linhas'];

    $carroceriaDe = fn ($linha): string => \App\Carroceria::rotuloDe($linha->carroceria ?? null);

    // Título da aba: só faz sentido nomear quando o filtro aponta para um alvo
    // só; com vários, o resumo acima da tabela já diz quais são.
    $umaMarca = count($marcasAtuais) === 1 ? $opcoesMarca->firstWhere('marca_id', $marcasAtuais[0])?->marca : null;
    $deQuem = count($modelosAtuais) === 1 ? $modelosAtuais[0] : $umaMarca;

    [$titulo, $nota] = match ($abaAtual) {
        'carrocerias' => ['Vendas por carroceria', 'Clique num tipo para filtrar e ver os modelos dele.'],
        'marcas' => ['Vendas por marca', 'Clique numa marca para filtrar e ver os modelos dela.'],
        'modelos' => [$deQuem ? 'Modelos de '.$deQuem : 'Vendas por modelo', 'Clique num modelo para pôr ou tirar do filtro e ver as versões dele.'],
        'versoes' => [$deQuem ? 'Versões de '.$deQuem : 'Vendas por versão', 'O nome como veio do sistema de gestão.'],
        'vendedores' => [$deQuem ? 'Quem vendeu '.$deQuem : 'Vendas por vendedor', 'Clique num vendedor para pôr ou tirar do filtro e ver os modelos dele.'],
        'patio' => ['Tempo em pátio', 'Quanto tempo os veículos ficaram até a venda, e o que deram em cada faixa.'],
        'tipos' => ['Novos e usados', null],
        default => ['Vendas uma a uma', 'Da mais recente para a mais antiga.'],
    };
    $unidade = ['carrocerias' => 'carrocerias', 'marcas' => 'marcas', 'modelos' => 'modelos', 'versoes' => 'versões', 'vendedores' => 'vendedores', 'vendas' => 'vendas'][$abaAtual] ?? null;
@endphp

<x-pagina grupo="Relatórios" titulo="Marcas e modelos"
          descricao="Volume, preço, lucro e tempo em pátio por marca, modelo e versão.">

    {{-- Filtros: o período em cima; loja, vendedor, tipo, carroceria, marca e modelo embaixo. --}}
    <section aria-label="Filtros" class="rounded-lg border border-fio bg-superficie shadow-xs">
        <div class="flex flex-wrap items-end gap-x-4 gap-y-3 px-4 pt-4 pb-3">
            <fieldset class="text-sm">
                <legend class="text-xs font-medium text-suave">Período</legend>
                <div class="mt-1 inline-flex flex-wrap rounded-md border border-fio bg-superficie p-0.5 shadow-xs">
                    @foreach ([['1', 'Mês'], ['3', '3 meses'], ['6', '6 meses'], ['12', '12 meses'], ['ano', 'No ano']] as [$chave, $rotulo])
                        <button type="button" wire:click="atalho('{{ $chave }}')" aria-pressed="{{ $atalhoAtivo === $chave ? 'true' : 'false' }}"
                                @class([
                                    'rounded px-2.5 py-1 font-medium whitespace-nowrap transition-colors',
                                    'bg-marca-700 text-white' => $atalhoAtivo === $chave,
                                    'text-suave hover:text-tinta' => $atalhoAtivo !== $chave,
                                ])>{{ $rotulo }}</button>
                    @endforeach
                </div>
            </fieldset>
            <x-seletor-data :valor="$de" modelo="de" legenda="De"/>
            <x-seletor-data :valor="$ate" modelo="ate" legenda="Até"/>
        </div>

        <div class="flex flex-wrap items-end gap-x-4 gap-y-3 border-t border-fio bg-chao/40 px-4 pt-3 pb-4">
            <x-selecao-multipla legenda="Loja" id="lojas" modelo="lojas" largura="min-w-36"
                                vazio="Todas as lojas" singular="loja" plural="lojas"
                                :selecionados="$lojasAtuais"
                                :opcoes="$opcoesLoja->map(fn ($o) => ['valor' => (string) $o->id, 'rotulo' => mb_convert_case($o->nome, MB_CASE_TITLE)])->all()"/>
            {{-- Quem vendeu no período, com a filial do cadastro ao lado do nome. --}}
            <x-selecao-multipla legenda="Vendedor" id="vendedores" modelo="vendedores" largura="min-w-44" busca
                                vazio="Todos os vendedores" singular="vendedor" plural="vendedores"
                                :selecionados="$vendedoresAtuais"
                                :opcoes="$opcoesVendedor->map(fn ($o) => [
                                    'valor' => (string) $o->vendedor_id,
                                    'rotulo' => $o->vendedor.($o->ativo ? '' : ' · inativo'),
                                    'nota' => $inteiro($o->quantidade),
                                ])->all()"/>
            <x-alternador legenda="Tipo" modelo="tipo" :valor="$tipoAtual" :opcoes="[['', 'Todos'], ['novo', 'Novos'], ['usado', 'Usados']]"/>
            <x-selecao-multipla legenda="Carroceria" id="carrocerias" modelo="carrocerias" largura="min-w-40"
                                vazio="Todas as carrocerias" singular="carroceria" plural="carrocerias"
                                :selecionados="$carroceriasAtuais"
                                :opcoes="$opcoesCarroceria->map(fn ($o) => [
                                    'valor' => (string) $o->carroceria,
                                    'rotulo' => $carroceriaDe($o),
                                    'nota' => $inteiro($o->quantidade),
                                ])->all()"/>
            <x-selecao-multipla legenda="Marca" id="marcas" modelo="marcas" largura="min-w-36" busca
                                vazio="Todas as marcas" singular="marca" plural="marcas"
                                :selecionados="$marcasAtuais"
                                :opcoes="$opcoesMarca->map(fn ($o) => [
                                    'valor' => (string) $o->marca_id,
                                    'rotulo' => $o->marca,
                                    'nota' => $inteiro($o->quantidade),
                                ])->all()"/>
            <x-selecao-multipla legenda="Modelo" id="modelos" modelo="modelos" largura="min-w-36" busca
                                :vazio="$opcoesModelo->isEmpty() ? 'Nenhum modelo' : 'Todos os modelos'"
                                singular="modelo" plural="modelos"
                                :selecionados="$modelosAtuais"
                                :opcoes="$opcoesModelo->map(fn ($o) => [
                                    'valor' => (string) $o->modelo,
                                    'rotulo' => $o->modelo,
                                    'nota' => $inteiro($o->quantidade),
                                ])->all()"/>
            @if ($filtrando)
                <button type="button" wire:click="limparFiltros"
                        class="inline-flex h-[2.125rem] items-center gap-1.5 rounded-md px-3 text-sm font-medium text-marca-600 transition-colors hover:bg-marca-50">
                    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M6 18 18 6M6 6l12 12"/></svg>
                    Limpar filtros
                </button>
            @endif
        </div>
    </section>

    {{-- O que está sendo mostrado, numa linha. --}}
    <p class="mt-5 flex flex-wrap items-baseline gap-x-2 gap-y-1 text-sm text-suave">
        <span class="font-display text-base font-semibold text-tinta">{{ $rotulos['periodo'] }}</span>
        <span aria-hidden="true">·</span>
        <span>{{ $resumoFiltros }}</span>
        <span aria-hidden="true">·</span>
        <span class="tabular-nums">{{ $inteiro($totais->quantidade) }} veículos, {{ (int) $totais->marcas }} {{ (int) $totais->marcas === 1 ? 'marca' : 'marcas' }}, {{ (int) $totais->modelos }} {{ (int) $totais->modelos === 1 ? 'modelo' : 'modelos' }}</span>
    </p>

    <dl class="mt-3 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        <x-cartao-comparado rotulo="Veículos vendidos" formato="inteiro" explicacao="vendas_filtradas" :valor="$totais->quantidade" :rotulos="$rotulos" :curtos="$curtos"
                            :anterior="$anterior?->quantidade" :ano-passado="$anoPassado?->quantidade">
            <dd class="mt-auto pt-3 text-xs tabular-nums text-suave">{{ (int) $totais->novos }} novos · {{ (int) $totais->quantidade - (int) $totais->novos }} usados</dd>
        </x-cartao-comparado>
        <x-cartao-comparado rotulo="Faturamento" explicacao="faturamento" :valor="$totais->faturamento ?? 0" :rotulos="$rotulos" :curtos="$curtos"
                            :anterior="$anterior?->faturamento" :ano-passado="$anoPassado?->faturamento"/>
        <x-cartao-comparado rotulo="Lucro nos veículos" explicacao="lucro_veiculos" :valor="$totais->lucro ?? 0" :rotulos="$rotulos" :curtos="$curtos"
                            :anterior="$anterior?->lucro" :ano-passado="$anoPassado?->lucro">
            <dd class="mt-auto pt-3 text-xs tabular-nums text-suave">margem de <span class="text-tinta">{{ $totais->margem === null ? '—' : number_format((float) $totais->margem, 1, ',', '.').'%' }}</span></dd>
        </x-cartao-comparado>
        <x-cartao-comparado rotulo="Valor médio de venda" explicacao="ticket_medio" :valor="$totais->ticket_medio ?? 0" :rotulos="$rotulos" :curtos="$curtos"
                            :anterior="$anterior?->ticket_medio" :ano-passado="$anoPassado?->ticket_medio"/>
        <x-cartao-comparado rotulo="Lucro médio por veículo" explicacao="lucro_medio" :valor="$totais->lucro_medio ?? 0" :rotulos="$rotulos" :curtos="$curtos"
                            :anterior="$anterior?->lucro_medio" :ano-passado="$anoPassado?->lucro_medio"/>
        <x-cartao-comparado rotulo="Dias em pátio, em média" formato="decimal" explicacao="dias_patio" :alta-e-boa="false" :valor="$totais->dias_patio_medio ?? 0" :rotulos="$rotulos" :curtos="$curtos"
                            :anterior="$anterior?->dias_patio_medio" :ano-passado="$anoPassado?->dias_patio_medio">
            <dd class="mt-auto pt-3 text-xs tabular-nums text-suave">
                idade média na venda: <span class="text-tinta">{{ $totais->idade_media === null ? '—' : number_format((float) $totais->idade_media, 1, ',', '.').' anos' }}</span>
                <x-explicacao chave="idade_na_venda"/>
            </dd>
        </x-cartao-comparado>
    </dl>

    @if ($graficos !== [])
        <div class="mt-4 grid gap-4 lg:grid-cols-3">
            <x-quadro titulo="Veículos por mês">
                <div class="px-4 pt-3 pb-2"><x-grafico :config="$graficos['quantidade']" altura="10rem"/></div>
            </x-quadro>
            <x-quadro titulo="Lucro médio por mês">
                <div class="px-4 pt-3 pb-2"><x-grafico :config="$graficos['lucro']" altura="10rem"/></div>
            </x-quadro>
            <x-quadro titulo="Dias em pátio por mês">
                <div class="px-4 pt-3 pb-2"><x-grafico :config="$graficos['patio']" altura="10rem"/></div>
            </x-quadro>
        </div>
    @endif

    {{-- Análise: uma tabela por vez. --}}
    <x-abas :abas="\App\Livewire\RelatorioMarcasModelos::ABAS" :atual="$abaAtual" :rotulos="$rotulosAbas" class="mt-8" aria-label="Análise"/>

    <x-quadro :titulo="$titulo" :nota="$nota" class="mt-3">
        @if ($unidade)
            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-fio px-4 py-2.5">
                @if (in_array($abaAtual, ['modelos', 'versoes'], true))
                    <label class="relative block w-full max-w-72">
                        <span class="sr-only">Buscar modelo ou versão</span>
                        <svg class="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-suave" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 10.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z"/>
                        </svg>
                        <input id="busca" type="search" wire:model.live.debounce.400ms="busca" placeholder="Buscar modelo ou versão"
                               class="block h-[2.125rem] w-full rounded-md border border-fio bg-superficie pr-3 pl-8 text-sm text-tinta shadow-xs placeholder:text-suave focus-visible:outline-2 focus-visible:outline-marca-600">
                    </label>
                @else
                    <span></span>
                @endif
                <p class="text-xs tabular-nums text-suave">
                    @if ($tabela['faltam'] > 0)
                        Mostrando {{ $inteiro($linhas->count()) }} de {{ $inteiro($tabela['total']) }} {{ $unidade }}
                    @else
                        {{ $inteiro($tabela['total']) }} {{ $unidade }}
                    @endif
                </p>
            </div>
        @endif

        <table class="min-w-full text-sm">
            @if ($abaAtual === 'carrocerias')
                <thead class="{{ $cabecalho }}">
                    <tr>
                        <th scope="col" class="px-4 py-2.5 text-left font-semibold">Carroceria</th>
                        <x-metricas-cabecalho :ordem="$ordemAtual" :direcao="$direcaoAtual"/>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @forelse ($linhas as $linha)
                        @php $escolhida = in_array((string) $linha->carroceria, $carroceriasAtuais, true); @endphp
                        <tr wire:key="carroceria-{{ $linha->carroceria }}" wire:click="escolherCarroceria(@js($linha->carroceria))"
                            @class(['group cursor-pointer transition-colors hover:bg-marca-50', 'bg-marca-50' => $escolhida])>
                            <td class="relative px-4 py-2.5">
                                @if ($escolhida)<span class="absolute inset-y-0 left-0 w-1 bg-marca-600" aria-hidden="true"></span>@endif
                                <button type="button" wire:click.stop="escolherCarroceria(@js($linha->carroceria))" aria-pressed="{{ $escolhida ? 'true' : 'false' }}"
                                        @class(['text-left font-medium group-hover:text-marca-700 focus-visible:underline', 'text-marca-700' => $escolhida, 'text-tinta' => ! $escolhida])>{{ $carroceriaDe($linha) }}</button>
                                <span class="block text-[0.7rem] text-suave">{{ (int) $linha->marcas }} {{ (int) $linha->marcas === 1 ? 'marca' : 'marcas' }} · {{ (int) $linha->modelos }} {{ (int) $linha->modelos === 1 ? 'modelo' : 'modelos' }}</span>
                            </td>
                            <x-metricas-celulas :linha="$linha" :base="$tabela['base']"/>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="px-4 py-8 text-center text-suave">Nenhuma venda no período.</td></tr>
                    @endforelse
                    @if ($linhas->contains('carroceria', \App\Consultas\MarcasEModelos::SEM_CARROCERIA))
                        <tr>
                            <td colspan="9" class="border-t border-fio bg-chao/40 px-4 py-2.5 text-xs text-suave">
                                Modelo sem classificação aparece em “Sem classificação”.
                                @can('gerir-cadastros')
                                    <a href="/cadastros/modelos" wire:navigate class="font-medium text-marca-600 hover:underline">Classificar agora →</a>
                                @endcan
                            </td>
                        </tr>
                    @endif
                </tbody>
            @elseif ($abaAtual === 'marcas')
                <thead class="{{ $cabecalho }}">
                    <tr>
                        <th scope="col" class="px-4 py-2.5 text-left font-semibold">Marca</th>
                        <x-metricas-cabecalho :ordem="$ordemAtual" :direcao="$direcaoAtual"/>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @forelse ($linhas as $linha)
                        @php $escolhida = in_array((int) $linha->marca_id, $marcasAtuais, true); @endphp
                        <tr wire:key="marca-{{ $linha->marca_id }}" wire:click="escolherMarca({{ $linha->marca_id }})"
                            @class(['group cursor-pointer transition-colors hover:bg-marca-50', 'bg-marca-50' => $escolhida])>
                            <td class="relative px-4 py-2.5">
                                @if ($escolhida)<span class="absolute inset-y-0 left-0 w-1 bg-marca-600" aria-hidden="true"></span>@endif
                                <button type="button" wire:click.stop="escolherMarca({{ $linha->marca_id }})"
                                        @class(['text-left font-medium group-hover:text-marca-700 focus-visible:underline', 'text-marca-700' => $escolhida, 'text-tinta' => ! $escolhida])>{{ $linha->marca }}</button>
                            </td>
                            <x-metricas-celulas :linha="$linha" :base="$tabela['base']"/>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="px-4 py-8 text-center text-suave">Nenhuma venda no período.</td></tr>
                    @endforelse
                </tbody>
            @elseif ($abaAtual === 'modelos')
                <thead class="{{ $cabecalho }}">
                    <tr>
                        <th scope="col" class="px-4 py-2.5 text-left font-semibold">Modelo</th>
                        <th scope="col" class="px-3 py-2.5 text-center font-semibold">Versões</th>
                        <x-metricas-cabecalho :ordem="$ordemAtual" :direcao="$direcaoAtual"/>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @forelse ($linhas as $linha)
                        @php $escolhido = in_array((string) $linha->modelo, $modelosAtuais, true); @endphp
                        <tr wire:key="modelo-{{ $linha->marca_id }}-{{ md5($linha->modelo) }}" wire:click="escolherModelo({{ $linha->marca_id }}, @js($linha->modelo))"
                            @class(['group cursor-pointer transition-colors hover:bg-marca-50', 'bg-marca-50' => $escolhido])>
                            <td class="relative px-4 py-2.5">
                                @if ($escolhido)<span class="absolute inset-y-0 left-0 w-1 bg-marca-600" aria-hidden="true"></span>@endif
                                <button type="button" wire:click.stop="escolherModelo({{ $linha->marca_id }}, @js($linha->modelo))"
                                        @class(['text-left font-medium group-hover:text-marca-700 focus-visible:underline', 'text-marca-700' => $escolhido, 'text-tinta' => ! $escolhido])>{{ $linha->modelo }}</button>
                                <span class="block text-[0.7rem] text-suave">{{ $umaMarca === null ? $linha->marca.' · ' : '' }}{{ $carroceriaDe($linha) }}</span>
                            </td>
                            <td class="px-3 py-2.5 text-center tabular-nums text-suave">{{ (int) $linha->versoes }}</td>
                            <x-metricas-celulas :linha="$linha" :base="$tabela['base']"/>
                        </tr>
                    @empty
                        <tr><td colspan="10" class="px-4 py-8 text-center text-suave">{{ trim($busca) !== '' ? 'Nenhum modelo ou versão com “'.$busca.'” no período.' : 'Nenhuma venda no período.' }}</td></tr>
                    @endforelse
                </tbody>
            @elseif ($abaAtual === 'versoes')
                <thead class="{{ $cabecalho }}">
                    <tr>
                        <th scope="col" class="px-4 py-2.5 text-left font-semibold">Versão</th>
                        <x-metricas-cabecalho :ordem="$ordemAtual" :direcao="$direcaoAtual"/>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @forelse ($linhas as $linha)
                        <tr wire:key="versao-{{ md5($linha->marca.$linha->versao) }}" class="hover:bg-chao/60">
                            <td class="px-4 py-2.5">
                                <span class="font-medium text-tinta">{{ $linha->versao }}</span>
                                @if ($modelosAtuais === [])
                                    <span class="block text-[0.7rem] text-suave">{{ $linha->marca }} · {{ $linha->modelo }} · {{ $carroceriaDe($linha) }}</span>
                                @endif
                            </td>
                            <x-metricas-celulas :linha="$linha" :base="$tabela['base']"/>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="px-4 py-8 text-center text-suave">{{ trim($busca) !== '' ? 'Nenhuma versão com “'.$busca.'” no período.' : 'Nenhuma venda no período.' }}</td></tr>
                    @endforelse
                </tbody>
            @elseif ($abaAtual === 'vendedores')
                <thead class="{{ $cabecalho }}">
                    <tr>
                        <th scope="col" class="min-w-72 px-4 py-2.5 text-left font-semibold">Vendedor</th>
                        <x-metricas-cabecalho :ordem="$ordemAtual" :direcao="$direcaoAtual"/>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @forelse ($linhas as $linha)
                        @php $escolhido = in_array((int) $linha->vendedor_id, $vendedoresAtuais, true); @endphp
                        @if ($linha->vendedor_id)
                            <tr wire:key="vendedor-{{ $linha->vendedor_id }}" wire:click="escolherVendedor({{ $linha->vendedor_id }})"
                                @class(['group cursor-pointer transition-colors hover:bg-marca-50', 'bg-marca-50' => $escolhido])>
                                <td class="relative px-4 py-2.5">
                                    @if ($escolhido)<span class="absolute inset-y-0 left-0 w-1 bg-marca-600" aria-hidden="true"></span>@endif
                                    <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                        <button type="button" wire:click.stop="escolherVendedor({{ $linha->vendedor_id }})"
                                                @class(['text-left font-medium group-hover:text-marca-700 focus-visible:underline', 'text-marca-700' => $escolhido, 'text-tinta' => ! $escolhido])>{{ $linha->vendedor }}</button>
                                        <x-filial :nome="$linha->filial"/>
                                        @unless ($linha->ativo)
                                            <span class="rounded-sm bg-slate-100 px-1.5 py-px text-[0.6rem] leading-[0.875rem] font-semibold uppercase tracking-[0.05em] text-suave">inativo</span>
                                        @endunless
                                    </div>
                                </td>
                                <x-metricas-celulas :linha="$linha" :base="$tabela['base']"/>
                            </tr>
                        @else
                            <tr wire:key="vendedor-nenhum" class="hover:bg-chao/60">
                                <td class="px-4 py-2.5 text-suave">{{ $linha->vendedor }}</td>
                                <x-metricas-celulas :linha="$linha" :base="$tabela['base']"/>
                            </tr>
                        @endif
                    @empty
                        <tr><td colspan="9" class="px-4 py-8 text-center text-suave">Nenhuma venda no período.</td></tr>
                    @endforelse
                </tbody>
            @elseif ($abaAtual === 'patio')
                <thead class="{{ $cabecalho }}">
                    <tr>
                        <th scope="col" class="px-4 py-2.5 text-left font-semibold">Faixa</th>
                        <x-metricas-cabecalho :idade="false"/>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @foreach ($linhas as $linha)
                        <tr class="hover:bg-chao/60">
                            <td class="px-4 py-2.5 whitespace-nowrap">
                                <span @class(['mr-2 inline-block size-2 rounded-full align-middle', 'bg-marca-600' => $linha->faixa <= 3, 'bg-amber-500' => $linha->faixa === 4, 'bg-rose-500' => $linha->faixa === 5]) aria-hidden="true"></span>
                                <span class="font-medium text-tinta">{{ $linha->rotulo }}</span>
                            </td>
                            <x-metricas-celulas :linha="$linha" :base="$tabela['base']" :idade="false"/>
                        </tr>
                    @endforeach
                </tbody>
            @elseif ($abaAtual === 'tipos')
                <thead class="{{ $cabecalho }}">
                    <tr>
                        <th scope="col" class="px-4 py-2.5 text-left font-semibold">Tipo</th>
                        <x-metricas-cabecalho/>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @forelse ($linhas as $linha)
                        <tr class="hover:bg-chao/60">
                            <td class="px-4 py-2.5 font-medium text-tinta">{{ $linha->status === 'novo' ? 'Novos' : 'Usados' }}</td>
                            <x-metricas-celulas :linha="$linha" :base="$tabela['base']"/>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="px-4 py-8 text-center text-suave">Nenhuma venda no período.</td></tr>
                    @endforelse
                </tbody>
            @else
                <thead class="{{ $cabecalho }}">
                    <tr>
                        <th scope="col" class="px-4 py-2.5 text-left font-semibold">Data</th>
                        <th scope="col" class="px-3 py-2.5 text-left font-semibold">Veículo</th>
                        <th scope="col" class="px-3 py-2.5 text-center font-semibold">Ano</th>
                        <th scope="col" class="px-3 py-2.5 text-center font-semibold">Placa</th>
                        <th scope="col" class="px-3 py-2.5 text-center font-semibold">Loja</th>
                        <th scope="col" class="px-3 py-2.5 text-left font-semibold">Vendedor</th>
                        <th scope="col" class="px-3 py-2.5 text-center font-semibold">Valor</th>
                        <th scope="col" class="px-3 py-2.5 text-center font-semibold">Lucro</th>
                        <th scope="col" class="px-3 py-2.5 text-center font-semibold">Dias em pátio</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @forelse ($linhas as $venda)
                        <tr wire:key="venda-{{ $venda->id }}" class="hover:bg-chao/60">
                            <td class="px-4 py-2.5 tabular-nums whitespace-nowrap">{{ date('d/m/Y', (int) strtotime((string) $venda->data_venda)) }}</td>
                            <td class="px-3 py-2.5">
                                <span class="text-tinta">{{ $venda->versao }}</span>
                                @if ($venda->status === 'novo')
                                    <span class="ml-1 rounded-sm bg-emerald-50 px-1.5 py-px text-[0.6rem] leading-[0.875rem] font-semibold uppercase tracking-[0.05em] text-emerald-800">novo</span>
                                @endif
                                @if ($umaMarca === null)
                                    <span class="block text-[0.7rem] text-suave">{{ $venda->marca }}</span>
                                @endif
                            </td>
                            <td class="px-3 py-2.5 text-center tabular-nums">{{ $venda->ano_modelo }}</td>
                            <td class="px-3 py-2.5 text-center font-mono text-xs text-suave">{{ $venda->identificacao ?? '—' }}</td>
                            <td class="px-3 py-2.5 text-center"><x-filial :nome="$venda->loja"/></td>
                            <td class="px-3 py-2.5 whitespace-nowrap">{{ $venda->vendedor }}</td>
                            <td class="px-3 py-2.5 text-center tabular-nums whitespace-nowrap">{{ $moeda($venda->valor_venda) }}</td>
                            <td @class(['px-3 py-2.5 text-center tabular-nums whitespace-nowrap', 'text-rose-700' => (float) $venda->lucro < 0])>{{ $moeda($venda->lucro) }}</td>
                            <td @class([
                                'px-3 py-2.5 text-center tabular-nums',
                                'text-amber-700' => (int) $venda->dias_patio >= 90 && (int) $venda->dias_patio < 180,
                                'font-medium text-rose-700' => (int) $venda->dias_patio >= 180,
                            ])>{{ (int) $venda->dias_patio }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="px-4 py-8 text-center text-suave">Nenhuma venda no período.</td></tr>
                    @endforelse
                </tbody>
            @endif
        </table>

        {{-- Carrega mais um bloco sem sair da página; o Livewire troca só a tabela. --}}
        @if ($unidade && ($tabela['faltam'] > 0 || $tabela['recolhivel']))
            <div class="flex flex-wrap items-center justify-center gap-4 border-t border-fio px-4 py-3">
                @if ($tabela['faltam'] > 0)
                    <button type="button" wire:click="carregarMais" wire:loading.attr="disabled" wire:target="carregarMais"
                            class="inline-flex items-center gap-2 rounded-md border border-fio bg-superficie px-4 py-2 text-sm font-medium text-marca-700 shadow-xs transition-colors hover:bg-marca-50 disabled:opacity-60">
                        <span wire:loading.remove wire:target="carregarMais">
                            Carregar mais {{ min(\App\Livewire\RelatorioMarcasModelos::PASSO, $tabela['faltam']) }}
                            <span class="font-normal text-suave">de {{ $inteiro($tabela['faltam']) }} {{ $tabela['faltam'] === 1 ? 'restante' : 'restantes' }}</span>
                        </span>
                        <span wire:loading wire:target="carregarMais" class="inline-flex items-center gap-2">
                            <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
                                <path class="opacity-90" d="M22 12a10 10 0 0 0-10-10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
                            </svg>
                            Carregando…
                        </span>
                    </button>
                @endif
                @if ($tabela['recolhivel'])
                    <button type="button" wire:click="recolher" class="text-sm font-medium text-suave transition-colors hover:text-tinta">Recolher</button>
                @endif
            </div>
        @endif
    </x-quadro>
</x-pagina>