@php
    $moeda = fn ($v): string => number_format((float) $v, 2, ',', '.');
    $campo = 'rounded-md border border-fio bg-superficie py-1 text-right text-sm tabular-nums text-tinta shadow-xs placeholder:text-suave focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-marca-600';
@endphp

<x-pagina grupo="Metas" titulo="Metas dos vendedores"
          descricao="Meta mensal de unidades e de valor. A meta da filial é a soma das metas dos vendedores que estavam nela no mês.">
    <x-slot:filtros>
        <x-selecao legenda="Vendedor" id="vendedorId" largura="min-w-64" wire:model.live="vendedorId">
            <option value="">Escolha um vendedor</option>
            @foreach ($vendedores->groupBy(fn ($v) => $v->filial ? mb_convert_case($v->filial, MB_CASE_TITLE) : 'Sem filial')->sortKeys() as $filial => $grupo)
                <optgroup label="{{ $filial }}">
                    @foreach ($grupo as $opcao)
                        <option value="{{ $opcao->id }}">{{ $opcao->nome }}{{ $opcao->ativo ? '' : ' · inativo' }}</option>
                    @endforeach
                </optgroup>
            @endforeach
        </x-selecao>
        <x-seletor-ano :valor="$ano" :minimo="2020" :maximo="$tetoAno"
                      dica="Lance ao menos uma meta deste ano para abrir o seguinte."/>
    </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
    @error('vendedorId')
        <p class="mb-4 rounded-md border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm text-rose-700">{{ $message }}</p>
    @enderror

    @if ($vendedor === null)
        <div class="rounded-lg border border-dashed border-fio bg-superficie p-10 text-center">
            <p class="text-sm text-suave">Escolha um vendedor acima para ver e lançar as metas de {{ $ano }}.</p>
            <a href="/metas/filiais?ano={{ $ano }}" wire:navigate class="mt-2 inline-block text-sm font-medium text-marca-600 hover:underline">
                Ver as metas das filiais →
            </a>
        </div>
    @else
        <form wire:submit="salvar">
            <x-quadro :titulo="$vendedor->nome.' · '.$ano"
                      nota="Mês em branco é mês sem meta. No rodapé, o ano soma todos os meses com meta, inclusive os que ainda não chegaram.">
                <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 rowspan="2" scope="col" class="px-4 py-2 text-left align-bottom font-semibold">Mês</th>
                            <th colspan="3" scope="colgroup" class="border-b border-l border-fio px-3 py-1.5 text-center font-semibold text-tinta">Meta</th>
                            <th colspan="4" scope="colgroup" class="border-b border-l border-fio px-3 py-1.5 text-center font-semibold text-tinta">Realizado</th>
                        </tr>
                        <tr>
                            <th scope="col" class="border-l border-fio px-3 py-1.5 text-center font-medium">Filial</th>
                            <th scope="col" class="px-3 py-1.5 text-center font-medium">Unidades</th>
                            <th scope="col" class="px-3 py-1.5 text-center font-medium">Valor (R$)</th>
                            <th scope="col" class="border-l border-fio px-3 py-1.5 text-center font-medium">Vendidas</th>
                            <th scope="col" class="px-3 py-1.5 text-center font-medium">Cumprido</th>
                            <th scope="col" class="px-3 py-1.5 text-center font-medium">Vendido (R$)</th>
                            <th scope="col" class="px-3 py-1.5 text-center font-medium">Cumprido</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-fio">
                        @foreach ($meses as $indice => $nomeMes)
                            @php
                                $numero = $indice + 1;
                                $linha = $realizado->get($indice);
                                $temMeta = (float) ($linha->meta_valor ?? 0) > 0 || (int) ($linha->meta_quantidade ?? 0) > 0;
                            @endphp
                            <tr wire:key="meta-{{ $vendedor->id }}-{{ $ano }}-{{ $numero }}" class="hover:bg-chao/50">
                                <td class="px-4 py-1.5 font-medium text-tinta">{{ $nomeMes }}</td>
                                <td class="border-l border-fio px-3 py-1.5 text-center">
                                    @if ($linha?->unidade_id)
                                        <x-filial :nome="$filiais[$linha->unidade_id]"/>
                                    @else
                                        <span class="text-suave">—</span>
                                    @endif
                                </td>
                                <td class="px-3 py-1.5 text-center">
                                    <label for="meta-quantidade-{{ $numero }}" class="sr-only">Meta de unidades em {{ $nomeMes }}</label>
                                    <input wire:model="metas.{{ $numero }}.quantidade" id="meta-quantidade-{{ $numero }}" type="number" min="0" max="999" inputmode="numeric"
                                           class="{{ $campo }} w-20 px-2">
                                    @error("metas.$numero.quantidade") <p class="mt-1 text-xs text-rose-700">{{ $message }}</p> @enderror
                                </td>
                                <td class="px-3 py-1.5 text-center">
                                    <label for="meta-valor-{{ $numero }}" class="sr-only">Meta de valor em {{ $nomeMes }}</label>
                                    <input wire:model="metas.{{ $numero }}.valor" id="meta-valor-{{ $numero }}" type="text" inputmode="decimal" placeholder="0,00"
                                           class="{{ $campo }} w-36 px-2">
                                    @error("metas.$numero.valor") <p class="mt-1 text-xs text-rose-700">{{ $message }}</p> @enderror
                                </td>
                                <td class="border-l border-fio px-3 py-1.5 text-center font-semibold tabular-nums {{ $temMeta ? 'text-tinta' : 'text-suave' }}">{{ (int) ($linha->vendas ?? 0) }}</td>
                                <td class="px-3 py-1.5 [&>div]:justify-center"><x-progresso :realizado="$linha->vendas ?? 0" :meta="$linha->meta_quantidade ?? 0"/></td>
                                <td class="px-3 py-1.5 text-center tabular-nums whitespace-nowrap {{ $temMeta ? 'text-tinta' : 'text-suave' }}">{{ $moeda($linha->faturamento ?? 0) }}</td>
                                <td class="px-3 py-1.5 [&>div]:justify-center"><x-progresso :realizado="$linha->faturamento ?? 0" :meta="$linha->meta_valor ?? 0"/></td>
                            </tr>
                        @endforeach
                    </tbody>
                    @if ($total)
                        <tfoot class="border-t border-fio bg-chao/60 font-semibold">
                            <tr>
                                <td class="px-4 py-2.5 text-tinta">Ano</td>
                                <td class="border-l border-fio px-3 py-2.5"></td>
                                <td class="px-3 py-2.5 text-center tabular-nums">{{ (int) $total->meta_quantidade }}</td>
                                <td class="px-3 py-2.5 text-center tabular-nums whitespace-nowrap">{{ $moeda($total->meta_valor) }}</td>
                                <td class="border-l border-fio px-3 py-2.5 text-center tabular-nums">{{ (int) $total->vendas }}</td>
                                <td class="px-3 py-2.5 [&>div]:justify-center"><x-progresso :realizado="$total->vendas" :meta="$total->meta_quantidade"/></td>
                                <td class="px-3 py-2.5 text-center tabular-nums whitespace-nowrap">{{ $moeda($total->faturamento) }}</td>
                                <td class="px-3 py-2.5 [&>div]:justify-center"><x-progresso :realizado="$total->faturamento" :meta="$total->meta_valor"/></td>
                            </tr>
                        </tfoot>
                    @endif
                </table>

                <div class="flex flex-wrap items-center justify-between gap-3 border-t border-fio bg-chao/40 px-5 py-3">
                    <p class="text-xs text-suave">
                        A meta guarda a filial do vendedor no mês em que nasce:
                        <span class="text-tinta">{{ $vendedor->filial ? mb_convert_case($vendedor->filial, MB_CASE_TITLE) : 'este vendedor está sem filial' }}</span>.
                        @unless ($vendedor->filial)
                            Defina a filial no cadastro de vendedores antes de lançar meta nova.
                        @endunless
                    </p>
                    <button type="submit" wire:loading.attr="disabled" wire:target="salvar"
                            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 disabled:opacity-60">
                        <span wire:loading.remove wire:target="salvar">Salvar metas de {{ $ano }}</span>
                        <span wire:loading wire:target="salvar">Salvando…</span>
                    </button>
                </div>
            </x-quadro>
        </form>
    @endif
</x-pagina>