netgescon-day0/resources/views/filament/pages/condomini/gestione-assemblea.blade.php

487 lines
38 KiB
PHP

<x-filament-panels::page>
<div class="space-y-6">
<!-- Top Navigation & Header -->
<div class="rounded-xl border bg-white p-5 shadow-sm">
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center space-x-3">
<a href="{{ \App\Filament\Pages\Condomini\AssembleeHub::getUrl() }}" class="inline-flex items-center justify-center p-2 text-slate-500 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded-lg transition-all active:scale-95">
<i class="fas fa-arrow-left"></i>
</a>
<div>
<div class="flex items-center space-x-2">
<span class="text-xs text-blue-600 font-extrabold uppercase tracking-wider">GESTIONE ASSEMBLEA</span>
<span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span>
<span class="text-xs text-slate-500 capitalize">Tipo: {{ $this->assemblea->tipo }}</span>
<span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span>
<span class="text-xs font-bold px-2 py-0.5 rounded {{ $this->assemblea->stato === 'convocata' ? 'bg-amber-100 text-amber-700 border border-amber-200' : 'bg-emerald-100 text-emerald-700 border border-emerald-200' }}">
{{ $this->assemblea->stato ?: 'Bozza' }}
</span>
</div>
<div class="text-lg font-bold text-slate-900 mt-1">
{{ $this->stabileAttivo->denominazione }} &mdash; 2ª Convocazione il {{ $this->assemblea->data_seconda_convocazione ? $this->assemblea->data_seconda_convocazione->format('d/m/Y \alle H:i') : 'n/d' }}
</div>
</div>
</div>
<div class="text-xxs text-slate-400 font-semibold bg-slate-50 border rounded-lg p-2 max-w-xs text-right">
<p><i class="fas fa-map-marker-alt mr-1"></i> Luogo: {{ $this->assemblea->luogo ?: 'Presso uffici' }}</p>
@if($this->assemblea->note)
<p class="mt-0.5 truncate" title="{{ $this->assemblea->note }}"><i class="fas fa-info-circle mr-1"></i> Note: {{ $this->assemblea->note }}</p>
@endif
</div>
</div>
</div>
<!-- Main Card -->
<div class="rounded-xl border bg-white shadow-sm overflow-hidden space-y-4">
<!-- Tabs Menu -->
<div class="px-4 border-b border-slate-200 bg-slate-50/50">
<div class="flex space-x-4">
<button wire:click="changeTab('odg')" class="py-3 text-xs font-bold border-b-2 transition-all {{ $this->activeSubTab === 'odg' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800' }}">
<i class="fas fa-list-ol mr-1"></i> Ordine del Giorno
</button>
<button wire:click="changeTab('convocazioni')" class="py-3 text-xs font-bold border-b-2 transition-all {{ $this->activeSubTab === 'convocazioni' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800' }}">
<i class="fas fa-paper-plane mr-1"></i> Convocazioni e WhatsApp
</button>
<button wire:click="changeTab('presenze')" class="py-3 text-xs font-bold border-b-2 transition-all {{ $this->activeSubTab === 'presenze' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800' }}">
<i class="fas fa-user-check mr-1"></i> Presenze & Check-in
</button>
<button wire:click="changeTab('voto_live')" class="py-3 text-xs font-bold border-b-2 transition-all {{ $this->activeSubTab === 'voto_live' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800' }}">
<i class="fas fa-poll mr-1"></i> Voto Live Mobile
</button>
</div>
</div>
<!-- Tab Contents -->
<div class="p-5">
<!-- Tab 1: Ordine del Giorno -->
@if($this->activeSubTab === 'odg')
<div class="space-y-6">
<!-- Form Aggiunta -->
<form wire:submit.prevent="aggiungiPuntoOdG" class="bg-slate-50 border rounded-xl p-4 space-y-4">
<h4 class="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center"><i class="fas fa-plus-circle mr-1.5 text-blue-500 text-sm"></i> Aggiungi Punto all'Ordine del Giorno</h4>
<div class="grid gap-4 md:grid-cols-12">
<div class="md:col-span-2">
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">N. Punto</label>
<input type="number" wire:model="odgNumeroPunto" class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="md:col-span-6">
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">Titolo/Oggetto</label>
<input type="text" wire:model="odgTitolo" placeholder="Es. Approvazione preventivo facciata" class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="md:col-span-4">
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">Riferimento di Legge</label>
<input type="text" wire:model="odgArticoloLegge" placeholder="Es. Art. 1136 C.C." class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div class="grid gap-4 md:grid-cols-2">
<div>
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">Tabella Millesimale di Riferimento</label>
<select wire:model="odgTabellaMillesimaleId" class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500">
<option value="">Seleziona tabella...</option>
@foreach($this->tabelleMillesimali as $tab)
<option value="{{ $tab->id }}">{{ $tab->denominazione }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">Descrizione Dettagliata</label>
<textarea wire:model="odgDescrizione" rows="2" placeholder="Descrizione del punto da discutere..." class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
</div>
<div class="flex justify-end pt-2">
<button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-xs font-bold transition-all active:scale-95">
Inserisci Punto
</button>
</div>
</form>
<!-- Elenco Punti -->
<div class="space-y-3">
<h4 class="text-xs font-bold uppercase tracking-wider text-slate-700">Punti discussione impostati</h4>
@forelse($this->ordineGiornoList as $punto)
<div class="flex items-start justify-between border rounded-xl p-4 bg-white hover:bg-slate-50/50 gap-4">
<div class="flex items-start space-x-3">
<span class="w-6 h-6 bg-slate-800 text-white rounded-full flex items-center justify-center text-xs font-bold mt-0.5">{{ $punto->numero_punto }}</span>
<div>
<div class="text-sm font-bold text-slate-900">{{ $punto->titolo }}</div>
<div class="text-xs text-slate-500 mt-1">{{ $punto->descrizione }}</div>
<div class="mt-3 flex flex-wrap gap-2 text-[10px]">
@if($punto->articolo_legge)
<span class="px-2 py-0.5 rounded bg-blue-50 text-blue-700 border border-blue-100 font-semibold"><i class="fas fa-gavel mr-1"></i>{{ $punto->articolo_legge }}</span>
@endif
@if($punto->tabellaMillesimale)
<span class="px-2 py-0.5 rounded bg-slate-100 text-slate-700 border border-slate-200"><i class="fas fa-calculator mr-1"></i>Tabella: {{ $punto->tabellaMillesimale->denominazione }}</span>
@endif
</div>
</div>
</div>
<button wire:click="eliminaPuntoOdG({{ $punto->id }})" class="text-red-500 hover:text-red-700 p-1.5 transition"><i class="fas fa-trash-alt"></i></button>
</div>
@empty
<div class="text-xs text-slate-400 italic text-center py-10 border border-dashed rounded-xl">
Nessun punto inserito all'ordine del giorno per questa assemblea.
</div>
@endforelse
</div>
</div>
@endif
<!-- Tab 2: Convocazioni -->
@if($this->activeSubTab === 'convocazioni')
<div class="space-y-5">
<div class="flex justify-between items-center bg-slate-50 p-4 border rounded-xl">
<div class="text-xs text-slate-600 max-w-lg">
Genera i token digitali per tutti i condomini e gli inquilini del condominio per permettere l'invio delle convocazioni e il voto su cellulare.
</div>
<div class="flex space-x-2">
<button wire:click="generaConvocazioniMassive" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-xs font-bold transition-all active:scale-95 shadow-md shadow-blue-500/10">
Genera Tutti i Token
</button>
<button onclick="confirm('Sei sicuro di voler svuotare le convocazioni?') && @this.cancellaTutteConvocazioni()" class="px-3 py-2 bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 rounded-lg text-xs font-bold transition-all">
Svuota
</button>
</div>
</div>
<div class="overflow-x-auto border rounded-xl">
<table class="w-full text-left border-collapse text-xs bg-white">
<thead>
<tr class="bg-slate-100 text-slate-700 font-bold uppercase border-b text-[10px] tracking-wider">
<th class="p-3">Soggetto</th>
<th class="p-3">Interno</th>
<th class="p-3">Ruolo</th>
<th class="p-3">Canale</th>
<th class="p-3 text-center">Firma Ricezione</th>
<th class="p-3 text-center">Azioni</th>
</tr>
</thead>
<tbody class="divide-y">
@forelse($this->convocazioniList as $conv)
@php
$waText = "Gentile Condomino, Le comunichiamo la convocazione dell'assemblea dello stabile " . ($this->stabileAttivo->denominazione) . ". Può prendere visione dei dettagli e dell'ordine del giorno, nonchè firmare per ricevuta e votare in tempo reale dal suo telefono usando questo link protetto: " . url('/public/assemblea/' . $conv->token_accesso);
$waUrl = "https://wa.me/" . preg_replace('/[^0-9]/', '', $conv->soggetto->telefono ?? '') . "?text=" . urlencode($waText);
@endphp
<tr class="hover:bg-slate-50/50">
<td class="p-3 font-semibold text-slate-900">{{ $conv->soggetto->nome_completo }}</td>
<td class="p-3">{{ $conv->unitaImmobiliare->interno ?: '' }}</td>
<td class="p-3">
<span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $conv->ruolo === 'I' ? 'bg-sky-50 text-sky-700 border border-sky-100' : 'bg-emerald-50 text-emerald-700 border border-emerald-100' }}">
{{ $conv->ruolo === 'I' ? 'Inquilino' : 'Proprietario' }}
</span>
</td>
<td class="p-3 uppercase text-xxs text-slate-500 font-semibold">{{ $conv->consegnato_canale ?: 'email' }}</td>
<td class="p-3 text-center">
@if($conv->ricezione_confermata_at)
<span class="inline-flex items-center px-2 py-0.5 rounded bg-emerald-50 text-emerald-700 border border-emerald-200 text-xxs font-medium" title="Conferma ricevuta">
<i class="fas fa-check-circle mr-1"></i> Firmata ({{ $conv->ricezione_confermata_at->format('d/m H:i') }})
</span>
@else
<span class="inline-flex items-center px-2 py-0.5 rounded bg-slate-50 text-slate-500 border border-slate-200 text-xxs">
Non firmata
</span>
@endif
</td>
<td class="p-3 flex items-center justify-center space-x-1.5">
@if($conv->soggetto->telefono)
<a href="{{ $waUrl }}" target="_blank" class="p-1.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-lg hover:bg-emerald-100 transition" title="Invia Convocazione WhatsApp">
<i class="fab fa-whatsapp text-sm"></i>
</a>
@endif
<button wire:click="inviaConvocazioneSingola({{ $conv->id }})" class="p-1.5 bg-blue-50 text-blue-700 border border-blue-200 rounded-lg hover:bg-blue-100 transition" title="Invia Convocazione Email/Log">
<i class="fas fa-paper-plane text-xs"></i>
</button>
<button onclick="showQrCodeModal('{{ url('/public/assemblea/' . $conv->token_accesso) }}', '{{ addslashes($conv->soggetto->nome_completo) }}')" class="p-1.5 bg-indigo-50 text-indigo-700 border border-indigo-200 rounded-lg hover:bg-indigo-100 transition" title="Mostra QR Code per Smartphone">
<i class="fas fa-qrcode text-xs"></i>
</button>
</td>
</tr>
@empty
<tr>
<td colspan="6" class="p-8 text-center text-slate-400 italic">
Nessuna convocazione registrata per questa assemblea. Clicca su "Genera Tutti i Token" per iniziare.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
@endif
<!-- Tab 3: Presenze Check-in -->
@if($this->activeSubTab === 'presenze')
<div class="space-y-6">
<!-- Form Check-in -->
<form wire:submit.prevent="registraPresenzaCheckin" class="bg-slate-50 border rounded-xl p-4 space-y-4">
<h4 class="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center"><i class="fas fa-user-plus mr-1.5 text-blue-500 text-sm"></i> Registra Ingresso / Check-in Partecipante</h4>
<div class="grid gap-4 md:grid-cols-3">
<div>
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">Partecipante/Soggetto</label>
<select wire:model="presenzaSoggettoId" class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500">
<option value="">Seleziona condomino...</option>
@foreach($this->disponibiliPresenzaSoggetti as $s)
<option value="{{ $s->id }}">{{ $s->nome_completo }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">Unità Collegata</label>
<select wire:model="presenzaUnitaId" class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500">
<option value="">Seleziona unità...</option>
@foreach($this->disponibiliPresenzaUnita as $u)
<option value="{{ $u->id }}">Pal. {{ $u->palazzina ?: 'A' }} - Int. {{ $u->interno }} (Scala {{ $u->scala ?: '-' }})</option>
@endforeach
</select>
</div>
<div>
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">Tipo Partecipazione</label>
<select wire:model="presenzaTipo" class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500">
<option value="personale">Di persona (Fisica)</option>
<option value="delega">Per delega a...</option>
</select>
</div>
</div>
@if($this->presenzaTipo === 'delega')
<div class="grid gap-4 md:grid-cols-2">
<div>
<label class="block text-xxs font-bold text-slate-500 uppercase mb-1">Soggetto Delegato (Chi vota in sua vece)</label>
<select wire:model="presenzaDelegatoId" class="w-full text-xs rounded-lg border-slate-300 shadow-xs focus:ring-blue-500 focus:border-blue-500">
<option value="">Seleziona delegato...</option>
@foreach($this->disponibiliPresenzaSoggetti as $s)
<option value="{{ $s->id }}">{{ $s->nome_completo }}</option>
@endforeach
</select>
</div>
</div>
@endif
<div class="flex justify-end">
<button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-xs font-bold transition-all active:scale-95">
Registra Ingresso
</button>
</div>
</form>
<!-- Registro Presenze -->
<div>
<h4 class="text-xs font-bold uppercase tracking-wider text-slate-700 mb-3">Registro Ingressi / Partecipanti presenti</h4>
<div class="overflow-x-auto border rounded-xl">
<table class="w-full text-left border-collapse text-xs bg-white">
<thead>
<tr class="bg-slate-100 text-slate-700 font-bold border-b text-[10px] uppercase tracking-wider">
<th class="p-3">Soggetto</th>
<th class="p-3">Unità</th>
<th class="p-3">Partecipazione</th>
<th class="p-3">Ingresso</th>
<th class="p-3">Uscita</th>
<th class="p-3 text-center">Azioni</th>
</tr>
</thead>
<tbody class="divide-y">
@forelse($this->presenzeList as $pres)
<tr class="hover:bg-slate-50/50">
<td class="p-3 font-semibold text-slate-900">{{ $pres->soggetto->nome_completo }}</td>
<td class="p-3">Pal. {{ $pres->unitaImmobiliare->palazzina ?: 'A' }} - Int. {{ $pres->unitaImmobiliare->interno }}</td>
<td class="p-3 capitalize">
@if($pres->tipo_partecipazione === 'delega')
<span class="text-indigo-600 font-semibold"><i class="fas fa-handshake mr-1 flex-shrink-0"></i>Delega a: {{ $pres->delegatoSoggetto->nome_completo ?? '' }}</span>
@else
<span class="text-emerald-600 font-semibold"><i class="fas fa-user mr-1"></i>Fisica</span>
@endif
</td>
<td class="p-3">{{ $pres->ora_ingresso ? $pres->ora_ingresso->format('H:i:s') : '' }}</td>
<td class="p-3">
@if($pres->ora_uscita)
<span class="text-red-600">{{ $pres->ora_uscita->format('H:i:s') }}</span>
@else
<span class="text-emerald-600 font-bold">Presente</span>
@endif
</td>
<td class="p-3 text-center">
@if(!$pres->ora_uscita)
<button wire:click="registraCheckout({{ $pres->id }})" class="px-2.5 py-1 bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 rounded-lg text-xxs font-bold transition">
Uscita (Check-out)
</button>
@else
<span class="text-slate-400 italic text-xxs">Uscito</span>
@endif
</td>
</tr>
@empty
<tr>
<td colspan="6" class="p-8 text-center text-slate-400 italic">
Nessun partecipante registrato all'ingresso.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
@endif
<!-- Tab 4: Scrutinio / Voto Live Mobile -->
@if($this->activeSubTab === 'voto_live')
<div class="space-y-6" wire:poll.3s>
@php $stats = $this->votiLiveStats; @endphp
@if(empty($stats))
<div class="rounded-xl border border-dashed p-10 text-center text-slate-500 text-xs">
Nessuna votazione attiva al momento. Seleziona un punto dall'elenco sottostante e clicca su "Apri Votazione Live" per ricevere i voti in tempo reale dai telefoni dei condomini.
</div>
@else
<div class="bg-slate-900 text-white rounded-2xl p-6 space-y-6 shadow-xl border border-indigo-500/20">
<div class="flex items-center justify-between border-b border-slate-800 pb-3">
<div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">
<span class="w-1.5 h-1.5 rounded-full bg-indigo-400 mr-1.5 animate-ping"></span> VOTAZIONE IN CORSO
</span>
<h3 class="text-md font-bold mt-1 text-slate-100">{{ $stats['odg_punto']->numero_punto }}. {{ $stats['odg_punto']->titolo }}</h3>
</div>
<button wire:click="chiudiVotazioneCorrente" class="px-3 py-1.5 bg-red-600 hover:bg-red-500 text-white rounded-lg text-xs font-bold transition-all active:scale-95">
Chiudi Votazione
</button>
</div>
<div class="grid gap-4 md:grid-cols-2">
<div class="p-3 bg-slate-800/50 rounded-xl border border-slate-800 flex items-center justify-between">
<span class="text-xs text-slate-400">Teste votanti:</span>
<span class="text-md font-bold text-white">{{ $stats['totale_teste'] }} condomini</span>
</div>
<div class="p-3 bg-slate-800/50 rounded-xl border border-slate-800 flex items-center justify-between">
<span class="text-xs text-slate-400">Millesimi votanti:</span>
<span class="text-md font-bold text-blue-400">{{ number_format($stats['totale_millesimi'], 3, ',', '.') }}‰</span>
</div>
</div>
<div class="space-y-4 pt-2">
@php
$totMillesimi = max(1, $stats['totale_millesimi']);
$favPerc = ($stats['favorevoli_millesimi'] / $totMillesimi) * 100;
$conPerc = ($stats['contrari_millesimi'] / $totMillesimi) * 100;
$astPerc = ($stats['astenuti_millesimi'] / $totMillesimi) * 100;
@endphp
<div class="space-y-1.5">
<div class="flex justify-between text-xs font-semibold">
<span class="text-emerald-400"><i class="fas fa-thumbs-up mr-1.5"></i> Favorevoli ({{ $stats['favorevoli_teste'] }} teste)</span>
<span class="text-emerald-400">{{ number_format($stats['favorevoli_millesimi'], 3, ',', '.') }}‰ ({{ number_format($favPerc, 1) }}%)</span>
</div>
<div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
<div class="bg-emerald-500 h-full rounded-full transition-all duration-500" style="width: {{ $favPerc }}%"></div>
</div>
</div>
<div class="space-y-1.5">
<div class="flex justify-between text-xs font-semibold">
<span class="text-red-400"><i class="fas fa-thumbs-down mr-1.5"></i> Contrari ({{ $stats['contrari_teste'] }} teste)</span>
<span class="text-red-400">{{ number_format($stats['contrari_millesimi'], 3, ',', '.') }}‰ ({{ number_format($conPerc, 1) }}%)</span>
</div>
<div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
<div class="bg-red-500 h-full rounded-full transition-all duration-500" style="width: {{ $conPerc }}%"></div>
</div>
</div>
<div class="space-y-1.5">
<div class="flex justify-between text-xs font-semibold">
<span class="text-slate-400"><i class="fas fa-ban mr-1.5"></i> Astenuti ({{ $stats['astenuti_teste'] }} teste)</span>
<span class="text-slate-400">{{ number_format($stats['astenuti_millesimi'], 3, ',', '.') }}‰ ({{ number_format($astPerc, 1) }}%)</span>
</div>
<div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
<div class="bg-slate-500 h-full rounded-full transition-all duration-500" style="width: {{ $astPerc }}%"></div>
</div>
</div>
</div>
<div class="pt-4 border-t border-slate-800 space-y-2">
<h4 class="text-xxs font-bold tracking-wider text-slate-400 uppercase">Dettaglio voti individuali</h4>
<div class="grid gap-2 grid-cols-1 md:grid-cols-2 max-h-[250px] overflow-y-auto pr-1">
@foreach($stats['dettaglio_voti'] as $v)
<div class="p-2.5 rounded-lg bg-slate-800/40 border border-slate-800 text-[11px] flex justify-between items-center">
<span>Int. {{ $v->unitaImmobiliare->interno }} - {{ $v->soggetto->nome_completo }} ({{ number_format($v->millesimi_voto, 3, ',', '.') }}‰)</span>
<span class="font-bold uppercase px-1.5 py-0.5 rounded text-[9px] {{ $v->voto === 'favorevole' ? 'bg-emerald-500/20 text-emerald-300' : ($v->voto === 'contrario' ? 'bg-red-500/20 text-red-300' : 'bg-slate-500/20 text-slate-300') }}">
{{ $v->voto }}
</span>
</div>
@endforeach
</div>
</div>
</div>
@endif
<div class="space-y-3">
<h4 class="text-xs font-bold uppercase tracking-wider text-slate-700">Seleziona punto OdG da votare</h4>
@foreach($this->ordineGiornoList as $punto)
<div class="flex items-center justify-between border rounded-xl p-3 bg-white hover:bg-slate-50/50">
<div class="flex items-center space-x-2">
<span class="w-5 h-5 bg-slate-100 border text-slate-700 rounded-full flex items-center justify-center text-xxs font-bold">{{ $punto->numero_punto }}</span>
<span class="text-xs font-semibold text-slate-900">{{ $punto->titolo }}</span>
</div>
@if(isset($stats['odg_id']) && $stats['odg_id'] === $punto->id)
<span class="px-2.5 py-1 bg-indigo-50 text-indigo-700 border border-indigo-200 rounded-lg text-xxs font-bold">Voto Attivo</span>
@else
<button wire:click="apriVotazionePunto({{ $punto->id }})" class="px-2.5 py-1 bg-blue-600 text-white rounded-lg text-xxs font-bold hover:bg-blue-500 transition shadow-xs">
Apri Votazione Live
</button>
@endif
</div>
@endforeach
</div>
</div>
@endif
</div>
</div>
</div>
<!-- Modal QR Code -->
<div id="modal-qr-code" class="fixed inset-0 z-50 overflow-y-auto hidden bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
<div class="bg-white rounded-xl max-w-sm w-full border shadow-2xl overflow-hidden p-6 flex flex-col items-center space-y-4">
<div class="w-full flex justify-between items-center border-b pb-2">
<h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider">QR Code Voto Mobile</h3>
<button onclick="document.getElementById('modal-qr-code').classList.add('hidden')" class="text-slate-400 hover:text-slate-600"><i class="fas fa-times"></i></button>
</div>
<p id="qr-modal-soggetto" class="text-xs font-bold text-slate-800 text-center"></p>
<p class="text-[11px] text-slate-500 text-center">Fai scansionare questo codice con la fotocamera del telefono per effettuare il check-in e votare direttamente.</p>
<div class="p-3 bg-slate-50 rounded-xl border border-slate-200">
<img id="qr-modal-img" src="" alt="QR Code" class="w-48 h-48">
</div>
<a id="qr-modal-link" href="" target="_blank" class="text-xs font-bold text-blue-600 hover:underline">Apri Link Voto</a>
</div>
</div>
<script>
function showQrCodeModal(url, soggettoNome) {
const encodedUrl = encodeURIComponent(url);
document.getElementById('qr-modal-img').src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodedUrl}`;
document.getElementById('qr-modal-soggetto').textContent = soggettoNome;
document.getElementById('qr-modal-link').href = url;
document.getElementById('modal-qr-code').classList.remove('hidden');
}
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
document.getElementById('modal-qr-code').classList.add('hidden');
}
});
document.addEventListener('notify', (e) => {
if (typeof Filament !== 'undefined' && Filament.notify) {
Filament.notify(e.detail.status, e.detail.message);
} else {
alert(e.detail.message);
}
});
</script>
</x-filament-panels::page>