{{-- v4.17.0 §A2.7 — LES RÉUNIONS, écran `data-screen="reunions"` de la maquette : à confirmer
     d'abord, puis planifier, puis le calendrier. --}}
<x-studio.coquille :espace="$espace" :espaces="$espaces" :badges="$badges" :onglet="$onglet" :titre="$titre" :contexte="$contexte">
    <section class="screen">
        <h1 class="h1">Réunions</h1>
        <p class="sub">À confirmer d'abord, puis le calendrier.</p>

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

        @foreach ($a_confirmer as $entree)
            @php($r = $entree['reunion'])
            <div class="meet" wire:key="confirmer-{{ $r->id }}">
                <div class="mh">
                    <div class="cal"><div class="m">{{ $r->date?->translatedFormat('M') ?? '—' }}</div><div class="d">{{ $r->date?->format('j') ?? '?' }}</div></div>
                    <div><div class="mt">{{ \App\Services\Studio\TableauDeLAgence::libelleReunion($r) }} — {{ $r->dashboard?->nomCourtDuClient() }}</div><div class="mm">Proposé : {{ $r->date?->translatedFormat('l j') ?? 'date à fixer' }}{{ $r->heure ? ' · '.\Illuminate\Support\Str::substr((string) $r->heure, 0, 5) : '' }}{{ $r->lieu ? ' · '.$r->lieu : '' }}</div></div>
                    <span class="pill warn">À confirmer</span>
                </div>
                <div class="counter"><b>Le client propose : {{ $entree['souhait']?->commentaire ?: 'un autre créneau' }}</b>{{ $entree['souhait']?->auteur_nom ? 'Par '.$entree['souhait']->auteur_nom.' · '.\App\Livewire\EspaceClient\App\Cloche::dateRelative($entree['souhait']->decide_le) : '' }}</div>
                @if ($aFixer === $r->id)
                    <div class="form">
                        <div class="two">
                            <div class="field"><label for="fix-date-{{ $r->id }}">Date retenue <i>*</i></label><input id="fix-date-{{ $r->id }}" class="input" type="date" wire:model="fixation.date"></div>
                            <div class="field"><label for="fix-heure-{{ $r->id }}">Heure</label><input id="fix-heure-{{ $r->id }}" class="input" type="time" wire:model="fixation.heure"></div>
                        </div>
                        <div class="field"><label for="fix-lieu-{{ $r->id }}">Lieu ou visio</label><input id="fix-lieu-{{ $r->id }}" class="input" wire:model="fixation.lieu" placeholder="Siège du client, visioconférence…"></div>
                        <div class="actrow">
                            <button type="button" class="btn primary" wire:click="confirmer({{ $r->id }})" wire:loading.attr="disabled">Confirmer ce créneau</button>
                            <button type="button" class="btn ghost" wire:click="reproposer({{ $r->id }})" wire:loading.attr="disabled">Proposer celui-ci</button>
                        </div>
                    </div>
                @else
                    <div class="actstack"><div class="actrow">
                        <button type="button" class="btn primary" wire:click="ouvrirLaFixation({{ $r->id }})">Confirmer</button>
                        <button type="button" class="btn ghost" wire:click="ouvrirLaFixation({{ $r->id }})">Autre créneau</button>
                    </div></div>
                @endif
            </div>
        @endforeach

        <div class="cta" style="margin-top:14px"><button type="button" class="btn primary wide" wire:click="basculerLaPlanification"><x-espace-client-app.icone nom="plus" :taille="16" /> Planifier une réunion</button></div>

        @if ($planificationOuverte || request()->boolean('planifier'))
            <form class="form meet" wire:submit="planifier" style="margin-bottom:16px">
                @if ($espace === null)
                    <div class="field"><label for="plan-espace">Espace <i>*</i></label>
                        <select id="plan-espace" class="input" wire:model="espacePourPlanifier">
                            <option value="">Choisir…</option>
                            @foreach ($espaces as $autre)<option value="{{ $autre->id }}">{{ $autre->nomCourtDuClient() }}</option>@endforeach
                        </select>
                    </div>
                @endif
                <div class="two">
                    <div class="field"><label for="plan-type">Type</label>
                        <select id="plan-type" class="input" wire:model="saisie.type">@foreach ($types as $cle => $libelle)<option value="{{ $cle }}">{{ $libelle }}</option>@endforeach</select>
                    </div>
                    <div class="field"><label for="plan-duree">Durée (min)</label><input id="plan-duree" class="input" type="number" min="5" wire:model="saisie.duree"></div>
                </div>
                <div class="two">
                    <div class="field"><label for="plan-date">Date <i>*</i></label><input id="plan-date" class="input" type="date" wire:model="saisie.date" required></div>
                    <div class="field"><label for="plan-heure">Heure</label><input id="plan-heure" class="input" type="time" wire:model="saisie.heure"></div>
                </div>
                <div class="field"><label for="plan-lieu">Lieu</label><input id="plan-lieu" class="input" wire:model="saisie.lieu" placeholder="Siège du client…"></div>
                <label class="coche"><input type="checkbox" wire:model="saisie.visio"> En visioconférence</label>
                <div class="field"><label for="plan-odj">Ordre du jour</label><textarea id="plan-odj" class="input" wire:model="saisie.ordre_du_jour"></textarea></div>
                <div class="actrow">
                    <button type="button" class="btn ghost" wire:click="basculerLaPlanification">Fermer</button>
                    <button type="submit" class="btn primary" wire:loading.attr="disabled">Proposer au client</button>
                </div>
            </form>
        @endif

        @foreach ([['Cette semaine', $semaine], ['Plus tard', $plus_tard]] as [$titreGroupe, $liste])
            @if ($liste->isNotEmpty())
                <p class="slabel">{{ $titreGroupe }}</p>
                @foreach ($liste as $r)
                    <div class="next" wire:key="reunion-{{ $r->id }}">
                        <div class="cal"><div class="m">{{ $r->date->translatedFormat('M') }}</div><div class="d">{{ $r->date->format('j') }}</div></div>
                        <div class="body">
                            <div class="nt">{{ \App\Services\Studio\TableauDeLAgence::libelleReunion($r) }} — {{ $r->dashboard?->nomCourtDuClient() }}</div>
                            <div class="nm">{{ ucfirst($r->date->translatedFormat('D j M')) }}{{ $r->heure ? ' · '.\Illuminate\Support\Str::substr((string) $r->heure, 0, 5) : '' }}{{ $r->lieu ? ' · '.$r->lieu : '' }}</div>
                        </div>
                        <span class="pill {{ $r->creneau_statut === \App\Models\EspaceClient\ReunionClient::CRENEAU_CONFIRME ? 'ok' : 'prep' }}">{{ $r->creneau_statut === \App\Models\EspaceClient\ReunionClient::CRENEAU_CONFIRME ? 'Confirmée' : 'Proposée' }}</span>
                    </div>
                @endforeach
            @endif
        @endforeach

        @if ($a_confirmer->isEmpty() && $semaine->isEmpty() && $plus_tard->isEmpty())
            <div class="vide">Aucune réunion à venir. Planifiez-en une : le client la confirme depuis son espace.</div>
        @endif
    </section>
</x-studio.coquille>