glastree/resources/views/help/index.blade.php

@extends('layouts.adminlte')

@php $appName = \App\Models\AppSetting::getAppName() ?? 'Glastree'; @endphp
@section('title', 'Guida - ' . $appName)
@section('page_title', 'Guida alla Configurazione')
@section('breadcrumbs')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Guida</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-3">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Argomenti</h3>
            </div>
            <div class="card-body p-0">
                <ul class="nav nav-pills flex-column" id="helpTabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#help-webdav" data-toggle="tab">
                            <i class="fas fa-cloud mr-2"></i> WebDAV / Nextcloud
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#help-googledrive" data-toggle="tab">
                            <i class="fab fa-google-drive mr-2"></i> Google Drive
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#help-calendario" data-toggle="tab">
                            <i class="fas fa-calendar-alt mr-2"></i> Calendario
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#help-tag" data-toggle="tab">
                            <i class="fas fa-tags mr-2"></i> Tag e Ricerca
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#help-tipologie" data-toggle="tab">
                            <i class="fas fa-tags mr-2"></i> Tipologie e Dati
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#help-email" data-toggle="tab">
                            <i class="fas fa-envelope mr-2"></i> Email / SMTP
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#help-installazione" data-toggle="tab">
                            <i class="fas fa-terminal mr-2"></i> Installazione
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#help-backup" data-toggle="tab">
                            <i class="fas fa-hdd mr-2"></i> Backup e Migrazione
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#help-docker" data-toggle="tab">
                            <i class="fab fa-docker mr-2"></i> Docker
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-footer">
                <a href="{{ route('help.pdf.download') }}" class="btn btn-primary btn-block">
                    <i class="fas fa-file-pdf mr-2"></i> Scarica Guida PDF
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-9">
        <div class="tab-content">
            {{-- WebDAV / Nextcloud --}}
            <div class="tab-pane active" id="help-webdav">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-cloud mr-2"></i> WebDAV / Nextcloud</h3>
                    </div>
                    <div class="card-body">
                        <h5>Cos'è</h5>
                        <p>WebDAV è un protocollo che permette di accedere a file su server remoti. Nextcloud lo utilizza per la sincronizzazione dei file.</p>

                        <h5>Configurazione</h5>
                        <p>Vai in <strong>Impostazioni → Repository</strong> e crea un nuovo repository di tipo WebDAV.</p>

                        <div class="callout callout-info">
                            <h6>Campi obbligatori</h6>
                            <dl class="row mb-0">
                                <dt class="col-sm-3">Nome</dt>
                                <dd class="col-sm-9">Un nome descrittivo (es. "Nextcloud Lavoro")</dd>
                                <dt class="col-sm-3">Base URI</dt>
                                <dd class="col-sm-9">L'URL del tuo server WebDAV.
                                    <br><em>Nextcloud:</em> <code>https://tuodominio.it/remote.php/dav/files/utente/</code>
                                    <br><em>Altri:</em> <code>https://server.webdav.it/</code></dd>
                                <dt class="col-sm-3">Root</dt>
                                <dd class="col-sm-9">Percorso base all'interno del server (es. <code>/Documenti/</code>). Lascia <code>/</code> per usare la root.</dd>
                                <dt class="col-sm-3">Username</dt>
                                <dd class="col-sm-9">Il tuo nome utente</dd>
                                <dt class="col-sm-3">Password</dt>
                                <dd class="col-sm-9">La password dell'account</dd>
                                <dt class="col-sm-3">Auth Type</dt>
                                <dd class="col-sm-9"><code>Basic</code> per la maggior parte dei server (Nextcloud, ownCloud).</dd>
                            </dl>
                        </div>

                        <h5 class="mt-4">⚠️ Nome utente con @ (chiocciola)</h5>
                        <p>Se il tuo nome utente contiene il carattere <code>@</code> (es. <code>mario.rossi@azienda.com</code>), segui queste regole:</p>
                        <ul>
                            <li><strong>Nel campo "Base URI":</strong> l'indirizzo email deve essere <strong>URL-encoded</strong>:
                                <br><code>https://server.it/remote.php/dav/files/mario.rossi%40azienda.com/</code>
                                <br><small>(il carattere <code>@</code> diventa <code>%40</code>)</small></li>
                            <li><strong>Nel campo "Username":</strong> inserisci l'indirizzo email <strong>normale</strong> con la <code>@</code> vera.</li>
                        </ul>
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            Il sistema gestisce automaticamente la differenza tra l'URI (che richiede <code>%40</code>) e l'autenticazione (che usa la <code>@</code> reale).
                        </div>

                        <h5 class="mt-4">Test connessione</h5>
                        <p>Dopo aver salvato, usa il pulsante <span class="badge badge-success"><i class="fas fa-plug"></i> Test</span> nella tabella dei repository per verificare che la connessione funzioni.</p>

                        <h5 class="mt-4">Importare file</h5>
                        <p>Apri la sezione <strong>Documenti</strong>, clicca sul pulsante del repository nella toolbar per sfogliare i file remoti, poi clicca <span class="badge badge-success"><i class="fas fa-save"></i> Salva tra i documenti</span> su un file per importarlo come documento locale.</p>
                    </div>
                </div>
            </div>

            {{-- Google Drive --}}
            <div class="tab-pane" id="help-googledrive">
                <div class="card card-outline card-danger">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fab fa-google-drive mr-2"></i> Google Drive</h3>
                    </div>
                    <div class="card-body">
                        <h5>Cos'è</h5>
                        <p>Integrazione con Google Drive per sfogliare e importare file direttamente dal tuo spazio Google Drive.</p>

                        <h5>Requisiti</h5>
                        <ol>
                            <li>Un account Google / Google Workspace</li>
                            <li>Un progetto sulla <strong>Google Cloud Console</strong> con l'API Google Drive abilitata</li>
                            <li>Credenziali OAuth 2.0 (Client ID e Client Secret)</li>
                        </ol>

                        <h5>Passo 1: Creare il progetto Google Cloud</h5>
                        <ol>
                            <li>Vai su <a href="https://console.developers.google.com/" target="_blank">Google Cloud Console</a></li>
                            <li>Crea un nuovo progetto o selezionane uno esistente</li>
                            <li>Vai a <strong>API e servizi → Libreria</strong></li>
                            <li>Cerca "<strong>Google Drive API</strong>" e <strong>abilitala</strong></li>
                            <li>Vai a <strong>API e servizi → Credenziali</strong></li>
                            <li>Clicca "<strong>Crea credenziali → ID client OAuth</strong>"</li>
                            <li>Tipo applicazione: "<strong>Applicazione Web</strong>"</li>
                            <li><strong>URI di reindirizzamento autorizzato:</strong> aggiungi <code>{{ url('/auth/google-drive/callback') }}</code></li>
                            <li>Completa la creazione e <strong>copia Client ID e Client Secret</strong></li>
                        </ol>

                        <h5>Passo 2: Configurazione nell'app</h5>
                        <ol>
                            <li>Vai in <strong>Impostazioni → Repository</strong></li>
                            <li>Clicca "<strong>Nuovo Repository</strong>" e seleziona tipo <strong>Google Drive</strong></li>
                            <li>Inserisci un nome descrittivo (es. "Drive Lavoro")</li>
                            <li>Incolla <strong>Client ID</strong> e <strong>Client Secret</strong></li>
                            <li><strong>Folder ID (opzionale):</strong> se vuoi limitare l'accesso a una cartella specifica, inserisci il suo ID (lo trovi nell'URL quando apri la cartella in Google Drive: <code>https://drive.google.com/drive/folders/<strong>ID_QUI</strong></code>)</li>
                            <li>Clicca "<strong>Autorizza Google Drive</strong>" — verrai reindirizzato a Google per concedere i permessi</li>
                            <li>Dopo l'autorizzazione, il refresh token verrà salvato automaticamente</li>
                        </ol>

                        <h5>⚠️ Google Drive API non abilitata</h5>
                        <p>Se vedi l'errore <em>"Google Drive API non abilitata"</em> nel test connessione, significa che l'API Drive non è stata attivata nel tuo progetto Google Cloud.</p>
                        <div class="callout callout-danger">
                            <h6>Soluzione</h6>
                            <p>Vai su <a href="https://console.developers.google.com/apis/api/drive.googleapis.com/overview" target="_blank">
                                https://console.developers.google.com/apis/api/drive.googleapis.com/overview
                            </a></p>
                            <p>Seleziona il progetto corretto dall'header in alto, clicca <strong>"Enable"</strong> e attendi qualche minuto prima di riprovare.</p>
                        </div>

                        <h5>Importare file</h5>
                        <p>Stessa procedura di WebDAV: apri <strong>Documenti</strong>, clicca sul repository Drive, sfoglia i file e usa <span class="badge badge-success"><i class="fas fa-save"></i> Salva tra i documenti</span>.</p>

                        <h5 class="mt-4">⚠️ File Google (Documenti, Fogli, Presentazioni)</h5>
                        <p>I file creati con Google Workspace (Documenti Google, Fogli Google, Presentazioni Google, Disegni Google) non possono essere scaricati direttamente perché non hanno un formato binario nativo.</p>
                        <p>Il sistema li converte automaticamente in formato Office Open XML durante l'import:</p>
                        <table class="table table-sm table-bordered">
                            <thead><tr><th>File Google</th><th>Formato convertito</th></tr></thead>
                            <tbody>
                                <tr><td>Documento Google</td><td><code>.docx</code> (Word)</td></tr>
                                <tr><td>Foglio Google</td><td><code>.xlsx</code> (Excel)</td></tr>
                                <tr><td>Presentazione Google</td><td><code>.pptx</code> (PowerPoint)</td></tr>
                                <tr><td>Disegno Google</td><td><code>.png</code> (Immagine)</td></tr>
                                <tr><td>Altri (Moduli, Script)</td><td><code>.pdf</code> (PDF)</td></tr>
                            </tbody>
                        </table>
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            Il nome del file viene automaticamente esteso con l'estensione corretta (es. "Relazione" → "Relazione.docx").
                        </div>
                    </div>
                </div>
            </div>

            {{-- Calendario --}}
            <div class="tab-pane" id="help-calendario">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-calendar-alt mr-2"></i> Google Calendar</h3>
                    </div>
                    <div class="card-body">
                        <h5>Cos'è</h5>
                        <p>Integrazione con Google Calendar per sincronizzare gli eventi tra l'app e il tuo calendario Google. Supporta import, export e sincronizzazione bidirezionale.</p>

                        <h5>Requisiti</h5>
                        <ol>
                            <li>Un account Google / Google Workspace</li>
                            <li>Un progetto sulla <strong>Google Cloud Console</strong> con l'API Google Calendar abilitata</li>
                            <li>Credenziali OAuth 2.0 (Client ID e Client Secret)</li>
                        </ol>

                        <h5>Passo 1: Creare il progetto Google Cloud</h5>
                        <ol>
                            <li>Vai su <a href="https://console.developers.google.com/" target="_blank">Google Cloud Console</a></li>
                            <li>Crea un nuovo progetto o selezionane uno esistente</li>
                            <li>Vai a <strong>API e servizi → Libreria</strong></li>
                            <li>Cerca "<strong>Google Calendar API</strong>" e <strong>abilitala</strong></li>
                            <li>Vai a <strong>API e servizi → Credenziali</strong></li>
                            <li>Clicca "<strong>Crea credenziali → ID client OAuth</strong>"</li>
                            <li>Tipo applicazione: "<strong>Applicazione Web</strong>"</li>
                            <li><strong>URI di reindirizzamento autorizzato:</strong> aggiungi <code>https://developers.google.com/oauthplayground</code></li>
                            <li>Completa la creazione e <strong>copia Client ID e Client Secret</strong></li>
                        </ol>

                        <h5>Passo 2: Ottenere il Refresh Token (Google OAuth Playground)</h5>
                        <p>A differenza di Google Drive, per Google Calendar il refresh token va ottenuto manualmente tramite il Google OAuth Playground:</p>
                        <ol>
                            <li>Vai su <a href="https://developers.google.com/oauthplayground" target="_blank">Google OAuth Playground</a></li>
                            <li>Clicca l'ingranaggio ⚙️ in alto a destra</li>
                            <li>Spunta "<strong>Use your own OAuth credentials</strong>"</li>
                            <li>Incolla <strong>Client ID</strong> e <strong>Client Secret</strong> creati al Passo 1</li>
                            <li>Nella colonna sinistra, espandi "<strong>Google Calendar API v3</strong>" e seleziona lo scope <code>https://www.googleapis.com/auth/calendar</code></li>
                            <li>Clicca "<strong>Authorize APIs</strong>" e autorizza con l'account Google</li>
                            <li>Clicca "<strong>Exchange authorization code for tokens</strong>"</li>
                            <li><strong>Copia il Refresh Token</strong> generato</li>
                        </ol>

                        <h5>Passo 3: Configurazione nell'app</h5>
                        <ol>
                            <li>Vai in <strong>Impostazioni → Calendario</strong></li>
                            <li>Clicca "<strong>Nuova Connessione</strong>"</li>
                            <li>Inserisci un nome descrittivo (es. "Calendario Lavoro")</li>
                            <li>Seleziona tipo <strong>Google Calendar</strong></li>
                            <li>Incolla <strong>Client ID</strong>, <strong>Client Secret</strong> e il <strong>Refresh Token</strong> ottenuto</li>
                            <li><strong>Calendar ID (opzionale):</strong> lascia <code>primary</code> per il calendario principale, oppure inserisci l'ID di un calendario specifico (lo trovi in Google Calendar → Impostazioni calendario → ID calendario)</li>
                            <li>Seleziona la <strong>direzione di sincronizzazione</strong> (import, export o bidirezionale)</li>
                            <li>Clicca "<strong>Salva</strong>"</li>
                        </ol>

                        <h5>Test connessione</h5>
                        <p>Dopo aver salvato, usa il pulsante <span class="badge badge-success"><i class="fas fa-plug"></i> Test</span> nella tabella delle connessioni per verificare che l'autorizzazione funzioni correttamente.</p>

                        <h5>Sincronizzazione</h5>
                        <p>Dopo aver configurato la connessione, puoi sincronizzare gli eventi manualmente cliccando <span class="badge badge-primary"><i class="fas fa-sync"></i> Sync</span>. La sincronizzazione automatica viene eseguita in base all'intervallo impostato (richiede il cron di Laravel configurato).</p>

                        <div class="alert alert-info">
                            <i class="fas fa-info-circle mr-2"></i>
                            Il Refresh Token è <strong>permanente</strong> finché non viene revocato dall'utente. Se la connessione smette di funzionare, potrebbe essere necessario rigenerarlo ripetendo il Passo 2.
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tag e Ricerca --}}
            <div class="tab-pane" id="help-tag">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-tags mr-2"></i> Tag e Ricerca per Tag</h3>
                    </div>
                    <div class="card-body">
                        <h5>Cos'è il sistema di Tag</h5>
                        <p>I tag permettono di classificare e raggruppare trasversalmente elementi di tipo diverso: individui, gruppi, eventi, documenti e mailing list. A differenza delle tipologie (specifiche per ogni entità), i tag sono <strong>condivisi</strong> tra tutte le entità.</p>

                        <h5>Gestione Tag</h5>
                        <p>Vai in <strong>Impostazioni → Tag</strong> per creare, modificare, riordinare ed eliminare i tag. Ogni tag ha:</p>
                        <ul>
                            <li><strong>Nome</strong> — il nome visualizzato</li>
                            <li><strong>Colore</strong> — colore personalizzato per il badge (es. <code>#dc3545</code> per rosso)</li>
                            <li><strong>Slug</strong> — identificatore univoco generato automaticamente dal nome</li>
                        </ul>

                        <h5>Assegnare Tag</h5>
                        <p>I tag si assegnano nelle pagine di creazione e modifica di ciascuna entità — individui, gruppi, eventi, documenti, mailing list — tramite il selettore a pillole colorate. Clicca su un tag per selezionarlo (il badge diventa opaco), clicca di nuovo per deselezionarlo. Usa la barra di ricerca per filtrare i tag per nome.</p>

                        <h5>Assegnazione Massiva di Tag</h5>
                        <p>Puoi assegnare o rimuovere tag a più elementi contemporaneamente:</p>
                        <ul>
                            <li><strong>Individui:</strong> seleziona gli individui nella tabella, apri <strong>Azioni → Assegna Tag</strong>, scegli Assegna/Rimuovi e seleziona i tag</li>
                            <li><strong>Gruppi:</strong> stessa procedura — seleziona i gruppi, <strong>Azioni → Assegna Tag</strong></li>
                            <li><strong>Documenti:</strong> seleziona i documenti, pulsante <strong>Tag</strong> nella toolbar</li>
                        </ul>

                        <h5>Filtrare per Tag</h5>
                        <p>In ogni pagina elenco (Individui, Gruppi, Eventi, Documenti, Mailing List) trovi una barra con tutti i tag. Clicca su un tag per filtrare la tabella mostrando solo gli elementi con quel tag. Clicca <strong>Cancella filtri</strong> per rimuovere il filtro.</p>

                        <h5>Ricerca per Tag</h5>
                        <p>La sezione <strong>Ricerca per Tag</strong> (sidebar → Ricerca per Tag) permette di trovare elementi di qualsiasi tipo in base ai tag:</p>
                        <ul>
                            <li><strong>Tag singolo:</strong> seleziona un tag per vedere tutti gli elementi associati</li>
                            <li><strong>Tag multipli (AND):</strong> seleziona più tag (Ctrl+click) per trovare elementi che hanno <strong>tutti</strong> i tag selezionati — utile per ricerche precise (es. "animatore" + "giovane")</li>
                        </ul>
                        <p>I risultati sono raggruppati per tipo con info-box colorati e tabelle dettagliate.</p>
                    </div>
                </div>
            </div>

            {{-- Tipologie e Dati --}}
            <div class="tab-pane" id="help-tipologie">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-tags mr-2"></i> Tipologie e Gestione Dati</h3>
                    </div>
                    <div class="card-body">
                        <h5>Tipologie Documenti</h5>
                        <p>Le tipologie classificano i documenti (avatar, galleria, documento, statuto, altro).</p>
                        <p>Si gestiscono in <strong>Impostazioni → Tipologie Documenti</strong>. Puoi aggiungere, rinominare, riordinare ed eliminare tipologie (tranne quelle con documenti associati).</p>

                        <h5>Tipologie Individui</h5>
                        <p>Classificano gli individui (es. socio, volontario, dipendente). Si gestiscono in <strong>Impostazioni → Tipologie</strong>.</p>

                        <h5>Tipologie Eventi</h5>
                        <p>Classificano gli eventi (es. riunione, assemblea, formazione). Si gestiscono in <strong>Impostazioni → Tipologie Eventi</strong>.</p>

                        <h5>Ruoli Individui</h5>
                        <p>Definiscono il ruolo o la carica di un individuo (es. presidente, segretario, tesoriere). Si gestiscono in <strong>Impostazioni → Ruoli</strong>.</p>

                        <h5>Visibilità Documenti</h5>
                        <p>Ogni documento può avere diversi livelli di visibilità:</p>
                        <ul>
                            <li><strong>Pubblico</strong> — visibile a tutti gli utenti</li>
                            <li><strong>Individuo</strong> — visibile solo a uno specifico individuo</li>
                            <li><strong>Gruppo</strong> — visibile solo ai membri di un gruppo</li>
                            <li><strong>Evento</strong> — visibile solo ai partecipanti di un evento</li>
                            <li><strong>Mailing</strong> — visibile solo ai membri di una mailing list</li>
                        </ul>

                        <h5>Tag</h5>
                        <p>I <strong>tag</strong> affiancano le tipologie con un sistema trasversale di classificazione applicabile a individui, gruppi, eventi, documenti e mailing list. A differenza delle tipologie (specifiche per ogni entità), i tag sono condivisi tra tutte le entità e permettono ricerche incrociate.</p>
                        <p>Vedi la sezione <strong>Tag e Ricerca per Tag</strong> (nel menu laterale) per la gestione e l'assegnazione.</p>
                    </div>
                </div>
            </div>

            {{-- Email / SMTP --}}
            <div class="tab-pane" id="help-email">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-envelope mr-2"></i> Email / SMTP</h3>
                    </div>
                    <div class="card-body">
                        <h5>Configurazione Email</h5>
                        <p>Vai in <strong>Impostazioni → Email</strong> per configurare la posta elettronica.</p>

                        <h5>Server IMAP (Ricezione)</h5>
                        <p>Usato per ricevere e leggere le email direttamente nell'app.</p>
                        <div class="callout callout-info">
                            <h6>Campi consigliati per provider comuni</h6>
                            <table class="table table-sm table-bordered">
                                <thead><tr><th>Provider</th><th>Host</th><th>Porta</th><th>Crittografia</th></tr></thead>
                                <tbody>
                                    <tr><td>Gmail</td><td><code>imap.gmail.com</code></td><td><code>993</code></td><td>SSL</td></tr>
                                    <tr><td>Outlook/Office 365</td><td><code>outlook.office365.com</code></td><td><code>993</code></td><td>SSL</td></tr>
                                    <tr><td>Libero</td><td><code>imapmail.libero.it</code></td><td><code>993</code></td><td>SSL</td></tr>
                                    <tr><td>Aruba</td><td><code>imap.aruba.it</code></td><td><code>993</code></td><td>SSL</td></tr>
                                </tbody>
                            </table>
                        </div>

                        <h5>Server SMTP (Invio)</h5>
                        <p>Usato per inviare email dall'app. Supporta account multipli (mittenti).</p>
                        <div class="callout callout-info">
                            <h6>Campi consigliati per provider comuni</h6>
                            <table class="table table-sm table-bordered">
                                <thead><tr><th>Provider</th><th>Host</th><th>Porta</th><th>Crittografia</th></tr></thead>
                                <tbody>
                                    <tr><td>Gmail</td><td><code>smtp.gmail.com</code></td><td><code>587</code></td><td>TLS</td></tr>
                                    <tr><td>Outlook/Office 365</td><td><code>smtp.office365.com</code></td><td><code>587</code></td><td>TLS</td></tr>
                                    <tr><td>Libero</td><td><code>smtp.libero.it</code></td><td><code>465</code></td><td>SSL</td></tr>
                                    <tr><td>Aruba</td><td><code>smtp.aruba.it</code></td><td><code>465</code></td><td>SSL</td></tr>
                                </tbody>
                            </table>
                        </div>

                        <h5>Gmail / Google Workspace</h5>
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            Gmail richiede una <strong>Password per l'app</strong> (non la password normale) se usi la verifica in due passaggi. Puoi generarla su
                            <a href="https://myaccount.google.com/apppasswords" target="_blank">https://myaccount.google.com/apppasswords</a>.
                        </div>

                        <h5>Mailing</h5>
                        <p>Le <strong>Mailing List</strong> permettono di inviare email a gruppi predefiniti di destinatari.</p>
                        <ul>
                            <li>Crea una mailing list in <strong>Mailing List → Nuova</strong></li>
                            <li>Puoi popolare la lista da individui, gruppi o manualmente</li>
                            <li>Invia email alla lista da <strong>Email → Nuova Email</strong>, selezionando la mailing list come destinatario</li>
                        </ul>

                        <h5>Test connessione</h5>
                        <p>Dopo aver configurato i server, usa il pulsante <span class="badge badge-success"><i class="fas fa-vial"></i> Test Connessione</span> per verificare che IMAP e SMTP funzionino correttamente.</p>
                    </div>
                </div>
            </div>

            {{-- Backup e Migrazione --}}
            <div class="tab-pane" id="help-backup">
                <div class="card card-outline card-danger">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-hdd mr-2"></i> Backup e Migrazione Server</h3>
                    </div>
                    <div class="card-body">
                        <h5>Cos'è</h5>
                        <p>Il sistema di backup crea un archivio ZIP contenente tutto il necessario per ripristinare l'applicazione su un nuovo server. Include database, file caricati e configurazione.</p>

                        <h5>Cosa include il backup</h5>
                        <table class="table table-sm table-bordered">
                            <thead><tr><th>Componente</th><th>Incluso</th><th>Dettagli</th></tr></thead>
                            <tbody>
                                <tr><td>Database (MySQL)</td><td><span class="badge badge-success">Sempre</span></td><td>Struttura, dati, stored procedure, eventi, trigger</td></tr>
                                <tr><td>File caricati</td><td><span class="badge badge-success">Opzionale</span></td><td>Documenti, avatar, gallerie</td></tr>
                                <tr><td>Configurazione .env</td><td><span class="badge badge-success">Opzionale</span></td><td>APP_KEY, credenziali DB, SMTP, token OAuth</td></tr>
                                <tr><td>Metadati</td><td><span class="badge badge-success">Sempre</span></td><td>Versione app, PHP, Laravel</td></tr>
                            </tbody>
                        </table>

                        <h5 class="mt-4">Come eseguire un backup</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="callout callout-info">
                                    <h6>Via Interfaccia Web</h6>
                                    <ol class="mb-0">
                                        <li>Vai su <strong>Admin → Backup</strong></li>
                                        <li>Verifica le impostazioni (includi files/.env)</li>
                                        <li>Clicca <span class="badge badge-primary"><i class="fas fa-play"></i> Esegui Backup Ora</span></li>
                                        <li>Scarica il file ZIP generato</li>
                                    </ol>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="callout callout-success">
                                    <h6>Via Comando</h6>
                                    <pre class="mb-0"><code>php artisan backup:run</code></pre>
                                    <p class="mb-0 mt-2 small">Il file viene creato in <code>storage/app/backups/</code></p>
                                </div>
                            </div>
                        </div>

                        <h5 class="mt-4">Backup automatico</h5>
                        <p>Puoi abilitare il backup automatico dalla pagina <strong>Admin → Backup</strong>:</p>
                        <ul>
                            <li><strong>Frequenza:</strong> giornaliero, settimanale o mensile</li>
                            <li><strong>Ora:</strong> consigliata 03:00 (notte)</li>
                            <li><strong>Requisito:</strong> il cron di Laravel deve essere configurato sul server</li>
                        </ul>
                        <div class="alert alert-warning">
                            <i class="fas fa-clock mr-2"></i>
                            Per il backup automatico, aggiungi questo cron:
                            <pre class="mt-2 mb-0"><code>* * * * * cd {{ base_path() }} && php artisan schedule:run >> /dev/null 2>&1</code></pre>
                        </div>

                        <hr class="my-4">

                        <h4><i class="fas fa-truck mr-2"></i> Procedura di Migrazione Completa</h4>
                        <p>Segui questa procedura per migrare l'applicazione su un nuovo server LAMP (Linux, Apache, MySQL, PHP).</p>

                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            <strong>ATTENZIONE: APP_KEY</strong>
                            <p class="mb-0 mt-2">L'APP_KEY cripta i dati sensibili (password email SMTP, token OAuth Google Drive, ecc.).</p>
                            <ul class="mt-2">
                                <li><strong>Se hai il .env originale dal backup:</strong> NON rigenerare APP_KEY — mantieni i dati criptati accessibili.</li>
                                <li><strong>Se hai perso il .env:</strong> DEVI rigenerare APP_KEY, ma perderai l'accesso ai dati criptati esistenti. Dovrai riconfigurare SMTP e OAuth.</li>
                            </ul>
                        </div>

                        <h5 class="mt-4">Passo 1: Preparazione del server</h5>
                        <pre><code>sudo apt update && sudo apt upgrade -y</code></pre>

                        <h5 class="mt-4">Passo 2: Installa LAMP + PHP 8.4</h5>
                        <pre><code>sudo apt install -y apache2 mariadb-server php8.4 php8.4-cli \
  php8.4-mysql php8.4-xml php8.4-mbstring php8.4-curl \
  php8.4-zip php8.4-bcmath php8.4-gd php8.4-intl \
  composer git unzip

sudo a2enmod rewrite</code></pre>

                        <h5 class="mt-4">Passo 3: Ottieni l'applicazione</h5>
                        <div class="callout callout-info py-2">
                            <i class="fas fa-info-circle"></i>
                            Puoi clonare il repository con git oppure estrarre il file ZIP ricevuto nella cartella <code>/var/www/glastree</code>.
                        </div>
                        <pre><code>cd /var/www

# Opzione A — Git clone
git clone &lt;URL_REPOSITORY&gt; glastree

# Opzione B — ZIP (se non hai git)
# unzip /percorso/del/glastree.zip -d glastree

cd glastree
composer install --no-dev --optimize-autoloader
npm ci && npm run build</code></pre>

                        <h5 class="mt-4">Passo 4: Carica il backup</h5>
                        <p>Copia il file <code>backup.zip</code> sul nuovo server e estrailo:</p>
                        <pre><code>mkdir -p /tmp/restore
unzip backup.zip -d /tmp/restore/
ls -la /tmp/restore/
# Dovresti vedere: database.sql  .env  files/  manifest.json</code></pre>

                        <h5 class="mt-4">Passo 5: Crea database e importa</h5>
                        <pre><code>sudo mysql -u root &lt;&lt;EOF
CREATE DATABASE glastree CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'glastree'@'localhost' IDENTIFIED BY 'ScegliPasswordFortep4ss!';
GRANT ALL ON glastree.* TO 'glastree'@'localhost';
FLUSH PRIVILEGES;
EOF

mysql -u glastree -p glastree &lt; /tmp/restore/database.sql</code></pre>

                        <h5 class="mt-4">Passo 6: Configura .env</h5>
                        <pre><code>cp /tmp/restore/.env .env
# Modifica se necessario:
#   APP_URL=https://nuovo-dominio.it
#   DB_HOST=localhost
#   DB_DATABASE=glastree
#   DB_USERNAME=glastree
#   DB_PASSWORD=ScegliPasswordFortep4ss!

#  DECIDI SULL'APP_KEY (leggi avviso sopra!)
#  php artisan key:generate   ← SOLO se non hai il .env originale</code></pre>

                        <h5 class="mt-4">Passo 7: Ripristina file e permessi</h5>
                        <pre><code>cp -r /tmp/restore/files/* storage/app/documenti/

sudo chown -R www-data:www-data storage bootstrap/cache
sudo chmod -R 755 storage bootstrap/cache

php artisan storage:link</code></pre>

                        <h5 class="mt-4">Passo 8: Cache</h5>
                        <pre><code>php artisan optimize:clear
php artisan config:cache
php artisan route:cache
php artisan view:cache</code></pre>

                        <h5 class="mt-4">Passo 9: Configura Apache</h5>
                        <pre><code>sudo tee /etc/apache2/sites-available/glastree.conf &lt;&lt;APACHE
&lt;VirtualHost *:80&gt;
    ServerName glastree.esempio.it
    DocumentRoot /var/www/glastree/public

    &lt;Directory /var/www/glastree/public&gt;
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    &lt;/Directory&gt;

    ErrorLog \${APACHE_LOG_DIR}/glastree_error.log
    CustomLog \${APACHE_LOG_DIR}/glastree_access.log combined
&lt;/VirtualHost&gt;
APACHE

sudo a2dissite 000-default.conf
sudo a2ensite glastree.conf
sudo systemctl reload apache2</code></pre>

                        <h5 class="mt-4">Passo 10: SSL Let's Encrypt</h5>
                        <pre><code>sudo apt install -y certbot python3-certbot-apache
sudo certbot --apache -d glastree.esempio.it</code></pre>

                        <h5 class="mt-4">Passo 11: Cron per backup automatico</h5>
                        <pre><code>sudo crontab -u www-data -e
# Inserisci:
* * * * * cd /var/www/glastree && php artisan schedule:run >> /dev/null 2>&1</code></pre>

                        <h5 class="mt-4">Passo 12: Verifica finale</h5>
                        <ol>
                            <li>Apri https://glastree.esempio.it nel browser</li>
                            <li>Fai login con le credenziali esistenti</li>
                            <li>Verifica: Dashboard, Documenti, Impostazioni, Email</li>
                            <li>Se hai rigenerato APP_KEY: riconfigura SMTP e OAuth Google Drive</li>
                        </ol>

                        <hr class="my-4">

                        <h5>Comandi Artisan</h5>
                        <p>Per installazione e ripristino usa i comandi Artisan da terminale. Vedi la sezione <strong>Installazione</strong> per la guida completa.</p>
                    </div>
                </div>
            </div>

            {{-- Docker --}}
            <div class="tab-pane" id="help-docker">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fab fa-docker mr-2"></i> Docker</h3>
                    </div>
                    <div class="card-body">
                        <h5>Creare un'immagine Docker con dati di base</h5>
                        <p>Puoi creare un'immagine Docker pronta all'uso che include l'applicazione e i dati di base (tipologie documenti, tipologie eventi, ruoli). Scegli la configurazione in base alle tue esigenze:</p>

                        <div class="callout callout-info">
                            <i class="fas fa-info-circle"></i>
                            <strong>Ottenere il codice:</strong> puoi clonare il repository con <code>git clone &lt;URL&gt; glastree</code> oppure, se non hai git, estrarre il file ZIP ricevuto con <code>unzip glastree.zip -d glastree</code> e posizionarti nella cartella <code>glastree</code> prima di procedere.
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="callout callout-info">
                                    <h6><i class="fas fa-database"></i> SQLite (Leggero)</h6>
                                    <p class="mb-0 small">Database embedded, nessun servizio aggiuntivo. Ideale per demo, test, sviluppo locale o ambienti con poca concorrenza.</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="callout callout-success">
                                    <h6><i class="fas fa-server"></i> MySQL (Standard)</h6>
                                    <p class="mb-0 small">Database separato in un container MySQL. Configurazione standard, ideale per produzione, staging e ambienti con piu utenti.</p>
                                </div>
                            </div>
                        </div>

                        <h5 class="mt-4">1. Dockerfile (comune a entrambe le modalita)</h5>
                        <p>Crea un file <code>Dockerfile</code> nella root del progetto:</p>
                        <pre><code>FROM php:8.4-apache

# Abilita mod_rewrite
RUN docker-php-ext-enable opcache \
    && a2enmod rewrite

# Installa estensioni PHP (sia SQLite che MySQL)
RUN docker-php-ext-install pdo_mysql pdo_sqlite bcmath gd zip

# Installa Composer
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer

# Configura DocumentRoot per Laravel
ENV APACHE_DOCUMENT_ROOT=/var/www/html/public
RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf \
    && sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf

# Copia l'applicazione
COPY . /var/www/html/

# Installa dipendenze e compila asset
RUN composer install --no-dev --optimize-autoloader \
    && mkdir -p storage/app/public \
    && mkdir -p storage/framework/cache/data \
    && mkdir -p storage/framework/sessions \
    && mkdir -p storage/framework/views \
    && mkdir -p storage/logs \
    && mkdir -p bootstrap/cache \
    && chown -R www-data:www-data storage bootstrap/cache

# Entrypoint per inizializzazione
COPY docker-entrypoint.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/docker-entrypoint.sh

ENTRYPOINT ["docker-entrypoint.sh"]
CMD ["apache2-foreground"]</code></pre>

                        <h5 class="mt-4">2. Entrypoint Script (comune)</h5>
                        <p>Crea <code>docker-entrypoint.sh</code>. Lo script rileva automaticamente la configurazione in base alle variabili d'ambiente:</p>
                        <pre><code>#!/bin/bash
set -e

# Se .env non esiste, lo genera dalle variabili d'ambiente
if [ ! -f .env ]; then
    cp .env.example .env

    if [ "$DB_CONNECTION" = "mysql" ]; then
        # Configura MySQL
        sed -i "s/DB_CONNECTION=mysql/DB_CONNECTION=mysql/" .env
        sed -i "s/DB_HOST=.*/DB_HOST=${DB_HOST:-mysql}/" .env
        sed -i "s/DB_PORT=.*/DB_PORT=${DB_PORT:-3306}/" .env
        sed -i "s/DB_DATABASE=.*/DB_DATABASE=${DB_DATABASE:-glastree}/" .env
        sed -i "s/DB_USERNAME=.*/DB_USERNAME=${DB_USERNAME:-glastree}/" .env
        sed -i "s/DB_PASSWORD=.*/DB_PASSWORD=${DB_PASSWORD:-secret}/" .env

        # Attende che MySQL sia pronto
        echo "Attendo MySQL..."
        until php -r "new PDO('mysql:host=${DB_HOST:-mysql};dbname=${DB_DATABASE:-glastree}', '${DB_USERNAME:-glastree}', '${DB_PASSWORD:-secret}');" 2>/dev/null; do
            sleep 2
        done
        echo "MySQL pronto."
    else
        # Configura SQLite
        sed -i 's/DB_CONNECTION=mysql/DB_CONNECTION=sqlite/' .env
        sed -i 's/DB_HOST=.*//' .env
        sed -i 's/DB_PORT=.*//' .env
        sed -i 's/DB_DATABASE=.*/DB_DATABASE=\/var\/www\/html\/database\/database.sqlite/' .env
        sed -i 's/DB_USERNAME=.*//' .env
        sed -i 's/DB_PASSWORD=.*//' .env

        touch database/database.sqlite
        chmod 664 database/database.sqlite
    fi

    # Genera APP_KEY
    php artisan key:generate --force
fi

# Esegui migration e seed se il database e vuoto
if [ ! -f .db_initialized ]; then
    php artisan migrate --force
    php artisan db:seed --force
    touch .db_initialized
fi

# Configura storage link
php artisan storage:link --force 2>/dev/null || true

exec "$@"</code></pre>
                        <pre><code>chmod +x docker-entrypoint.sh</code></pre>

                        <h5 class="mt-4">3. Seed Base Dati (comune)</h5>
                        <p>Per includere tipologie documenti, tipologie eventi e ruoli, crea un seeder dedicato:</p>
                        <pre><code>php artisan make:seeder DockerBaseDataSeeder</code></pre>
                        <p>Contenuto di <code>database/seeders/DockerBaseDataSeeder.php</code>:</p>
                        <pre><code>&lt;?php

declare(strict_types=1);

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class DockerBaseDataSeeder extends Seeder
{
    public function run(): void
    {
        // Tipologie Documenti
        $tipologieDoc = ['documento', 'avatar', 'galleria', 'statuto', 'programma', 'locandina', 'altro'];
        foreach ($tipologieDoc as $ord => $nome) {
            DB::table('tipologie_documenti')->updateOrInsert(
                ['nome' => $nome],
                ['descrizione' => ucfirst($nome), 'ordine' => $ord + 1, 'attiva' => true]
            );
        }

        // Tipologie Eventi
        $tipologieEventi = [
            ['nome' => 'catechesi', 'descrizione' => 'Catechesi'],
            ['nome' => 'liturgia', 'descrizione' => 'Liturgia'],
            ['nome' => 'animazione', 'descrizione' => 'Animazione'],
            ['nome' => 'formazione', 'descrizione' => 'Formazione'],
            ['nome' => 'incontro', 'descrizione' => 'Incontro'],
            ['nome' => 'riunione', 'descrizione' => 'Riunione'],
            ['nome' => 'festa', 'descrizione' => 'Festa'],
            ['nome' => 'altro', 'descrizione' => 'Altro'],
        ];
        foreach ($tipologieEventi as $ord => $t) {
            DB::table('tipologie_eventi')->updateOrInsert(
                ['nome' => $t['nome']],
                ['descrizione' => $t['descrizione'], 'ordine' => $ord + 1, 'attiva' => true]
            );
        }

        // Ruoli
        $ruoli = ['presidente', 'vicepresidente', 'segretario', 'tesoriere', 'consigliere', 'volontario', 'socio', 'altro'];
        foreach ($ruoli as $ord => $nome) {
            DB::table('ruoli')->updateOrInsert(
                ['nome' => $nome],
                ['descrizione' => ucfirst($nome), 'ordine' => $ord + 1, 'attiva' => true]
            );
        }
    }
}</code></pre>
                        <p>Registralo in <code>database/seeders/DatabaseSeeder.php</code>:</p>
                        <pre><code>$this->call([
    // ... altri seeder ...
    DockerBaseDataSeeder::class,
]);</code></pre>

                        <h5 class="mt-4">4. Docker Compose</h5>

                        <h6 class="text-info"><i class="fas fa-database mr-1"></i> Opzione A — SQLite (leggero)</h6>
                        <pre><code>services:
  glastree:
    build: .
    ports:
      - "8080:80"
    volumes:
      - glastree_storage:/var/www/html/storage
      - glastree_db:/var/www/html/database
    environment:
      - APP_ENV=production
      - APP_DEBUG=false
      - APP_URL=http://localhost:8080
      - DB_CONNECTION=sqlite

volumes:
  glastree_storage:
  glastree_db:</code></pre>

                        <h6 class="mt-3 text-success"><i class="fas fa-server mr-1"></i> Opzione B — MySQL (standard)</h6>
                        <pre><code>services:
  glastree:
    build: .
    ports:
      - "8080:80"
    volumes:
      - glastree_storage:/var/www/html/storage
    depends_on:
      mysql:
        condition: service_healthy
    environment:
      - APP_ENV=production
      - APP_DEBUG=false
      - APP_URL=http://localhost:8080
      - DB_CONNECTION=mysql
      - DB_HOST=mysql
      - DB_PORT=3306
      - DB_DATABASE=glastree
      - DB_USERNAME=glastree
      - DB_PASSWORD=secret

  mysql:
    image: mysql:8.0
    volumes:
      - mysql_data:/var/lib/mysql
    environment:
      - MYSQL_DATABASE=glastree
      - MYSQL_USER=glastree
      - MYSQL_PASSWORD=secret
      - MYSQL_ROOT_PASSWORD=root_secret
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      interval: 5s
      timeout: 3s
      retries: 10

volumes:
  glastree_storage:
  mysql_data:</code></pre>

                        <h5 class="mt-4">5. Build e avvio</h5>
                        <p>Assicurati di essere nella cartella del progetto (ottenuta via <code>git clone</code> o estraendo il ZIP), poi:</p>
                        <pre><code># Costruisci l'immagine (comune)
docker build -t glastree:latest .

# Avvia con SQLite
docker compose -f docker-compose.yml up -d

# Oppure avvia con MySQL
# docker compose -f docker-compose.mysql.yml up -d

# Apri nel browser
open http://localhost:8080</code></pre>

                        <h5 class="mt-4">6. Primo accesso</h5>
                        <p>Al primo avvio, l'entrypoint esegue automaticamente migration e seed. Troverai gia popolati:</p>
                        <ul>
                            <li><strong>Tipologie Documenti:</strong> documento, avatar, galleria, statuto, programma, locandina, altro</li>
                            <li><strong>Tipologie Eventi:</strong> catechesi, liturgia, animazione, formazione, incontro, riunione, festa, altro</li>
                            <li><strong>Ruoli:</strong> presidente, vicepresidente, segretario, tesoriere, consigliere, volontario, socio, altro</li>
                        </ul>
                        <p>Dovrai creare il primo utente amministratore via CLI:</p>
                        <pre><code>docker exec -it glastree php artisan tinker --execute="
\$u = new \App\Models\User;
\$u->name = 'Amministratore';
\$u->email = 'admin@esempio.it';
\$u->password = bcrypt('password-forte');
\$u->is_admin = true;
\$u->permissions = ['individui' => 2, 'gruppi' => 2, 'eventi' => 2, 'documenti' => 2, 'mailing' => 2, 'viste' => 2, 'report' => 2, 'settings' => 2];
\$u->save();
echo 'Utente creato con successo!';
"</code></pre>

                        <div class="callout callout-warning mt-4">
                            <h6><i class="fas fa-exclamation-triangle"></i> Note importanti</h6>
                            <ul class="mb-0">
                                <li><strong>Persistenza:</strong> i volumi Docker preservano storage e database tra i riavvii</li>
                                <li><strong>APP_KEY:</strong> viene generata al primo avvio — se elimini i volumi, la perdi e i dati criptati diventano inaccessibili</li>
                                <li><strong>MySQL in produzione:</strong> imposta password sicure per <code>MYSQL_PASSWORD</code> e <code>MYSQL_ROOT_PASSWORD</code></li>
                                <li><strong>File compose separati:</strong> puoi mantenere entrambi i file (<code>docker-compose.yml</code> per SQLite, <code>docker-compose.mysql.yml</code> per MySQL) e scegliere con <code>-f</code></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Installazione --}}
            <div class="tab-pane" id="help-installazione">
                <div class="card card-outline card-dark">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-terminal mr-2"></i> Guida all'Installazione</h3>
                    </div>
                    <div class="card-body">
                        <h5>Panoramica</h5>
                        <p>L'installazione avviene tramite l'interattivo <code>install.php</code> che guida passo-passo. Supporta due modalita:</p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="callout callout-info">
                                    <h6><i class="fas fa-rocket"></i> Fresh Install</h6>
                                    <p class="mb-0">Installa l'applicazione da zero su un nuovo server: crea il database, esegue le migration, popola i dati di base e crea l'amministratore.</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="callout callout-success">
                                    <h6><i class="fas fa-upload"></i> Restore da Backup</h6>
                                    <p class="mb-0">Ripristina un'installazione esistente da un file ZIP di backup: importa il database, ripristina i documenti e la configurazione.</p>
                                </div>
                            </div>
                        </div>

                        <h5 class="mt-4">Requisiti del Server</h5>
                        <table class="table table-sm table-bordered">
                            <thead><tr><th>Componente</th><th>Versione Minima</th><th>Note</th></tr></thead>
                            <tbody>
                                <tr><td>Web Server</td><td>Apache 2.4+</td><td>Con mod_rewrite abilitato</td></tr>
                                <tr><td>PHP</td><td>8.2+ (consigliato 8.4)</td><td>Estensioni: pdo_mysql, mbstring, xml, curl, zip, gd, fileinfo</td></tr>
                                <tr><td>MySQL / MariaDB</td><td>MySQL 8.0+ / MariaDB 10.5+</td><td>Supporto utf8mb4</td></tr>
                                <tr><td>Composer</td><td>2.x</td><td>Per gestione dipendenze PHP</td></tr>
                                <tr><td>Node.js / npm</td><td>Node 20+ / npm 10+</td><td>Per compilazione asset frontend (opzionale se precompilati)</td></tr>
                            </tbody>
                        </table>

                        <h5 class="mt-4">Installazione Passo-Passo</h5>

                        <h6>Passo 1: Preparare il server LAMP</h6>
                        <pre><code>sudo apt update && sudo apt upgrade -y

