<?php 
    $sede = sanitize_text_field($_GET['idsede']);
    $gruppo = '';

    // Recupera tutte le sedi dal database
    global $wpdb;
    $table_sedi = $wpdb->prefix . RINNOVOBOOKINGPREFIX . '_sedi';
    $sedi_disponibili = $wpdb->get_results("SELECT idsede, nome FROM $table_sedi ORDER BY nome ASC");

    echo $this->handle_menu($sede); 

    // verifica se il servizio ipatente è attivo
    $servizi = rinnovo_booking_verify_services();
    if (in_array('ipatente', $servizi) || in_array('ipatentebutton', $servizi)) { 
        $iPatenteService = new iPatenteService();
        $iPanteArray = $iPatenteService->getGenerateCalendar($sede, $gruppo);

        $disponibilita = $iPanteArray['disponibilita'];
        $occupati = $iPanteArray['occupati'];
        $apertura = $iPanteArray['apertura'];
        $chiusura = $iPanteArray['chiusura'];
    } else {
        // Passa la sede alla funzione per ottenere le disponibilità
        $disponibilita = rinnovo_booking_get_availability($sede);
        $occupati = rinnovo_booking_get_busy();
        $apertura = rinnovo_booking_get_apertura($sede);
        $chiusura = rinnovo_booking_get_chiusura($sede);
    }   

    wp_localize_script('rinnovo_booking-scripts', 'cbpData', array(
        'availability' => $disponibilita, // Modificato
        'busy' => $occupati,
        'sede' => $sede,
        'gruppo' => $gruppo,
        'apertura' => $apertura,
        'chiusura' => $chiusura
    ));    
    
?>
<br><br><br>
<div id="medico-container">
    <div><h3 class="rb-h3">Orari medico</h3></div>
    <div id="medico-days"></div>
</div>

