Creazione Preventivi Online | Serv by @Nicole00 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

maxImposta il valore numerico o temporale massimo per un elemento input
srcIndica la provenienza di una risorsa esterna (tramite URL).
<abbr>Inserisce abbreviazioni e acronimi
<textarea>Area di testo libero espandibile per form HTML
hreflangConsente di dichiarare la lingua del documento collegato.
<head>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

spese universitarie

Esercizio tabella

La Ghigliottina | Matteo Greco &

prova ennesima tabella

tabella delle matricole

Coppa del mondo

Esercizio sui cicli

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<html lang="en"><head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Creazione Preventivi Online | Servizio Gratuito</title>

    <meta name="keywords" content="Creazione Preventivo Online, Preventivi Gratuiti, Generatore di Preventivi, Servizio Aziendale, Modello preventivo">

    <meta name="description" content="Crea preventivi online in modo semplice e gratuito con il nostro servizio. Il miglior generatore di preventivi per le tue esigenze aziendali.">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">

    <script async="" src="https://www.clarity.ms/s/0.7.53/clarity.js"></script><script async="" src="https://www.clarity.ms/tag/jf8njz9hw0"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/pdfmake.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/vfs_fonts.js"></script>


<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "jf8njz9hw0");
</script>
<style>

        body {

            background-color: #f7f7f7; /* Sfondo più morbido */

            font-family: Arial, sans-serif;

        }

    

        header {

            background-color: #ffffff;

            padding: 15px 0;

            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

        }

    

        h1, h2 {

            color: #4A90E2; /* Sfumatura di blu più leggera */

        }

    

        h1 {

            font-size: 2.5rem;

        }

    

        p {

            color: #555555; /* Grigio più morbido per il testo */

        }

    

        .cta-button {

            background-color: #3498db; /* Colore meno saturo per i pulsanti */

            padding: 10px 20px;

            color: #fff;

            border-radius: 25px;

            transition: background-color 0.3s;

        }

    

        .cta-button:hover {

            background-color: #2980b9; /* Tono leggermente più scuro per l'hover */

        }

    

        .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 20px;

        }

    

        .form-section {

            background-color: #ffffff;

            padding: 30px;

            border-radius: 8px;

            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

        }

    

        input[type="text"], textarea {

            border: 1px solid #cccccc;

            padding: 10px;

            width: 100%;

            border-radius: 4px;

            margin: 5px 0;

            transition: border-color 0.2s;

        }

    

        input[type="text"]:focus, textarea:focus {

            border-color: #4A90E2;

        }

    

        .btn {

            background-color: #3498db;

            padding: 10px 20px;

            color: #fff;

            border-radius: 25px;

            cursor: pointer;

            transition: background-color 0.3s;

        }

    

        .btn:hover {

            background-color: #2980b9;

        }

    

        footer {

            background-color: #f7f7f7;

            padding: 20px 0;

            text-align: center;

            color: #777777;

        }

    

        footer a {

            color: #4A90E2;

            text-decoration: none;

            transition: color 0.2s;

        }

    

        footer a:hover {

            color: #2980b9;

        }

    </style></head>

 

<body>

    <header class="bg-gray-50 shadow-sm py-4">

        <div class=" mx-auto flex justify-between items-center px-5 md:px-10 lg:px-20">

            <!-- Logo o Titolo dell'Header -->

            <h1 class="text-2xl font-bold text-blue-600">Creare Preventivi Online</h1>

            

            <!-- Menu di navigazione -->

            <nav>

                <ul class="flex space-x-6">

                    <li>

                        <a href="https://www.wincoge.com/download.aspx" class="text-gray-700 hover:text-blue-600 transition duration-300">

                           Registratore di cassa per aziende

                        </a>

                    </li>

                    <li>

                        <a href="https://www.wincoge2.it/" class="text-gray-700 hover:text-blue-600 transition duration-300">

                           Software Gestionale di contabilità

                        </a>

                    </li>

                    <li>

                        <a href="https://wincoge2.it/Contattaci.aspx" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition duration-300">

                           Contattaci

                        </a>

                    </li>

                </ul>

            </nav>

        </div>

    </header>