sudo apt install -y apache2 mariadb-server php8.4 php8.4-cli \
  php8.4-mysql php8.4-xml php8.4-mbstring php8.4-curl \
  php8.4-zip php8.4-bcmath php8.4-gd php8.4-intl \
  composer git unzip

sudo a2enmod rewrite
sudo systemctl restart apache2</code></pre>

                        <h6>Passo 2: Ottenere l'applicazione</h6>
                        <div class="callout callout-info py-2">
                            <i class="fas fa-info-circle"></i>
                            Puoi clonare il repository con git oppure estrarre il file ZIP ricevuto nella cartella <code>/var/www/glastree</code>.
                        </div>
                        <pre><code>cd /var/www

# Opzione A — Git clone
git clone &lt;URL_REPOSITORY&gt; glastree

# Opzione B — ZIP (se non hai git)
# unzip /percorso/del/glastree.zip -d glastree

cd glastree</code></pre>

                        <h6>Passo 3: Eseguire l'installer</h6>
                        <p>Lancerai l'installer interattivo che ti guidera attraverso tutte le fasi:</p>
                        <pre><code>php install.php</code></pre>
                        <p>L'installer ti chiedera:</p>
                        <ol>
                            <li><strong>Modalità</strong>: Fresh Install (Apache/Docker) o Restore da Backup</li>
                            <li><strong>Parametri generali</strong>: nome sito, amministratore (nome, email, password), URL pubblico</li>
                            <li><strong>Database</strong>: MySQL (host, porta, nome, utente, password) o SQLite</li>
                        </ol>
                        <p>L'installer esegue automaticamente:</p>
                        <ul>
                            <li>Generazione <code>.env</code> e <code>APP_KEY</code></li>
                            <li>Creazione del database</li>
                            <li><code>composer install</code> e registrazione pacchetti</li>
                            <li>Migration e seed dei dati di base</li>
                            <li>Creazione dell'utente amministratore</li>
                            <li>Compilazione asset frontend (se npm disponibile)</li>
                            <li>Impostazione permessi cartelle</li>
                        </ul>
                        <div class="callout callout-info">
                            <h6><i class="fas fa-info-circle"></i> Docker</h6>
                            <p>Se scegli la modalita Docker, l'installer builda l'immagine, avvia i container e crea l'admin all'interno del container.</p>
                        </div>
                        <div class="callout callout-success">
                            <h6><i class="fas fa-upload"></i> Restore da Backup</h6>
                            <p>Se scegli Restore, l'installer ti chiedera il percorso del file ZIP di backup, ripristinera il database, i file e la configurazione.</p>
                        </div>

                        <h6 class="mt-4">Passo 4: Configurare Apache (solo modalita Fresh Install)</h6>
                        <pre><code>sudo tee /etc/apache2/sites-available/glastree.conf &lt;&lt;APACHE
