{{--
    v4.17.0 §A2.3 — NOUVELLE PUBLICATION / ÉDITION, écran `data-screen="nouvelle"` de la maquette.

    La photo vient de l'APPAREIL (`capture="environment"`) ou de la GALERIE : deux entrées de fichier,
    un seul champ Livewire. L'aperçu est celui de Livewire (`temporaryUrl`) ; Remplacer / Retirer
    agissent sans recharger. Les notes internes ne sortent jamais d'ici.
--}}
<x-studio.coquille :espace="$espace" :espaces="$espaces" :badges="$badges" :onglet="$onglet" :titre="$titre" :contexte="$contexte">
    <section class="screen">
        <div class="backbar">
            <a href="{{ $publication ? route('studio.publication', ['espace' => $espace->id, 'publication' => $publication->id]) : route('studio.publications', ['espace' => $espace->id]) }}" aria-label="Retour"><x-espace-client-app.icone nom="retour" :taille="18" /></a>
            <span class="bt">{{ $publication ? 'Corriger la publication' : 'Nouvelle publication' }}</span>
            <span class="chip" style="margin-inline-start:auto">{{ $espace->nomCourtDuClient() }}</span>
        </div>

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

        <form class="form" wire:submit="enregistrer">
            <div class="field"><label for="pub-titre">Titre <i>*</i></label><input id="pub-titre" class="input" wire:model="saisie.titre" placeholder="Ex. Journée portes ouvertes — coulisses" required></div>

            <div class="field"><label>Type</label>
                <div class="chips">
                    @foreach ($types as $type)
                        <button type="button" class="{{ ($saisie['type'] ?? '') === $type->value ? 'on' : '' }}" wire:click="$set('saisie.type', '{{ $type->value }}')">{{ $type->label() }}</button>
                    @endforeach
                </div>
            </div>

            <div class="field"><label>Canaux <i>*</i></label>
                <div class="chips">
                    @foreach ($reseaux as $reseau)
                        <button type="button" class="{{ in_array($reseau['cle'], (array) ($saisie['canaux'] ?? []), true) ? 'on' : '' }}" wire:click="basculerLeCanal('{{ $reseau['cle'] }}')">
                            <span class="net">{{ \Illuminate\Support\Str::limit($reseau['libelle'], 2, '') }}</span>{{ $reseau['libelle'] }}
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="two">
                <div class="field"><label for="pub-date">Date prévue</label><input id="pub-date" class="input" type="date" wire:model="saisie.prevue_le"></div>
                <div class="field"><label for="pub-heure">Heure</label><input id="pub-heure" class="input" type="time" wire:model="saisie.prevue_a"></div>
            </div>

            <div class="field"><label>Visuel</label>
                @if ($apercuPhoto || $visuelActuel)
                    <div class="preview">
                        <span class="pv"><img src="{{ $apercuPhoto ?? $visuelActuel }}" alt=""></span>
                        <span class="pb">
                            <span class="pn">{{ $apercuPhoto ? ($photo?->getClientOriginalName() ?? 'Photo') : 'Photo enregistrée' }}</span>
                            <span class="pm">{{ $apercuPhoto ? 'À enregistrer avec la publication · prime sur le lien' : 'Prime sur le lien' }}</span>
                            <span class="pacts">
                                <label>Remplacer<input type="file" accept="image/*" wire:model="photo"></label>
                                <button type="button" class="rm" wire:click="retirerLaPhoto">Retirer</button>
                            </span>
                        </span>
                    </div>
                @else
                    <div class="drop">
                        <span class="dic"><x-espace-client-app.icone nom="photo" :taille="22" /></span>
                        <span class="dt">Ajouter une photo</span>
                        <span class="dm">JPG, PNG ou WebP · jusqu'à 8 Mo</span>
                        <span class="dacts">
                            <label class="btn primary">Appareil photo<input type="file" accept="image/*" capture="environment" wire:model="photo" aria-label="Prendre une photo"></label>
                            <label class="btn ghost">Galerie<input type="file" accept="image/*" wire:model="photo" aria-label="Choisir dans la galerie"></label>
                        </span>
                    </div>
                @endif
                <div wire:loading wire:target="photo" class="help" style="margin-top:8px">Envoi de la photo…</div>
                @error('photo') <div class="alerte mauvais" style="margin-top:8px">{{ $message }}</div> @enderror
                <p class="help" style="margin-top:8px">ou un lien vers le visuel (Drive, WeTransfer…)</p>
                <input class="input" style="margin-top:6px" type="url" wire:model="saisie.visuel_lien" placeholder="https://…" aria-label="Lien du visuel">
            </div>

            <div class="field"><label for="pub-fr">Texte (français)</label><textarea id="pub-fr" class="input" wire:model="saisie.texte_fr" placeholder="La légende telle que le client la lira…"></textarea></div>
            <div class="field"><label for="pub-ar">Texte (arabe)</label><textarea id="pub-ar" class="input" dir="rtl" lang="ar" wire:model="saisie.texte_ar" placeholder="النص بالعربية…"></textarea></div>
            <div class="field"><label for="pub-notes">Notes internes <small>· invisibles pour le client</small></label><textarea id="pub-notes" class="input" style="min-height:60px" wire:model="saisie.notes" placeholder="Pour l'équipe seulement"></textarea></div>

            <div class="stick">
                <div class="actrow">
                    <button type="submit" class="btn ghost souple" wire:loading.attr="disabled">Brouillon</button>
                    <button type="button" class="btn primary" wire:click="proposer" wire:loading.attr="disabled">{{ $publication && $publication->statut === \App\Enums\EspaceClient\StatutPublication::Corrections ? 'Reproposer au client' : 'Proposer au client' }}</button>
                </div>
            </div>
        </form>
    </section>
</x-studio.coquille>