<main class="bg-white py-10 px-5 md:px-10 lg:px-20 shadow-md rounded-lg mb-10">

    <div class="container mx-auto">

        <div class="text-center">

            <!-- Titolo principale -->

            <h1 class="text-4xl font-bold text-blue-600 mb-4 leading-tight">Creazione di un Preventivo Online</h1>

            

            <!-- Paragrafo introduttivo -->

            <p class="text-lg text-gray-700 leading-relaxed mb-6">

                Se stai cercando un modo semplice per gestire i tuoi preventivi, sei nel posto giusto. Il nostro 

                <strong class="text-blue-600">software per preventivi</strong> ti permette di creare preventivi professionali in pochi passi. 

                Con il nostro strumento, puoi fare tutto, dalla <strong class="text-blue-600">creazione di un modello preventivo</strong> personalizzato 

                alla generazione di <strong class="text-blue-600">preventivi online gratuiti</strong> per i tuoi clienti.

            </p>

            

            <!-- Sottotitolo -->

            <h2 class="text-2xl font-semibold text-gray-800 mb-4">Come Fare un Preventivo</h2>

            

            <!-- Paragrafo esplicativo -->

            <p class="text-lg text-gray-700 leading-relaxed">

                <strong class="text-blue-600">Come scrivere un preventivo</strong> che impressioni i tuoi clienti? 

                La <strong class="text-blue-600">creazione di un preventivo online</strong> non è mai stata così facile. 

                Basta che inserisci i dati e subito puoi scaricare il preventivo da mandare al tuo cliente.

            </p>

        </div>

    </div>

    <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-xl overflow-hidden border border-gray-200">

        <header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-6 text-center text-3xl font-bold tracking-wide shadow-sm rounded-t-xl">

            Creazione Preventivo

        </header>



        <div class="p-8 space-y-8">

            <!-- Selezione del Template -->

           

            <div class="flex justify-center">

                <label id="logo-label" class="bg-blue-600 text-white px-5 py-3 rounded-full cursor-pointer hover:bg-blue-700 transition">

                    Carica Logo

                    <input id="logo-input" type="file" accept="image/*" class="hidden">

                </label>

                <img id="logo-preview" src="" class="h-24 object-contain mb-4 rounded shadow-md hidden" alt="Logo">

            </div>

            <div class="flex justify-center mt-2">

                <button id="cambia-logo-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-full transition hidden">Cambia Logo</button>

            </div>



            <div class="flex space-x-4">

                <input id="numero-preventivo" type="text" placeholder="Numero Preventivo" class="w-full border border-gray-300 rounded p-3 focus:outline-none focus:ring-2 focus:ring-blue-500">

                <input id="intestazione" type="text" placeholder="Intestazione (Nome del Cliente)" class="w-full border border-gray-300 rounded p-3 focus:outline-none focus:ring-2 focus:ring-blue-500">

            </div>



            <h2 class="text-xl font-semibold text-gray-800 mt-6">Dati della Società</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                <input id="societa-nome" type="text" placeholder="Nome della Società" class="w-full border border-gray-300 rounded p-3">

                <input id="societa-indirizzo" type="text" placeholder="Indirizzo" class="w-full border border-gray-300 rounded p-3">

                <input id="societa-telefono" type="text" placeholder="Telefono" class="w-full border border-gray-300 rounded p-3">

                <input id="societa-email" type="text" placeholder="Email" class="w-full border border-gray-300 rounded p-3">

                <input id="societa-partitaiva" type="text" placeholder="Partita IVA" class="w-full border border-gray-300 rounded p-3">

            </div>



            <h2 class="text-xl font-semibold text-gray-800 mt-6">Righe Preventivo</h2>

            <div class="overflow-x-auto">

                <table id="table-righe" class="w-full border-collapse bg-white rounded-lg">

                    <thead>

                        <tr class="bg-blue-100 text-gray-800 text-left">

                            <th class="border-b p-4">Descrizione</th>

                            <th class="border-b p-4 text-center">Quantità</th>

                            <th class="border-b p-4 text-center">Prezzo Unitario</th>

                            <th class="border-b p-4 text-center">Sconto (%)</th>

                            <th class="border-b p-4 text-center">IVA (%)</th>

                            <th class="border-b p-4 text-center">Totale Riga</th>

                            <th class="border-b p-4 text-center">Azioni</th>

                        </tr>

                    </thead>

                    <tbody></tbody>

                </table>



                <div class="flex justify-end mt-4">

                    <button id="add-row" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full flex items-center shadow-md transform transition duration-300 hover:scale-105">

                        <i class="fas fa-plus-circle mr-2"></i>Aggiungi Riga

                    </button>

                </div>



                <div class="flex justify-end mt-4 space-x-4">

                    <div class="text-right">

                        <div class="font-bold">Totale Imponibile:</div>

                        <div class="font-bold">Totale IVA:</div>

                        <div class="font-bold">Totale Complessivo:</div>

                    </div>

                    <div class="text-right">

                        <div id="totale-imponibile" class="font-bold">0,00 €</div>

                        <div id="totale-iva" class="font-bold">0,00 €</div>

                        <div id="totale-complessivo" class="font-bold">0,00 €</div>

                    </div>

                </div>

            </div>



            <h2 class="text-xl font-semibold text-gray-800 mt-6">Opzioni di Pagamento</h2>

            <div class="flex flex-col space-y-2 pl-4">

                <label><input type="checkbox" id="carta-credito" class="mr-2"> Carta di Credito</label>

                <input type="text" id="dettagli-carta" placeholder="Dettagli carta di credito" class="w-full border border-gray-300 rounded p-3">

                

                <label><input type="checkbox" id="paypal" class="mr-2"> PayPal</label>

                <input type="text" id="dettagli-paypal" placeholder="Indirizzo PayPal" class="w-full border border-gray-300 rounded p-3">



                <label><input type="checkbox" id="bonifico" class="mr-2"> Bonifico Bancario</label>

                <input type="text" id="dettagli-bonifico" placeholder="Dettagli Bonifico Bancario" class="w-full border border-gray-300 rounded p-3">

            </div>



            <h2 class="text-xl font-semibold text-gray-800 mt-6">Offerta Personalizzata</h2>

            <textarea id="offerta-personalizzata" class="w-full border border-gray-300 rounded p-3" placeholder="Inserisci un'offerta personalizzata..."></textarea>



            <h2 class="text-xl font-semibold text-gray-800 mt-6">Condizioni e Termini</h2>

            <textarea id="condizioni" class="w-full border border-gray-300 rounded p-3" placeholder="Inserisci condizioni e termini..."></textarea>



            <h2 class="text-xl font-semibold text-gray-800 mt-6">Scadenza Preventivo</h2>

            <input type="date" id="scadenza-preventivo" class="w-full border border-gray-300 rounded p-3">

            <!-- Seleziona il Template -->