&lt;VirtualHost *:80&gt;
    ServerName glastree.esempio.it
    DocumentRoot /var/www/glastree/public

    &lt;Directory /var/www/glastree/public&gt;
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    &lt;/Directory&gt;

    ErrorLog \${APACHE_LOG_DIR}/glastree_error.log
    CustomLog \${APACHE_LOG_DIR}/glastree_access.log combined
&lt;/VirtualHost&gt;
APACHE

sudo a2dissite 000-default.conf
sudo a2ensite glastree.conf
sudo systemctl reload apache2</code></pre>
                            <i class="fas fa-exclamation-triangle"></i>
                            <strong>Importante:</strong> Il restore da backup richiede che tu abbia un file ZIP generato dalla pagina <strong>Admin → Backup</strong> del server originale. Estrai manualmente il contenuto seguendo la struttura del progetto.
                        </div>

                        <h5 class="mt-4">Cosa succede durante l'installazione</h5>
                        <p>I comandi <code>php artisan migrate --seed</code> eseguono:</p>
                        <ol>
                            <li>Genera <code>APP_KEY</code> per la crittografia (gia eseguito al passo 5)</li>
                            <li>Esegue tutte le migration per creare le tabelle del database</li>
                            <li>Popola i dati di base (diocesi, comuni, ruoli, preset)</li>
                            <li>Crea il collegamento <code>storage &rarr; public/storage</code></li>
                            <li>Crea l'utente amministratore con i permessi completi</li>
                        </ol>

                        <h5 class="mt-4">Restore da Backup</h5>
                        <p>Il backup ZIP generato dalla pagina <strong>Admin &rarr; Backup</strong> contiene un dump SQL e i file dei documenti. Per ripristinare:</p>
                        <ul>
                            <li>Estrai il file ZIP in una cartella temporanea</li>
                            <li>Importa il database dal file SQL (<code>mysql -u root -p glastree &lt; backup/database.sql</code>)</li>
                            <li>Copia i file in <code>storage/app/</code> per ripristinare i documenti</li>
                            <li>Copia il file <code>.env</code> dal backup (modifica le credenziali DB per il nuovo server)</li>
                            <li>Esegui <code>php artisan key:generate</code> se la <code>APP_KEY</code> del backup non è utilizzabile</li>
                        </ul>

                        <h5 class="mt-4">Dopo l'Installazione</h5>
                        <ol>
                            <li><strong>Configura SSL</strong> con Let's Encrypt:
                                <pre><code>sudo apt install -y certbot python3-certbot-apache
