@php use App\Support\Money; $graphe = $this->getBarres(); @endphp

<x-filament-widgets::widget>
    <x-tableau-de-bord.carte
        titre="Dépenses par catégorie (mois en cours)"
        :chiffre="Money::format($graphe['total'])"
    >
        @if ($graphe['barres'] === [])
            <p class="tdb-muet">Aucune dépense enregistrée ce mois-ci.</p>
        @else
            {{-- Barres horizontales triées : chaque barre est un lien vers les Opérations filtrées. --}}
            <ul class="tdb-liste" role="list" aria-label="Dépenses par catégorie">
                @foreach ($graphe['barres'] as $barre)
                    <li class="tdb-ligne" style="display: block;">
                        @if ($barre['url'])
                            <a href="{{ $barre['url'] }}" style="display: block;">
                        @endif
                        <span style="display: flex; justify-content: space-between; gap: .75rem;">
                            <span class="tdb-nom">{{ $barre['label'] }}</span>
                            <span class="tdb-montant">
                                {{ Money::format($barre['amount']) }}
                                <span class="tdb-muet" style="font-weight: 400;">· {{ number_format($barre['percent'], 1, ',', ' ') }} %</span>
                            </span>
                        </span>
                        <svg viewBox="0 0 100 6" preserveAspectRatio="none" role="img" aria-hidden="true"
                             style="display: block; width: 100%; height: 8px; margin-top: .375rem; color: var(--primary-500);">
                            <rect x="0" y="0" width="100" height="6" rx="1.5" fill="currentColor" opacity=".12"></rect>
                            <rect x="0" y="0" width="{{ $barre['width'] }}" height="6" rx="1.5" fill="currentColor"></rect>
                        </svg>
                        @if ($barre['url'])
                            </a>
                        @endif
                    </li>
                @endforeach
            </ul>
        @endif
    </x-tableau-de-bord.carte>
</x-filament-widgets::widget>