netgescon-master/resources/views/admin/stabili/tabs/documenti-collegati.blade.php

658 lines
32 KiB
PHP

<!-- Tab Documenti Collegati con sistema protocolli -->
<div class="space-y-6">
<!-- Header con controlli -->
<div class="flex justify-between items-center">
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
<i class="fas fa-file-contract mr-2 text-purple-600"></i>
Documenti Collegati
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Gestione contratti, assicurazioni e documenti con sistema di protocollo automatico
</p>
</div>
<div class="space-x-2">
<button type="button"
class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors"
onclick="nuovoDocumento()">
<i class="fas fa-plus mr-2"></i>
Nuovo Documento
</button>
<button type="button"
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
onclick="uploadDocumento()">
<i class="fas fa-upload mr-2"></i>
Carica File
</button>
</div>
</div>
<!-- Filtri e ricerca -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<i class="fas fa-filter mr-2"></i>
Categoria
</label>
<select id="filtro-categoria" class="netgescon-select" onchange="filtraDocumenti()">
<option value="">Tutte le categorie</option>
<option value="contratto">Contratti</option>
<option value="assicurazione">Assicurazioni</option>
<option value="certificato">Certificati</option>
<option value="preventivo">Preventivi</option>
<option value="fattura">Fatture</option>
<option value="verbale">Verbali</option>
<option value="altro">Altri</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<i class="fas fa-calendar mr-2"></i>
Anno
</label>
<select id="filtro-anno" class="netgescon-select" onchange="filtraDocumenti()">
<option value="">Tutti gli anni</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<i class="fas fa-search mr-2"></i>
Ricerca
</label>
<input type="text"
id="ricerca-documenti"
class="netgescon-input"
placeholder="Cerca per titolo, protocollo o fornitore..."
onkeyup="filtraDocumenti()">
</div>
<div class="flex items-end">
<button type="button"
class="w-full bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors"
onclick="resetFiltri()">
<i class="fas fa-eraser mr-2"></i>
Reset Filtri
</button>
</div>
</div>
</div>
<!-- Statistiche rapide -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<div class="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg mr-3">
<i class="fas fa-file-contract text-blue-600 dark:text-blue-400"></i>
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">Contratti Attivi</p>
<p id="stat-contratti" class="text-lg font-bold text-gray-900 dark:text-gray-100">12</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<div class="p-2 bg-green-100 dark:bg-green-900 rounded-lg mr-3">
<i class="fas fa-shield-alt text-green-600 dark:text-green-400"></i>
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">Assicurazioni</p>
<p id="stat-assicurazioni" class="text-lg font-bold text-gray-900 dark:text-gray-100">8</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<div class="p-2 bg-yellow-100 dark:bg-yellow-900 rounded-lg mr-3">
<i class="fas fa-clock text-yellow-600 dark:text-yellow-400"></i>
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">In Scadenza</p>
<p id="stat-scadenze" class="text-lg font-bold text-gray-900 dark:text-gray-100">3</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<div class="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg mr-3">
<i class="fas fa-file-alt text-purple-600 dark:text-purple-400"></i>
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">Totale Documenti</p>
<p id="stat-totale" class="text-lg font-bold text-gray-900 dark:text-gray-100">45</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<div class="p-2 bg-red-100 dark:bg-red-900 rounded-lg mr-3">
<i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400"></i>
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">Documenti Scaduti</p>
<p id="stat-scaduti" class="text-lg font-bold text-gray-900 dark:text-gray-100">2</p>
</div>
</div>
</div>
</div>
<!-- Elenco documenti -->
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex justify-between items-center">
<h5 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
<i class="fas fa-list mr-2"></i>
Elenco Documenti
</h5>
<div class="flex items-center space-x-2">
<span class="text-sm text-gray-500 dark:text-gray-400">Vista:</span>
<select id="vista-tipo" class="text-sm border-0 bg-transparent" onchange="cambiaVista()">
<option value="lista">Lista</option>
<option value="griglia">Griglia</option>
<option value="timeline">Timeline</option>
</select>
</div>
</div>
</div>
<!-- Vista Lista -->
<div id="vista-lista" class="divide-y divide-gray-200 dark:divide-gray-700">
<!-- Template documento -->
<div class="documento-item p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
data-categoria="contratto" data-anno="2024">
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-center mb-2">
<span class="documento-protocollo bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded text-xs font-mono mr-3">
CONTR-2024-001
</span>
<span class="documento-categoria bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded-full text-xs">
Contratto
</span>
<span class="documento-stato bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded-full text-xs ml-2">
<i class="fas fa-check-circle mr-1"></i>
Attivo
</span>
</div>
<h6 class="documento-titolo text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">
Contratto Manutenzione Ascensori 2024
</h6>
<p class="documento-descrizione text-gray-600 dark:text-gray-400 text-sm mb-2">
Contratto annuale per manutenzione impianti ascensore con Acme Elevators Srl
</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
<span>
<i class="fas fa-building mr-1"></i>
Fornitore: Acme Elevators Srl
</span>
<span>
<i class="fas fa-calendar mr-1"></i>
Dal: 01/01/2024
</span>
<span>
<i class="fas fa-calendar-times mr-1"></i>
Al: 31/12/2024
</span>
<span>
<i class="fas fa-euro-sign mr-1"></i>
€2.400,00/anno
</span>
</div>
</div>
<div class="flex items-center space-x-2 ml-4">
<button type="button"
class="text-blue-600 hover:text-blue-800 p-1"
onclick="visualizzaDocumento(1)"
title="Visualizza">
<i class="fas fa-eye"></i>
</button>
<button type="button"
class="text-green-600 hover:text-green-800 p-1"
onclick="downloadDocumento(1)"
title="Download">
<i class="fas fa-download"></i>
</button>
<button type="button"
class="text-yellow-600 hover:text-yellow-800 p-1"
onclick="modificaDocumento(1)"
title="Modifica">
<i class="fas fa-edit"></i>
</button>
<button type="button"
class="text-purple-600 hover:text-purple-800 p-1"
onclick="stampaEtichetta(1)"
title="Stampa Etichetta">
<i class="fas fa-tag"></i>
</button>
</div>
</div>
<!-- Dettagli collassabili -->
<div class="documento-dettagli mt-3 pt-3 border-t border-gray-200 dark:border-gray-600 hidden">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div>
<h7 class="font-medium text-gray-900 dark:text-gray-100">Informazioni Documento</h7>
<ul class="mt-1 text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>Numero documento:</strong> ASC-2024-001</li>
<li><strong>Data stipula:</strong> 15/12/2023</li>
<li><strong>Durata:</strong> 12 mesi</li>
<li><strong>Rinnovo automatico:</strong> </li>
</ul>
</div>
<div>
<h7 class="font-medium text-gray-900 dark:text-gray-100">Dati Economici</h7>
<ul class="mt-1 text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>Importo base:</strong> €2.000,00</li>
<li><strong>IVA:</strong> €400,00 (20%)</li>
<li><strong>Totale annuo:</strong> €2.400,00</li>
<li><strong>Modalità pagamento:</strong> Trimestrale</li>
</ul>
</div>
<div>
<h7 class="font-medium text-gray-900 dark:text-gray-100">Note e Allegati</h7>
<ul class="mt-1 text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>File originale:</strong> contratto_ascensori_2024.pdf</li>
<li><strong>Archiviazione fisica:</strong> Faldone CONTR-2024</li>
<li><strong>Ultima modifica:</strong> 15/12/2023</li>
<li><strong>Prossima scadenza:</strong> 31/12/2024</li>
</ul>
</div>
</div>
</div>
<!-- Toggle dettagli -->
<div class="mt-3 text-center">
<button type="button"
class="toggle-dettagli text-xs text-blue-600 hover:text-blue-800"
onclick="toggleDettagli(this)">
<i class="fas fa-chevron-down mr-1"></i>
Mostra dettagli
</button>
</div>
</div>
<!-- Documento esempio 2 - Assicurazione -->
<div class="documento-item p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
data-categoria="assicurazione" data-anno="2024">
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-center mb-2">
<span class="documento-protocollo bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 px-2 py-1 rounded text-xs font-mono mr-3">
ASSIC-2024-003
</span>
<span class="documento-categoria bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 px-2 py-1 rounded-full text-xs">
Assicurazione
</span>
<span class="documento-stato bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded-full text-xs ml-2">
<i class="fas fa-clock mr-1"></i>
In scadenza
</span>
</div>
<h6 class="documento-titolo text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">
Polizza RC Amministratore e Condominio
</h6>
<p class="documento-descrizione text-gray-600 dark:text-gray-400 text-sm mb-2">
Polizza di responsabilità civile per amministratore e parti comuni condominiali
</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
<span>
<i class="fas fa-building mr-1"></i>
Compagnia: Generali Assicurazioni
</span>
<span>
<i class="fas fa-calendar mr-1"></i>
Dal: 01/02/2024
</span>
<span>
<i class="fas fa-calendar-times mr-1 text-red-600"></i>
Al: 31/01/2025
</span>
<span>
<i class="fas fa-euro-sign mr-1"></i>
€850,00/anno
</span>
</div>
</div>
<div class="flex items-center space-x-2 ml-4">
<button type="button"
class="text-blue-600 hover:text-blue-800 p-1"
onclick="visualizzaDocumento(2)"
title="Visualizza">
<i class="fas fa-eye"></i>
</button>
<button type="button"
class="text-green-600 hover:text-green-800 p-1"
onclick="downloadDocumento(2)"
title="Download">
<i class="fas fa-download"></i>
</button>
<button type="button"
class="text-yellow-600 hover:text-yellow-800 p-1"
onclick="modificaDocumento(2)"
title="Modifica">
<i class="fas fa-edit"></i>
</button>
<button type="button"
class="text-purple-600 hover:text-purple-800 p-1"
onclick="stampaEtichetta(2)"
title="Stampa Etichetta">
<i class="fas fa-tag"></i>
</button>
</div>
</div>
</div>
<!-- Certificato esempio -->
<div class="documento-item p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
data-categoria="certificato" data-anno="2023">
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-center mb-2">
<span class="documento-protocollo bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 px-2 py-1 rounded text-xs font-mono mr-3">
CERT-2023-008
</span>
<span class="documento-categoria bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 px-2 py-1 rounded-full text-xs">
Certificato
</span>
<span class="documento-stato bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 px-2 py-1 rounded-full text-xs ml-2">
<i class="fas fa-times-circle mr-1"></i>
Scaduto
</span>
</div>
<h6 class="documento-titolo text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">
Certificato Antincendio (CPI)
</h6>
<p class="documento-descrizione text-gray-600 dark:text-gray-400 text-sm mb-2">
Certificato di Prevenzione Incendi per parti comuni e centrale termica
</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
<span>
<i class="fas fa-building mr-1"></i>
Ente: Vigili del Fuoco Roma
</span>
<span>
<i class="fas fa-calendar mr-1"></i>
Rilasciato: 15/03/2021
</span>
<span>
<i class="fas fa-calendar-times mr-1 text-red-600"></i>
Scaduto: 15/03/2024
</span>
</div>
</div>
<div class="flex items-center space-x-2 ml-4">
<button type="button"
class="text-blue-600 hover:text-blue-800 p-1"
onclick="visualizzaDocumento(3)"
title="Visualizza">
<i class="fas fa-eye"></i>
</button>
<button type="button"
class="text-green-600 hover:text-green-800 p-1"
onclick="downloadDocumento(3)"
title="Download">
<i class="fas fa-download"></i>
</button>
<button type="button"
class="text-red-600 hover:text-red-800 p-1"
onclick="rinnovaDocumento(3)"
title="Rinnova">
<i class="fas fa-redo"></i>
</button>
<button type="button"
class="text-purple-600 hover:text-purple-800 p-1"
onclick="stampaEtichetta(3)"
title="Stampa Etichetta">
<i class="fas fa-tag"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Info sui protocolli automatici -->
<div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-6 rounded-lg">
<div class="flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-blue-500 text-xl"></i>
</div>
<div class="ml-3">
<h4 class="text-lg font-medium text-blue-900 dark:text-blue-100">Sistema di Protocollo Automatico</h4>
<div class="mt-2 text-sm text-blue-800 dark:text-blue-200">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p class="font-medium mb-2">Categorie e Prefissi:</p>
<ul class="list-disc list-inside space-y-1">
<li><strong>CONTR-ANNO-###:</strong> Contratti di servizio</li>
<li><strong>ASSIC-ANNO-###:</strong> Polizze assicurative</li>
<li><strong>CERT-ANNO-###:</strong> Certificati e autorizzazioni</li>
<li><strong>PREV-ANNO-###:</strong> Preventivi e offerte</li>
<li><strong>FATT-ANNO-###:</strong> Fatture e documenti fiscali</li>
<li><strong>VERB-ANNO-###:</strong> Verbali assemblee</li>
<li><strong>DOC-ANNO-###:</strong> Altri documenti</li>
</ul>
</div>
<div>
<p class="font-medium mb-2">Funzionalità:</p>
<ul class="list-disc list-inside space-y-1">
<li>Numerazione progressiva automatica per anno</li>
<li>Generazione etichette per archiviazione fisica</li>
<li>Tracciamento scadenze e rinnovi automatici</li>
<li>Sistema di notifiche per documenti in scadenza</li>
<li>Upload e collegamento file digitali</li>
<li>Ricerca avanzata per categoria e contenuto</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript per gestione documenti -->
<script>
// Caricamento dati iniziale
document.addEventListener('DOMContentLoaded', function() {
caricaDocumentiStabile();
caricaStatistiche();
});
function caricaDocumentiStabile() {
const stabileId = {{ $stabile->id }};
fetch(`/admin/stabili/${stabileId}/documenti-collegati`)
.then(response => response.json())
.then(data => {
if (data.success) {
aggiornaElencoDocumenti(data.data);
aggiornaStatistiche(data.statistiche);
}
})
.catch(error => console.error('Errore nel caricamento documenti:', error));
}
function caricaStatistiche() {
const stabileId = {{ $stabile->id }};
fetch(`/admin/api/documenti-collegati/statistiche/${stabileId}`)
.then(response => response.json())
.then(data => {
if (data.success) {
aggiornaStatistiche(data.statistiche);
}
})
.catch(error => console.error('Errore nel caricamento statistiche:', error));
}
function aggiornaStatistiche(stats) {
if (stats) {
document.getElementById('stat-contratti').textContent = stats.contratti;
document.getElementById('stat-assicurazioni').textContent = stats.assicurazioni;
document.getElementById('stat-scadenze').textContent = stats.scadenze;
document.getElementById('stat-totale').textContent = stats.totale;
document.getElementById('stat-scaduti').textContent = stats.scaduti;
}
}
function aggiornaElencoDocumenti(documenti) {
const vistaLista = document.getElementById('vista-lista');
// Mantieni gli esempi esistenti per ora e aggiungi i documenti reali
// In un'implementazione completa, sostituiresti completamente il contenuto
// Per ora mostriamo una notifica del numero di documenti caricati
mostraNotifica('info', `Caricati ${documenti.length} documenti dal database`);
}
function filtraDocumenti() {
const categoria = document.getElementById('filtro-categoria').value;
const anno = document.getElementById('filtro-anno').value;
const ricerca = document.getElementById('ricerca-documenti').value.toLowerCase();
const documenti = document.querySelectorAll('.documento-item');
documenti.forEach(doc => {
const docCategoria = doc.dataset.categoria;
const docAnno = doc.dataset.anno;
const docTesto = doc.textContent.toLowerCase();
const categoriaMatch = !categoria || docCategoria === categoria;
const annoMatch = !anno || docAnno === anno;
const ricercaMatch = !ricerca || docTesto.includes(ricerca);
if (categoriaMatch && annoMatch && ricercaMatch) {
doc.style.display = 'block';
} else {
doc.style.display = 'none';
}
});
}
function resetFiltri() {
document.getElementById('filtro-categoria').value = '';
document.getElementById('filtro-anno').value = '';
document.getElementById('ricerca-documenti').value = '';
filtraDocumenti();
}
function toggleDettagli(button) {
const dettagli = button.closest('.documento-item').querySelector('.documento-dettagli');
const icon = button.querySelector('i');
if (dettagli.classList.contains('hidden')) {
dettagli.classList.remove('hidden');
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
button.innerHTML = '<i class="fas fa-chevron-up mr-1"></i>Nascondi dettagli';
} else {
dettagli.classList.add('hidden');
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
button.innerHTML = '<i class="fas fa-chevron-down mr-1"></i>Mostra dettagli';
}
}
function cambiaVista() {
const vista = document.getElementById('vista-tipo').value;
// Implementare cambio vista - placeholder per ora
console.log('Cambio vista:', vista);
}
// Funzioni per azioni sui documenti
function nuovoDocumento() {
// Apri modal per nuovo documento
mostraModalNuovoDocumento();
}
function uploadDocumento() {
// Apri dialog per upload file
const input = document.createElement('input');
input.type = 'file';
input.accept = '.pdf,.doc,.docx,.jpg,.jpeg,.png';
input.click();
input.onchange = function(e) {
const file = e.target.files[0];
if (file) {
// Qui implementeresti l'upload del file
mostraNotifica('info', `File selezionato: ${file.name}`);
}
};
}
function visualizzaDocumento(id) {
window.open(`/admin/documenti-collegati/${id}`, '_blank');
}
function downloadDocumento(id) {
window.location.href = `/admin/documenti-collegati/${id}/download`;
}
function modificaDocumento(id) {
window.location.href = `/admin/documenti-collegati/${id}/edit`;
}
function stampaEtichetta(id) {
window.open(`/admin/documenti-collegati/${id}/etichetta`, '_blank');
}
function rinnovaDocumento(id) {
if (confirm('Sei sicuro di voler rinnovare questo documento? Verrà creata una nuova versione con un nuovo protocollo.')) {
fetch(`/admin/documenti-collegati/${id}/rinnova`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
mostraNotifica('success', `Documento rinnovato con protocollo: ${data.nuovo_protocollo}`);
caricaDocumentiStabile(); // Ricarica l'elenco
} else {
mostraNotifica('error', 'Errore nel rinnovo del documento');
}
})
.catch(error => {
console.error('Errore nel rinnovo:', error);
mostraNotifica('error', 'Errore di connessione');
});
}
}
function mostraModalNuovoDocumento() {
// Implementazione del modal per nuovo documento
// Per ora mostriamo un alert
alert('Modal nuovo documento - DA IMPLEMENTARE\n\nIl modal includerà:\n- Selezione tipo documento\n- Form con tutti i campi\n- Upload file\n- Generazione automatica protocollo');
}
function mostraNotifica(tipo, messaggio) {
// Crea una notifica toast semplice
const notifica = document.createElement('div');
notifica.className = `fixed top-4 right-4 px-4 py-2 rounded-lg text-white z-50 ${
tipo === 'success' ? 'bg-green-600' :
tipo === 'error' ? 'bg-red-600' :
tipo === 'info' ? 'bg-blue-600' : 'bg-gray-600'
}`;
notifica.innerHTML = `<i class="fas ${
tipo === 'success' ? 'fa-check' :
tipo === 'error' ? 'fa-times' :
tipo === 'info' ? 'fa-info' : 'fa-bell'
} mr-2"></i>${messaggio}`;
document.body.appendChild(notifica);
// Rimuovi dopo 4 secondi
setTimeout(() => {
notifica.remove();
}, 4000);
}
</script>