<div style="text-align: center; margin-top: 40px;">
    <div class="rb-riepilogo-intestazione">Completa le informazioni</div>
    <div style="margin: 0px;">Carica i documenti richiesti e invia la tua prenotazione.</div>
    <div style="margin: 0px;">&nbsp;</div>
</div>

<div class="rb-box-column-container">

    <!-- carica foto --> 
    <div class="rb-box-conferma active-box" id="box1">
        <div class="rb-box-conferma-title">1- Carica foto</div>
        <div class="rb-box-conferma-desc">La foto deve essere su fondo bianco e senza occhiali <br>(anche se hai obbligo di guida con lenti)</div>
        <div class="rb-box-conferma-input">
            <div class="rb-input-file">
                <label for="foto">
                    <input id="foto" type="file" name="foto" accept="image/jpeg,image/jpg,image/gif" onchange="previewImage('foto', 'foto2')">
                    <input id="foto2" type="text" value="Clicca per scegliere" onclick="clickFoto('foto')"> 
                    <svg xmlns="http://www.w3.org/2000/svg" width="12.893" height="15.656" viewBox="0 0 12.893 15.656">
                        <path id="Icon_metro-file-upload" data-name="Icon metro-file-upload" d="M12.681,18.4h5.526V12.873h3.684L15.444,6.427,9,12.873h3.684ZM9,20.241H21.891v1.842H9Z" transform="translate(-8.997 -6.427)" fill="#959595"/>
                    </svg>
                </label>
            </div>
        </div>
        <div class="rb-box-conferma-max">
            Max. 2Mb
        </div>
        <div style="margin-top: 0px; margin-bottom: 35px; margin-right: 26px; text-align: right;"> 
            <label name="avanti_1" id="avanti_1" class="rb-button-avanti" >Conferma</label>
        </div>
    </div>   

    <!-- carica/scrivi firma -->
    <div class="rb-box-conferma2" id="box2">
        <div class="box-overlay"></div>
        <div class="rb-box-conferma-container">
            <div class="rb-box-conferma-title">2- Carica firma</div>
            <div class="rb-box-conferma-desc">La firma deve essere su fondo bianco realizzata con una <br> penna nera o blu.</div>
            <div class="rb-box-conferma-input">
                <div class="rb-input-file">
                    <label for="fotoFirma">
                        <input id="fotoFirma" type="file" name="fotoFirma" accept="image/jpeg,image/jpg,image/gif" onchange="previewImage('fotoFirma', 'fotoFirma2')">
                        <input id="fotoFirma2" type="text" value="Clicca per scegliere" onclick="clickFoto('fotoFirma')"> 
                        <svg xmlns="http://www.w3.org/2000/svg" width="24.338" height="14.609" viewBox="0 0 24.338 14.609">
                            <path id="Icon_awesome-signature" data-name="Icon awesome-signature" d="M23.709,9.369c-1.971.133-4.782,2.081-6.2,2.72a7.874,7.874,0,0,1-2.895.928c-.86,0-.989-.616-.81-1.974.042-.3.445-3.013-1.624-2.895-.955.057-2.446.943-6.448,4.793L7.3,9A3.287,3.287,0,0,0,2.371,5.085L.282,6.489A.612.612,0,0,0,.1,7.33L.75,8.357a.605.605,0,0,0,.841.186L3.8,7.064A.849.849,0,0,1,5.041,8.095L1.306,17.438a1.215,1.215,0,0,0,1.13,1.67,1.2,1.2,0,0,0,.86-.358C4.9,17.145,9.18,13.017,11.33,11.3a3.948,3.948,0,0,0,.784,3.188,3.21,3.21,0,0,0,2.492.962A9.621,9.621,0,0,0,18.5,14.311c1.255-.563,3.766-2.381,5.265-2.5a.611.611,0,0,0,.578-.6V9.985a.6.6,0,0,0-.631-.616Z" transform="translate(-0.002 -4.499)" fill="#959595"/>
                        </svg>
                    </label>
                </div>
            </div>
            <div class="rb-box-conferma-max">
                Max. 2Mb
            </div>
            <div style="margin-top: 0px; margin-bottom: 35px; text-align: right;"> 
                <label>&nbsp;</label>
            </div>
        </div>
        <div style="width:7%;"></div>
        <div class="rb-box-conferma-container">
            <div class="rb-box-conferma-title">oppure firma a mano libera</div>
            <div class="rb-box-conferma-desc">In alternativa al caricamento puoi realizzare una firma <br> a mano libera.</div>
            <div class="rb-box-conferma-input">
                <div class="rb-input-file">
                    <div class="rb-input-file-canvas">
                        <input type="hidden" name="firma" id="firma">
                        <canvas id="signatureCanvas" width="250" height="50"></canvas>
                        <button type="button" id="clearSignature" >Cancella Firma</button>
                    </div>
                </div>
            </div>
            <div class="rb-box-conferma-max">
                &nbsp;
            </div>
            <div style="margin-top: 0px; margin-bottom: 35px; text-align: right;"> 
                <label name="avanti_2" id="avanti_2" class="rb-button-avanti" >Conferma</label>
            </div>
        </div>
    </div>
   
    <!-- carica foto patente -->
    <div class="rb-box-conferma" id="box3">
        <div class="box-overlay"></div>
        <div class="rb-box-conferma-title">3- CARICA DOC. PATENTE</div>
        <div class="rb-box-conferma-desc">La foto deve essere su fondo monocromantico <br> (senza ombre, senza luce riflessa)</div>

        <div class="rb-box-conferma-input" style="display: flex; justify-content: space-between;">
            <div class="rb-input-file2" style="width: 48%;">
                <label for="fotoPatenteFronte">
                    <input id="fotoPatenteFronte" type="file" name="fotoPatenteFronte" accept="image/jpeg,image/jpg,image/gif" onchange="previewImage('fotoPatenteFronte', 'fotoPatenteFronte2')">
                    <input id="fotoPatenteFronte2" type="text" value="Fronte" onclick="clickFoto('fotoPatenteFronte')"> 
                    <svg xmlns="http://www.w3.org/2000/svg" width="12.893" height="15.656" viewBox="0 0 12.893 15.656">
                        <path id="Icon_metro-file-upload" data-name="Icon metro-file-upload" d="M12.681,18.4h5.526V12.873h3.684L15.444,6.427,9,12.873h3.684ZM9,20.241H21.891v1.842H9Z" transform="translate(-8.997 -6.427)" fill="#959595"/>
                    </svg>
                </label>
            </div>
            <div class="rb-input-file2" style="width: 48%;">
                <label for="fotoPatenteRetro">
                    <input id="fotoPatenteRetro" type="file" name="fotoPatenteRetro" accept="image/jpeg,image/jpg,image/gif" onchange="previewImage('fotoPatenteRetro', 'fotoPatenteRetro2')">
                    <input id="fotoPatenteRetro2" type="text" value="Retro" onclick="clickFoto('fotoPatenteRetro')"> 
                    <svg xmlns="http://www.w3.org/2000/svg" width="12.893" height="15.656" viewBox="0 0 12.893 15.656">
                        <path id="Icon_metro-file-upload" data-name="Icon metro-file-upload" d="M12.681,18.4h5.526V12.873h3.684L15.444,6.427,9,12.873h3.684ZM9,20.241H21.891v1.842H9Z" transform="translate(-8.997 -6.427)" fill="#959595"/>
                    </svg>
                </label>
            </div>
        </div>

        <div class="rb-box-conferma-max">
            Max. 2Mb
        </div>
        <div style="margin-top: 0px; margin-bottom: 35px; margin-right: 26px; text-align: right;"> 
            <label name="avanti_3" id="avanti_3" class="rb-button-avanti" >Conferma</label>
        </div>
    </div>  

    <!-- carica foto documento -->
    <div class="rb-box-conferma" id="box4">
        <div class="box-overlay"></div>
        <div class="rb-box-conferma-title">4- CARICA DOC. IDENTITA'</div>
        <div class="rb-box-conferma-desc">La foto deve essere su fondo monocromantico <br> (senza ombre, senza luce riflessa)</div>
        
        <div class="rb-box-conferma-input" style="display: flex; justify-content: space-between;">
            <div class="rb-input-file2" style="width: 48%;">
                <label for="fotoDocumentoFronte">
                    <input id="fotoDocumentoFronte" type="file" name="fotoDocumentoFronte" accept="image/jpeg,image/jpg,image/gif" onchange="previewImage('fotoDocumentoFronte', 'fotoDocumentoFronte2')">
                    <input id="fotoDocumentoFronte2" type="text" value="Fronte" onclick="clickFoto('fotoDocumentoFronte')"> 
                    <svg xmlns="http://www.w3.org/2000/svg" width="12.893" height="15.656" viewBox="0 0 12.893 15.656">
                        <path id="Icon_metro-file-upload" data-name="Icon metro-file-upload" d="M12.681,18.4h5.526V12.873h3.684L15.444,6.427,9,12.873h3.684ZM9,20.241H21.891v1.842H9Z" transform="translate(-8.997 -6.427)" fill="#959595"/>
                    </svg>
                </label>
            </div>
            <div class="rb-input-file2" style="width: 48%;">
                <label for="fotoDocumentoRetro">
                    <input id="fotoDocumentoRetro" type="file" name="fotoDocumentoRetro" accept="image/jpeg,image/jpg,image/gif" onchange="previewImage('fotoDocumentoRetro', 'fotoDocumentoRetro2')">
                    <input id="fotoDocumentoRetro2" type="text" value="Retro" onclick="clickFoto('fotoDocumentoRetro')"> 
                    <svg xmlns="http://www.w3.org/2000/svg" width="12.893" height="15.656" viewBox="0 0 12.893 15.656">
                        <path id="Icon_metro-file-upload" data-name="Icon metro-file-upload" d="M12.681,18.4h5.526V12.873h3.684L15.444,6.427,9,12.873h3.684ZM9,20.241H21.891v1.842H9Z" transform="translate(-8.997 -6.427)" fill="#959595"/>
                    </svg>
                </label>
            </div>
        </div>

        <div class="rb-box-conferma-max">
            Max. 2Mb
        </div>
        <div style="margin-top: 0px; margin-bottom: 35px; margin-right: 26px; text-align: right;"> 
            <label name="avanti_4" id="avanti_4" class="rb-button-avanti" >Conferma</label>
        </div>
    </div>         

    <!-- permesso soggiorno -->
    <div class="rb-box-conferma" id="box5">
        <div class="box-overlay"></div>
        <div class="rb-box-conferma-title">5- CARICA FOTO PERM. SOGGIORNO</div>
        <div class="rb-box-conferma-desc"> Se necessario. La foto deve essere su fondo <br> monocromatico (senza ombre, senza luce riflessa)</div>

        <div class="rb-box-conferma-input" style="display: flex; justify-content: space-between;">
            <div class="rb-input-file2" style="width: 48%;">
                <label for="fotoPermessoSoggiornoFronte">
                    <input id="fotoPermessoSoggiornoFronte" type="file" name="fotoPermessoSoggiornoFronte" accept="image/jpeg,image/jpg,image/gif" onchange="previewImage('fotoPermessoSoggiornoFronte', 'fotoPermessoSoggiornoFronte2')">
                    <input id="fotoPermessoSoggiornoFronte2" type="text" value="Fronte" onclick="clickFoto('fotoPermessoSoggiornoFronte')"> 
                    <svg xmlns="http://www.w3.org/2000/svg" width="12.893" height="15.656" viewBox="0 0 12.893 15.656">
                        <path id="Icon_metro-file-upload" data-name="Icon metro-file-upload" d="M12.681,18.4h5.526V12.873h3.684L15.444,6.427,9,12.873h3.684ZM9,20.241H21.891v1.842H9Z" transform="translate(-8.997 -6.427)" fill="#959595"/>
                    </svg>
                </label>
            </div>
            <div class="rb-input-file2" style="width: 48%;">
                <label for="fotoPermessoSoggiornoRetro">
                    <input id="fotoPermessoSoggiornoRetro" type="file" name="fotoPermessoSoggiornoRetro" accept="image/jpeg,image/jpg,image/gif" onchange="previewImage('fotoPermessoSoggiornoRetro', 'fotoPermessoSoggiornoRetro2')">
                    <input id="fotoPermessoSoggiornoRetro2" type="text" value="Retro" onclick="clickFoto('fotoPermessoSoggiornoRetro')"> 
                    <svg xmlns="http://www.w3.org/2000/svg" width="12.893" height="15.656" viewBox="0 0 12.893 15.656">
                        <path id="Icon_metro-file-upload" data-name="Icon metro-file-upload" d="M12.681,18.4h5.526V12.873h3.684L15.444,6.427,9,12.873h3.684ZM9,20.241H21.891v1.842H9Z" transform="translate(-8.997 -6.427)" fill="#959595"/>
                    </svg>
                </label>
            </div>
        </div>

        <div class="rb-box-conferma-max">
            Max. 2Mb
        </div>
        <div style="margin-top: 0px; margin-bottom: 35px; margin-right: 26px; text-align: right;"> 
            <label name="avanti_5" id="avanti_5" class="" >&nbsp;</label>
        </div>
    </div>  

