{{--
    v4.16.0 §G / v4.17.0 §A2.10 — LE CORPS DE L'ÉCRAN DES QUANTITÉS, partagé.

    Inclus par l'app du client (onglet Avancement) ET par Studio (onglet Quantités d'un espace) :
    même accordéon, mêmes chiffres, même service. L'accordéon est du HTML natif
    (<details>/<summary>) : il s'ouvre sans une ligne de JavaScript, il reste ouvert quand Livewire
    redessine la page, et un lecteur d'écran l'annonce tout seul.

    ⚠️ Aucun chiffre n'est calculé ici : tout vient de `VueQuantites`, donc d'`AvancementService`.
--}}
@if ($donnees)
    @php
        $pct = $donnees['pourcentage'];
    @endphp
    <div class="qhero">
        <span class="ring lg" style="background:conic-gradient(var(--accent) {{ $pct }}%, var(--line) 0)"
              role="img" aria-label="Avancement du marché : {{ number_format($pct, 1, ',', ' ') }} %">
            <span>{{ (int) round($pct) }}%<small>réalisé</small></span>
        </span>
        <span class="qamt">
            {{ $donnees['postes_total'] }} poste{{ $donnees['postes_total'] > 1 ? 's' : '' }} ·
            {{ count($donnees['familles']) }} famille{{ count($donnees['familles']) > 1 ? 's' : '' }}
        </span>
        <p class="qsub">Quantités validées — touchez une famille pour le détail</p>
    </div>

    @if ($donnees['familles'] !== [])
        <p class="slabel">Postes du marché</p>

        @foreach ($donnees['familles'] as $famille)
            <details class="qrow" @if ($loop->first) open @endif>
                <summary class="qhead">
                    <span class="qic"><x-espace-client-app.icone nom="livrables" :taille="18" /></span>
                    <span class="qb">
                        <span class="qn">{{ $famille['titre'] }}</span>
                        <span class="qm">{{ $famille['resume'] }}{{ $famille['montant'] ? ' · '.$famille['montant'] : '' }}</span>
                        <span class="qbar"><i style="width:{{ $famille['pourcentage'] }}%"></i></span>
                    </span>
                    <span class="qp">{{ (int) round($famille['pourcentage']) }}%</span>
                    <span class="qchev"><x-espace-client-app.icone nom="fleche" :taille="18" /></span>
                </summary>

                <div class="qdetail">
                    @foreach ($famille['postes'] as $poste)
                        <div class="qline">
                            <span class="ql"><b>{{ $poste['libelle'] }}</b>Poste {{ $poste['numero'] }}</span>
                            <span class="qv">{{ $poste['valeur'] }}</span>
                        </div>
                    @endforeach
                </div>
            </details>
        @endforeach
    @else
        <div class="vide" style="margin-top:16px">
            Le bordereau de ce marché n'a pas encore été repris dans votre espace. Dès qu'il
            le sera, vous suivrez ici chaque poste et son avancement.
        </div>
    @endif
@endif