
<div id="target-section">

    <!-- Blocco JavaScript - Mostra solo se JS è disattivato -->
    <noscript>
        <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column;">
            <div style="text-align: center; padding: 40px; max-width: 600px;">
                <h2 style="color: #e74c3c; margin-bottom: 20px;">⚠️ JavaScript Richiesto</h2>
                <p style="font-size: 18px; margin-bottom: 30px; line-height: 1.6;">
                    Per utilizzare questo servizio è necessario attivare JavaScript nel tuo browser.
                    <br><br>
                    <strong>Come attivare JavaScript:</strong>
                </p>
                <div style="text-align: left; background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 30px;">
                    <p><strong>Chrome/Edge:</strong> Impostazioni → Privacy e sicurezza → Impostazioni sito → JavaScript → Consenti</p>
                    <p><strong>Firefox:</strong> about:config → javascript.enabled → true</p>
                    <p><strong>Safari:</strong> Preferenze → Sicurezza → Abilita JavaScript</p>
                </div>
                <p style="color: #666; font-size: 14px;">
                    Dopo aver attivato JavaScript, ricarica la pagina.
                </p>
            </div>
        </div>
    </noscript>

    <!-- Contenuto normale - Nascondi se JS è disattivato -->
    <div id="main-content" style="display: none;">

    <div class="rb-riepilogo-intestazione"> 
         Riepilogo Dati
    </div>

    <div> 
        <form method="POST" id="FormConferma" name="FormConferma" action="" enctype="multipart/form-data" class="rb-riepilogo-container-form">
        <input type="hidden" name="sede" id="sede" value="<?php echo $sede; ?>">
            <input type="hidden" name="gruppo" id="gruppo" value="<?php echo $gruppo; ?>">
            <input type="hidden" name="tipo_visita" id="tipo_visita" value="<?php echo $tipo_visita; ?>">
            <input type="hidden" name="PrenotaData" id="PrenotaData" value="<?php echo $PrenotaData; ?>">
            <input type="hidden" name="PrenotaOra" id="PrenotaOra" value="<?php echo $PrenotaOra; ?>">
            <input type="hidden" name="cognome" id="cognome" value="<?php echo $cognome; ?>">
            <input type="hidden" name="nome" id="nome" value="<?php echo $nome; ?>">
            <input type="hidden" name="email" id="email" value="<?php echo $email; ?>">
            <input type="hidden" name="telefono" id="telefono" value="<?php echo $telefono; ?>">
            <input type="hidden" name="npatente" id="npatente" value="<?php echo $npatente; ?>">
            <input type="hidden" name="indirizzo" id="indirizzo" value="<?php echo $indirizzo; ?>">

            <div class="rb-riepilogo-container">
                <div>
                    <div style="margin-top: 20px;">
                        <label style="font-weight: bold;">Cognome: </label>
                        <label><?php echo $cognome; ?></label>
                    </div>
                    <div><hr class="rb-divider-orizontal"></div>
                    <div style="margin-bottom: 20px;">
                        <label style="font-weight: bold;">Nome:</label>
                        <label><?php echo $nome; ?></label>
                    </div>
                    <div><hr class="rb-divider-orizontal"></div>
                    <div style="margin-bottom: 20px;">
                        <label style="font-weight: bold;">Email:</label>
                        <label><?php echo $email; ?></label>
                    </div>    
                    <div><hr class="rb-divider-orizontal"></div>
                    <div style="margin-bottom: 20px;">
                        <label style="font-weight: bold;">Telefono:</label>
                        <label><?php echo $telefono; ?></label>     
                    </div>
                    <div><hr class="rb-divider-orizontal"></div>
                    <div style="margin-bottom: 20px;">
                        <label style="font-weight: bold;">Codice fiscale o Numero Patente:</label>
                        <label><?php echo $npatente; ?></label>
                    </div>
                </div>                
                <div class="rb-riepilogo-container-card">
                    <div class="rb-riepilogo-container-card-content">
                        <div>
                            <label>Prenotazione richiesta per il giorno:</label>
                            <br><br>
                            <label class="rb-riepilogo-intestazione"><?php echo $PrenotaData; ?></label>    
                            <br>
                            <label class="rb-riepilogo-intestazione"><?php echo $PrenotaOra; ?></label>
                            <br><br>
                            <label>Per:</label>
                            <label class="badge-tipo-visita"><?php echo $tipo_visita_testo; ?></label>
                        </div>
                    </div>
                </div>
            </div>

            
            <?php 
            if (in_array('consegnadocumento', $opzioniSistema)) { ?>
                <!-- Destinazione della patente -->
                <div class="rb-riepilogo-intestazione" style="margin-top: 60px !important;">Dove vuoi ricevere il nuovo documento?</div>              

                <div class="rb-box-conferma2 active-box" style="">
                    <div class="rb-box-conferma-container">
                        <div class="rb-box-conferma-title">
                            <input type="radio" id="destinazione_autoscuola" name="destinazione_patente" value="autoscuola" class="rb-radiocheck" checked onchange="toggleIndirizzoRicezione()"> 
                            <label style="display: inline-block; vertical-align: middle;">IN AUTOSCUOLA</label>
                        </div>
                        <div class="rb-box-conferma-desc"> Fai arrivare il documento direttamente in autoscuola.<br> Ti avvisiamo noi quando è pronto e puoi passare a ritirarlo.</div>
                    </div>
                    <div style="width:7%;"></div>
                    <div class="rb-box-conferma-container">
                        <div class="rb-box-conferma-title">
                            <input type="radio" id="destinazione_casa" name="destinazione_patente" value="casa" class="rb-radiocheck" onchange="toggleIndirizzoRicezione()">
                            <label style="display: inline-block; vertical-align: middle;">A CASA</label>
                        </div>
                        <div class="rb-box-conferma-desc"> Fai arrivare il documento direttamente a casa tramite raccomandata al costo di 7,32€ da pagare direttamente al postino.</div>
                        <div class="rb-box-conferma-input">
                            <input type="text" id="indirizzo_ricezione" name="indirizzo_ricezione" class="rb-radiocheck-input" placeholder="Inserisci l'indirizzo completo" disabled>
                        </div>
                    </div>
                </div>
            <?php } ?>
            
            <div>
                <?php 
                    if (!empty($fotofirmaFile)) {
                        include $fotofirmaFile;
                    }
                ?>
            </div>

            <div><br><br></div>
            <div id="calendar-submit">
                <button name="send_booking" id="send_booking" class="button-submit">invia prenotazione</button>
            </div>
        </form>
    </div>

    </div> <!-- Chiude il div main-content -->

