Confirmation
Activitée:
Char à voile Dakhla
Lieu de prise en charge:
Dakhla
Votre réservation a été soumise. Vous recevrez une confirmation sous peu.
Btn.className = 'date-btn';
dateBtn.type = 'button';
dateBtn.textContent = i;
// Create a date object for this day
const thisDate = new Date(year, month, i);
// Disable past dates
if (thisDate < today) {
dateBtn.disabled = true;
} else {
// Set click handler for selectable dates
dateBtn.onclick = function(e) {
e.stopPropagation();
selectDate(thisDate);
};
}
// Highlight selected date if it's in this month
if (selectedDate &&
thisDate.getDate() === selectedDate.getDate() &&
thisDate.getMonth() === selectedDate.getMonth() &&
thisDate.getFullYear() === selectedDate.getFullYear()) {
dateBtn.classList.add('selected');
}
dateGrid.appendChild(dateBtn);
}
}
// Navigate to previous month
document.getElementById('prevMonth').addEventListener('click', function(e) {
e.stopPropagation();
currentDate.setMonth(currentDate.getMonth() - 1);
updateCalendarMonth(currentDate);
});
// Navigate to next month
document.getElementById('nextMonth').addEventListener('click', function(e) {
e.stopPropagation();
currentDate.setMonth(currentDate.getMonth() + 1);
updateCalendarMonth(currentDate);
});
// Handle date selection
function selectDate(date) {
selectedDate = date;
// Update hidden input with ISO format for form submission
const dateInput = document.getElementById('tourDate');
dateInput.value = date.toISOString().split('T')[0];
// Update displayed date in a readable format
const options = { month: 'short', day: 'numeric', year: 'numeric' };
const formattedDate = date.toLocaleDateString('fr-FR', options);
document.getElementById('dateDisplay').textContent = formattedDate;
document.getElementById('selectedDateDisplay').textContent = formattedDate;
// Close the dropdown
document.getElementById('dateDropdown').classList.remove('active');
// Update calendar to show selection if we're viewing the same month
if (currentDate.getMonth() === date.getMonth() && currentDate.getFullYear() === date.getFullYear()) {
updateCalendarMonth(currentDate);
}
}// Change participant count for a specific category
function changeParticipantCount(category, change) {
const countElement = document.getElementById(category + 'Count');
const minusBtn = document.getElementById(category + 'MinusBtn');
let currentCount = parseInt(countElement.textContent);
// Calculate new count with min/max limits
const newCount = Math.max(0, Math.min(10, currentCount + change));
countElement.textContent = newCount;
// Disable/enable minus button based on count
minusBtn.disabled = newCount === 0;
// Update button styles based on count
if (newCount === 0) {
minusBtn.style.color = '#9ca3af';
} else {
minusBtn.style.color = '#0066ff';
}
}
// Confirm participant selection and close dropdown
function confirmParticipants() {
updateParticipantDisplay();
document.getElementById('participantsDropdown').classList.remove('active');
updatePriceBreakdown();
}
// Update the main participant display
function updateParticipantDisplay() {
const adultCount = parseInt(document.getElementById('adultCount').textContent);
const childCount = parseInt(document.getElementById('childCount').textContent);
const totalParticipants = adultCount + childCount;
document.getElementById('participantsDisplay').textContent = `Participants: ${totalParticipants}`;
}
// Update price breakdown based on participants
function updatePriceBreakdown() {
const adultCount = parseInt(document.getElementById('adultCount').textContent);
const childCount = parseInt(document.getElementById('childCount').textContent);
const adultSubtotal = adultCount * PRICES.adult;
const childSubtotal = childCount * PRICES.child;
const totalPrice = adultSubtotal + childSubtotal;
// Update price breakdown HTML
const priceBreakdownEl = document.getElementById('priceBreakdown');
let breakdownHTML = '';
if (adultCount > 0) {
breakdownHTML += `
Adulte (${adultCount} × ${PRICES.adult}د.م)
${adultSubtotal}د.م
`;
}
if (childCount > 0) {
breakdownHTML += `
Enfant (${childCount} × ${PRICES.child}د.م)
${childSubtotal}د.م
`;
}
priceBreakdownEl.innerHTML = breakdownHTML;
document.getElementById('totalPriceDisplay').textContent = `${totalPrice}د.م`;
}function selectLanguage(language) {
document.getElementById('languageDisplay').textContent = language;
document.getElementById('selectedLanguage').textContent = language;
document.getElementById('languageDropdown').classList.remove('active');
}function selectPickup(location) {
document.getElementById('pickupDisplay').textContent = location;
document.getElementById('customLocation').style.display = 'none';
document.getElementById('pickupDropdown').classList.remove('active');
}function toggleCustomLocation() {
const customInput = document.getElementById('customLocation');
customInput.style.display = 'block';
customInput.focus();
}function selectTimeSlot(element) {
// Clear previous selection
document.querySelectorAll('.time-slot').forEach(slot => {
slot.classList.remove('selected');
});
// Set new selection
element.classList.add('selected');
selectedTimeSlot = element.textContent;
// Store in hidden input
document.getElementById('selectedTime').value = selectedTimeSlot;
}function checkAvailability() {
// Check if required fields are filled
const tourDate = document.getElementById('tourDate').value;
const adultCount = parseInt(document.getElementById('adultCount').textContent);
const childCount = parseInt(document.getElementById('childCount').textContent);
if (!tourDate) {
alert('Veuillez sélectionner une date');
return;
}
if (adultCount + childCount === 0) {
alert('Veuillez sélectionner au moins un participant');
return;
}
// Show activity details
document.getElementById('activityDetails').classList.add('active');
// Update price breakdown
updatePriceBreakdown();
}// Close dropdowns when clicking outside
document.addEventListener('click', (event) => {
if (!event.target.closest('.selector-button') && !event.target.closest('.dropdown-content')) {
document.querySelectorAll('.dropdown-content').forEach(dropdown => {
dropdown.classList.remove('active');
});
}
});function displayMessage(message, isSuccess) {
const messageElement = document.getElementById('formMessage');
messageElement.textContent = message;
messageElement.style.display = 'block';
if (isSuccess) {
messageElement.className = 'success-message';
} else {
messageElement.className = 'error-message';
}
// Scroll to message
messageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
}// Submit booking form to Google Sheets
function submitForm() {
// Validate inputs
const adultCount = parseInt(document.getElementById('adultCount').textContent);
const childCount = parseInt(document.getElementById('childCount').textContent);
const totalParticipants = adultCount + childCount;
if (totalParticipants === 0) {
displayMessage('Veuillez sélectionner au moins un participant', false);
return;
}
if (!selectedDate) {
displayMessage('Veuillez sélectionner une date', false);
return;
}
if (!document.querySelector('.time-slot.selected')) {
displayMessage('Veuillez sélectionner une heure de début', false);
return;
}
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
if (!name || !email || !phone) {
displayMessage('Veuillez remplir tous les champs requis', false);
return;
}
const selectedTimeElement = document.querySelector('.time-slot.selected');
const timeSlot = selectedTimeElement ? selectedTimeElement.textContent : '';
// Calculate total price
const adultSubtotal = adultCount * PRICES.adult;
const childSubtotal = childCount * PRICES.child;
const totalPrice = adultSubtotal + childSubtotal;
// Format participant details
let participantDetails = '';
if (adultCount > 0) participantDetails += `Adulte: ${adultCount} `;
if (childCount > 0) participantDetails += `Enfant: ${childCount}`;
// Create form data object
const formData = {
tourName: 'Char à voile dakhla',
adultCount: adultCount,
childCount: childCount,
totalParticipants: totalParticipants,
date: document.getElementById('tourDate').value,
formattedDate: document.getElementById('dateDisplay').textContent,
language: document.getElementById('languageDisplay').textContent,
pickup: document.getElementById('pickupDisplay').textContent,
customLocation: document.getElementById('customLocation').value,
timeSlot: timeSlot,
name: name,
email: email,
phone: phone,
totalPrice: `${totalPrice}د.م`,
timestamp: new Date().toISOString()
};// Populate confirmation fields
document.getElementById('confirmParticipants').textContent = participantDetails;
document.getElementById('confirmGuide').textContent = formData.language;
document.getElementById('confirmPickup').textContent = formData.pickup + (formData.customLocation ? ' - ' + formData.customLocation : '');
document.getElementById('confirmDateTime').textContent = formData.formattedDate + ' at ' + formData.timeSlot;
document.getElementById('confirmName').textContent = formData.name;
document.getElementById('confirmEmail').textContent = formData.email;
document.getElementById('confirmPhone').textContent = formData.phone;
document.getElementById('confirmPrice').textContent = formData.totalPrice;// Replace with your Google Apps Script Web App URL
const scriptURL = 'https://script.google.com/macros/s/AKfycbwyKaDNGARAzbq3vRFiaJFE8y0RJi-5oxyso1UqrjrHxRXEGnwuVh-Tgfd9oBo7sGJTYw/exec';
// Disable submit button and show loading message
document.getElementById('submitButton').disabled = true;
displayMessage('Soumission de votre réservation...', true);
// Send data to Google Sheets
fetch(scriptURL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
if (data.result === 'success') {
// Show confirmation section
document.getElementById('activityDetails').classList.remove('active');
document.getElementById('bookingConfirmation').style.display = 'block';
// Scroll to confirmation
document.getElementById('bookingConfirmation').scrollIntoView({ behavior: 'smooth', block: 'start' });
// Display success message
displayMessage('Réservation soumise avec succès!', true);
} else {
throw new Error(data.message || 'Unknown error');
}
})
.catch(error => {
console.error('Error:', error);
displayMessage('Une erreur s\'est produite lors de la soumission de votre réservation. Veuillez réessayer ou nous contacter directement.', false);
document.getElementById('submitButton').disabled = false;
});
}
