termanager2/resources/views/livewire/assegnazioni/assegna.blade.php

<div>
    <div class="mb-6">
        <a href="{{ $ritorno ?? route('territori.index') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-indigo-600 transition-colors mb-1">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            {{ $ritorno ? 'Torna indietro' : 'Torna ai territori' }}
        </a>
        <h1 class="text-2xl font-bold text-gray-900">Assegnazioni</h1>
        <p class="text-sm text-gray-500 mt-1">Questa funzione consente un'assegnazione arbitraria, indipendente dalle tre schede della Home.</p>
    </div>

    {{-- Invio del link (Assegna::apriInvio): blocca la pagina finché non si
         risponde "inviato / non ancora". Se si chiude la scheda prima,
         l'assegnazione resta segnalata con "link ancora da inviare". --}}
    @if($invio)
        @php
            $link = $invio->shortPdfUrl();
            $messaggio = $invio->messaggioLink($link);
        @endphp
        <div class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-gray-900/50 p-4 sm:items-center"
             role="dialog" aria-modal="true" aria-labelledby="invio-titolo" wire:key="invio-{{ $invio->id }}">
            <section class="tm-da-inviare tm-da-inviare-finestra">
                <h2 id="invio-titolo" class="tm-da-inviare-titolo">
                    Territorio N° {{ $invio->territorio?->numero }} assegnato a {{ $invio->proclamatore?->nome_completo }}
                </h2>

                @if($link)
                    <p class="text-sm text-gray-700 mb-2">Come vuoi mandare il link della piantina? Il destinatario lo scegli tu, tra i tuoi contatti.</p>

                    <div class="tm-da-inviare-link">
                        <code id="invio-link" x-data x-on:click="window.getSelection().selectAllChildren($el)">{{ $link }}</code>
                    </div>

                    {{-- Il messaggio sta in data-messaggio: dentro <x-btn> le direttive
                         Blade (@js) non si compilano, quindi i pulsanti lo leggono da qui. --}}
                    <div class="tm-da-inviare-azioni" x-data="{ copiato: false, condivisibile: !! navigator.share }"
                         data-messaggio="{{ $messaggio }}" data-titolo="Territorio N° {{ $invio->territorio?->numero }}">
                        <x-btn :variante="$canaleUsato === 'copia' ? 'primary' : 'secondary'"
                               x-on:click="navigator.clipboard?.writeText(document.getElementById('invio-link').textContent.trim()).then(() => { copiato = true; setTimeout(() => copiato = false, 2000) }).catch(() => {}); $wire.canale('copia')">
                            <span x-show="! copiato">Copia link</span>
                            <span x-show="copiato" x-cloak>Copiato</span>
                        </x-btn>

                        {{-- Condividi: il menu di condivisione del telefono (WhatsApp,
                             Telegram, SMS, posta…), da cui si sceglie app e contatto. Solo
                             dove il browser lo offre. Il canale si annota a condivisione
                             fatta, non se la si annulla. --}}
                        <x-btn :variante="$canaleUsato === 'condividi' ? 'primary' : 'secondary'" x-show="condivisibile" x-cloak
                               x-on:click="const d = $el.closest('[data-messaggio]').dataset; navigator.share({ title: d.titolo, text: d.messaggio }).then(() => $wire.canale('condividi')).catch(() => {})">
                            Condividi…
                        </x-btn>
                    </div>

                    @if($canaleUsato)
                        <p class="mt-2 text-sm text-gray-700">Canale scelto: {{ \App\Models\Assegnazione::CANALI_LINK[$canaleUsato] }}.</p>
                    @endif
                    @if($erroreInvio)
                        <p class="mt-2 text-sm text-red-600" role="alert">{{ $erroreInvio }}</p>
                    @endif

                    <div class="tm-da-inviare-scelta">
                        <p>Hai inviato il link?</p>
                        <div>
                            <x-btn variante="primary" wire:click="concludiInvio(true)" :disabled="$canaleUsato === null"
                                   :title="$canaleUsato === null ? 'Scegli prima come mandare il link' : null">Sì, inviato</x-btn>
                            <x-btn variante="secondary" wire:click="concludiInvio(false)">No, non ancora</x-btn>
                        </div>
                    </div>
                @else
                    <p class="text-sm text-gray-600">
                        Il territorio non ha un PDF: non c'è un link da mandare. Caricalo dalla scheda del territorio.
                    </p>
                    <div class="tm-da-inviare-scelta">
                        <div>
                            <x-btn variante="secondary" wire:click="concludiInvio(false)">Ho capito</x-btn>
                        </div>
                    </div>
                @endif
            </section>
        </div>
    @endif

    <div x-data="{ formOpen: true }">

        {{-- Toggle form --}}
        <x-btn variante="primary" class="mb-4"
               x-on:click="formOpen = !formOpen"
               x-bind:aria-expanded="formOpen ? 'true' : 'false'">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path x-show="formOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
                <path x-show="!formOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            <span x-text="formOpen ? 'Nascondi form' : 'Nuova assegnazione'"></span>
        </x-btn>

        {{-- Form --}}
        <div x-show="formOpen" x-cloak class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-6 max-w-3xl">
            <form wire:submit="save" class="space-y-4">
                {{-- L'anteprima segue la scelta nel browser (evento "scelta" di
                     <x-scelta>, miniatura nelle opzioni): scegliere un
                     territorio non fa più una richiesta al server. --}}
                <div x-data="{ scelto: @js((bool) $territorio_id), anteprima: @js($anteprimaIniziale) }"
                     x-on:scelta="scelto = !! $event.detail.valore; anteprima = $event.detail.opzione?.miniatura ?? null">
                    <label for="territorio_id" class="block text-sm font-medium text-gray-700 mb-1">Territorio *</label>
                    <x-scelta id="territorio_id" wire:model="territorio_id"
                              :opzioni="$opzioniTerritori"
                              segnaposto="Numero, zona o tipologia" :vuoto="null"
                              :disabilitato="(bool) $preselectedTerritorioId" />
                    @error('territorio_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror

                    <div class="mt-3" x-show="scelto" x-cloak>
                        <p class="text-xs text-gray-500 mb-2">Anteprima territorio</p>
                        <div class="overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm" x-show="anteprima">
                            <img x-bind:src="anteprima" alt="Miniatura del territorio scelto" loading="lazy"
                                 class="block w-full h-auto max-h-[70vh] object-contain bg-white">
                        </div>
                        <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-6 text-sm text-gray-500" x-show="! anteprima">
                            Nessuna miniatura disponibile per questo territorio.
                        </div>
                    </div>
                </div>

                <div>
                    <label for="proclamatore_id" class="block text-sm font-medium text-gray-700 mb-1">Proclamatore *</label>
                    <x-scelta id="proclamatore_id" wire:model="proclamatore_id"
                              :opzioni="$opzioniProclamatori"
                              segnaposto="Cognome o nome" :vuoto="null" />
                    @error('proclamatore_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="assigned_at" class="block text-sm font-medium text-gray-700">Data Assegnazione *</label>
                    <input wire:model="assigned_at" type="date" id="assigned_at" max="{{ now()->format('Y-m-d') }}" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('assigned_at') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="flex flex-col-reverse gap-3 pt-4 sm:flex-row sm:items-center">
                    <x-btn variante="primary" type="submit">Assegna</x-btn>
                    @if($ritorno)
                        <x-btn variante="secondary" :href="$ritorno">Annulla</x-btn>
                    @else
                        <x-btn variante="secondary" x-on:click="formOpen = false">Annulla</x-btn>
                    @endif
                </div>
            </form>
        </div>

    </div>

    {{-- Elenco dei territori assegnati: componente a sé, caricato subito
         dopo la pagina (ElencoAssegnati, #[Lazy]). Le azioni del form non
         lo ridisegnano. --}}
    <livewire:assegnazioni.elenco-assegnati />
</div>