
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestionale Didattico Locale</title>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>

    <style>
    
        /* STILE CSS: Layout e Aspetto */
        body { font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
        
        /* Layout a due zone: Maschera Input (Top) e Dati (Bottom) */
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        
        /* Sezione Maschera Inserimento */
        .input-mask {
            background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px; border-left: 5px solid #2ecc71;
        }
        
        .input-mask h2 { margin-top: 0; color: #333; }

        .form-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;
        }

        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 0.9em; }
        .form-group input, .form-group select { 
            width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;
        }

        /* Pulsanti */
        .btn-group { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
        button {
            padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; color: white; font-weight: bold;
        }
        .btn-add { background-color: #2ecc71; } /* Verde */
        .btn-csv { background-color: #3498db; } /* Blu */
        .btn-pdf { background-color: #e74c3c; } /* Rosso */
        .btn-mail { background-color: #f1c40f; color: #333; } /* Giallo */
        .btn-save { background-color: #9b59b6; } /* Viola - DB */
        
        /* Sezione Tabella Dati */
        .data-view {
            background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #f8f9fa; color: #333; }
        tr:hover { background-color: #f1f1f1; }

        /* Colore per le operazioni */
        .op-entrata { color: green; font-weight: bold; }
        .op-uscita { color: red; font-weight: bold; }
        .op-garanzia { color: orange; font-weight: bold; }

        /* Area Grafico (nascosta di default) */
        #chartContainer { margin-top: 20px; display: none; height: 300px; }
        
        /* --- IL PULSANTE HOME (Fisso e Stile Coerente) --- */
.btn-top-left {
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;

display: inline-block;
padding: 10px 20px;
background-color: #007BFF; /* Blu istituzionale */
color: #ffffff !important; /* Forza il bianco */
text-decoration: none;
font-weight: bold;
font-family: Arial, sans-serif; /* Font bastoni per il bottone interfaccia */
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: background-color 0.3s;
}

.btn-top-left:hover {
background-color: #0056b3;
}
    </style>
</head>
<body>
<a href="index.html" class="btn-top-left">← Torna alla Home</a>
<br><br>
<div class="container">

    <div class="input-mask">
        <h2>Gestione Operazioni</h2>
        <div class="form-grid">
            <div class="form-group">
                <label>Data (Automatica)</label>
                <input type="date" id="inputData" readonly>
            </div>
            <div class="form-group">
                <label>Nominativo</label>
                <input type="text" id="inputNome" placeholder="Mario Rossi">
            </div>
            <div class="form-group">
                <label>Cod. Fisc / P.IVA</label>
                <input type="text" id="inputCF" placeholder="CODICE...">
            </div>
            <div class="form-group">
                <label>Operazione</label>
                <select id="inputOp">
                    <option value="Entrate">Entrate</option>
                    <option value="Uscite">Uscite</option>
                    <option value="Garanzia">Garanzia</option>
                </select>
            </div>
            <div class="form-group">
                <label>Euro (€)</label>
                <input type="number" id="inputEuro" step="0.01" placeholder="0.00">
            </div>
            <div class="form-group">
                <label>Telefono</label>
                <input type="tel" id="inputTel" placeholder="333...">
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" id="inputEmail" placeholder="email@esempio.com">
            </div>
        </div>

        <div class="btn-group">
            <button class="btn-add" onclick="aggiungiRiga()">+ Aggiungi Riga</button>
            <button class="btn-save" onclick="salvaDatabase()">💾 Salva DB su Disco</button>
            <button class="btn-save" onclick="document.getElementById('fileInput').click()">📂 Carica DB</button>
            <input type="file" id="fileInput" style="display: none;" onchange="caricaDatabase(this)">
        </div>
        
        <hr>
        
        <div class="btn-group">
            <button class="btn-csv" onclick="esportaCSV()">Esporta CSV</button>
            <button class="btn-pdf" onclick="esportaPDF()">Esporta PDF</button>
            <button class="btn-mail" onclick="generaReportMail()">📧 Report Mail & Grafici</button>
        </div>

        <div id="chartContainer">
            <canvas id="myChart"></canvas>
        </div>
    </div>

    <div class="data-view">
        <h3>Database Dati</h3>
        <table id="mainTable">
            <thead>
                <tr>
                    <th>Sel.</th>
                    <th>Data</th>
                    <th>Nominativo</th>
                    <th>CF/P.IVA</th>
                    <th>Operazione</th>
                    <th>Euro</th>
                    <th>Telefono</th>
                    <th>Email</th>
                    <th>Azioni</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                </tbody>
        </table>
    </div>

</div>

<script>
    /**
     * LOGICA JAVASCRIPT
     * Scopo: Gestione array di oggetti, manipolazione DOM, Export file.
     */

    // 1. STATO DELL'APPLICAZIONE (Il nostro Database in memoria RAM)
    let database = [];

    // Al caricamento della pagina
    window.onload = function() {
        // Imposta la data odierna nel campo input
        document.getElementById('inputData').valueAsDate = new Date();
        
        // Controlla se c'è un salvataggio precedente nel LocalStorage (memoria browser)
        const savedData = localStorage.getItem('db_gestionale_g');
        if (savedData) {
            database = JSON.parse(savedData);
            renderTable();
        }
    };

    // 2. FUNZIONE: Aggiungi Riga
    function aggiungiRiga() {
        // Recupero valori dal DOM
        const data = document.getElementById('inputData').value;
        const nome = document.getElementById('inputNome').value;
        const cf = document.getElementById('inputCF').value;
        const op = document.getElementById('inputOp').value;
        const euro = parseFloat(document.getElementById('inputEuro').value) || 0;
        const tel = document.getElementById('inputTel').value;
        const email = document.getElementById('inputEmail').value;

        // Validazione minima
        if(nome === "" || euro === 0) {
            alert("Compilare almeno Nome e Importo!");
            return;
        }

        // Creazione Oggetto Riga
        const nuovaRiga = {
            id: Date.now(), // timestamp univoco
            selezionato: false,
            data: data,
            nominativo: nome,
            codfisc: cf,
            operazione: op,
            euro: euro,
            telefono: tel,
            email: email
        };

        // Aggiorna Array e Vista
        database.push(nuovaRiga);
        salvaInLocale(); // Salva nel browser
        renderTable();   // Ridisegna tabella
        
        // Reset campi (tranne la data che resta odierna)
        document.getElementById('inputNome').value = "";
        document.getElementById('inputEuro').value = "";
    }

    // 3. FUNZIONE: Disegna Tabella (Render)
    function renderTable() {
        const tbody = document.getElementById('tableBody');
        tbody.innerHTML = ""; // Pulisce tabella attuale

        database.forEach((riga, index) => {
            // Determina classe CSS per colore operazione
            let colorClass = "";
            if(riga.operazione === "Entrate") colorClass = "op-entrata";
            else if(riga.operazione === "Uscite") colorClass = "op-uscita";
            else colorClass = "op-garanzia";

            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td><input type="checkbox" onchange="toggleSelezione(${index})" ${riga.selezionato ? 'checked' : ''}></td>
                <td>${riga.data}</td>
                <td>${riga.nominativo}</td>
                <td>${riga.codfisc}</td>
                <td class="${colorClass}">${riga.operazione}</td>
                <td>€ ${riga.euro.toFixed(2)}</td>
                <td>${riga.telefono}</td>
                <td>${riga.email}</td>
                <td><button onclick="rimuoviRiga(${index})" style="background:#e74c3c; padding:5px;">X</button></td>
            `;
            tbody.appendChild(tr);
        });
    }

    // Gestione Spunta/Selezione
    function toggleSelezione(index) {
        database[index].selezionato = !database[index].selezionato;
        salvaInLocale();
    }

    // Rimuovi riga
    function rimuoviRiga(index) {
        if(confirm("Eliminare questa riga?")) {
            database.splice(index, 1);
            salvaInLocale();
            renderTable();
        }
    }

    // 4. PERSISTENZA DATI (Simulazione DB su File)
    
    // Salva nel browser (veloce)
    function salvaInLocale() {
        localStorage.setItem('db_gestionale_g', JSON.stringify(database));
    }

    // Salva su Disco G: (Download file JSON)
    function salvaDatabase() {
        const dataStr = JSON.stringify(database, null, 2);
        const blob = new Blob([dataStr], { type: "application/json" });
        const url = URL.createObjectURL(blob);
        
        const a = document.createElement('a');
        a.href = url;
        a.download = "database_gestionale.json"; // Nome file su disco
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    // Carica da Disco G:
    function caricaDatabase(input) {
        const file = input.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onload = function(e) {
            try {
                database = JSON.parse(e.target.result);
                salvaInLocale();
                renderTable();
                alert("Database caricato con successo!");
            } catch(err) {
                alert("Errore nel file database.");
            }
        };
        reader.readAsText(file);
    }

    // 5. ESPORTAZIONE CSV
    function esportaCSV() {
        let csvContent = "data:text/csv;charset=utf-8,";
        csvContent += "Data,Nominativo,CF,Operazione,Euro,Telefono,Email\n"; // Intestazione

        database.forEach(row => {
            // Solo se selezionato? Se nessuno selezionato, esporta tutto.
            // Qui esportiamo tutto per semplicità, oppure filtriamo:
            // const rowsToExport = database.filter(r => r.selezionato).length > 0 ? database.filter(r => r.selezionato) : database;
            
            let rowStr = `${row.data},${row.nominativo},${row.codfisc},${row.operazione},${row.euro},${row.telefono},${row.email}`;
            csvContent += rowStr + "\n";
        });

        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "export_dati.csv");
        document.body.appendChild(link);
        link.click();
    }

    // 6. ESPORTAZIONE PDF (Libreria jsPDF)
    function esportaPDF() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();

        doc.text("Report Gestionale", 14, 15);
        
        // Colonne e righe per autoTable
        const tableColumn = ["Data", "Nominativo", "Operazione", "Euro"];
        const tableRows = [];

        database.forEach(row => {
            const rowData = [row.data, row.nominativo, row.operazione, row.euro.toFixed(2)];
            tableRows.push(rowData);
        });

        doc.autoTable({
            head: [tableColumn],
            body: tableRows,
            startY: 20,
        });

        doc.save("report_gestionale.pdf");
    }

    // 7. GRAFICI E MAIL (Reportistica)
    function generaReportMail() {
        // A. Calcolo Totali per il grafico
        let totEntrate = 0;
        let totUscite = 0;
        let totGaranzia = 0;

        database.forEach(r => {
            if(r.operazione === "Entrate") totEntrate += r.euro;
            if(r.operazione === "Uscite") totUscite += r.euro;
            if(r.operazione === "Garanzia") totGaranzia += r.euro;
        });

        // B. Generazione Grafico a Torta (Chart.js)
        document.getElementById('chartContainer').style.display = 'block';
        const ctx = document.getElementById('myChart').getContext('2d');
        
        // Distruggiamo il grafico precedente se esiste per rifarlo
        if(window.myPieChart) window.myPieChart.destroy();

        window.myPieChart = new Chart(ctx, {
            type: 'pie', // O 'bar'
            data: {
                labels: ['Entrate', 'Uscite', 'Garanzia'],
                datasets: [{
                    data: [totEntrate, totUscite, totGaranzia],
                    backgroundColor: ['#2ecc71', '#e74c3c', '#f1c40f']
                }]
            },
            options: { responsive: true, maintainAspectRatio: false }
        });

        // C. Creazione Mailto (Simulazione invio mail)
        // Nota didattica: Non si può allegare l'immagine del grafico direttamente via mailto standard HTML.
        // Si inviano i dati testuali.
        
        const subject = "Report Gestionale Giornaliero";
        const body = `Buongiorno,%0D%0A%0D%0AEcco il riepilogo operazioni:%0D%0A` +
                     `- Totale Entrate: € ${totEntrate.toFixed(2)}%0D%0A` +
                     `- Totale Uscite: € ${totUscite.toFixed(2)}%0D%0A` +
                     `- Totale Garanzia: € ${totGaranzia.toFixed(2)}%0D%0A%0D%0A` +
                     `Il grafico è visibile sulla dashboard locale.`;

        window.location.href = `mailto:?subject=${subject}&body=${body}`;
    }

</script>

</body>
</html>