<h2 class="text-xl font-semibold text-gray-800 mt-6">Seleziona il Template</h2>

<div class="grid grid-cols-2 gap-4 mt-4">

<label class="flex items-center cursor-pointer bg-white shadow-md border border-gray-300 rounded-lg px-4 py-2 transition hover:bg-blue-50">

    <input type="radio" name="template" value="classico" checked="" class="text-blue-600 focus:ring-2 focus:ring-blue-500">

    <span class="ml-3 font-medium text-gray-700">Classico</span>

</label>

<label class="flex items-center cursor-pointer bg-white shadow-md border border-gray-300 rounded-lg px-4 py-2 transition hover:bg-blue-50">

    <input type="radio" name="template" value="moderno" class="text-blue-600 focus:ring-2 focus:ring-blue-500">

    <span class="ml-3 font-medium text-gray-700">Moderno</span>

</label>

<label class="flex items-center cursor-pointer bg-white shadow-md border border-gray-300 rounded-lg px-4 py-2 transition hover:bg-blue-50">

    <input type="radio" name="template" value="minimalista" class="text-blue-600 focus:ring-2 focus:ring-blue-500">

    <span class="ml-3 font-medium text-gray-700">Minimalista</span>

</label>

<label class="flex items-center cursor-pointer bg-white shadow-md border border-gray-300 rounded-lg px-4 py-2 transition hover:bg-blue-50">

    <input type="radio" name="template" value="elegante" class="text-blue-600 focus:ring-2 focus:ring-blue-500">

    <span class="ml-3 font-medium text-gray-700">Elegante</span>