<div style="text-align: center;"><h2>Nuova Prenotazione</h2></div>
<form method="post" action="">
    <div><h3 class="rb-h3">Origine prenotazione</h3></div>
    <div id="user-container">
        <div>
            <label for="sede_provenienza">Sede di provenienza:</label>
            <select name="sede_provenienza" id="sede_provenienza" style="width: 94.5%;" required>
                <?php 
                    $sede_corrente = $_GET['idsede'] ?? '';
                    // Prima la sede di appartenenza
                    foreach ($sedi_disponibili as $sede_item) {
                        if ($sede_item->idsede == $sede_corrente) {
                            echo '<option value="'.esc_attr($sede_item->idsede).'" selected>'.esc_html($sede_item->nome).'</option>';
                        }
                    }
                    // Poi tutte le altre sedi
                    foreach ($sedi_disponibili as $sede_item) {
                        if ($sede_item->idsede != $sede_corrente) {
                            echo '<option value="'.esc_attr($sede_item->idsede).'">'.esc_html($sede_item->nome).'</option>';
                        }
                    }
                ?>
            </select>
        </div>
    </div>

    <div><h3 class="rb-h3">Seleziona una data</h3></div>
    <div id="calendar-slot-container">
        <div id="calendar-box">
            <div id="calendar-controls">
                <a href="" id="prev-month">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </a>
                <span id="current-month"></span>
                <a href="" id="next-month">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </a>
            </div>
            <div id="calendar-weekdays"></div>
            <div id="calendar"></div>
        </div>
        <div id="slot-box">
            <div id="time-slots">
                <h3 id="selected-day" class="rb-h3">Seleziona un giorno</h3>
                <div id="time-slot-list"></div>
            </div>
        </div>
    </div>

    <div style="margin-top: 50px;"><h3 class="rb-h3">Dati richiedente</h3></div>
    <div id="user-container">
        <div>
            <input type="text" name="nome" id="nome" placeholder="nome" required>
        </div>
        <div>
            <input type="text" name="cognome" id="cognome" placeholder="cognome" required>
        </div>
        <div>
            <input type="text" name="indirizzo" id="indirizzo" placeholder="Indirizzo di residenza">
        </div>
        <div>
            <input type="text" name="telefono" id="telefono" placeholder="telefono" required>
        </div>
        <div>
            <input type="text" name="npatente" id="npatente" placeholder="numero patente o codice fiscale" required>
        </div>
        <div>
            <input type="text" name="email" id="email" placeholder="email" required>
        </div>
        <div>
            <select name="tipo_visita" id="tipo_visita" style="width: 94.5%;" required>
                <option value="rinnovo">RINNOVO</option>
                <option value="conseguimento">CONSEGUIMENTO</option>
                <option value="porto_d_armi">PORTO D ARMI</option>
                <option value="estensione">ESTENSIONE</option>
                <option value="duplicato_documento">DUPLICATO DOCUMENTO</option>
                <option value="rinnovo_patente_nautica">RINNOVO PATENTE NAUTICA</option>
            </select>
        </div>
    </div>
    <div><h3 class="rb-h3">Consegna documento</h3></div>
    <div id="user-container"> 
        <div>
            <label for="destinazione_patente">Dove:</label>
            <select name="destinazione_patente" id="destinazione_patente" style="width: 94%;">
                <option value="autoscuola">Autoscuola</option>
                <option value="casa">Casa</option>
            </select>
        </div>
        <div>
            <label for="indirizzo_ricezione">Indirizzo di Destinazione:</label>
            <input type="text" id="indirizzo_ricezione" name="indirizzo_ricezione">
        </div>
    </div>

    <div id="calendar-prenotazione">
        <h3 id="prenotazione" class="rb-h3"></h3>
            <input type="hidden" name="PrenotaData" id="PrenotaData" readonly>
            <input type="hidden" name="PrenotaOra" id="PrenotaOra" readonly>
            <input type="hidden" name="sede" id="sede" value="<?php echo $sede; ?>" readonly>
            <input type="hidden" name="gruppo" id="gruppo" value="<?php echo $gruppo; ?>" readonly>
    </div>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Opzioni base che devono essere sempre presenti
    const opzioniBase = [
        {value: 'conseguimento', text: 'CONSEGUIMENTO'}, 
        {value: 'estensione', text: 'ESTENSIONE'},
        {value: 'duplicato_documento', text: 'DUPLICATO DOCUMENTO'},
        {value: 'rinnovo_patente_nautica', text: 'RINNOVO PATENTE NAUTICA'}
    ];
    
    // Funzione per aggiungere sempre le opzioni base
    function aggiungiOpzioniBase(selectElement) {
        // Salva il valore attualmente selezionato
        const valoreSelezionato = selectElement.value;
        
        // Ottieni le opzioni esistenti (quelle dinamiche dal JS)
        const opzioniEsistenti = Array.from(selectElement.options).map(opt => ({
            value: opt.value,
            text: opt.textContent
        }));
        
        // Pulisci la select
        selectElement.innerHTML = '';
        
        // Aggiungi prima le opzioni base
        opzioniBase.forEach(opzione => {
            const option = document.createElement('option');
            option.value = opzione.value;
            option.textContent = opzione.text;
            selectElement.appendChild(option);
        });
        
        // Aggiungi le opzioni dinamiche (se diverse da quelle base)
        opzioniEsistenti.forEach(opzione => {
            if (opzione.value && !opzioniBase.some(base => base.value === opzione.value)) {
                const option = document.createElement('option');
                option.value = opzione.value;
                option.textContent = opzione.text;
                selectElement.appendChild(option);
            }
        });
        
        // Ripristina la selezione se possibile
        if (valoreSelezionato) {
            selectElement.value = valoreSelezionato;
        }
    }
    
    // Observer per intercettare i cambiamenti alla select tipo_visita
    const tipoVisitaSelect = document.getElementById('tipo_visita');
    if (tipoVisitaSelect) {
        // MutationObserver per intercettare quando il JS modifica la select
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList') {
                    // Il contenuto della select è cambiato, aggiungi le opzioni base
                    setTimeout(() => aggiungiOpzioniBase(tipoVisitaSelect), 10);
                }
            });
        });
        
        // Inizia a osservare i cambiamenti
        observer.observe(tipoVisitaSelect, {
            childList: true,
            subtree: true
        });
        
        // Aggiungi le opzioni base anche all'inizio
        aggiungiOpzioniBase(tipoVisitaSelect);
    }
});
</script>



