@php
    $botaoLinha = 'inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium shadow-xs transition-colors';
@endphp

<x-pagina grupo="Cadastros" titulo="Cadastro de vendedores"
          descricao="A filial de cada vendedor define a meta da filial. Os apelidos são as outras grafias do nome nos arquivos — sem eles, cada grafia nova viraria um vendedor novo na importação.">
    <x-slot:filtros>
        <x-alternador legenda="Mostrar" modelo="mostrarInativos" :valor="$mostrarInativos"
                      :opcoes="[[false, 'Só ativos'], [true, 'Com inativos ('.$inativos.')']]"/>
        <button type="button" wire:click="novo"
                class="inline-flex h-[2.125rem] items-center gap-2 rounded-md bg-marca-700 px-4 text-sm font-medium text-white shadow-xs transition-colors hover:bg-marca-800">
            <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M12 5v14M5 12h14"/></svg>
            Novo vendedor
        </button>
    </x-slot:filtros>

    @if (session('ok'))
        <p class="mb-4 rounded-md border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm text-emerald-800">{{ session('ok') }}</p>
    @endif

    <x-quadro titulo="Vendedores" :nota="$vendedores->count().' '.($vendedores->count() === 1 ? 'vendedor na lista' : 'vendedores na lista')">
        <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-72 px-4 py-2.5 text-left font-semibold">Vendedor</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Vendas em 12 meses</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Última venda</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Grafias</th>
                    <th scope="col" class="px-3 py-2.5 text-right font-semibold"><span class="sr-only">Ações</span></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-fio">
                @forelse ($vendedores as $vendedor)
                    <tr wire:key="vendedor-{{ $vendedor->id }}" @class(['hover:bg-chao/50', 'bg-marca-50' => $editando === $vendedor->id])>
                        <td class="px-4 py-2.5">
                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                <span @class(['font-medium', 'text-tinta' => $vendedor->ativo, 'text-suave' => ! $vendedor->ativo])>{{ $vendedor->nome }}</span>
                                @if ($vendedor->filial)
                                    <x-filial :nome="$vendedor->filial"/>
                                @elseif ($vendedor->ativo)
                                    <span class="rounded-sm bg-amber-50 px-2 py-0.5 text-[0.6rem] leading-[0.875rem] font-semibold uppercase tracking-[0.05em] text-amber-800 ring-1 ring-amber-200">sem filial</span>
                                @endif
                                @unless ($vendedor->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>
                            @if ($vendedor->grafias)
                                <p class="mt-0.5 truncate text-[0.7rem] leading-4 text-suave" title="{{ $vendedor->grafias }}">{{ $vendedor->grafias }}</p>
                            @endif
                        </td>
                        <td class="px-3 py-2.5 text-center font-semibold tabular-nums {{ $vendedor->ativo ? 'text-tinta' : 'text-suave' }}">{{ $vendedor->vendas_12_meses }}</td>
                        <td class="px-3 py-2.5 text-center tabular-nums whitespace-nowrap text-suave">
                            {{ $vendedor->ultima_venda ? date('d/m/Y', (int) strtotime((string) $vendedor->ultima_venda)) : '—' }}
                        </td>
                        <td class="px-3 py-2.5 text-center tabular-nums text-suave">{{ $vendedor->apelidos }}</td>
                        <td class="px-3 py-2">
                            <div class="flex justify-end">
                                <button type="button" wire:click="editar({{ $vendedor->id }})"
                                        class="{{ $botaoLinha }} border-fio bg-superficie text-tinta hover:border-marca-200 hover:bg-marca-50 hover:text-marca-700">
                                    <svg class="size-3.5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.86 4.49a2.1 2.1 0 1 1 2.97 2.97L8.2 19.09l-3.95.98.98-3.95L16.86 4.49Z"/>
                                    </svg>
                                    Editar
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-8 text-center text-suave">Nenhum vendedor cadastrado.</td></tr>
                @endforelse
            </tbody>
        </table>
    </x-quadro>

    @if ($formulario)
        <x-modal :titulo="$editando ? 'Editar vendedor' : 'Novo vendedor'"
                 :descricao="$editando ? 'Ao renomear, o nome antigo vira apelido e a importação continua achando.' : 'O nome é gravado em maiúsculas, como vem nos arquivos.'">
            <form wire:submit="salvar" class="space-y-4 px-5 py-5">
                <x-campo rotulo="Nome" id="nome" wire:model="nome" autocomplete="off" class="uppercase" :erro="$errors->first('nome')"/>

                <x-selecao legenda="Filial" id="unidade_id" largura="min-w-0" wire:model="unidade_id">
                    <option value="">Sem filial</option>
                    @foreach ($lojas as $loja)
                        <option value="{{ $loja->id }}">{{ mb_convert_case($loja->nome, MB_CASE_TITLE) }}</option>
                    @endforeach
                </x-selecao>
                @error('unidade_id') <p class="-mt-2 text-sm text-rose-700">{{ $message }}</p> @enderror

                <label class="flex items-center gap-2 text-sm text-tinta">
                    <input wire:model="ativo" type="checkbox" class="size-4 rounded border-fio text-marca-700 focus-visible:outline-2 focus-visible:outline-marca-600">
                    Vendedor ativo
                </label>

                <div class="flex flex-wrap justify-end gap-2 border-t border-fio pt-4">
                    <button type="button" wire:click="fechar" class="rounded-md px-4 py-2 text-sm font-medium text-suave transition-colors hover:bg-chao hover:text-tinta">Cancelar</button>
                    <button type="submit" wire:loading.attr="disabled" wire:target="salvar"
                            class="rounded-md bg-marca-700 px-4 py-2 text-sm font-medium text-white shadow-xs transition-colors hover:bg-marca-800 disabled:opacity-60">
                        <span wire:loading.remove wire:target="salvar">{{ $editando ? 'Salvar' : 'Criar vendedor' }}</span>
                        <span wire:loading wire:target="salvar">Salvando…</span>
                    </button>
                </div>
            </form>

            @if ($editando)
                <div class="border-t border-fio bg-chao/40 px-5 py-4">
                    <h3 class="text-sm font-semibold text-tinta">Apelidos</h3>
                    <p class="mt-0.5 text-xs text-suave">As outras grafias deste nome nos arquivos do sistema de gestão.</p>

                    <ul class="mt-3 space-y-1 text-sm">
                        @forelse ($apelidos as $apelido)
                            <li wire:key="apelido-{{ $apelido->id }}" class="flex items-center justify-between gap-2 rounded-md border border-fio bg-superficie px-3 py-1.5">
                                <span class="min-w-0 truncate text-tinta">{{ $apelido->apelido }}</span>
                                <button type="button" wire:click="removerApelido({{ $apelido->id }})"
                                        class="shrink-0 rounded-md px-2 py-0.5 text-xs font-medium text-suave transition-colors hover:bg-rose-50 hover:text-rose-700">
                                    Remover
                                </button>
                            </li>
                        @empty
                            <li class="text-suave">Nenhum apelido.</li>
                        @endforelse
                    </ul>

                    <form wire:submit="adicionarApelido" class="mt-3 flex gap-2">
                        <label for="novoApelido" class="sr-only">Novo apelido</label>
                        <input wire:model="novoApelido" id="novoApelido" type="text" placeholder="Como aparece no arquivo"
                               class="block h-[2.125rem] w-full rounded-md border border-fio bg-superficie px-3 text-sm uppercase text-tinta shadow-xs placeholder:normal-case placeholder:text-suave focus-visible:outline-2 focus-visible:outline-marca-600">
                        <button type="submit" class="shrink-0 rounded-md border border-fio bg-superficie px-3 text-sm font-medium text-tinta shadow-xs transition-colors hover:bg-chao">Incluir</button>
                    </form>
                    @error('novoApelido') <p class="mt-1 text-sm text-rose-700">{{ $message }}</p> @enderror
                </div>
            @endif
        </x-modal>
    @endif
</x-pagina>