<?php
if (in_array('ipatente', $servizi)) {
    $iPatenteTesto = 'Codice fiscale o numero patente';
    $indirizzoInput='';
} else {
    $iPatenteTesto = 'Numero patente';
    $indirizzoInput='<div>
        <input type="text" name="indirizzo" id="indirizzo" placeholder="Indirizzo di residenza" required>
    </div>';
}

?>
<div id="medico-container">
    <div><h3 class="rb-h3">Orari medico</h3></div>
    <div id="medico-days"></div>
</div>

<form action="" id="FormCalendario" method="post" enctype="multipart/form-data">
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; "> 
        <div>
            <h3 class="rb-h3">Seleziona una data</h3>
        </div>
        <div>
            <h3 style="margin-left: 10px;" class="rb-h3">Seleziona un orario</h3>
        </div>
    </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"><label style="color: #ccc; font-weight: normal; font-size: 20px; ">Prima scegli la data</label></h3>
                <div id="time-slot-list"></div>
            </div>
        </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><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>
        <?php echo $indirizzoInput; ?>
        <div>
            <input type="text" name="telefono" id="telefono" placeholder="Telefono" required>
        </div>
        <div>
            <input type="text" name="npatente" id="npatente" placeholder="<?php echo $iPatenteTesto; ?>" required>
        </div>
        <div>
            <input type="text" name="email" id="email" placeholder="Email" required>
        </div>
        <div>
            <select name="tipo_visita" id="tipo_visita" required>
                <option value="">Seleziona un orario</option>
            </select>
        </div>
    </div>

    <style>
        .custom-checkbox {
            appearance: none;
            width: 32px;
            height: 32px;
            border: 2px solid #ccc;
            border-radius: 3px;
            margin-right: 8px;
            position: relative;
            cursor: pointer;
            vertical-align: middle;
        }
        
        .custom-checkbox:checked {
            background-color: #75e282;
            border-color: #75e282;
        }
        
        .custom-checkbox:checked:after {
            content: '';
            position: absolute;
            left: 9px;
            top: 2px;
            width: 8px;
            height: 16px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .checkbox-label {
            cursor: pointer;
            vertical-align: middle;
        }
    </style>

    <div id="gdpr-container">
        <p>
            <input type="checkbox" name="gdpr" id="gdpr" class="custom-checkbox" required>
            <label for="gdpr" class="checkbox-label">Ho letto e accetto TERMINI E CONDIZIONI del sito web</label>            
        </p>
        <p>
            <input type="checkbox" name="privacy" id="privacy" class="custom-checkbox" required>
            <label for="privacy" class="checkbox-label">Ho letto e accetto INFORMATIVA SULLA PRIVACY del sito web</label>
        </p>
    </div>

    <div id="calendar-submit">
        <button name="confirm_booking" id="confirm_booking" class="button-submit">procedi</button>
    </div>
</form>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Aggiungi parametri GET per Analytics - Pagina Calendario
        const url = new URL(window.location);
        url.searchParams.set('page', 'calendario');
        window.history.pushState({}, '', url);
    });

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

    
</script>