{{--
    v4.17.0 §A2.1 — « VOS ESPACES », écran `data-screen="espaces"` de la maquette (et « Vue
    d'ensemble » sur ordinateur). Aucune valeur en dur : tout vient de `TableauDeLAgence`.
--}}
<x-studio.coquille :espace="$espace" :espaces="$espaces" :badges="$badges" :onglet="$onglet" :titre="$titre" :contexte="$contexte">
    <section class="screen">
        {{-- v4.17.1 §C — Le jumeau côté agence : l'installation, évidente tant qu'on n'y est pas. --}}
        <x-espace-client-app.banniere-installation />

        <p class="eyebrow">Bonjour {{ $prenom }}</p>
        <h1 class="h1">Vos espaces</h1>
        <p class="sub">Ce qui attend l'agence d'abord, puis tout le reste.</p>
        {{-- v4.17.4 §A2 — Ouvrir un espace n'allait pas de soi : les onglets d'un espace n'existent
             QUE dans un espace (§A1). On le dit ici, sobrement, plutôt que de laisser chercher. --}}
        <p class="sub">Ouvrez un espace pour voir son point, ses publications et ses livrables.</p>

        @if ($annonce)
            <div class="alerte {{ $annonce['ton'] }}" role="status">{{ $annonce['texte'] }}</div>
        @endif

        <div class="dcols">
            <div>
                {{-- ATTEND L'AGENCE (or) --}}
                @php($n = $attend->count())
                <div @class(['todo', 'calme' => $n === 0])>
                    <div class="lab"><span class="dot"></span>
                        {{ $n === 0 ? 'Rien n\'attend l\'agence' : $n.' chose'.($n > 1 ? 's' : '').' attend'.($n > 1 ? 'ent' : '').' l\'agence' }}
                    </div>
                    @forelse ($attend as $item)
                        <div class="item">
                            <div class="kind">{{ $item['genre'] }} <span class="espt">{{ $item['espace']->nomCourtDuClient() }}</span></div>
                            <div class="ttl">{{ $item['titre'] }}</div>
                            <div class="meta">{{ $item['detail'] }}</div>
                            <div class="acts">
                                <a class="btn {{ $item['action']['ton'] }}" href="{{ $item['action']['url'] }}">{{ $item['action']['libelle'] }}</a>
                                @if ($item['secondaire'])
                                    <a class="btn ghost" href="{{ $item['secondaire']['url'] }}">{{ $item['secondaire']['libelle'] }}</a>
                                @endif
                            </div>
                        </div>
                    @empty
                        <p class="rien">Tout est traité de notre côté. Les demandes des clients, les modifications et les créneaux à confirmer apparaîtront ici.</p>
                    @endforelse
                </div>

                {{-- LES CARTES D'ESPACE --}}
                <form class="search" method="GET" action="{{ route('studio.espaces') }}" role="search">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                    <input type="search" name="q" wire:model.live.debounce.300ms="recherche" placeholder="Chercher un espace, un client…" aria-label="Rechercher">
                </form>
                <div class="filters">
                    <button type="button" class="{{ $filtre === 'tous' ? 'on' : '' }}" wire:click="$set('filtre', 'tous')">Tous</button>
                    <button type="button" class="{{ $filtre === 'a-traiter' ? 'on' : '' }}" wire:click="$set('filtre', 'a-traiter')">À traiter @if ($attend->count()) <span class="b">{{ $attend->groupBy(fn ($i) => $i['espace']->id)->count() }}</span> @endif</button>
                    @if (! $estDirection || auth()->user()?->employee)
                        <button type="button" class="{{ $filtre === 'mes-espaces' ? 'on' : '' }}" wire:click="$set('filtre', 'mes-espaces')">Mes espaces</button>
                    @endif
                    @foreach ($prestataires as $prestataire)
                        <button type="button" class="{{ mb_strtolower($filtre) === mb_strtolower($prestataire) ? 'on' : '' }}" wire:click="$set('filtre', '{{ $prestataire }}')">{{ $prestataire }}</button>
                    @endforeach
                </div>

                <div class="list dgrid" style="margin-top:8px">
                    @forelse ($cartes as $carte)
                        <a class="esp {{ $carte['a_traiter'] > 0 ? 'hot' : '' }}" href="{{ $carte['url'] }}">
                            <span class="crest">
                                @if ($carte['logo'])
                                    <img src="{{ $carte['logo'] }}" alt="">
                                @else
                                    {{ $carte['initiales'] }}
                                @endif
                            </span>
                            <span class="eb">
                                <span class="en">{{ $carte['client'] }} <span class="by">· {{ $carte['prestataire'] }}</span></span>
                                <span class="em">{{ $carte['marche'] }}</span>
                                <span class="tags">
                                    @foreach ($carte['pastilles'] as $pastille)
                                        <span class="pill {{ $pastille['ton'] }}">{{ $pastille['texte'] }}</span>
                                    @endforeach
                                </span>
                                <span class="who">
                                    @foreach ($carte['gestionnaires'] as $g)
                                        <span class="av" title="{{ $g['nom'] }}">{{ $g['initiales'] }}</span>
                                    @endforeach
                                    {{ collect($carte['gestionnaires'])->pluck('prenom')->implode(', ') ?: 'Aucun gestionnaire' }}
                                    @if ($carte['activite']) · activité {{ \App\Services\Studio\TableauDeLAgence::relatif($carte['activite']) }} @endif
                                </span>
                            </span>
                            <span class="chev"><x-espace-client-app.icone nom="fleche" :taille="18" /></span>
                        </a>
                    @empty
                        <div class="vide">Aucun espace ne correspond.</div>
                    @endforelse
                </div>
            </div>

            <div>
                {{-- CHEZ LES CLIENTS (accent) --}}
                <div class="wait">
                    <div class="lab"><x-espace-client-app.icone nom="horloge" :taille="15" /> Chez les clients <span class="n">{{ $chez->count() }}</span></div>
                    @forelse ($chez as $item)
                        <div class="wl">
                            <a class="t" href="{{ $item['url'] }}"><b>{{ $item['titre'] }}</b><span>{{ $item['espace']->nomCourtDuClient() }} · {{ $item['detail'] }}</span></a>
                            @if ($item['retard_jours'] !== null)
                                <span class="late">en retard · {{ $item['retard_jours'] }} j</span>
                            @endif
                            <button type="button" class="relance" wire:click="relancer('{{ $item['type'] }}', {{ $item['objet']->id }})" wire:loading.attr="disabled">Relancer</button>
                        </div>
                    @empty
                        <div class="wl"><span class="t"><span>Rien n'attend de réponse chez les clients.</span></span></div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
</x-studio.coquille>