{{--
    Le détail d'un module : ses séquences, ses questions, ses travaux à rendre.
    Une pastille par ligne dit ce qui est fait — pas un pourcentage, pas un tableau.
--}}
<x-formation.coquille :entete="$module->titre" :retour="route('formation.accueil')">

    @if ($module->image_path)
        <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($module->image_path) }}"
             alt="" loading="lazy" class="mb-4 h-44 w-full rounded-2xl object-cover">
    @endif

    @php $description = $module->bilingue('description'); @endphp
    @if (filled($description))
        <div class="carte mb-6 flex items-start gap-3">
            <p class="min-w-0 flex-1 text-base leading-relaxed">{{ $description }}</p>
            <x-formation.ecouter :texte="$description" />
        </div>
    @endif

    {{-- Notions (v2.1 §1) : passage, question de compréhension, questions de projet.
         Elles ouvrent la liste — c'est par elles que le dossier s'écrit, et une notion faite
         se reconnaît à ce qu'elle a rangé, pas à une case cochée. --}}
    @if ($notions->isNotEmpty())
        <h2 class="mb-2 text-lg font-extrabold">{{ __('formation.notions') }}</h2>
        <ul class="mb-6 space-y-2">
            @foreach ($notions as $notion)
                @php
                    $champs = $notion->questionsProjet->pluck('champ');
                    $repondus = $champs->intersect($champsRepondus)->count();
                    $faite = $champs->isNotEmpty() && $repondus === $champs->count();
                @endphp
                <li>
                    <a href="{{ route('formation.notion', $notion) }}" wire:navigate class="carte flex items-center gap-3">
                        <span @class([
                            'grid h-11 w-11 shrink-0 place-items-center rounded-full text-lg',
                            'bg-coaching text-white' => $faite,
                            'bg-surface text-encre-doux' => ! $faite,
                        ])>
                            @if ($faite)
                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
                                    <path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            @else
                                <span aria-hidden="true">▶</span>
                            @endif
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-base font-bold leading-snug">{{ $notion->titre }}</span>
                            @if ($champs->isNotEmpty())
                                <span class="block text-sm text-encre-doux">
                                    {{ __('formation.reponses_sur_total', ['faites' => $repondus, 'total' => $champs->count()]) }}
                                </span>
                            @endif
                        </span>
                    </a>
                </li>
            @endforeach
        </ul>
    @endif

    {{-- Séquences --}}
    @if ($sequences->isNotEmpty())
        <h2 class="mb-2 text-lg font-extrabold">{{ __('formation.sequences') }}</h2>
        <ul class="mb-6 space-y-2">
            @foreach ($sequences as $sequence)
                @php $fait = in_array($sequence->id, $terminees, true); @endphp
                <li>
                    <a href="{{ route('formation.sequence', $sequence) }}" wire:navigate
                       class="carte flex items-center gap-3">
                        <span @class([
                            'grid h-11 w-11 shrink-0 place-items-center rounded-full text-lg',
                            'bg-coaching text-white' => $fait,
                            'bg-surface text-encre-doux' => ! $fait,
                        ])>
                            @if ($fait)
                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
                                    <path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            @else
                                <span aria-hidden="true">{{ $sequence->type?->value === 'video' ? '▶' : '📄' }}</span>
                            @endif
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-base font-bold leading-snug">{{ $sequence->titre }}</span>
                            @if ($sequence->duree_minutes > 0)
                                <span dir="ltr" class="block text-sm text-encre-doux">{{ $sequence->duree_minutes }} min</span>
                            @endif
                        </span>
                        @if (in_array($sequence->id, $vues, true) && ! $fait)
                            <span class="rounded-full bg-primaire/15 px-3 py-1 text-xs font-bold text-primaire">
                                {{ __('formation.en_cours') }}
                            </span>
                        @endif
                    </a>
                </li>
            @endforeach
        </ul>
    @endif

    {{-- Questions --}}
    @if ($quiz->isNotEmpty())
        <h2 class="mb-2 text-lg font-extrabold">{{ __('formation.quiz') }}</h2>
        <ul class="mb-6 space-y-2">
            @foreach ($quiz as $q)
                @php $reussi = in_array($q->id, $quizReussis, true); @endphp
                <li>
                    <a href="{{ route('formation.quiz', $q) }}" wire:navigate class="carte flex items-center gap-3">
                        <span @class([
                            'grid h-11 w-11 shrink-0 place-items-center rounded-full text-lg',
                            'bg-coaching text-white' => $reussi,
                            'bg-surface text-encre-doux' => ! $reussi,
                        ])>
                            <span aria-hidden="true">{{ $reussi ? '★' : '?' }}</span>
                        </span>
                        <span class="min-w-0 flex-1 text-base font-bold leading-snug">{{ $q->titre }}</span>
                    </a>
                </li>
            @endforeach
        </ul>
    @endif

    {{-- Travaux à rendre --}}
    @if ($livrables->isNotEmpty())
        <h2 class="mb-2 text-lg font-extrabold">{{ __('formation.livrables') }}</h2>
        <ul class="space-y-2">
            @foreach ($livrables as $livrable)
                @php $rendu = $rendus->get($livrable->id); @endphp
                <li>
                    <a href="{{ route('formation.livrable', $livrable) }}" wire:navigate class="carte flex items-center gap-3">
                        <span @class([
                            'grid h-11 w-11 shrink-0 place-items-center rounded-full text-lg',
                            'bg-coaching text-white' => $rendu?->statut === $statutAccepte,
                            'bg-surface text-encre-doux' => $rendu?->statut !== $statutAccepte,
                        ])>
                            <span aria-hidden="true">✎</span>
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-base font-bold leading-snug">{{ $livrable->titre }}</span>
                            @if ($rendu)
                                <span @class([
                                    'block text-sm',
                                    'text-coaching' => $rendu->statut === $statutAccepte,
                                    'text-encre-doux' => $rendu->statut !== $statutAccepte,
                                ])>{{ $rendu->statut->labelAr() && app()->getLocale() === 'ar' ? $rendu->statut->labelAr() : $rendu->statut->label() }}</span>
                            @endif
                        </span>
                    </a>
                </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>