{{--
    v4.16.0 §I — LA RÉUNION : confirmer le créneau, ou en demander un autre.

    Aucun nouveau langage visuel : la fiche, puis le bloc de décision (`.valwrap`) et la
    conversation (`.remarks`) — exactement ceux d'une publication et d'un livrable. Un client qui
    a appris à valider un post sait déjà répondre à un créneau.
--}}
<x-espace-client-app.coquille :dashboard="$dashboard" :acces="$acces" :espaces="$espaces" :a-valider="$aValider" :non-lus="$nonLus" onglet="accueil">
    <section class="screen">
        <div class="backbar">
            <a wire:navigate href="{{ route('espace-client.app.accueil', ['espace' => $dashboard->id]) }}" aria-label="Retour à l'accueil">
                <x-espace-client-app.icone nom="retour" :taille="18" />
            </a>
            <span class="bt">Réunion</span>
        </div>

        @if ($annonce)
            <div class="alerte {{ $annonce['ton'] }}" style="margin-bottom:14px" role="status">{{ $annonce['texte'] }}</div>
        @endif

        @if ($reunion)
            <div class="fiche">
                <p class="ft">{{ filled($reunion->type) ? $reunion->type : 'Réunion' }}</p>
                <p class="fm">{{ $reunion->reference }}</p>

                <div class="fpill">
                    <span class="pill {{ $reunion->creneau_statut === \App\Models\EspaceClient\ReunionClient::CRENEAU_CONFIRME ? 'ok' : 'warn' }}">
                        {{ ucfirst($reunion->phraseDuCreneau()) }}
                    </span>
                </div>

                <div class="frow">
                    <span class="fk">Date</span>
                    <span class="fv">
                        {{ $reunion->date?->translatedFormat('l j F Y') ?? 'à fixer' }}
                        @if ($reunion->heure) · {{ \Illuminate\Support\Str::substr((string) $reunion->heure, 0, 5) }} @endif
                    </span>
                </div>

                @if ($reunion->lieu)
                    <div class="frow">
                        <span class="fk">Lieu</span>
                        <span class="fv">{{ $reunion->lieu }}</span>
                    </div>
                @endif

                @if ($reunion->duree_min)
                    <div class="frow">
                        <span class="fk">Durée</span>
                        <span class="fv">{{ $reunion->duree_min }} minutes</span>
                    </div>
                @endif

                @if (filled($reunion->ordre_du_jour))
                    <div class="frow">
                        <span class="fk">Ordre du jour</span>
                        <span class="fv" style="font-weight:500;white-space:pre-line">{{ $reunion->ordre_du_jour }}</span>
                    </div>
                @endif
            </div>

            <div class="valwrap">
                @if ($peutRepondre)
                    <div class="vst">Ce créneau vous convient-il ? <b>Votre réponse fixe la réunion.</b></div>

                    <div class="actstack">
                        <button type="button" class="btn primary wide" wire:click="confirmerLeCreneau" wire:loading.attr="disabled">
                            <x-espace-client-app.icone nom="valider" :taille="16" /> Confirmer le créneau
                        </button>
                        <button type="button" class="btn mod wide" wire:click="basculerLaContreProposition">
                            <x-espace-client-app.icone nom="calendrier" :taille="15" /> Proposer un autre créneau
                        </button>

                        @if ($contrePropositionOuverte)
                            <div class="modbox">
                                <label class="hide" for="souhait-creneau">Le créneau qui vous conviendrait</label>
                                <textarea id="souhait-creneau" wire:model="souhait"
                                          placeholder="Quel jour et quelle heure vous conviendraient ?"></textarea>
                                <button type="button" class="btn primary send wide" wire:click="proposerUnAutreCreneau" wire:loading.attr="disabled">
                                    Envoyer ma proposition
                                </button>
                            </div>
                        @endif
                    </div>
                @else
                    <div class="vst" style="margin:0">
                        @if ($reunion->creneau_statut === \App\Models\EspaceClient\ReunionClient::CRENEAU_PROPOSE)
                            Ce créneau attend la réponse du référent de votre marché.
                        @else
                            {{ ucfirst($reunion->phraseDuCreneau()) }} — il n'y a rien à décider ici.
                        @endif
                    </div>
                @endif
            </div>

            <div class="remarks">
                <p class="slabel">Conversation</p>

                @forelse ($conversation as $entree)
                    @if ($entree['jour'])
                        <div class="daysep">{{ $entree['jour'] }}</div>
                    @endif

                    <div class="remark">
                        <span class="rav {{ $entree['nous'] ? 'a' : 'c' }}" aria-hidden="true">{{ $entree['initiales'] }}</span>
                        <span class="rb {{ $entree['demande'] ? 'dem' : '' }}">
                            @if ($entree['demande'])
                                <span class="rtag">Autre créneau demandé</span>
                            @endif
                            <span class="who">{{ $entree['nom'] }} <span>· {{ $entree['heure'] }}</span></span>
                            <span class="tx">{{ $entree['texte'] }}</span>
                        </span>
                    </div>
                @empty
                    <div class="vide">Rien n'a encore été échangé sur cette réunion.</div>
                @endforelse
            </div>
        @else
            <div class="vide">
                Aucune réunion n'est fixée pour le moment. Dès qu'un créneau vous sera proposé, il
                apparaîtra ici et vous recevrez un e-mail pour le confirmer.
            </div>
        @endif
    </section>
</x-espace-client-app.coquille>