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

<x-pagina titulo="Despesas do mês" grupo="Relatórios"
          :descricao="'Por centro de custo em '.$rotulos['atual'].', comparado a '.$rotulos['anterior'].' e a '.$rotulos['anoPassado'].'.'">
    <x-slot:filtros>
        <x-seletor-mes :valor="$mes"/>
    </x-slot:filtros>

    @if ($centros->isEmpty())
        <p class="rounded-lg border border-dashed border-fio bg-superficie p-10 text-center text-sm text-suave">Nenhuma despesa em {{ $rotulos['atual'] }}.</p>
    @else
        <div class="grid items-start gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
            <x-quadro titulo="Por centro de custo"
                      nota="pelas regras de custo: o mesmo que entra no Mensal">
                <x-slot:acao>
                    <x-explicacao chave="despesas_no_resultado"/>
                    <x-atalho href="/despesas/anual?por=centro">Ano a ano por centro</x-atalho>
                </x-slot:acao>
                <table class="min-w-full text-sm">
                    <thead>
                        <tr class="border-b border-fio bg-chao/60 text-[0.7rem] font-semibold uppercase tracking-[0.06em] text-suave">
                            <th class="px-4 py-2.5 text-left">Centro de custo</th>
                            <th class="px-4 py-2.5 text-right text-tinta">{{ $rotulos['atual'] }}</th>
                            <th class="px-4 py-2.5 text-left">Parte</th>
                            <th class="px-4 py-2.5 text-right">{{ $rotulos['anterior'] }}</th>
                            <th class="px-4 py-2.5 text-right">{{ $rotulos['anoPassado'] }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-fio">
                        @foreach ($centros as $centro)
                            @php
                                $anteriorCentro = $anterior->get($centro->codigo);
                                $anoPassadoCentro = $anoPassado->get($centro->codigo);
                                $parte = $totais['atual'] > 0 ? (float) $centro->total / $totais['atual'] * 100 : 0;
                            @endphp
                            <tr class="transition-colors hover:bg-chao/50">
                                <td class="px-4 py-2.5 font-medium">{{ $centro->nome }}</td>
                                <td class="px-4 py-2.5 text-right font-semibold tabular-nums text-debito">{{ $moeda($centro->total) }}</td>
                                <td class="px-4 py-2.5">
                                    <div class="flex items-center gap-2">
                                        <div class="h-1.5 w-16 overflow-hidden rounded-full bg-chao" aria-hidden="true">
                                            <div class="h-full rounded-full bg-marca-600" style="width: {{ min(100, $parte) }}%"></div>
                                        </div>
                                        <span class="text-xs tabular-nums text-suave">{{ number_format($parte, 1, ',', '.') }}%</span>
                                    </div>
                                </td>
                                <td class="px-4 py-2.5 text-right">
                                    <span class="block tabular-nums text-debito/75">{{ $anteriorCentro ? $moeda($anteriorCentro->total) : '—' }}</span>
                                    <x-variacao :atual="$centro->total" :anterior="$anteriorCentro?->total" :rotulo="$rotulos['anterior']" :alta-e-boa="false" compacto class="justify-end text-xs"/>
                                </td>
                                <td class="px-4 py-2.5 text-right">
                                    <span class="block tabular-nums text-debito/75">{{ $anoPassadoCentro ? $moeda($anoPassadoCentro->total) : '—' }}</span>
                                    <x-variacao :atual="$centro->total" :anterior="$anoPassadoCentro?->total" :rotulo="$rotulos['anoPassado']" :alta-e-boa="false" compacto class="justify-end text-xs"/>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="border-t border-fio bg-chao/60 font-semibold">
                        <tr>
                            <td class="px-4 py-2.5">Total</td>
                            <td class="px-4 py-2.5 text-right tabular-nums text-debito">{{ $moeda($totais['atual']) }}</td>
                            <td class="px-4 py-2.5 text-xs text-suave">100%</td>
                            <td class="px-4 py-2.5 text-right">
                                <span class="block tabular-nums text-debito/75">{{ $moeda($totais['anterior']) }}</span>
                                <x-variacao :atual="$totais['atual']" :anterior="$totais['anterior']" :rotulo="$rotulos['anterior']" :alta-e-boa="false" compacto class="justify-end text-xs"/>
                            </td>
                            <td class="px-4 py-2.5 text-right">
                                <span class="block tabular-nums text-debito/75">{{ $moeda($totais['anoPassado']) }}</span>
                                <x-variacao :atual="$totais['atual']" :anterior="$totais['anoPassado']" :rotulo="$rotulos['anoPassado']" :alta-e-boa="false" compacto class="justify-end text-xs"/>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </x-quadro>

            <div class="grid gap-6">
                <x-quadro titulo="Divisão do mês">
                    <div class="p-4"><x-grafico :config="$graficos['todos']" altura="18rem"/></div>
                </x-quadro>
                @if ($temEstoque)
                    <x-quadro titulo="Sem estoque e garantias" nota="sem o centro da compra e preparo de veículos">
                        <div class="p-4"><x-grafico :config="$graficos['semEstoque']" altura="18rem"/></div>
                    </x-quadro>
                @endif
            </div>
        </div>
    @endif
</x-pagina>