89 lines
2.8 KiB
JavaScript
89 lines
2.8 KiB
JavaScript
|
// HarborSmith - Booking JavaScript
|
||
|
|
// ================================
|
||
|
|
|
||
|
|
// Calendar functionality
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
// Calendar day selection
|
||
|
|
const calendarDays = document.querySelectorAll('.calendar-day.available');
|
||
|
|
calendarDays.forEach(day => {
|
||
|
|
day.addEventListener('click', function() {
|
||
|
|
// Remove previous selection
|
||
|
|
document.querySelector('.calendar-day.selected')?.classList.remove('selected');
|
||
|
|
// Add selection to clicked day
|
||
|
|
this.classList.add('selected');
|
||
|
|
// Update summary
|
||
|
|
updateBookingSummary();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Duration selection
|
||
|
|
const durationOptions = document.querySelectorAll('input[name="duration"]');
|
||
|
|
durationOptions.forEach(option => {
|
||
|
|
option.addEventListener('change', updateBookingSummary);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Guest number input
|
||
|
|
const guestInput = document.querySelector('input[type="number"]');
|
||
|
|
if (guestInput) {
|
||
|
|
guestInput.addEventListener('change', updateBookingSummary);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Yacht selection (for booking page 2)
|
||
|
|
const yachtCards = document.querySelectorAll('.yacht-select-card');
|
||
|
|
yachtCards.forEach(card => {
|
||
|
|
card.addEventListener('click', function() {
|
||
|
|
// Remove previous selection
|
||
|
|
document.querySelector('.yacht-select-card.selected')?.classList.remove('selected');
|
||
|
|
// Add selection
|
||
|
|
this.classList.add('selected');
|
||
|
|
updateBookingSummary();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Addon selection (for booking page 3)
|
||
|
|
const addonCards = document.querySelectorAll('.addon-card');
|
||
|
|
addonCards.forEach(card => {
|
||
|
|
card.addEventListener('click', function() {
|
||
|
|
this.classList.toggle('selected');
|
||
|
|
updateBookingSummary();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update booking summary
|
||
|
|
function updateBookingSummary() {
|
||
|
|
// This would normally update the summary sidebar with selected options
|
||
|
|
console.log('Updating booking summary...');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Form validation for final step
|
||
|
|
function validateBookingForm() {
|
||
|
|
const form = document.getElementById('bookingForm');
|
||
|
|
if (!form) return true;
|
||
|
|
|
||
|
|
const inputs = form.querySelectorAll('[required]');
|
||
|
|
let isValid = true;
|
||
|
|
|
||
|
|
inputs.forEach(input => {
|
||
|
|
if (!input.value.trim()) {
|
||
|
|
input.classList.add('error');
|
||
|
|
isValid = false;
|
||
|
|
} else {
|
||
|
|
input.classList.remove('error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return isValid;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handle form submission
|
||
|
|
const bookingForm = document.getElementById('bookingForm');
|
||
|
|
if (bookingForm) {
|
||
|
|
bookingForm.addEventListener('submit', (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (validateBookingForm()) {
|
||
|
|
alert('Thank you for your booking request! We will contact you shortly to confirm your charter.');
|
||
|
|
// In production, this would submit to a server
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|