</label>

</div>



<!-- Personalizza Colori -->

<h2 class="text-xl font-semibold text-gray-800 mt-6">Personalizza Colori</h2>

<div class="flex space-x-4 mt-4 items-center">

<div class="flex items-center bg-white shadow-md border border-gray-300 rounded-lg p-3 transition hover:bg-blue-50">

    <label for="colore-titolo" class="font-medium text-gray-700 mr-2">Colore Titolo:</label>

    <input id="colore-titolo" type="color" value="#2E4053" class="w-10 h-10 border-0 rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

<div class="flex items-center bg-white shadow-md border border-gray-300 rounded-lg p-3 transition hover:bg-blue-50">

    <label for="colore-sottotitolo" class="font-medium text-gray-700 mr-2">Colore Sottotitolo:</label>

    <input id="colore-sottotitolo" type="color" value="#34495E" class="w-10 h-10 border-0 rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

<!-- Pulsante per tornare ai valori di default -->

<button id="reset-colori" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-full transition focus:outline-none">

    Torna a valori di default

</button>

</div>

            <div class="flex justify-end mt-6">

                <button onclick="generaPDF()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full shadow-md transition duration-300 transform hover:scale-105">

                    Genera PDF

                </button>

            </div>

        </div>

    </div>



</main>



    <div class=" mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 px-5 md:px-10 lg:px-20">

        <!-- Colonna Informazioni -->

        <div class="footer-column">

            <h4 class="text-lg font-semibold mb-4">Informazioni</h4>

            <p class="text-sm">WinCoge Evolution</p>

            <p class="text-sm">P. IVA 07016630019</p>

            <p class="text-sm">Corso Torino 18, Avigliana (TO)</p>

            <p class="text-sm">Fondata nel 1991 a Torino</p>

        </div>

        

        <!-- Colonna Altri Software -->

        <div class="footer-column">

            <h4 class="text-lg font-semibold mb-4">Altri software</h4>

            <ul class="text-sm space-y-2">

                <li><a href="https://www.wincoge.com" class="hover:text-blue-400 transition">WinScontrino - Registratore di cassa</a></li>

                <li><a href="https://www.wincoge2.it" class="hover:text-blue-400 transition">Software gestionale</a></li>

                <li><a href="https://www.wincoge2.it/Software%20Ore%20Produzione" class="hover:text-blue-400 transition">Software ore dipendenti</a></li>

                <li><a href="https://www.wincoge2.it/Programma%20cespiti" class="hover:text-blue-400 transition">Software per i cespiti aziendali</a></li>

            </ul>

        </div>

        

        <!-- Colonna Contatti -->

        <div class="footer-column text-center md:text-left">

            <h4 class="text-lg font-semibold mb-4">Contatti</h4>

            <p class="text-sm"><a href="tel:0119563121" class="hover:text-blue-400 transition">011 956 3121</a></p>

            <p class="text-sm"><a href="mailto:support@wincoge2.it" class="hover:text-blue-400 transition">support@wincoge2.it</a></p>

            <p class="text-sm"><a href="#" class="hover:text-blue-400 transition">Richiedi contatto telefonico</a></p>

            <p class="text-sm"><a href="#" class="hover:text-blue-400 transition">Form di Contatto</a></p>

        </div>

        

        <!-- Colonna Copyright -->

        <div class="footer-column text-center md:text-left">

            <p class="text-sm mt-4 md:mt-0">© Copyright - WinCoge Evolution - Tutti i diritti riservati.</p>

        </div>

    </div>

