Initial import of HarborSmith website

website-mockups/js/booking.js

@@ -0,0 +1,89 @@
+// 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
+        }
+    });
+}