</div>

<script>
    function gestisciPulsante(obbligoFotoFirmata) {
        const send_booking = document.getElementById('send_booking');
        if (obbligoFotoFirmata) {
            send_booking.classList.remove('button-submit');
            send_booking.classList.add('button-submit-disabled');
            send_booking.disabled = true;
        } else {
            send_booking.classList.remove('button-submit-disabled');
            send_booking.classList.add('button-submit');
            send_booking.disabled = false;
        }
    }

    function toggleIndirizzoRicezione() {
        const destinazioneAutoscuola = document.getElementById('destinazione_autoscuola');
        const destinazioneCasa = document.getElementById('destinazione_casa');
        const indirizzoRicezione = document.getElementById('indirizzo_ricezione');
        const indirizzoResidenza = document.getElementById('indirizzo').value;

        if (destinazioneCasa.checked) {
            indirizzoRicezione.disabled = false;
            indirizzoRicezione.value = indirizzoResidenza;
        } else {
            indirizzoRicezione.disabled = true;
            indirizzoRicezione.value = '';
            indirizzoRicezione.placeholder = "Inserisci l'indirizzo completo";
        }
    }

    document.getElementById('indirizzo_ricezione').addEventListener('blur', function() {
        if (!this.value.trim()) {
            this.value = document.getElementById('indirizzo').value;
        }
    });

    window.onload = function() {
        // Seleziona l'elemento target tramite il suo ID
        const targetElement = document.getElementById('target-section');

        // Verifica se l'elemento esiste
        if (targetElement) {
            // Scrolla fino all'elemento
            targetElement.scrollIntoView({ behavior: 'smooth' });
        }

        gestisciPulsante(<?php echo $obbligofotofirmata; ?>);
    };

</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Aggiungi parametri GET per Analytics - Pagina Calendario
        const url = new URL(window.location);
        url.searchParams.set('page', 'riepilogo');
        window.history.pushState({}, '', url);
    });

    // Gestisci il submit del form per rimuovere il parametro page
    document.getElementById('FormConferma').addEventListener('submit', function() {
        const url = new URL(window.location);
        url.searchParams.delete('page');
        window.history.pushState({}, '', url);
    });

    
</script>

<script>
    // Mostra il contenuto principale solo se JavaScript è attivo
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('main-content').style.display = 'block';
    });
</script>