<script>

  

// Definizione dei colori di default per ogni template

const coloriTemplate = {

classico: { titolo: "#2E4053", sottotitolo: "#34495E" },

moderno: { titolo: "#4A90E2", sottotitolo: "#7FB3D5" },

minimalista: { titolo: "#000000", sottotitolo: "#555555" },

elegante: { titolo: "#2C3E50", sottotitolo: "#BDC3C7" }

};



// Funzione per aggiornare i colori in base al template selezionato

function aggiornaColoriTemplate() {

const templateSelezionato = document.querySelector('input[name="template"]:checked').value;



// Imposta i colori di default in base al template selezionato

const colori = coloriTemplate[templateSelezionato];

document.getElementById('colore-titolo').value = colori.titolo;

document.getElementById('colore-sottotitolo').value = colori.sottotitolo;

}



// Aggiungi un event listener per aggiornare i colori quando cambia il template

document.querySelectorAll('input[name="template"]').forEach(radio => {

radio.addEventListener('change', aggiornaColoriTemplate);

});



// Imposta i colori di default all'avvio

document.addEventListener('DOMContentLoaded', aggiornaColoriTemplate);



// Aggiungi un event listener per il pulsante "Torna a valori di default"

document.getElementById('reset-colori').addEventListener('click', aggiornaColoriTemplate);







    // Funzione per aggiornare una riga

function aggiornaRiga(index, campo, valore) {

righe[index][campo] = campo === 'descrizione' ? valore : parseFloat(valore) || 0;

calcolaTotali(); // Ricalcola i totali ogni volta che una riga viene aggiornata

}



// Funzione per rimuovere una riga

function rimuoviRiga(index) {

righe.splice(index, 1); // Rimuove la riga dall'array

document.getElementById(`row-${index}`).remove(); // Rimuove la riga dall'HTML

calcolaTotali(); // Ricalcola i totali

}



// Funzione per calcolare i totali

function calcolaTotali() {

totaleImponibile = righe.reduce((acc, riga) => acc + riga.quantita * riga.prezzo * (1 - riga.sconto / 100), 0);

totaleIVA = totaleImponibile * 0.22;

totaleComplessivo = totaleImponibile + totaleIVA;



// Aggiorna i valori visualizzati nell'HTML

document.getElementById('totale-imponibile').textContent = totaleImponibile.toFixed(2) + ' €';

document.getElementById('totale-iva').textContent = totaleIVA.toFixed(2) + ' €';

document.getElementById('totale-complessivo').textContent = totaleComplessivo.toFixed(2) + ' €';

}