</div> 
 
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="../wp-content/plugins/rinnovo_booking/js/rb_service.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/5.0.5/signature_pad.umd.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var canvas = document.getElementById("signatureCanvas");
        var clearButton = document.getElementById("clearSignature");
        var imgFirmaInput = document.getElementById("fotoFirma");
        var firmaPreview = document.getElementById("firma-preview");
        
        // Inizializza il Signature Pad con le opzioni desiderate
        window.signaturePad = new SignaturePad(canvas, {
            backgroundColor: "rgb(255, 255, 255)"
        });

        // Aggiunge un gestore di eventi al bottone di pulizia
        clearButton.addEventListener("click", function () {
            window.signaturePad.clear();
            document.getElementById("firma").value = "";
        });

        // Aggiunge un gestore di eventi alla form per inviare la firma al server
        var form = document.getElementById("FormConferma");
        form.addEventListener("submit", function (event) {
            // Controlla se almeno uno tra la firma caricata ed il canvas è compilato
            var inputFoto = document.getElementById("foto");
            var inputImgFirma = document.getElementById("fotoFirma");
            var firmaInput = document.getElementById("firma");

            firmaInput.value = window.signaturePad.isEmpty() ? inputImgFirma.value : window.signaturePad.toDataURL();

            // Mostra una modalità con "Invio in corso..."
            rbShowModal('Invio in corso...');
        });

        const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
            <path id="Icon_awesome-check-circle" data-name="Icon awesome-check-circle" d="M35.438,18A17.438,17.438,0,1,1,18,.563,17.437,17.437,0,0,1,35.438,18ZM15.983,27.233,28.921,14.3a1.125,1.125,0,0,0,0-1.591L27.33,11.114a1.125,1.125,0,0,0-1.591,0L15.188,21.665l-4.926-4.926a1.125,1.125,0,0,0-1.591,0L7.079,18.329a1.125,1.125,0,0,0,0,1.591l7.313,7.313a1.125,1.125,0,0,0,1.591,0Z" transform="translate(-0.563 -0.563)" fill="#75e282"/>
        </svg>`;

        function vediAlert(message) {
            // Controlla se esiste già un alert per evitare duplicati
            if (document.getElementById('rbAlert')) {
                return;
            }

            // Creazione dello sfondo scuro (overlay)
            const overlay = document.createElement('div');
            overlay.id = 'alertOverlay';
            overlay.style.position = 'fixed';
            overlay.style.top = '0';
            overlay.style.left = '0';
            overlay.style.width = '100%';
            overlay.style.height = '100%';
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            overlay.style.display = 'flex';
            overlay.style.justifyContent = 'center';
            overlay.style.alignItems = 'center';
            overlay.style.zIndex = '1000';

            // Creazione del contenitore dell'alert
            const alertBox = document.createElement('div');
            alertBox.id = 'rbAlert';
            alertBox.style.backgroundColor = '#fff';
            alertBox.style.padding = '20px';
            alertBox.style.borderRadius = '10px';
            alertBox.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.3)';
            alertBox.style.textAlign = 'center';
            alertBox.style.width = '300px';
            alertBox.style.position = 'relative';

            // Creazione del messaggio
            const alertMessage = document.createElement('p');
            alertMessage.innerText = message;
            alertMessage.style.marginBottom = '20px';
            
            // Creazione del pulsante di chiusura
            const closeButton = document.createElement('button');
            closeButton.innerText = 'OK';
            closeButton.style.padding = '10px 20px';
            closeButton.style.border = 'none';
            closeButton.style.backgroundColor = '#adf7b6';
            closeButton.style.color = '#000';
            closeButton.style.borderRadius = '5px';
            closeButton.style.cursor = 'pointer';
            closeButton.style.fontSize = '16px';

            // Evento per chiudere l'alert
            closeButton.onclick = function () {
                document.body.removeChild(overlay);
            };

            // Aggiunge gli elementi al box e poi alla pagina
            alertBox.appendChild(alertMessage);
            alertBox.appendChild(closeButton);
            overlay.appendChild(alertBox);
            document.body.appendChild(overlay);
        }

        function validaBox(boxNumber) {
            const currentBox = document.getElementById(`box${boxNumber}`);
            let isValid = true;

            switch(boxNumber) {
                case 1:
                    const fotoInput = document.getElementById('foto');
                    if (!fotoInput.files.length) {
                        isValid = false;
                        vediAlert("Devi caricare una foto");
                        currentBox.classList.add('error-box');
                    } else {
                        // Validazione tipo file
                        const file = fotoInput.files[0];
                        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/gif'];
                        if (!allowedTypes.includes(file.type)) {
                            isValid = false;
                            vediAlert("Il file deve essere in formato JPEG, JPG o GIF");
                            currentBox.classList.add('error-box');
                        }
                    }
                    break;
                case 2:                    
                    const fotoFirma = document.getElementById('fotoFirma');
                    const firmaDisegnata = !window.signaturePad.isEmpty();

                    // Verifica se c'è almeno una firma (caricata o disegnata)
                    if (fotoFirma.files.length > 0) {
                        // Validazione tipo file per la firma
                        const file = fotoFirma.files[0];
                        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/gif'];
                        if (!allowedTypes.includes(file.type)) {
                            isValid = false;
                            vediAlert("Il file della firma deve essere in formato JPEG, JPG o GIF");
                            currentBox.classList.add('error-box');
                        } else {
                            isValid = true;
                        }
                    } else if (firmaDisegnata) {
                        isValid = true;
                    } else {
                        isValid = false;
                        vediAlert("Devi caricare o disegnare una firma.");
                        currentBox.classList.add('error-box');
                    }
                    break;
                case 3:
                    const fotoPatenteFronte = document.getElementById('fotoPatenteFronte');
                    const fotoPatenteRetro = document.getElementById('fotoPatenteRetro');
                    
                    if (!fotoPatenteFronte.files.length || !fotoPatenteRetro.files.length) {
                        isValid = false;
                        vediAlert("Devi caricare entrambe le foto della patente");
                        currentBox.classList.add('error-box');
                    } else {
                        // Validazione tipo file per patente fronte
                        const fileFronte = fotoPatenteFronte.files[0];
                        const fileRetro = fotoPatenteRetro.files[0];
                        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/gif'];
                        
                        if (!allowedTypes.includes(fileFronte.type) || !allowedTypes.includes(fileRetro.type)) {
                            isValid = false;
                            vediAlert("I file della patente devono essere in formato JPEG, JPG o GIF");
                            currentBox.classList.add('error-box');
                        }
                    }
                    break;
                case 4:
                    const fotoDocumentoFronte = document.getElementById('fotoDocumentoFronte');
                    const fotoDocumentoRetro = document.getElementById('fotoDocumentoRetro');
                    
                    if (!fotoDocumentoFronte.files.length || !fotoDocumentoRetro.files.length) {
                        isValid = false;
                        vediAlert("Devi caricare entrambe le foto del documento");
                        currentBox.classList.add('error-box');
                    } else {
                        // Validazione tipo file per documento fronte
                        const fileFronte = fotoDocumentoFronte.files[0];
                        const fileRetro = fotoDocumentoRetro.files[0];
                        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/gif'];
                        
                        if (!allowedTypes.includes(fileFronte.type) || !allowedTypes.includes(fileRetro.type)) {
                            isValid = false;
                            vediAlert("I file del documento devono essere in formato JPEG, JPG o GIF");
                            currentBox.classList.add('error-box');
                        }
                    }
                    break;
            }

            return isValid;
        }

        function activateNextBox(currentBox) {
            
            if (!validaBox(currentBox)) {
                return; 
            }

            const currentElement = document.getElementById(`box${currentBox}`);
            const nextElement = document.getElementById(`box${currentBox + 1}`);
            
            if (nextElement) {
                // Sostituisci il label "Avanti" con l'icona di spunta
                const avantiLabel = currentElement.querySelector('.rb-button-avanti');
                avantiLabel.innerHTML = checkIcon;
                avantiLabel.style.cursor = 'default';
                avantiLabel.style.pointerEvents = 'none';
                avantiLabel.classList.remove('rb-button-avanti');

                // Disattiva box corrente
                currentElement.querySelector('.box-overlay') || 
                currentElement.insertAdjacentHTML('afterbegin', '<div class="box-overlay"></div>');
                currentElement.classList.remove('active-box');
                currentElement.classList.remove('error-box');
                
                // Attiva prossimo box
                nextElement.querySelector('.box-overlay').remove();
                nextElement.classList.add('active-box');

            }

            if(currentBox == 4) {
                document.getElementById('send_booking').classList.remove('button-submit-disabled');
                document.getElementById('send_booking').classList.add('button-submit');
                document.getElementById('send_booking').disabled = false;
            }            
        }

        // Event listeners per i pulsanti "Avanti"
        document.getElementById('avanti_1').addEventListener('click', () => activateNextBox(1));
        document.getElementById('avanti_2').addEventListener('click', () => activateNextBox(2));
        document.getElementById('avanti_3').addEventListener('click', () => activateNextBox(3));
        document.getElementById('avanti_4').addEventListener('click', () => activateNextBox(4));

    });
</script>



