@php
    $inteiro = fn ($v): string => number_format((int) $v, 0, ',', '.');
@endphp

<x-pagina grupo="Cadastros" titulo="Carroceria dos modelos"
          descricao="O arquivo do sistema de gestão não diz se o carro é hatch, SUV ou picape. Classifique aqui, uma vez por modelo, e o relatório de marcas e modelos passa a filtrar por isso em todo o histórico.">
    <x-slot:filtros>
        <x-alternador legenda="Mostrar" modelo="situacao" :valor="$situacao"
                      :opcoes="[['pendentes', 'Sem carroceria'], ['classificados', 'Classificados'], ['todos', 'Todos']]"/>
        <label class="relative block w-full max-w-72 text-sm">
            <span class="block text-xs font-medium text-suave">Buscar</span>
            <svg class="pointer-events-none absolute bottom-2 left-2.5 size-4 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="Marca, modelo ou versão"
                   class="mt-1 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>
    </x-slot:filtros>

    <p class="flex flex-wrap items-baseline gap-x-2 text-sm text-suave">
        @if ($pendentes > 0)
            <span class="inline-flex items-center gap-1.5 rounded-sm bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-800 ring-1 ring-amber-200">
                {{ $inteiro($pendentes) }} {{ $pendentes === 1 ? 'modelo sem carroceria' : 'modelos sem carroceria' }}
            </span>
            <span>— eles aparecem como “Sem classificação” no relatório.</span>
        @else
            <span class="inline-flex items-center gap-1.5 rounded-sm bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-800 ring-1 ring-emerald-200">
                Todos os modelos classificados
            </span>
            <span>— modelo novo que entrar numa importação aparece aqui.</span>
        @endif
        <a href="/marcas-e-modelos?aba=carrocerias" wire:navigate class="ml-auto text-marca-600 hover:underline">Ver o relatório por carroceria →</a>
    </p>

    <x-quadro titulo="Modelos" :nota="$total === 1 ? '1 modelo' : $inteiro($total).' modelos'" class="mt-4">
        <table class="min-w-full text-sm">
            <thead class="border-b border-fio bg-chao/70 text-[0.7rem] uppercase tracking-[0.06em] text-suave">
                <tr>
                    <th scope="col" class="min-w-64 px-4 py-2.5 text-left font-semibold">Modelo</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Veículos</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Versões</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Última venda</th>
                    <th scope="col" class="min-w-56 px-3 py-2.5 text-left font-semibold">Carroceria</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-fio">
                @forelse ($modelos as $linha)
                    @php
                        $chave = $linha->marca.'|'.$linha->modelo;
                        $campo = 'carroceria-'.md5($chave);
                    @endphp
                    <tr wire:key="modelo-{{ md5($chave) }}" class="hover:bg-chao/50">
                        <td class="px-4 py-2.5">
                            <span class="font-medium text-tinta">{{ $linha->modelo }}</span>
                            <span class="block text-[0.7rem] text-suave">{{ $linha->marca }} · ex.: {{ $linha->exemplo }}</span>
                        </td>
                        <td class="px-3 py-2.5 text-center font-semibold tabular-nums">{{ $inteiro($linha->vendas) }}</td>
                        <td class="px-3 py-2.5 text-center tabular-nums text-suave">{{ (int) $linha->versoes }}</td>
                        <td class="px-3 py-2.5 text-center tabular-nums whitespace-nowrap text-suave">
                            {{ $linha->ultima_venda ? date('d/m/Y', (int) strtotime((string) $linha->ultima_venda)) : '—' }}
                        </td>
                        <td class="px-3 py-2.5">
                            <div class="flex items-center gap-2">
                                <div class="relative">
                                    <label for="{{ $campo }}" class="sr-only">Carroceria de {{ $linha->marca }} {{ $linha->modelo }}</label>
                                    <select id="{{ $campo }}" wire:change="classificar(@js($linha->marca), @js($linha->modelo), $event.target.value)"
                                            @class([
                                                'block h-[2.125rem] w-48 cursor-pointer appearance-none rounded-md border pr-9 pl-3 text-sm font-medium shadow-xs transition-colors focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-marca-600',
                                                'border-amber-300 bg-amber-50/60 text-amber-900' => $linha->carroceria === null,
                                                'border-fio bg-superficie text-tinta hover:bg-chao' => $linha->carroceria !== null,
                                            ])>
                                        <option value="">Sem classificação</option>
                                        @foreach ($carrocerias as $valor => $rotulo)
                                            <option value="{{ $valor }}" @selected($linha->carroceria === $valor)>{{ $rotulo }}</option>
                                        @endforeach
                                    </select>
                                    <svg class="pointer-events-none absolute top-1/2 right-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="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                                    </svg>
                                </div>
                                <span wire:loading wire:target="classificar" class="text-xs text-suave">salvando…</span>
                                @if ($salvo === $chave)
                                    <span wire:loading.remove wire:target="classificar" class="inline-flex items-center gap-1 text-xs font-medium text-emerald-700">
                                        <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7"/></svg>
                                        salvo
                                    </span>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-suave">
                            {{ trim($busca) !== '' ? 'Nenhum modelo com “'.$busca.'”.' : 'Nenhum modelo nesta situação.' }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        @if ($faltam > 0)
            <div class="flex justify-center border-t border-fio px-4 py-3">
                <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(20, $faltam) }}
                        <span class="font-normal text-suave">de {{ $inteiro($faltam) }} {{ $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>
            </div>
        @endif
    </x-quadro>
</x-pagina>