function aggiungiRiga() {

const index = righe.length;

// Aggiungi una nuova riga vuota all'array `righe`

righe.push({ descrizione: '', quantita: 1, prezzo: 0.00, sconto: 0, iva: 22 });



// Crea la riga della tabella HTML con stili migliorati e placeholder più descrittivi

const rowHtml = `

    <tr id="row-${index}" class="hover:bg-gray-50 transition">

        <td class="border-b p-4"><input placeholder="Inserisci descrizione" class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-blue-500" onchange="aggiornaRiga(${index}, 'descrizione', this.value)"></td>

        <td class="border-b p-4 text-center"><input type="number" value="1" placeholder="Quantità" class="w-full border border-gray-300 rounded p-2 text-center focus:outline-none focus:ring-2 focus:ring-blue-500" onfocus="this.select()" onchange="aggiornaRiga(${index}, 'quantita', this.value)"></td>

        <td class="border-b p-4 text-center"><input type="number" value="0.00" placeholder="Prezzo unitario (€)" class="w-full border border-gray-300 rounded p-2 text-center focus:outline-none focus:ring-2 focus:ring-blue-500" onfocus="this.select()" onchange="aggiornaRiga(${index}, 'prezzo', this.value)"></td>

        <td class="border-b p-4 text-center"><input type="number" value="0" placeholder="Sconto (%)" class="w-full border border-gray-300 rounded p-2 text-center focus:outline-none focus:ring-2 focus:ring-blue-500" onfocus="this.select()" onchange="aggiornaRiga(${index}, 'sconto', this.value)"></td>

        <td class="border-b p-4 text-center"><input type="number" value="22" placeholder="IVA (%)" class="w-full border border-gray-300 rounded p-2 text-center focus:outline-none focus:ring-2 focus:ring-blue-500" onfocus="this.select()" onchange="aggiornaRiga(${index}, 'iva', this.value)"></td>

        <td class="border-b p-4 text-center" id="totale-riga-${index}">0,00 €</td>

        <td class="border-b p-4 text-center"><button onclick="rimuoviRiga(${index})" class="text-red-500 hover:text-red-700 transition"><i class="fas fa-trash-alt"></i></button></td>

    </tr>`;



// Aggiungi la riga creata alla tabella

document.querySelector('#table-righe tbody').insertAdjacentHTML('beforeend', rowHtml);



// Calcola nuovamente i totali dopo aver aggiunto la riga

calcolaTotali();

}



// Event listener per selezionare tutto il testo quando si entra in un campo input

document.addEventListener('focusin', function(event) {

if (event.target.tagName === 'INPUT') {

    event.target.select();

}

});

// Aggiungi un event listener al pulsante "Aggiungi Riga"

document.getElementById('add-row').addEventListener('click', aggiungiRiga);

    // Definisci le variabili e funzioni necessarie per la generazione del PDF

    let righe = [];

    let societa = {};

    let pagamento = { carta: false, paypal: false, bonifico: false };

    let dettagliPagamento = { carta: '', paypal: '', bonifico: '' };

    let totaleImponibile = 0;

    let totaleIVA = 0;

    let totaleComplessivo = 0;

// Definisci la variabile globale per il logo

// Definisci la variabile globale per il logo

let logo = null;



document.getElementById('logo-input').addEventListener('change', function(event) {

const file = event.target.files[0];

if (file) {

    const reader = new FileReader();

    reader.onload = function(e) {

        logo = e.target.result; // Assegna il contenuto del logo alla variabile globale

        document.getElementById('logo-preview').src = logo;

        document.getElementById('logo-preview').classList.remove('hidden');

        document.getElementById('logo-label').classList.add('hidden');

        document.getElementById('cambia-logo-btn').classList.remove('hidden'); // Mostra il pulsante "Cambia Logo"

    };

    reader.readAsDataURL(file);

}

});



// Aggiungi un event listener per cambiare il logo

document.getElementById('cambia-logo-btn').addEventListener('click', function() {

document.getElementById('logo-input').click(); // Apri il file input per caricare un nuovo logo

});



// Nascondi il pulsante "Cambia Logo" all'inizio

