// Opzioni messaggi TOAST
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "1000",
"hideDuration": "1000",
"timeOut": "10000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
jQuery(document).ready(function() {
const userLanguage = $("#frontpage-user-language").data('userlanguage');
moment.locale(userLanguage);
const timezone = $('#location-timezone').val() ?? 'Europe/Rome';
moment.tz.setDefault(timezone);
const body = $('body');
const elencoStepPrenotazione = ['step-testo-frontpage', 'step-numero-persone', 'step-giorno', 'step-ora', 'step-dati-anagrafici', 'step-motivo-visita', 'step-campi-aggiuntivi', 'step-marketing-privacy', 'step-conferma'];
const startDate = moment().format('YYYY-MM-DD');
const endDate = $("#bootstrap-datepicker-endDate").val();
const divOrari = $("#div-orari");
const divModal=$("#modal-zone-detail");
const divCalendario = $("#frontpage-step-giorno-datepicker-div");
let elencoDateFerieArray = [];
let elencoDateChiusuraArray = [];
let elencoChiusuraSoldOut = [];
let elencoDateListaAttesa = [];
let elencoDateTurnoPieno = [];
let elencoDatePostiEsauriti = [];
let elencoDateDisponibili = [];
let elencoDateEsperienze = [];
//prelevo la lingua del browser del cliente
const paese = $('#paese').data('language') ?? 'it';
const input = document.querySelector("#phone");
// Plug in telefono con bandierina
const itiInstance = window.intlTelInput(input, {
initialCountry: paese.toLowerCase() === 'en' ? 'it' : paese.toLowerCase(),
countryOrder: ["fr","es"],
preferredCountries: ['fr','es'],
strictMode: true,
i18n: userLanguage,
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@21.2.7/build/js/utils.js",
});
// Estrazione giorni di chiusura
const ajaxRequest1 = $.ajax({
method: "POST",
dataType: "json",
async: true,
url: "/ajax/ajax_giorni_chiusura.php"
})
// Restituiamo l'esito
.done(function( risultato ) {
// Iteriamo sull'oggetto risultato
for (const [data, tipo] of Object.entries(risultato)) {
if (tipo === 'chiuso') {
elencoDateChiusuraArray.push(data);
} else if (tipo === 'ferie') {
elencoDateFerieArray.push(data);
}
}
});
// Estrazione giorni di soldout
const ajaxRequest2 = $.ajax({
method: "POST",
dataType: "json",
async: true,
url: "/ajax/ajax_giorni_chiusura_soldout.php"
})
// Restituiamo l'esito
.done(function( risultato ) {
for (const [giorno, tipoSoldout] of Object.entries(risultato)) {
// Soldout
if(tipoSoldout === 0) {
elencoChiusuraSoldOut.push(giorno);
}
// Lista d'attesa
else if(tipoSoldout === 2) {
elencoDateListaAttesa.push(giorno);
}
// Turno pieno
else if(tipoSoldout === 3) {
elencoDateTurnoPieno.push(giorno);
}
// Posti esauriti
else if(tipoSoldout === 4) {
elencoDatePostiEsauriti.push(giorno);
}
// Disponibile
else if(tipoSoldout === 10) {
elencoDateDisponibili.push(giorno);
}
// Mostriamo il calendario
divCalendario.removeClass('d-none');
}
});
// Estrazione esperienze del mese corrente
const ajaxRequest3 = $.ajax({
method: "POST",
dataType: "json",
async: true,
url: "/api/frontpage/esperienze/calendario/giorni"
})
// Restituiamo l'esito
.done(function( risultato ) {
elencoDateEsperienze = risultato.data ?? [];
});
const ajaxRequest = Promise.all([ajaxRequest1, ajaxRequest2, ajaxRequest3]);
// Bottone avanti
body.on('click', 'button.bottone-avanti', async function (){
const sourceStep = $(this).data('idcontainer');
// Verifica step
const stepValido = await verificaStep(sourceStep, itiInstance);
// Troviamo il prossimo step prendendo la posizione successiva a quella corrente
if(stepValido === true) {
const flagListaAttesa = $('#prenotazione-flag-lista-attesa').val();
const importoCcGaranzia = parseFloat($('#frontpage-importo-garanzia').val());
const flagCcGaranzia = (importoCcGaranzia > 0.00)? '1':'0';
let sourceStepPosition = elencoStepPrenotazione.indexOf(sourceStep);
const bottoniOrari = $('.frontpage-btn-orari').length;
// Messaggio lista attesa
if(sourceStep === 'step-lista-attesa' || sourceStep === 'step-carta') {
sourceStepPosition = elencoStepPrenotazione.indexOf('step-ora');
}
const nextStepPosition = sourceStepPosition + 1;
let nextStep = elencoStepPrenotazione[nextStepPosition];
// Lista attesa presente
if(flagListaAttesa === '1' && sourceStep === 'step-ora') {
nextStep = 'step-lista-attesa';
}
// CC Garanzia presente
else if(flagCcGaranzia === '1' && (sourceStep === 'step-ora' || sourceStep === 'step-lista-attesa')) {
nextStep = 'step-carta';
}
// Se nella giornata è presente un soldout totale (se non ci sono orari disponibili)
else if(bottoniOrari === 0 && sourceStep === 'step-giorno') {
nextStep = 'step-errore-soldout';
}
// Step motivo visita non presente
const stepMotivoVisitaPresente = $('#step-motivo-visita').length;
if(nextStep === 'step-motivo-visita' && stepMotivoVisitaPresente === 0) {
nextStep = 'step-campi-aggiuntivi';
}
// Tooltip
$('.tooltip').hide();
// Mostriamo il prossimo step
$('#'+sourceStep).addClass('d-none');
$('#'+nextStep).removeClass('d-none');
}
});
// Bottone indietro
body.on('click', 'button.bottone-indietro', function (){
const sourceStep = $(this).data('idcontainer');
// Troviamo il prossimo step prendendo la posizione successiva a quella corrente
const sourceStepPosition = elencoStepPrenotazione.indexOf(sourceStep);
const nextStepPosition = (sourceStepPosition > 0)? sourceStepPosition - 1 : 0;
let nextStep = elencoStepPrenotazione[nextStepPosition];
const importoCcGaranzia = parseFloat($('#frontpage-importo-garanzia').val());
// Step motivo visita non presente
const stepMotivoVisitaPresente = $('#step-motivo-visita').length;
// Motivo visita assente
if(nextStep === 'step-motivo-visita' && stepMotivoVisitaPresente === 0) {
nextStep = 'step-dati-anagrafici';
}
// Step carta
else if(sourceStep === 'step-carta' || sourceStep === 'step-lista-attesa') {
nextStep = 'step-ora';
}
// Step soldout
else if(sourceStep === 'step-errore-soldout') {
nextStep = 'step-giorno';
}
// Tooltip
$('.tooltip').hide();
$('td.day').removeClass('skeletonBadge active');
// Mostriamo il prossimo step
$('#'+sourceStep).addClass('d-none');
$('#'+nextStep).removeClass('d-none');
});
// Click sul bottone numero persone
body.on('click', 'button.frontpage-btn-persone', function (){
const numeroScelto = $(this).val();
// Rimuoviamo la classe da tutti i bottoni di tipo frontpage-btn-persone
$("button.frontpage-btn-persone").removeClass('active').removeClass('focus');
if (numeroScelto !== "") {
// Carichiamo la traduzione di persone nella lingua corrente
$('.breadcrumb-step-numero-persone-testo').addClass('d-none');
const etichettaPersone = '<i class="fa fa-user"></i>';
// Impostiamo il valore scelto nel breadcrumb
$('.breadcrumb-step-numero-persone').html(etichettaPersone + ' ' + numeroScelto).removeClass('d-none');
// Inseriamo la persone nel riepilogo finale
$("#prenotazione-riepilogo-persone").html(numeroScelto + ' ' + etichettaPersone);
// Salviamo il valore scelto nel campo hidden
$('#prenotazione-numero-clienti').val(numeroScelto);
}
// Rimuoviamo la classe errore dalla select e dai bottoni
$('button.frontpage-btn-persone').addClass('frontpage-btn').removeClass('btn-danger');
$('#numero-select-div').removeClass('has-error');
// Aggiornamento del calendario
ajaxRequest.then(function() {
$('#frontpage-step-giorno-datepicker-div').trigger('changeMonth');
});
// Simuliamo il click sul tasto avanti
$('#step-numero-persone-bottone-avanti').trigger('click');
});
// Selezione persone superiore ad 8
body.on('click', '#show-numero-select', function (){
// Scegliamo il div contenente la select del numero persone
const divSelectPersone = $('#numero-select-div');
// Rimuoviamo la classe da tutti i bottoni di tipo frontpage-btn-persone
$("button.frontpage-btn-persone").removeClass('active').removeClass('focus');
// Nascondiamo/mostriamo il div contenente la select del numero persone e rimuoviamo lo stato di errore
divSelectPersone.removeClass('has-error').toggleClass('d-none');
if(divSelectPersone.hasClass('d-none') === true) {
$('#show-numero-select-icon').addClass('fa-chevron-down').removeClass('fa-chevron-up');
$('#numero-select').prop('disabled', true);
} else {
$('#show-numero-select-icon').removeClass('fa-chevron-down').addClass('fa-chevron-up');
$('#numero-select').prop('disabled', false);
}
// Resettiamo il valore scelto nel campo hidden
$('#prenotazione-numero-clienti').val('');
});
// Scelta di un numero di clienti superiore ad 8 dalla select
body.on('change', '#numero-select', function (){
// Rimuoviamo la classe da tutti i bottoni di tipo numero-btn
$("button.frontpage-btn-persone").removeClass('active').removeClass('focus');
// Salviamo il valore del bottone cliccato
const numeroScelto = $(this).val();
if (numeroScelto !== "") {
// Carichiamo la traduzione di persone nella lingua corrente
$('.breadcrumb-step-numero-persone-testo').addClass('d-none');
const etichettaPersone = '<i class="fa fa-user"></i>';
// Impostiamo il valore scelto nel breadcrumb
$('.breadcrumb-step-numero-persone').html(etichettaPersone + ' ' + numeroScelto).removeClass('d-none');
// Inseriamo la persone nel riepilogo finale
$("#prenotazione-riepilogo-persone").html(numeroScelto + ' ' + etichettaPersone);
// Salviamo il valore scelto nel campo hidden
$('#prenotazione-numero-clienti').val(numeroScelto);
}
// Rimuoviamo la classe errore dalla select e dai bottoni
$('button.frontpage-btn-persone').addClass('frontpage-btn').removeClass('btn-danger');
$('#numero-select-div').removeClass('has-error');
// Aggiornamento del calendario
$('#frontpage-step-giorno-datepicker-div').trigger('changeMonth');
// Simuliamo il click sul tasto avanti
$('#step-numero-persone-bottone-avanti').trigger('click');
});
// Click sul bottone 'continua senza esperienza'
body.on('click', '#frontpage-step-giorno-esperienze-bottone-continua', function (){
// Simuliamo il click sul tasto avanti
$('#step-giorno-bottone-avanti').trigger('click');
});
// Selezione datepicker
ajaxRequest.then(function() {
$('#frontpage-step-giorno-datepicker-div').datepicker({
language: userLanguage,
format: 'yyyy-mm-dd',
startDate: startDate,
endDate: endDate,
maxViewMode: 2,
//bootstrap
beforeShowDay: function (date) {
const dayString = String(date.getFullYear()) + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0');
const etichettaPassato = $('#form-prenotazione-etichetta-passato').val();
const etichettaChiuso = $('#form-prenotazione-etichetta-chiuso').val();
const etichettaSoldOut = $('#form-prenotazione-etichetta-soldout').val();
const etichettaNonDisponibile = $('#form-prenotazione-etichetta-non-disponibile').val();
const etichettaListaAttesa = $('#form-prenotazione-etichetta-lista-attesa').val();
const etichettaEsperienza = $('#form-prenotazione-etichetta-esperienza').val();
const etichettaDisponibile = $('#form-prenotazione-etichetta-disponibile').val();
// se la data è minore della data di oggi
if (dayString < startDate) {
return {
classes: "passatoBadge skeletonBadge disabled",
tooltip: etichettaPassato
};
}
// se la data è oltre la data massima del calendario
else if (dayString > endDate) {
return {
classes: "nonDisponibileBadge skeletonBadge disabled",
tooltip: etichettaNonDisponibile
};
}
// se la data è presente nell'array delle date di chiusura
else if (elencoDateChiusuraArray.includes(dayString) && !elencoDateEsperienze.includes(dayString)) {
return {
classes: "chiusoBadge skeletonBadge disabled",
tooltip: etichettaChiuso
};
}
// se la data è presente nell'array delle date di chiusura soldout
else if (elencoChiusuraSoldOut.includes(dayString) && !elencoDateEsperienze.includes(dayString)) {
return {
classes: "soldOutBadge skeletonBadge disabled",
tooltip: etichettaSoldOut
};
}
// se la data è presente nell'array delle date di ferie
else if (elencoDateFerieArray.includes(dayString)) {
return {
classes: "nonDisponibileBadge skeletonBadge disabled",
tooltip: etichettaNonDisponibile
};
}
// se la data è presente nell'array delle date con turni pieni
else if (elencoDateTurnoPieno.includes(dayString) && !elencoDateEsperienze.includes(dayString)) {
return {
classes: "nonDisponibileBadge skeletonBadge disabled",
tooltip: etichettaNonDisponibile
};
}
// se la data è presente nell'array delle date con posti esauriti
else if (elencoDatePostiEsauriti.includes(dayString) && !elencoDateEsperienze.includes(dayString)) {
return {
classes: "nonDisponibileBadge skeletonBadge disabled",
tooltip: etichettaNonDisponibile
};
}
// se la data è presente nell'array delle date di lista d'attesa
else if (elencoDateListaAttesa.includes(dayString)) {
return {
classes: "listaAttesaBadge skeletonBadge",
tooltip: etichettaListaAttesa
};
}
// se la data è presente nell'array delle date di esperienze
else if (elencoDateEsperienze.includes(dayString)) {
return {
classes: "esperienzeBadge skeletonBadge",
tooltip: etichettaEsperienza
};
}
// se la data è presente nell'array delle date disponibili
else if (elencoDateDisponibili.includes(dayString)) {
return {
classes: "giornoDisponibileBadge skeletonBadge",
tooltip: etichettaDisponibile
};
}
// Default
else {
return {
classes: "skeletonBadge",
tooltip: ""
};
}
}
})
// Cambio giorno calendario
.on("changeDate", function (attributi) {
// Nascondiamo il div esperienze
$("#frontpage-step-giorno-esperienze-div").addClass('d-none');
$("#frontpage-step-giorno-no-esperienze-div").addClass('d-none');
const momentData = attributi.date.getFullYear() + '-' + ("0" + (attributi.date.getMonth() + 1)).slice(-2) + '-' + ("0" + attributi.date.getDate()).slice(-2);
const stringaData = attributi.date.getDate() + '/' + (attributi.date.getMonth() + 1);
let giornoDataString = attributi.date.getDay();
let giornoData = parseInt(giornoDataString);
if (giornoData > 0) {
giornoData = giornoData - 1;
} else if (giornoData === 0) {
giornoData = 6;
}
const pax = $('#prenotazione-numero-clienti').val();
const url = '/ajax/ajax_frontpage_orari_prenotazioni.php';
// Getting times for selected day
$.ajax({
method: "POST",
dataType: "json",
url: url,
data: {giorno: giornoData, giornoString: momentData, tipo: 0, userLanguage: userLanguage, pax: pax}
})
// Restituiamo l'esito
.done(function (risultato) {
// La chiamata ritorna un errore se si cerca di forzare un giorno in ferie
if(risultato.error) {
return;
}
divOrari.empty();
divOrari.html(risultato.html);
// Resettiamo i valori dell'orario scelti in precedenza
$('#prenotazione-orario').val('');
// Click su giorno con esperienze
if (elencoDateEsperienze.includes(momentData)) {
// Verifichiamo che il giorno non sia un giorno chiuso o un giorno di ferie
const flagGiornoDisponibile = !(elencoDateChiusuraArray.includes(momentData) || elencoDateFerieArray.includes(momentData));
// Mostriamo il div esperienze
apriDivEsperienze(momentData, pax, flagGiornoDisponibile);
} else {
// Simuliamo il click sul tasto avanti
$('#step-giorno-bottone-avanti').trigger('click');
}
// Attiviamo i tooltip
$('td.day').tooltip();
// Codice inserito per la task PLT-1176, serve per controllare se un turno ha tutti gli orari in soldout in quel caso nascondo i bottoni e mostro il p con la scritta soldout - Daniele
// Prelevo un array con tutti i p con classe turno-id-hidden
const listaTurni = $('.turno-id-hidden');
// Per ogni turno verifico se tutti i bottoni hanno classe soldoutDay
listaTurni.each(function () {
// Prelevo il valore dall'id del p che contiene l'id del turno
const turnoId = $(this).attr('id');
//prelevo il valore del data mostra nome
const dataMostraNome = $(this).data('mostra-nome');
// Prelevo tutti i bottoni con data-turno uguale a turnoId
const listaBottoni = $('button[data-turno="' + turnoId + '"]');
// Prelevo tutti i bottoni con classe soldoutDay e data-turno uguale a turnoId
const listaBottoniSoldout = $('.soldoutDay[data-turno="' + turnoId + '"]');
// Se il numero di bottoni con classe soldoutDay è uguale al numero di bottoni totale
if (listaBottoni.length === listaBottoniSoldout.length && listaBottoni.length > 0 && listaBottoniSoldout.length > 0) {
// Rimuoviamo tutti i bottoni con classe soldoutDay
listaBottoni.remove();
// Mostriamo il p che contiene la scritta del soldout
if (dataMostraNome === 1) { // se abbiamo il mostra nome acceso
// siamo nel caso in cui il turno ha il nome visibile e tutti i suoi orari sono soldout
// Mostriamo il p con la scritta soldout
$(this).removeClass('d-none');
// controllo il tag html presente dopo il p con la scritta soldout
const tagHtml = $(this).next().prop("tagName");
// se è un hr non faccio nulla altrimenti creo un hr, dobbiamo assicurarci che ci sia un separatore tra i turni
if (tagHtml !== 'HR') {
$(this).after('<hr>');
}
} else { // altrimenti siamo nel caso in cui mostra nome del turno è spento e siamo in soldout quindi non visualizzo nulla,
// togliamo l hr successivo poiché altrimenti ne avremmo 2
$(this).next().remove();
}
}
});
});
// Inseriamo la data nel breadcrumb
$('.breadcrumb-step-giorno-testo').addClass('d-none');
const etichettaData = '<i class="fas fa-calendar-alt"></i>';
$('.breadcrumb-step-giorno').html(etichettaData + ' ' + stringaData).removeClass('d-none');
// Inseriamo la data nel riepilogo finale
$("#prenotazione-riepilogo-giorno").html(stringaData);
// Inseriamo la data nel campo hidden
$('#prenotazione-giorno').val(momentData);
$('#frontpage-step-giorno-datepicker-div').removeClass('has-error');
// Aggiungiamo skeleton ai giorni e attiviamo i tooltip
$('td.day').removeClass('skeletonBadge');
})
// Cambio mese calendario
.on("changeMonth", async function (attributi) {
// Calendario in caricamento
$('td.day').addClass('skeletonBadge');
// Nascondiamo il div esperienze
$("#frontpage-step-giorno-esperienze-div").addClass('d-none');
$("#frontpage-step-giorno-no-esperienze-div").addClass('d-none');
// Preleviamo il mese e l'anno corrente
let mese = moment().month() + 1;
let anno = moment().year();
if(attributi.date !== undefined) {
mese = attributi.date.getMonth() + 1;
anno = attributi.date.getFullYear();
}
const minPax = $('#prenotazione-numero-clienti').val();
// Calcolo soldout del mese
const ajaxRequest1 = $.ajax({
method: "POST",
dataType: "json",
async: true,
url: "/ajax/ajax_giorni_chiusura_soldout.php",
data: {mese: mese, anno: anno, pax: minPax}
})
// Restituiamo l'esito
.done(function (risultato) {
elencoChiusuraSoldOut = [];
elencoDateListaAttesa = [];
elencoDateTurnoPieno = [];
elencoDatePostiEsauriti = [];
elencoDateDisponibili = [];
for (const [giorno, tipoSoldout] of Object.entries(risultato)) {
// Soldout
if (tipoSoldout === 0) {
elencoChiusuraSoldOut.push(giorno);
}
// Lista d'attesa
else if (tipoSoldout === 2) {
elencoDateListaAttesa.push(giorno);
}
// Turno pieno
else if (tipoSoldout === 3) {
elencoDateTurnoPieno.push(giorno);
}
// Posti esauriti
else if (tipoSoldout === 4) {
elencoDatePostiEsauriti.push(giorno);
}
// Disponibile
else if (tipoSoldout === 10) {
elencoDateDisponibili.push(giorno);
}
}
});
// Estrazione esperienze del mese corrente
const ajaxRequest2 = $.ajax({
method: "POST",
dataType: "json",
async: true,
url: "/api/frontpage/esperienze/calendario/giorni",
data: {mese: mese, anno: anno, pax: minPax}
})
// Restituiamo l'esito
.done(function (risultato) {
elencoDateEsperienze = risultato.data ?? [];
});
const ajaxRequest = Promise.all([ajaxRequest1, ajaxRequest2]);
ajaxRequest.then(function () {
// Aggiorniamo il calendario
divCalendario.datepicker('update', new Date(anno, mese - 1, 1));
// Aggiungiamo skeleton ai giorni e attiviamo i tooltip
$('td.day').removeClass('skeletonBadge active').tooltip();
});
});
});
// prelevo il valore campo aggiuntivo default
const campiAggiuntiviDefault = $('#campi-aggiuntivi').html();
// Click orario
body.on("click", ".orario-btn", function () {
const self = $(this);
let idZona = $(this).data("zona");
if( idZona === undefined) {
idZona = 0;
} else if( idZona === 0 ){
$('#campi-aggiuntivi').html(campiAggiuntiviDefault)
} else{
//chiamata ajax api per ottenere campi aggiuntivi in base alla zona
$.ajax({
method: "POST",
dataType: "json",
url: "/api/frontpage/prenotazioni/campi/elenco",
data: { idZona: idZona, lingua: userLanguage}
})
.done(function( risultato ) {
const risposta = risultato.status;
if(risposta === true){
//aggiungo i campi aggiuntivi in pagina
$('#campi-aggiuntivi').html(campiAggiuntiviDefault + risultato.html);
} else {
//imposto il valore di default delle prenotazioni
$('#campi-aggiuntivi').html(campiAggiuntiviDefault)
//$('#campi-aggiuntivi').empty();
}
});
}
// Selection dei campi aggiuntivi
body.on('change', 'select.campi-aggiuntivi-select', function(){
const t_select = $(this);
const idCampoAggiuntivo = t_select.data('idcampo');
const sottocampoObbligatorio = t_select.prop('required');
// Provo a cercare l'input target addizionale
const targetAddizionale = t_select.children('option:selected').data('additionaltarget');
const boxTriggerato = $('#' + targetAddizionale + '_cont');
const divCampoAggiuntivo = $('div.sottocampo_aggiuntivo_campo_' + idCampoAggiuntivo);
// Nascondiamo tutti i campi aggiuntivi ulteriori e disattiviamo i relativi input
divCampoAggiuntivo.find('input').prop('disabled', true).prop('required', false);
divCampoAggiuntivo.addClass('d-none');
// Mostriamo solo il div triggerato ed il relativo input
boxTriggerato.find('input').prop('required', sottocampoObbligatorio).prop('disabled', false);
boxTriggerato.removeClass('d-none');
});
$('#frontpage-zona-prenotazione').val(idZona);
// Rimuoviamo la classe da tutti gli altri bottoni dello stesso tipo
$(".orario-btn").removeClass('active').removeClass('focus');
// Verifica flag lista d'attesa
const flagListaAttesa = self.hasClass('listaAttesaDay');
if(flagListaAttesa === true){
$('#frontpage-step-conferma-title-prenotazione').addClass('d-none');
$('#frontpage-step-conferma-title-lista-attesa').removeClass('d-none');
// Inseriamo il flag lista attesa nel relativo campo hidden
$('#prenotazione-flag-lista-attesa').val(1);
} else {
$('#frontpage-step-conferma-title-prenotazione').removeClass('d-none');
$('#frontpage-step-conferma-title-lista-attesa').addClass('d-none');
// Inseriamo il flag lista attesa nel relativo campo hidden
$('#prenotazione-flag-lista-attesa').val(0);
}
// Cerichiamo il valore del bottone premuto
const orarioScelto = self.val();
// Inseriamo l'orario nel breadcrumb e nascondiamo il testo di default
$('.breadcrumb-step-ora-testo').addClass('d-none');
const etichettaOra = '<i class="fas fa-clock"></i>';
$('.breadcrumb-step-ora').html(etichettaOra+' '+orarioScelto).removeClass('d-none');
// Inseriamo l'orario nel riepilogo finale
$("#prenotazione-riepilogo-ora").html(orarioScelto);
// Inseriamo l'orario nel campo hidden
$('#prenotazione-orario').val(orarioScelto);
// Rimuoviamo la classe errore da tutti i div degli orari
divOrari.find('button').addClass('frontpage-btn').removeClass('btn-danger');
$("input#prenotazione-orario-turno").val(self.attr("data-turno"));
// Simuliamo il click sul tasto avanti
$('#step-ora-bottone-avanti').trigger('click');
// Prende l'idTurno dell'orario selezionato
const idTurno = $(this).data('turno');
// Aggiorna il valore del campo hidden
$('#prenotazione-idturno-hidden').val(idTurno);
});
//Serve per mostrare o nascondere gli orari della zona cliccata.
body.on('click', 'div[id^="div-zona"][id$="-label"]', function (){
const idZona=$(this).data('zona');
//Adesso con questa id zona mostro gli orari della zona relativa
const divOrariZona=$("#div-zona-orari-"+idZona);
// Se è presente un elemento con classe .no-times-zone-message, svuota il contenuto e lascia solo quello
if (divOrariZona.find('.no-times-zone-message').length) {
divOrariZona.html(divOrariZona.find('.no-times-zone-message'));
}
if(divOrariZona.hasClass("d-none")){
$(this).find('i').each(function (){
$(this).removeClass('fa-chevron-down').addClass('fa-chevron-up');
})
divOrariZona.removeClass("d-none");
}else{
$(this).find('i').each(function (){
$(this).removeClass('fa-chevron-up').addClass('fa-chevron-down');
})
divOrariZona.addClass("d-none");
}
});
//Triggero quando avviene un onclick su un bottone con id che inizia con zona- e finisce con -dettagli
body.on('click', 'i[id^="zona-"][id$="-immagine"]', function (){
//Bene. Ora apro il modal con i dettagli della zona e devo fare una chiamata per prendere immagine e descrizione relativa.
const idZona=$(this).data('zona');
const divModalBody=$("#modal-zone-detail-body");
let modalTitle = divModal.find('.modal-title');
//Resetto il contenuto del titolo altrimenti il titolo non cambia tra un modal e l'altro
modalTitle.html('Dettagli - [[nomeZona]]');
$.ajax({
method: "POST",
dataType: "json",
url: "/ajax/ajax_zona_get.php",
data: { idZona: idZona}
})
.done(function( risultato ) {
const zoneData = risultato.info[idZona];
//Prendo il valore di modal-title e cerco nella stringa '[[nomeZona]]' e lo sostituisco col reale nome della zona
const nomeZona=zoneData.nome;
const newModalTitle = modalTitle.html().replace('[[nomeZona]]',nomeZona);
divModal.find('.modal-title').html(newModalTitle);
const urlImg=zoneData.urlImmagineZona;
if(urlImg!==undefined){
divModal.find('img').attr('src',urlImg).removeClass('d-none');
}else{
divModal.find('img').addClass('d-none');
}
divModal.modal('show');
});
});
//Devo fare in modo che se il mouse va sull'iconcina, deve diventare un puntatoreù
body.on('mouseenter', 'i[id^="zona-"][id$="-immagine"]', function (){
$(this).css('cursor','pointer');
});
// Click su icona breadcrumb
body.on("click", "div.breadcrumb-step.active", function () {
const nextStep = $(this).data('targetdiv');
// Nascondiamo tutto i div
$('.card').addClass('d-none');
// Rimuoviamo skeletonBadge e active dai giorni
$('td.day').removeClass('active skeletonBadge');
// Mostriamo il prossimo step
$('#'+nextStep).removeClass('d-none');
});
// Invio form prenotazione
$("#form-prenotazione-conferma, #form-prenotazione-prosegui").on('click', function(e) {
e.preventDefault();
const iconaBottone = $(this).find('i');
iconaBottone.removeClass('fa-check').addClass('fa-spinner fa-spin');
$(this).prop('disabled', true);
grecaptcha.enterprise.ready(async () => {
const action = 'FORM_PRENOTAZIONE_SUBMIT';
const token = await grecaptcha.enterprise.execute('6LcLggArAAAAACrAuiIfo1yt0G2TxhfgqvDSxL0K', {action: action});
recaptchaVerify(token, action);
});
});
// Click su accettazione policy garanzia CC
$('#checkbox-accettazione-cancellazione-policy-cc-garanzia').on('change',function(){
const checked=$(this).is(":checked")
if(checked){
//Riabilito il tasto avanti.
$("#div-carta-bottone-avanti").prop('disabled',false);
} else{
//ALtrimenti lo disabilito
$("#div-carta-bottone-avanti").prop('disabled',true);
}
});
});
function recaptchaVerify(token, action) {
$.ajax({
method: "POST",
dataType: "json",
url: "/ajax/ajax_recaptcha_verify.php",
data: {recaptchaToken: token, recaptchaAction: action}
})
// Restituiamo l'esito
.done(function( risposta ) {
const bottoneSubmitConferma = $('#form-prenotazione-conferma');
const bottoneSubmitProsegui = $('#form-prenotazione-prosegui');
const validToken = risposta.valid ?? false;
// Inviamo il form
if(validToken){
$('#form-prenotazione').submit();
return;
}
// Segnalazione errore
toastr.error('Errore di verifica reCaptcha. Riprova.');
// Riabilitiamo i bottoni
bottoneSubmitConferma.prop('disabled', false).find('i').removeClass('fa-spinner fa-spin').addClass('fa-check');
bottoneSubmitProsegui.prop('disabled', false).find('i').removeClass('fa-spinner fa-spin').addClass('fa-check');
});
}
async function verificaStep(stepID, itiInstance) {
// Verifica persone
if(stepID === 'step-numero-persone') {
const numeroClientiRaw = $('#prenotazione-numero-clienti').val();
return parseInt(numeroClientiRaw) > 0;
}
// Verifica giorno
else if(stepID === 'step-giorno') {
const prenotazioneGiornoString = $('#prenotazione-giorno').val();
const prenotazioneGiornoMoment = moment(prenotazioneGiornoString);
return prenotazioneGiornoMoment.isValid();
}
// Verifica orario
else if(stepID === 'step-ora') {
const prenotazioneGiornoString = $('#prenotazione-giorno').val();
const prenotazioneOrarioString = $('#prenotazione-orario').val();
const numClienti = $('#prenotazione-numero-clienti').val();
const zona = $("#frontpage-zona-prenotazione").val();
await verificaAutorizzazioneCC(prenotazioneGiornoString, prenotazioneOrarioString, numClienti, zona);
const prenotazioneGiornoMoment = moment(prenotazioneGiornoString+' '+prenotazioneOrarioString+':00');
return prenotazioneGiornoMoment.isValid();
}
// Compilazione dati riepilogo
else if(stepID === 'step-dati-anagrafici') {
const nome = $('#prenotazione-nome').val();
const cognome = $('#prenotazione-cognome').val();
const email = $('#prenotazione-email').val();
// Inseriamo prefisso e telefono nei corrispondenti campi hidden
const telefonoCompleto = itiInstance.getNumber() ?? '';
// Istanziamo la validazione dei campi
let verificaNome = (nome !== '');
let verificaCognome = (cognome !== '');
let verificaEmail = false;
let verificaTelefono = false;
// Creare da telefono due valori pari a prefisso e numero ed inserirli nei campi hidden
$('#prenotazione-riepilogo-nome').html(cognome + ' ' + nome);
$('#prenotazione-riepilogo-email').html(email);
//
(verificaNome === false) ? $('#prenotazione-nome').closest('.form-floating').addClass('has-error') : $('#prenotazione-nome').closest('.form-floating').removeClass('has-error');
(verificaCognome === false) ? $('#prenotazione-cognome').closest('.form-floating').addClass('has-error') : $('#prenotazione-cognome').closest('.form-floating').removeClass('has-error');
// Effettuiamo la validazione dell'email in ajax
await $.ajax({
method: "GET",
dataType: "json",
url: "/ajax/ajax_verifica_email.php",
data: { email: email}
})
// Restituiamo l'esito
.done(function( risposta ) {
if(risposta.status === true) {
$('#prenotazione-riepilogo-email').html(email);
$('#prenotazione-email').closest('.form-floating').removeClass('has-error');
verificaEmail = true;
} else {
$('#prenotazione-riepilogo-email').html(email);
$('#prenotazione-email').closest('.form-floating').addClass('has-error');
verificaEmail = false;
}
});
// Effettuiamo la validazione del telefono in ajax
await $.ajax({
method: "GET",
dataType: "json",
url: "/ajax/ajax_verifica_telefono.php",
data: { telefonoCompleto: telefonoCompleto}
})
// Restituiamo l'esito
.done(function( risposta ) {
if(risposta.status === true) {
$('#prenotazione-telefono').val(risposta.telefono);
$('#prenotazione-prefisso').val(risposta.prefisso);
$('#prenotazione-riepilogo-telefono').html(telefonoCompleto);
$('#phone').closest('.form-floating').removeClass('has-error');
verificaTelefono = true;
} else {
$('#prenotazione-telefono').val('');
$('#prenotazione-prefisso').val('');
$('#prenotazione-riepilogo-telefono').html('');
$('#phone').closest('.form-floating').addClass('has-error');
verificaTelefono = false;
}
});
return verificaTelefono && verificaNome && verificaCognome && verificaEmail;
}
// Compilazione note
else if(stepID === 'step-campi-aggiuntivi') {
const note = $('#prenotazione-note').val();
$('#prenotazione-riepilogo-note').html(note);
}
// Tutti gli altri step sono validati da ParsleyJS
const divCorrente = $('#' + stepID);
const elementoVerifica = divCorrente.find('input[type=text], input[type=email], input[type="checkbox"]:checked, textarea, select');
const formPrenotazione = $("#form-prenotazione");
let verificaEmailField, verificaFormFields;
// Attivazione ParsleyJS
// Effettuiamo la validazione degli elementi contenuti nel gruppo corrente
const parsleyInstance = formPrenotazione.parsley({
excluded: 'input:disabled, select:disabled, textarea:disabled, input.parsley-excluded',
errorsMessagesDisabled: true
});
// Aggiunta errori
parsleyInstance.on('field:error', function(a,b) {
// This global callback will be called for any field that fails validation.
this.$element.closest('.form-floating').addClass('has-error');
this.$element.closest('.form-group').addClass('has-error');
this.$element.closest('.form-check').addClass('has-error');
});
// Rimozione errori
parsleyInstance.on('field:success', function(a,b) {
// This global callback will be called for any field that fails validation.
this.$element.closest('.form-floating').removeClass('has-error');
this.$element.closest('.form-group').removeClass('has-error');
this.$element.closest('.form-check').removeClass('has-error');
});
if(stepID === '') {
verificaFormFields = parsleyInstance.validate({group: stepID, force: false});
verificaEmailField = await verificaEmail('#prenotazione-email');
} else {
verificaFormFields = parsleyInstance.validate({group: stepID, force: false});
verificaEmailField = true;
}
return verificaEmailField && verificaFormFields;
}
function verificaAutorizzazioneCC(giorno, orario, pax, zona=0)
{
const linguaUtente= $("#frontpage-lingua-utente").val() === "" ? "it" : $("#frontpage-lingua-utente").val();
return $.ajax({
method: "POST",
dataType: "json",
url: "/ajax/ajax_verifica_autorizzazione_cc.php",
data: { giorno: giorno, orario: orario, pax: pax,zona:zona,flagCheckListaAttesa:1, linguaUtente:linguaUtente}
})
// Restituiamo l'esito
.done(function( risposta ) {
if(risposta.status === true) {
const txtFasciaCC = risposta.prenotazioniFasciaCCText;
const policyGaranziaCc = risposta.data.policyCancellazione;
const importoGaranziaCc = risposta.data.importo;
const tipoGaranziaCc = risposta.data.tipo;
const adesso = moment();
const dataCancellazione = moment(giorno + orario, 'YYYYMMDDHH:mm').subtract(policyGaranziaCc, 'minutes');
const stringaDataCancellazione = dataCancellazione.format('DD/MM/YYYY HH:mm');
//imposto il testo della fascia al h5 chiamato prenotazione-riepilogo-testo
$("#prenotazione-riepilogo-testo").html(txtFasciaCC);
// Sempre rimborsabile
if(policyGaranziaCc === 0) {
$('#frontpage-step-carta-entro-div').addClass('d-none');
$('#frontpage-step-carta-entro-nolimit').removeClass('d-none');
$('#frontpage-step-carta-entro-norefund').addClass('d-none');
}
// Non rimborsabile
else if(policyGaranziaCc === -1) {
$('#frontpage-step-carta-entro-div').addClass('d-none');
$('#frontpage-step-carta-entro-nolimit').addClass('d-none');
$('#frontpage-step-carta-entro-norefund').removeClass('d-none');
}
// Se la data è troppo recente e la cancellazione cade nel passato
else if(dataCancellazione > adesso) {
$('#frontpage-step-carta-entro-div').removeClass('d-none');
$('#frontpage-step-carta-entro-nolimit').addClass('d-none');
$('#frontpage-step-carta-entro-norefund').addClass('d-none');
$('#frontpage-step-carta-entro').html(stringaDataCancellazione);
} else {
$('#frontpage-step-carta-entro-div').addClass('d-none');
$('#frontpage-step-carta-entro-nolimit').addClass('d-none');
$('#frontpage-step-carta-entro-norefund').removeClass('d-none');
}
const importoGaranziaCcFormattato = parseFloat(risposta.data.importo).toFixed(2).replace('.', ',');
$('#frontpage-step-carta-importo').html(importoGaranziaCcFormattato);
$('#frontpage-importo-garanzia').val(importoGaranziaCc);
$('#frontpage-tipo-garanzia').val(tipoGaranziaCc);
$('#frontpage-policy-garanzia').val(policyGaranziaCc);
const tipo = parseInt(risposta.data.tipo);
if (tipo === 1) {
$('#frontpage-step-carta-intera-prenotazione').addClass('d-none');
$('#frontpage-step-carta-ciascun-coperto').removeClass('d-none');
} else {
$('#frontpage-step-carta-intera-prenotazione').removeClass('d-none');
$('#frontpage-step-carta-ciascun-coperto').addClass('d-none');
}
// Lista d'attesa
if (risposta.isListaAttesa === true){
$('#form-prenotazione-conferma').removeClass('d-none');
$('#form-prenotazione-prosegui').addClass('d-none');
}else{
$('#form-prenotazione-conferma').addClass('d-none');
$('#form-prenotazione-prosegui').removeClass('d-none');
}
}
else if(risposta.status === false && risposta.isListaAttesa === true){
$('#form-prenotazione-conferma').removeClass('d-none');
$('#form-prenotazione-prosegui').addClass('d-none');
}
else {
$('#form-prenotazione-conferma').removeClass('d-none');
$('#form-prenotazione-prosegui').addClass('d-none');
$('#frontpage-importo-garanzia').val('0');
$('#frontpage-tipo-garanzia').val('0');
$('#frontpage-policy-garanzia').val('0');
}
})
.fail (function() {
$('#form-prenotazione-conferma').removeClass('d-none');
$('#form-prenotazione-prosegui').addClass('d-none');
$('#frontpage-importo-garanzia').val('0');
$('#frontpage-tipo-garanzia').val('0');
$('#frontpage-policy-garanzia').val('0');
});
}
async function verificaEmail(targetField) {
const email = $(targetField).val();
let response = await fetch('/ajax/ajax_verifica_email.php?email=' + encodeURIComponent(email));
let responseJSON = await response.text();
response = JSON.parse(responseJSON);
const responseStatus = response.status ?? false;
if(responseStatus === false) {
$(targetField).closest('div.form-group').addClass('has-error');
$(targetField).closest('div.form-floating').addClass('has-error');
} else {
$(targetField).closest('div.form-group').removeClass('has-error');
$(targetField).closest('div.form-floating').removeClass('has-error');
}
return responseStatus;
}
function apriDivEsperienze(giorno, pax, flagGiornoDisponibile = true){
//Chiamata ajax per ottenere le esperienze
$.ajax({
method: "POST",
dataType: "json",
url: "/api/frontpage/esperienze/giorno/elenco",
data: { giornoString: giorno, pax: pax, giornoDisponibile: flagGiornoDisponibile}
})
.done(function( risultato ) {
const divEsperienze=$("#frontpage-step-giorno-esperienze-div");
const divNoEsperienze = $('#frontpage-step-giorno-no-esperienze-div');
const elencoEsperienze = Object.entries(risultato.data) ?? [];
const giornoUrl = giorno.replace(/-/g, '');
const divEsperienzeElenco = $('#frontpage-step-giorno-esperienze-elenco-div');
// Svuotiamo il div delle esperienze
divEsperienzeElenco.empty();
// Processiamo tutte le esperienze
if(risultato.status === true && elencoEsperienze.length > 0){
// Generiamo un riga per ogni esperienza
elencoEsperienze.forEach(function(esperienza, index){
const infoEsperienza = esperienza[1];
const linguaUtente = $('#frontpage-lingua-utente').val();
const testoBottonePrenota = $('#frontpage-step-giorno-esperienze-bottone-prenota-text').val();
const titoloEsperienzaLingua = infoEsperienza.titolo[linguaUtente] ?? infoEsperienza.titolo['it'];
const titoloEsperienza = (titoloEsperienzaLingua !== '')? titoloEsperienzaLingua : infoEsperienza.titolo['it'];
const descrizioneEsperienza = infoEsperienza.descrizione[linguaUtente] ?? infoEsperienza.descrizione['it'];
const esperienzaHash = infoEsperienza.hash ?? '';
const urlEsperienza = (pax > 0 && giornoUrl !== '')? '/esperienze/'+esperienzaHash + '/' + pax + '/' + giornoUrl : '/esperienze/' + esperienzaHash;
const accordionId = "accordion-esperienza-" + index;
const rigaEsperienza = $(`
<div class="mb-2 border border-dark rounded align-items-center">
<div class="p-3 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center ml-auto">
<button type="button" class="btn btn-sm btn-toggle-accordion" data-bs-toggle="collapse" data-bs-target="#${accordionId}">
<i class="fas fa-chevron-down"></i>
</button>
<h6 class="m-0 text-truncate d-none d-md-block" style="max-width: 300px;">
${titoloEsperienza}
</h6>
<h6 class="m-0 text-truncate d-md-none" style="max-width: 150px;">
${titoloEsperienza}
</h6>
</div>
<a href="${urlEsperienza}" class="btn btn-plateform btn-sm">${testoBottonePrenota}</a>
</div>
<!-- Accordion -->
<div class="accordion-collapse collapse" id="${accordionId}">
<div class="accordion-body text-start px-4">
<p>${descrizioneEsperienza}</p>
</div>
</div>
</div>
`);
divEsperienzeElenco.append(rigaEsperienza);
});
// Bottone continua senza esperienza
if($('.frontpage-btn-orari').length !== 0 && flagGiornoDisponibile === true){
const testoBottoneContinua = $('#frontpage-step-giorno-esperienze-bottone-continua-text').val();
$('<button type="button" class="btn btn-plateform btn-block mt-2" id="frontpage-step-giorno-esperienze-bottone-continua">'+testoBottoneContinua+'</button>').appendTo(divEsperienzeElenco);
} else {
const testoBottoneContinua = $('#disponibile-solo-esperienza-text').val();
$('<p class="mt-2">'+testoBottoneContinua+'</p>').appendTo(divEsperienzeElenco);
}
divEsperienze.removeClass('d-none').html(risultato.html);
divNoEsperienze.addClass('d-none');
}
// Nessuna esperienza
else {
divEsperienze.addClass('d-none');
divNoEsperienze.removeClass('d-none');
}
// Tooltip
$('td.day').removeClass('active skeletonBadge');
$('.tooltip').hide();
document.getElementById("frontpage-step-giorno-esperienze-div").scrollIntoView({ behavior: "instant", block: "start" });
});
}