{{--
    « Ma progression » (v2.0 §3, §5 et §11).

    La jauge quadricolore — une couleur par nature d'heure — dit d'un coup d'œil d'où viennent
    les heures. La phrase de projection est la seule information vraiment utile à quelqu'un qui
    se demande s'il y arrivera.
--}}
<x-formation.coquille :entete="__('formation.ma_progression')" :retour="route('formation.accueil')">

    <div class="carte text-center">
        <p dir="ltr" class="text-5xl font-extrabold tabular-nums">{{ number_format($heures, 1, ',', ' ') }}</p>
        <p class="mt-1 text-base text-encre-doux">{{ __('formation.sur_objectif', ['objectif' => $objectif]) }}</p>

        {{-- La jauge : quatre segments accolés, jamais un tableau de chiffres. --}}
        <div class="mt-4 flex h-4 w-full overflow-hidden rounded-full bg-bordure">
            @foreach ($natures as $ligne)
                @if ($ligne['part'] > 0)
                    <span class="h-full" style="inline-size: {{ $ligne['part'] }}%; background-color: {{ $ligne['nature']->couleurHex() }}"
                          title="{{ $ligne['nature']->label() }}"></span>
                @endif
            @endforeach
        </div>

        @if ($atteint)
            <p class="mt-4 rounded-2xl border-2 border-coaching/40 bg-coaching/10 p-3 text-base font-extrabold">
                ✓ {{ __('formation.objectif_atteint') }}
            </p>
        @elseif ($projection)
            <p class="mt-4 text-base font-bold text-encre-doux">
                {{ __('formation.projection', ['date' => $projection->format('d/m/Y')]) }}
            </p>
        @endif
    </div>

    {{-- Le détail par nature, avec la même couleur que dans la jauge. --}}
    <h2 class="mb-2 mt-8 text-lg font-extrabold">{{ __('formation.detail_heures') }}</h2>
    <ul class="space-y-2">
        @foreach ($natures as $ligne)
            <li class="carte flex items-center gap-3">
                <span class="h-10 w-2.5 shrink-0 rounded-full" style="background-color: {{ $ligne['nature']->couleurHex() }}" aria-hidden="true"></span>
                <span class="min-w-0 flex-1 text-base font-bold">
                    {{ app()->getLocale() === 'ar' ? $ligne['nature']->labelAr() : $ligne['nature']->label() }}
                </span>
                {{-- dir="ltr" : sans isolation, « 54,8 h » se lit « h 54,8 » en arabe, l'unité
                     passant à gauche du nombre. Un chiffre d'heures doit se lire pareil dans les
                     deux langues. --}}
                <span dir="ltr" class="text-lg font-extrabold tabular-nums">{{ number_format($ligne['heures'], 1, ',', ' ') }} h</span>
            </li>
        @endforeach
    </ul>

    @if ($presences->isNotEmpty())
        <h2 class="mb-2 mt-8 text-lg font-extrabold">{{ __('formation.mes_presences') }}</h2>
        <ul class="space-y-2">
            @foreach ($presences as $presence)
                <li class="carte flex items-center gap-3">
                    <span class="text-2xl" aria-hidden="true">✓</span>
                    <span class="min-w-0 flex-1">
                        <span class="block text-base font-bold leading-snug">{{ $presence->session?->titre }}</span>
                        <span class="block text-sm text-encre-doux">{{ $presence->session?->date?->format('d/m/Y') }}</span>
                    </span>
                </li>
            @endforeach
        </ul>
    @endif

    @if ($quizReussis->isNotEmpty())
        <h2 class="mb-2 mt-8 text-lg font-extrabold">{{ __('formation.mes_quiz') }}</h2>
        <ul class="space-y-2">
            @foreach ($quizReussis as $tentative)
                <li class="carte flex items-center gap-3">
                    <span class="text-2xl" aria-hidden="true">★</span>
                    <span class="min-w-0 flex-1 text-base font-bold leading-snug">{{ $tentative->quiz?->titre }}</span>
                    <span dir="ltr" class="text-base font-extrabold tabular-nums">{{ $tentative->score }} %</span>
                </li>
            @endforeach
        </ul>
    @endif

    @if ($rendus->isNotEmpty())
        <h2 class="mb-2 mt-8 text-lg font-extrabold">{{ __('formation.mes_livrables') }}</h2>
        <ul class="space-y-2">
            @foreach ($rendus as $rendu)
                <li class="carte flex items-center gap-3">
                    <span class="min-w-0 flex-1 text-base font-bold leading-snug">{{ $rendu->livrable?->titre }}</span>
                    <span class="shrink-0 rounded-full bg-surface px-3 py-1 text-xs font-bold">
                        {{ app()->getLocale() === 'ar' ? $rendu->statut->labelAr() : $rendu->statut->label() }}
                    </span>
                </li>
            @endforeach
        </ul>
    @endif

    <x-slot:action>
        <a href="{{ route('formation.accueil') }}" wire:navigate class="bouton-principal">
            {{ __('formation.continuer') }}
        </a>
    </x-slot:action>
</x-formation.coquille>