document.getElementById('cambia-logo-btn').classList.add('hidden');

    function generaPDF() {

        // Recupera i dati necessari

        societa.nome = document.getElementById('societa-nome').value;

        societa.indirizzo = document.getElementById('societa-indirizzo').value;

        societa.telefono = document.getElementById('societa-telefono').value;

        societa.email = document.getElementById('societa-email').value;

        societa.partitaIva = document.getElementById('societa-partitaiva').value;



        pagamento.carta = document.getElementById('carta-credito').checked;

        pagamento.paypal = document.getElementById('paypal').checked;

        pagamento.bonifico = document.getElementById('bonifico').checked;



        dettagliPagamento.carta = document.getElementById('dettagli-carta').value;

        dettagliPagamento.paypal = document.getElementById('dettagli-paypal').value;

        dettagliPagamento.bonifico = document.getElementById('dettagli-bonifico').value;



        offertaPersonalizzata = document.getElementById('offerta-personalizzata').value;

        condizioni = document.getElementById('condizioni').value;

        scadenza = document.getElementById('scadenza-preventivo').value;



// Verifica se esiste almeno uno sconto presente

const scontoPresente = righe.some((riga) => riga.sconto > 0);



const body = righe.map((riga) => [

    { text: riga.descrizione, fontSize: 10 },

    { text: riga.quantita.toString(), alignment: 'center', fontSize: 10 },

    { text: `${riga.prezzo.toFixed(2)} €`, alignment: 'center', fontSize: 10 },

    ...(scontoPresente ? [{ text: `${riga.sconto}%`, alignment: 'center', fontSize: 10 }] : []),

    { text: `${riga.iva}%`, alignment: 'center', fontSize: 10 },

    { text: `${(riga.quantita * riga.prezzo * (1 - riga.sconto / 100)).toFixed(2)} €`, alignment: 'center', fontSize: 10 }

]);



// Creazione del contenuto condizionale

const contenutoSocieta = [];

if (societa.nome) contenutoSocieta.push({ text: `Nome: ${societa.nome}`, style: 'bodyText' });

if (societa.indirizzo) contenutoSocieta.push({ text: `Indirizzo: ${societa.indirizzo}`, style: 'bodyText' });

if (societa.telefono) contenutoSocieta.push({ text: `Telefono: ${societa.telefono}`, style: 'bodyText' });

if (societa.email) contenutoSocieta.push({ text: `Email: ${societa.email}`, style: 'bodyText' });

if (societa.partitaIva) contenutoSocieta.push({ text: `Partita IVA: ${societa.partitaIva}`, style: 'bodyText' });

const numeroPreventivo = document.getElementById('numero-preventivo').value; // Aggiungi questa linea

const intestazione = document.getElementById('intestazione').value; // Aggiungi questa linea se necessaria

const contenutoPagamento = [];

if (pagamento.carta && dettagliPagamento.carta) {

    contenutoPagamento.push({ text: `Carta di Credito: ${dettagliPagamento.carta}`, style: 'bodyText' });

}

if (pagamento.paypal && dettagliPagamento.paypal) {

    contenutoPagamento.push({ text: `PayPal: ${dettagliPagamento.paypal}`, style: 'bodyText' });

}

if (pagamento.bonifico && dettagliPagamento.bonifico) {

    contenutoPagamento.push({ text: `Bonifico Bancario: ${dettagliPagamento.bonifico}`, style: 'bodyText' });

}

const templateSelezionato = document.querySelector('input[name="template"]:checked').value;

        const coloreTitolo = document.getElementById('colore-titolo').value;

        const coloreSottotitolo = document.getElementById('colore-sottotitolo').value;



        const stiliTemplate = {

            classico: {

                header: { fontSize: 18, bold: true, color: coloreTitolo, alignment: 'left' },

                subheader: { fontSize: 14, bold: true, color: coloreSottotitolo },

                tableHeader: { bold: true, fontSize: 11, fillColor: '#e6e6e6', color: '#000000', alignment: 'center' },

            },

            moderno: {

                header: { fontSize: 22, bold: true, color: coloreTitolo, background: '#4A90E2', alignment: 'center' },

                subheader: { fontSize: 16, bold: true, color: coloreSottotitolo },

                tableHeader: { bold: true, fontSize: 12, fillColor: '#4A90E2', color: '#FFFFFF', alignment: 'center' },

            },

            minimalista: {

                header: { fontSize: 16, bold: false, color: coloreTitolo, alignment: 'left' },

                subheader: { fontSize: 12, bold: false, color: coloreSottotitolo },

                tableHeader: { bold: false, fontSize: 10, fillColor: '#FFFFFF', color: '#000000', alignment: 'center' },

            },

            elegante: {

                header: { fontSize: 20, bold: true, color: coloreTitolo, italics: true, alignment: 'center' },

                subheader: { fontSize: 14, bold: true, color: coloreSottotitolo },

                tableHeader: { bold: true, fontSize: 12, fillColor: '#BDC3C7', color: '#2C3E50', alignment: 'center' },

            }

        };

const docDefinition = {

    content: [

        {

            columns: [

            {

                    columns: [

                        { text: `PREVENTIVO #${document.getElementById('numero-preventivo').value}`, style: 'header', margin: [0, 20, 0, 20] },

                        logo && { image: logo, fit: [60, 60], alignment: 'right' }

                    ],

                },

            ],

        },

        intestazione && {

            text: `Intestato a: ${intestazione}`,

            style: 'subheader',

            margin: [0, 10, 0, 10],

        },

        contenutoSocieta.length > 0 && {

            stack: [

                {

                    text: 'DETTAGLI DELLA SOCIETÀ',

                    style: 'subheader',

                },

                {

                    ul: contenutoSocieta.map(item => ({ text: item, style: 'bodyText' })),

                }

            ],

            margin: [0, 10, 0, 10],

        },

        {

            text: 'DETTAGLI PREVENTIVO',

            style: 'subheader',

            margin: [0, 10, 0, 10],

        },

        {

            table: {

                headerRows: 1,

                widths: ['*', 'auto', 'auto', ...(scontoPresente ? ['auto'] : []), 'auto', 'auto'],

                body: [

                    [

                        { text: 'Descrizione', style: 'tableHeader' },

                        { text: 'Quantità', style: 'tableHeader' },

                        { text: 'Prezzo Unitario', style: 'tableHeader' },

                        ...(scontoPresente ? [{ text: 'Sconto (%)', style: 'tableHeader' }] : []),

                        { text: 'IVA (%)', style: 'tableHeader' },

                        { text: 'Totale Riga', style: 'tableHeader' }

                    ],

                    ...body

                ],

            },

            layout: 'lightHorizontalLines',

            margin: [0, 10, 0, 20],

        },

        {

            columns: [

                {

                    width: '*',

                    text: '',

                },

                {

                    width: 'auto',

                    stack: [

                        { text: `Totale Imponibile: ${totaleImponibile.toFixed(2)} €`, style: 'totals' },

                        { text: `Totale IVA: ${totaleIVA.toFixed(2)} €`, style: 'totals' },

                        { text: `Totale Complessivo: ${totaleComplessivo.toFixed(2)} €`, style: 'totalsFinal' },

                    ]

                }

            ],

        },

        offertaPersonalizzata && {

            text: 'Offerta Personalizzata',

            style: 'subheader',

            margin: [0, 15, 0, 5],

        },

        offertaPersonalizzata && {

            text: offertaPersonalizzata,

            style: 'bodyText',

            margin: [0, 0, 0, 10],

        },

        contenutoPagamento.length > 0 && {

            stack: [

                {

                    text: 'Opzioni di Pagamento',

                    style: 'subheader',

                    margin: [0, 15, 0, 5],

                },

                {

                    ul: contenutoPagamento.map(item => ({ text: item, style: 'bodyText' })),

                }

            ]

        },

        scadenza && {

            text: `Scadenza Preventivo: ${scadenza}`,

            style: 'scadenza',

            margin: [0, 10, 0, 10],

        },

        {

            text: 'Condizioni e Termini di Accettazione',

            style: 'subheader',

            margin: [0, 15, 0, 5],

        },

        {

            text: condizioni || "N/A",

            style: 'bodyText',

            margin: [0, 0, 0, 10],

        },

    ].filter(Boolean),

    styles: stiliTemplate[templateSelezionato],



    

};



pdfMake.createPdf(docDefinition).download('preventivo.pdf');

}

</script>





</body></html>