?
<div id="vacation-wizard">
<form id="vacation-form">
<div class="step active" data-step="1">
<label for="live">Where do you live?</label>
<input type="text" id="live" name="WHERE_DO_YOU_LIVE" required>
<div class="nav">
<button type="button" class="next">Next</button>
</div>
</div>
<div class="step" data-step="2">
<label for="drive">How many hours are you willing to drive?</label>
<select id="drive" name="HOW_MANY_HOURS_ARE_YOU_WILLING_TO_DRIVE" required>
<option value="">Select one</option>
<option value="1-2">1 to 2 hours</option>
<option value="3-5">3 to 5 hours</option>
<option value="6-8">6 to 8 hours</option>
<option value="8+">8+ hours</option>
<option value="I would rather fly">I would rather fly</option>
</select>
<div class="nav">
<button type="button" class="prev">Back</button>
<button type="button" class="next">Next</button>
</div>
</div>
<div class="step" data-step="3">
<label for="vacation-type">What kind of vacation do you want?</label>
<select id="vacation-type" name="VACATION_TYPE" required>
<option value="">Select one</option>
<option value="relaxing">Relaxing</option>
<option value="adventurous">Adventurous</option>
<option value="romantic">Romantic</option>
<option value="family-friendly">Family-friendly</option>
<option value="food-focused">Food-focused</option>
<option value="nature-focused">Nature-focused</option>
<option value="city">City</option>
</select>
<div class="nav">
<button type="button" class="prev">Back</button>
<button type="button" class="next">Next</button>
</div>
</div>
<div class="step" data-step="4" data-conditional="drive">
<label for="transport">Would you prefer driving or flying?</label>
<select id="transport" name="TRANSPORT_PREFERENCE">
<option value="">Select one</option>
<option value="driving">Driving</option>
<option value="flying">Flying</option>
<option value="either">Either</option>
</select>
<div class="nav">
<button type="button" class="prev">Back</button>
<button type="button" class="next">Next</button>
</div>
</div>
<div class="step" data-step="5">
<label for="notes">Any preferences for the trip?</label>
<textarea id="notes" name="VACATION_PREFERENCES" rows="4" placeholder="Budget, beach, mountains, no crowds, walkable town, good restaurants, etc."></textarea>
<div class="nav">
<button type="button" class="prev">Back</button>
<button type="submit">Generate ideas</button>
</div>
</div>
</form>
<div id="vacation-loading" style="display:none;">Thinking...</div>
<div id="vacation-result"></div>
</div><script>
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("vacation-form");
const allSteps = Array.from(form.querySelectorAll(".step"));
const resultBox = document.getElementById("vacation-result");
const loadingBox = document.getElementById("vacation-loading");
let currentStepIndex = 0;
function getVisibleSteps() {
const driveValue = form.querySelector('[name="HOW_MANY_HOURS_ARE_YOU_WILLING_TO_DRIVE"]').value;
return allSteps.filter(step => {
const conditional = step.dataset.conditional;
if (!conditional) return true;
if (conditional === "drive") {
return driveValue !== "I would rather fly";
}
return true;
});
}
function showStep(index) {
const visibleSteps = getVisibleSteps();
allSteps.forEach(step => step.classList.remove("active"));
if (index < 0) index = 0;
if (index >= visibleSteps.length) index = visibleSteps.length - 1;
currentStepIndex = index;
visibleSteps[currentStepIndex].classList.add("active");
}
function validateStep(step) {
const requiredFields = step.querySelectorAll("[required]");
for (const field of requiredFields) {
if (!field.value.trim()) {
field.focus();
return false;
}
}
return true;
}
form.addEventListener("click", function (e) {
if (e.target.classList.contains("next")) {
const visibleSteps = getVisibleSteps();
const currentStep = visibleSteps[currentStepIndex];
if (!validateStep(currentStep)) return;
showStep(currentStepIndex + 1);
}
if (e.target.classList.contains("prev")) {
showStep(currentStepIndex - 1);
}
});
form.addEventListener("change", function () {
const visibleSteps = getVisibleSteps();
if (!visibleSteps.includes(document.querySelector(".step.active"))) {
showStep(visibleSteps.length - 1);
}
});
form.addEventListener("submit", async function (e) {
e.preventDefault();
const visibleSteps = getVisibleSteps();
const currentStep = visibleSteps[currentStepIndex];
if (!validateStep(currentStep)) return;
const formData = new FormData(form);
const where = formData.get("WHERE_DO_YOU_LIVE") || "";
const drive = formData.get("HOW_MANY_HOURS_ARE_YOU_WILLING_TO_DRIVE") || "";
const type = formData.get("VACATION_TYPE") || "";
const transport = formData.get("TRANSPORT_PREFERENCE") || "";
const notes = formData.get("VACATION_PREFERENCES") || "";
const prompt = `You are a helpful travel planning assistant.
Based on the user's answers, suggest 5 vacation destinations.
User info:
- Location: ${where}
- Willing to drive: ${drive}
- Vacation type: ${type}
- Transport preference: ${transport}
- Extra preferences: ${notes}
For each destination, include:
1. Destination name
2. Why it fits
3. Approximate travel style or distance
4. One standout thing to do there
Keep the response practical and specific.`;
resultBox.innerHTML = "";
loadingBox.style.display = "block";
try {
const response = await fetch("/wp-json/mwai/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
model: "gpt-4o",
messages: [
{ role: "user", content: prompt }
]
})
});
const data = await response.json();
loadingBox.style.display = "none";
if (data.choices && data.choices[0] && data.choices[0].message) {
resultBox.innerHTML = data.choices[0].message.content;
} else {
resultBox.innerHTML = "Something went wrong. Check the AI Engine API response.";
console.log(data);
}
} catch (error) {
loadingBox.style.display = "none";
resultBox.innerHTML = "Request failed. Check your AI Engine setup and browser console.";
console.error(error);
}
});
showStep(0);
});
</script>