@php
    $moeda = fn ($v): string => number_format((float) $v, 2, ',', '.');
    $cabecalho = 'border-b border-fio bg-chao/70 text-[0.7rem] uppercase tracking-[0.06em] text-suave';
@endphp

<x-pagina grupo="Metas" titulo="Metas das filiais"
          descricao="Meta é a soma das metas dos vendedores que estavam na filial no mês. Realizado são as vendas feitas na filial, por qualquer vendedor.">
    <x-slot:filtros>
        <a href="/metas?ano={{ $ano }}" wire:navigate
           class="inline-flex h-[2.125rem] items-center gap-2 rounded-md border border-fio bg-superficie px-4 text-sm font-medium text-tinta shadow-xs transition-colors hover:bg-chao">
            Lançar metas dos vendedores
        </a>
        <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 ($filiais === [])
        <p class="rounded-lg border border-dashed border-fio bg-superficie p-10 text-center text-sm text-suave">Nenhuma loja em {{ $ano }}.</p>
    @else
        <x-abas :abas="$filiais" :atual="$filialAtual" modelo="filial" aria-label="Filial"/>

        <div wire:loading.class="opacity-50" class="transition-opacity">
            <x-quadro :titulo="mb_convert_case($filialAtual, MB_CASE_TITLE).' · '.$ano" :cor="\App\Visual\Cores::de($filialAtual)"
                      nota="No rodapé, o ano soma todos os meses com meta, inclusive os que ainda não chegaram." class="mt-4">
                <table class="min-w-full text-sm">
                    <thead class="{{ $cabecalho }}">
                        <tr>
                            <th rowspan="2" scope="col" class="px-4 py-2 text-left align-bottom font-semibold">Mês</th>
                            <th rowspan="2" scope="col" class="border-l border-fio px-3 py-2 text-center align-bottom font-semibold">Vendedores<br>com meta</th>
                            <th colspan="3" scope="colgroup" class="border-b border-l border-fio px-3 py-1.5 text-center font-semibold text-tinta">Unidades</th>
                            <th colspan="3" scope="colgroup" class="border-b border-l border-fio px-3 py-1.5 text-center font-semibold text-tinta">Valor</th>
                        </tr>
                        <tr>
                            <th scope="col" class="border-l border-fio px-3 py-1.5 text-center font-medium">Meta</th>
                            <th scope="col" class="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="border-l border-fio px-3 py-1.5 text-center font-medium">Meta</th>
                            <th scope="col" class="px-3 py-1.5 text-center font-medium">Vendido</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 $mes)
                            <tr wire:key="mes-{{ $mes->mes }}" class="hover:bg-chao/50">
                                <td class="px-4 py-2 font-medium text-tinta">{{ \App\Consultas\Periodo::rotulo((string) $mes->mes) }}</td>
                                <td class="border-l border-fio px-3 py-2 text-center tabular-nums text-suave">{{ (int) $mes->vendedores }}</td>
                                <td class="border-l border-fio px-3 py-2 text-center tabular-nums text-suave">{{ (int) $mes->meta_quantidade }}</td>
                                <td class="px-3 py-2 text-center font-semibold tabular-nums text-tinta">{{ (int) $mes->vendas }}</td>
                                <td class="px-3 py-2 [&>div]:justify-center"><x-progresso :realizado="$mes->vendas" :meta="$mes->meta_quantidade"/></td>
                                <td class="border-l border-fio px-3 py-2 text-center tabular-nums whitespace-nowrap text-suave">{{ $moeda($mes->meta_valor) }}</td>
                                <td class="px-3 py-2 text-center tabular-nums whitespace-nowrap text-tinta">{{ $moeda($mes->faturamento) }}</td>
                                <td class="px-3 py-2 [&>div]:justify-center"><x-progresso :realizado="$mes->faturamento" :meta="$mes->meta_valor"/></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="border-l border-fio 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">{{ (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="border-l border-fio px-3 py-2.5 text-center tabular-nums whitespace-nowrap">{{ $moeda($total->meta_valor) }}</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>
            </x-quadro>

            <div class="mt-6 grid gap-6 xl:grid-cols-2">
                <x-quadro titulo="Meta e vendido por mês" nota="barra clara: meta; barra escura: vendido">
                    <div class="px-4 pt-3 pb-2"><x-grafico :config="$grafico" altura="16rem"/></div>
                </x-quadro>

                <x-quadro titulo="Quem compõe a meta" nota="Meta de cada vendedor enquanto esteve na filial, e o que vendeu nela.">
                    <table class="min-w-full text-sm">
                        <thead class="{{ $cabecalho }}">
                            <tr>
                                <th scope="col" class="px-4 py-2.5 text-left font-semibold">Vendedor</th>
                                <th scope="col" class="px-3 py-2.5 text-center font-semibold">Meta</th>
                                <th scope="col" class="px-3 py-2.5 text-center font-semibold">Vendido</th>
                                <th scope="col" class="px-3 py-2.5 text-center font-semibold">Cumprido</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-fio">
                            @forelse ($vendedores as $vendedor)
                                <tr wire:key="vendedor-{{ md5($vendedor->vendedor) }}" class="hover:bg-chao/50">
                                    <td class="px-4 py-2.5">
                                        <span class="font-medium text-tinta">{{ $vendedor->vendedor }}</span>
                                        <span class="block text-[0.7rem] text-suave">{{ (int) $vendedor->meses }} {{ (int) $vendedor->meses === 1 ? 'mês com meta' : 'meses com meta' }}</span>
                                    </td>
                                    <td class="px-3 py-2.5 text-center tabular-nums whitespace-nowrap text-suave">{{ $moeda($vendedor->meta_valor) }}</td>
                                    <td class="px-3 py-2.5 text-center tabular-nums whitespace-nowrap text-tinta">{{ $moeda($vendedor->faturamento) }}</td>
                                    <td class="px-3 py-2.5 [&>div]:justify-center"><x-progresso :realizado="$vendedor->faturamento" :meta="$vendedor->meta_valor"/></td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="px-4 py-8 text-center text-suave">Nenhuma meta lançada para a filial em {{ $ano }}.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </x-quadro>
            </div>
        </div>
    @endif
</x-pagina>