sudo certbot --apache -d glastree.esempio.it</code></pre>
                            </li>
                            <li><strong>Accedi</strong> con le credenziali amministratore create durante l'installazione</li>
                            <li><strong>Configura l'applicazione</strong> in Impostazioni:
                                <ul>
                                    <li>Nome applicazione e logo</li>
                                    <li>Email (SMTP per invio, IMAP per ricezione)</li>
                                    <li>Repository remoti (Google Drive, Nextcloud)</li>
                                </ul>
                            </li>
                            <li><strong>Crea utenti</strong> dal pannello Admin &rarr; Utenti</li>
                            <li><strong>Configura il cron</strong> per backup automatico e sync email:
                                <pre><code>sudo crontab -u www-data -e
# Inserisci:
* * * * * cd /var/www/glastree && php artisan schedule:run >> /dev/null 2>&1</code></pre>
                            </li>
                        </ol>

                        <h5 class="mt-4">Risoluzione Problemi</h5>
                        <div class="callout callout-danger">
                            <h6>Errore "500 | Server Error" dopo l'installazione</h6>
                            <p>Probabilmente mancano permessi sulle cartelle <code>storage</code> o <code>bootstrap/cache</code>:</p>
                            <pre><code>sudo chown -R www-data:www-data storage bootstrap/cache
sudo chmod -R 775 storage bootstrap/cache</code></pre>
                        </div>
                        <div class="callout callout-danger">
                            <h6>Errore "No application encryption key"</h6>
                            <p>APP_KEY non generata. Nella cartella dell'app:</p>
                            <pre><code>php artisan key:generate</code></pre>
                        </div>
                        <div class="callout callout-warning">
                            <h6>mod_rewrite non funziona</h6>
                            <p>Se le rotte restituiscono 404, verifica che Apache abbia AllowOverride:</p>
                            <pre><code>sudo a2enmod rewrite
# Nel VirtualHost: AllowOverride All
sudo systemctl reload apache2</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.nav-pills .nav-link { border-radius: 0; }
.nav-pills .nav-link.active { background-color: #007bff; }
.callout { border-left: 3px solid; padding: 12px 16px; margin: 16px 0; background: #f8f9fa; }
.callout-info { border-color: #17a2b8; }
.callout-danger { border-color: #dc3545; }
.callout-warning { border-color: #ffc107; }
</style>
@endsection