<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Booking System</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
initializeForm();
$("#voyageSelection").change(handleVoyageChange);
$("#startDate, #endDate, #people, input[name='cabinType']").change(calculatePrice);
});
function initializeForm() {
// Initialize date pickers
$("#startDate, #endDate").datepicker({
minDate: 0,
onSelect: calculatePrice
});
handleVoyageChange(); // Initial form state update
}
function handleVoyageChange() {
var voyage = $("#voyageSelection").val();
$(".dynamic").hide(); // Hide all dynamic elements
if (voyage === "4") {
$("#cabinOptions").show();
$("#dateRangeSelection").hide(); // Hide date range for fixed-date retreat
$("#peopleSelection").show();
} else if (voyage === "5" || voyage === "6") {
$("#dateRangeSelection, #peopleSelection").show();
$("#cabinOptions").hide(); // Hide cabin options for private hires
}
calculatePrice();
}
function calculatePrice() {
let voyage = $("#voyageSelection").val();
let startDate = $("#startDate").datepicker("getDate");
let endDate = $("#endDate").datepicker("getDate");
let days = 0;
if (startDate && endDate) {
days = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
}
let people = parseInt($("#people").val() || "1", 10);
let cabinType = $("input[name='cabinType']:checked").val();
let price = 0;
switch (voyage) {
case "1":
price = 2700;
break;
case "2":
price = 9000;
break;
case "3":
price = 5590;
break;
case "4":
if (cabinType === "owners") price = 4000;
else if (cabinType === "sharedOwners") price = 2500 * people;
else price = 2000 * people; // Assume shared starboard or port
break;
case "5":
case "6":
let basePricePerDay = voyage === "5" ? 1000 : 1300;
price = basePricePerDay * days * people;
break;
}
$("#totalPrice").text("Total Price: " + price + "€");
}
</script>
</head>
<body>
<form>
<label for="voyageSelection">Select Your Voyage:</label>
<select id="voyageSelection">
<option value="1">Executive Seascape - Archipelago Explorer</option>
<option value="2">Executive Seascape - Strategic Leadership Challenge 3 Days</option>
<option value="3">Executive Seascape - 1 Day Charter</option>
<option value="4">Yoga & Sailing Retreat - 1 Week</option>
<option value="5">Private Hire without Skipper</option>
<option value="6">Private Hire with Skipper</option>
</select><br><br>
<div id="dateRangeSelection" class="dynamic">
<label for="startDate">Start Date:</label>
<input type="text" id="startDate"><br><br>
<label for="endDate">End Date:</label>
<input type="text" id="endDate"><br><br>
</div>
<div id="peopleSelection" class="dynamic">
<label for="people">Amount of People:</label>
<input type="number" id="people" min="1" max="6"><br><br>
</div>
<div id="cabinOptions" class="dynamic">
<fieldset>
<legend>Cabin Type:</legend>
<input type="radio" id="owners" name="cabinType" value="owners">
<label for="owners">Owners Cabin (Private)</label><br>
<input type="radio" id="sharedOwners" name="cabinType" value="sharedOwners">
<label for="sharedOwners">Owners Cabin (Shared)</label><br>
<input type="radio" id="starboard" name="cabinType" value="starboard" checked>
<label for="starboard">Starboard/Portside Cabin (Private)</label><br>
<input type="radio" id="shared" name="cabinType" value="shared">
<label for="shared">Starboard/Portside Cabin (Shared)</label><br>
</fieldset><br>
</div>
<span id="totalPrice">Total Price: 0€</span>
</form>
</body>
</html>