@php
    $moeda = fn (?float $v) => $v === null ? '—' : number_format($v, 2, ',', '.');
@endphp

<x-pagina titulo="Despesas anuais" grupo="Relatórios"
          descricao="Mês a mês, um ano por linha. A média divide o total pelos meses que tiveram despesa.">
    <x-slot:filtros>
        <x-alternador legenda="Agrupar por" modelo="dimensao" :valor="$dimensaoAtual"
                      :opcoes="[['centro', 'Centro de custo'], ['unidade', 'Unidade']]"/>
    </x-slot:filtros>

    @if ($abas === [])
        <p class="rounded-lg border border-dashed border-fio bg-superficie p-10 text-center text-sm text-suave">Nenhuma despesa registrada.</p>
    @else
        <x-abas :abas="$abas" :atual="$abaAtual" :aria-label="$dimensaoAtual === 'centro' ? 'Centro de custo' : 'Unidade'"/>

        <x-quadro :titulo="$abaAtual" :nota="$dimensaoAtual === 'unidade' ? 'OUTROS reúne o que não é loja nem geral: Herval, oficina e marcadores sem unidade.' : 'Valores em R$'" class="mt-4">
            <x-slot:acao>
                <x-explicacao chave="despesas_no_resultado"/>
                <x-atalho href="/despesas">Um mês em detalhe</x-atalho>
            </x-slot:acao>
            <table class="min-w-full text-xs">
                <thead>
                    <tr class="border-b border-fio text-[0.68rem] font-semibold uppercase tracking-[0.06em] text-suave">
                        <th class="sticky left-0 z-10 bg-chao px-3 py-2.5 text-left">Ano</th>
                        @foreach ($meses as $rotuloMes)
                            <th class="bg-chao/60 px-3 py-2.5 text-right">{{ $rotuloMes }}</th>
                        @endforeach
                        <th class="sticky right-28 z-10 w-32 min-w-32 border-l border-fio shadow-[-10px_0_12px_-10px_rgba(17,26,23,0.3)] bg-chao px-3 py-2.5 text-right text-tinta">Total</th>
                        <th class="sticky right-0 z-10 w-28 min-w-28 bg-chao px-3 py-2.5 text-right text-tinta">Média</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @foreach ($anos as $linha)
                        @php
                            $anterior = $anteriores->get((int) $linha->ano - 1);
                            $media = (float) $linha->total / max(1, (int) $linha->meses_com_dados);
                            $mediaAnterior = $anterior ? (float) $anterior->total / max(1, (int) $anterior->meses_com_dados) : null;
                        @endphp
                        <tr class="group align-top transition-colors hover:bg-chao/50">
                            <th scope="row" class="sticky left-0 z-10 bg-superficie px-3 py-2 text-left font-semibold text-tinta transition-colors group-hover:bg-chao/50">{{ $linha->ano }}</th>
                            @for ($m = 1; $m <= 12; $m++)
                                <td class="whitespace-nowrap px-3 py-2 text-right tabular-nums text-debito/80">{{ $moeda($celulas[(int) $linha->ano][$m] ?? null) }}</td>
                            @endfor
                            <td class="sticky right-28 z-10 w-32 min-w-32 whitespace-nowrap border-l border-fio bg-chao px-3 py-2 text-right transition-colors group-hover:bg-chao/50">
                                <span class="block font-semibold tabular-nums text-debito">{{ $moeda((float) $linha->total) }}</span>
                                <x-variacao :atual="$linha->total" :anterior="$anterior?->total" :rotulo="(string) ((int) $linha->ano - 1)" :alta-e-boa="false" compacto class="justify-end text-[0.68rem]"/>
                            </td>
                            <td class="sticky right-0 z-10 w-28 min-w-28 whitespace-nowrap bg-chao px-3 py-2 text-right transition-colors group-hover:bg-chao/50">
                                <span class="block font-semibold tabular-nums text-debito">{{ $moeda($media) }}</span>
                                <x-variacao :atual="$media" :anterior="$mediaAnterior" :rotulo="(string) ((int) $linha->ano - 1)" :alta-e-boa="false" compacto class="justify-end text-[0.68rem]"/>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </x-quadro>

        @if ($grafico['series'] !== [])
            <x-quadro titulo="Mês a mês" nota="últimos quatro anos" class="mt-6">
                <div class="p-4"><x-grafico :config="$grafico" altura="20rem"/></div>
            </x-quadro>
        @endif
    @endif
</x-pagina>