Express-Quote
:root {
--primary-color: #003526;
--primary-dark: #002419;
--primary-light: #e9f5f0;
--secondary-color: #f8f4e6;
--accent-color: #ff6b35;
--text-dark: #2c3e50;
--text-light: #6c757d;
--border-color: #e0e0e0;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.12);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f8f4e6 0%, #fff5e6 100%);
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
} */
/* Header Styles */
header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: var(--transition);
}
.navbar-brand svg {
transition: var(--transition);
}
.navbar-brand:hover svg {
transform: scale(1.05);
}
/* .nav-link {
font-weight: 500;
color: var(--text-dark) !important;
position: relative;
transition: var(--transition);
padding: 0.5rem 1rem !important;
} */
/* .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition);
transform: translateX(-50%);
} */
/* .nav-link:hover::after {
width: 80%;
} */
/* Cover Section */
.cover-section {
position: relative;
height: 100vh;
min-height: 500px;
overflow: hidden;
margin-top: 76px;
}
.cover-image {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.1);
animation: slowZoom 20s ease-in-out infinite alternate;
}
@keyframes slowZoom {
0% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.cover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 53, 38, 0.7) 0%, rgba(0, 36, 25, 0.5) 100%);
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.cover-title {
color: white;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
text-align: center;
padding: 0 20px;
animation: slideUp 1s ease-out 0.5s both;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.image-copyright {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 8px 12px;
font-size: 0.8rem;
border-radius: 20px;
backdrop-filter: blur(10px);
}
/* Main Content */
main {
padding: 60px 0;
position: relative;
}
.form-container {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: var(--shadow-lg);
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}
/* Step Indicator */
.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
padding: 0 10px;
}
.step {
text-align: center;
flex: 1;
position: relative;
z-index: 1;
}
.step::before {
content: '';
position: absolute;
top: 25px;
left: 50%;
right: -50%;
height: 2px;
background: var(--border-color);
z-index: -1;
transition: var(--transition);
}
.step:last-child::before {
display: none;
}
.step.completed::before {
background: var(--primary-color);
}
.step.active .step-number {
background: var(--primary-color);
color: white;
transform: scale(1.1);
box-shadow: 0 0 0 4px var(--primary-light);
}
.step.completed .step-number {
background: var(--primary-color);
color: white;
}
.step-number {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--border-color);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
font-weight: 600;
font-size: 1.1rem;
transition: var(--transition);
position: relative;
}
.step.completed .step-number::after {
content: '✓';
position: absolute;
font-size: 1.2rem;
}
.step-title {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-light);
transition: var(--transition);
}
.step.active .step-title {
color: var(--primary-color);
font-weight: 600;
}
.step.completed .step-title {
color: var(--primary-color);
}
/* Progress Bar */
.progress {
height: 10px;
margin-bottom: 30px;
background: var(--border-color);
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
transition: width 0.5s ease;
border-radius: 10px;
}
/* Form Steps */
.form-step {
display: none;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.form-step.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.form-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
margin-bottom: 25px;
color: var(--primary-color);
text-align: center;
}
/* Evaneos Message */
.evaneos-message {
background: linear-gradient(135deg, var(--primary-light) 0%, #f0f7f4 100%);
border-left: 4px solid var(--primary-color);
padding: 20px;
margin-bottom: 30px;
border-radius: 0 12px 12px 0;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.evaneos-message::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--primary-color);
}
.evaneos-message-title {
font-weight: 600;
margin-bottom: 8px;
color: var(--primary-color);
font-size: 1.1rem;
}
/* Form Sections */
.form-section {
margin-bottom: 30px;
}
.form-section-title {
font-weight: 600;
margin-bottom: 20px;
font-size: 1.1rem;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 10px;
}
.form-section-title i {
color: var(--primary-color);
}
/* Radio and Checkbox Options */
.radio-option, .checkbox-option {
margin-bottom: 12px;
position: relative;
}
.radio-option label, .checkbox-option label {
/* display: flex; */
align-items: center;
/* padding: 16px 20px; */
/* border: 2px solid var(--border-color); */
/* border-radius: 12px; */
cursor: pointer;
transition: var(--transition);
background: white;
position: relative;
overflow: hidden;
}
.radio-option label::before, .checkbox-option label::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: linear-gradient(90deg, var(--primary-light), rgba(233, 245, 240, 0.5));
transition: width 0.3s ease;
}
.radio-option label:hover, .checkbox-option label:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.radio-option input[type="radio"]:checked + label,
.checkbox-option input[type="checkbox"]:checked + label {
background: var(--primary-light);
border-color: var(--primary-color);
color: var(--primary-color);
font-weight: 500;
}
.radio-option input[type="radio"]:checked + label::before,
.checkbox-option input[type="checkbox"]:checked + label::before {
width: 100%;
}
.radio-option input[type="radio"], .checkbox-option input[type="checkbox"] {
margin-right: 15px;
width: 20px;
height: 20px;
cursor: pointer;
}
/* Form Controls */
.form-control, .form-select {
border: 2px solid var(--border-color);
border-radius: 10px;
padding: 12px 16px;
font-size: 1rem;
transition: var(--transition);
background: white;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px var(--primary-light);
outline: none;
}
.form-label {
font-weight: 500;
margin-bottom: 8px;
color: var(--text-dark);
}
/* Buttons */
.btn {
padding: 12px 30px;
font-weight: 600;
border-radius: 10px;
transition: var(--transition);
border: none;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline-primary {
color: var(--primary-color);
border: 2px solid var(--primary-color);
background: transparent;
}
.btn-outline-primary:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-success {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
}
.btn-success:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Form Buttons */
.form-buttons {
display: flex;
justify-content: space-between;
margin-top: 40px;
gap: 20px;
}
/* Budget Slider */
.budget-slider {
margin: 25px 0;
padding: 20px;
background: var(--secondary-color);
border-radius: 12px;
}
.budget-display {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-weight: 500;
}
.form-range {
height: 8px;
background: var(--border-color);
border-radius: 10px;
}
.form-range::-webkit-slider-thumb {
background: var(--primary-color);
border: 3px solid white;
box-shadow: var(--shadow-md);
width: 24px;
height: 24px;
}
/* Date Input Group */
.date-input-group {
position: relative;
}
.date-input-group i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
pointer-events: none;
z-index: 10;
}
/* Alert */
.alert {
border-radius: 12px;
border: none;
padding: 16px 20px;
box-shadow: var(--shadow-sm);
}
.alert-info {
background: linear-gradient(135deg, #d1ecf1, #e7f3ff);
color: #0c5460;
}
/* Error Messages */
.invalid-feedback {
display: none;
color: #dc3545;
font-size: 0.875rem;
margin-top: 5px;
font-weight: 500;
}
.is-invalid ~ .invalid-feedback {
display: block;
}
.is-invalid {
border-color: #dc3545 !important;
}
.error-message {
color: #dc3545;
font-size: 0.875rem;
margin-top: 5px;
display: none;
font-weight: 500;
}
.error-message.show {
display: block;
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Form Note */
.form-note {
font-size: 0.9rem;
color: var(--text-light);
margin-top: 8px;
font-style: italic;
}
.required {
color: #dc3545;
}
/* Animations */
.fade-in {
animation: fadeIn 0.6s ease-out;
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.cover-section {
height: 70vh;
min-height: 400px;
}
.form-container {
padding: 25px 20px;
margin: 0 15px 40px;
border-radius: 15px;
}
.step-indicator {
margin-bottom: 30px;
padding: 0 5px;
}
.step-number {
width: 40px;
height: 40px;
font-size: 0.9rem;
}
.step-title {
font-size: 0.75rem;
}
.form-title {
font-size: 1.5rem;
margin-bottom: 20px;
}
.evaneos-message {
padding: 15px;
margin-bottom: 25px;
}
.radio-option label, .checkbox-option label {
padding: 14px 16px;
font-size: 0.95rem;
}
.form-buttons {
flex-direction: column;
gap: 15px;
}
.btn {
width: 100%;
padding: 14px;
}
.budget-slider {
padding: 15px;
}
.row {
margin: 0;
}
.col-md-6, .col-md-4, .col-md-3 {
padding: 0 5px;
}
}
@media (max-width: 576px) {
.cover-title {
font-size: 1.8rem;
padding: 0 15px;
}
.form-container {
margin: 0 10px 30px;
padding: 20px 15px;
}
.step-indicator {
flex-wrap: wrap;
gap: 10px;
}
.step {
flex: 0 0 calc(50% - 5px);
margin-bottom: 10px;
}
.step::before {
display: none;
}
.nav-link {
/* padding: 0.5rem 0.5rem !important;
font-size: 0.9rem; */
}
}
/* Loading Spinner */
.spinner-border-sm {
width: 1rem;
height: 1rem;
border-width: 0.15em;
}
/* Success Message */
.success-container {
text-align: center;
padding: 60px 20px;
}
.success-container i {
font-size: 4rem;
color: #28a745;
margin-bottom: 20px;
animation: bounceIn 1s ease-out;
}
@keyframes bounceIn {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Custom Checkbox and Radio */
.form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.form-check-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem var(--primary-light);
}
/* Input Group */
.input-group-text {
background: var(--primary-light);
border: 2px solid var(--border-color);
color: var(--primary-color);
font-weight: 500;
}
/* Textarea */
.trip-project-textarea {
min-height: 120px;
resize: vertical;
}
/* Participant and Age Inputs */
.participant-input, .age-input {
max-width: 100px;
}
@media (max-width: 768px) {
.participant-input, .age-input {
max-width: 80px;
}
}
1
Planning
2
Participants & Dates
3
Travel Project
4
Budget
5
Personal Space
Step 1/5
@csrf
Create Your Trip to Jordan
Let's get started!
We will forward your request to the local agency that will handle your trip. For this, you just need to answer a few questions.
Where are you in your project? *
I'm looking for ideas and information
I'm starting to plan
I want to book soon
Please select an option
Participants and Dates
Tell us a little more...
Your answers will help the local agency offer you a tailor-made trip.
Who are you traveling with? *
Solo
As a couple
With family
With friends
In a group
Please select an option
How many participants? *
Adults
Please enter a valid number
Children (-18 years)
Please enter a valid number
Ages of children *
Please enter ages for all children
Do you know the exact dates of your trip? *
Yes
No
Please select an option
Departure Date *
Please select a departure date
Return Date *
Please select a return date
Return date must be after departure date
When would you like to travel? *
Departure Period *
Select a period
January
February
March
April
May
June
July
August
September
October
November
December
Please select a departure period
Approximate Duration *
Select a duration
Less than a week
1 week
2 weeks
3 weeks
More than 3 weeks
Please select a duration
Travel Project
Final step to complete your project!
This is the most important (and most fun) step! Tell us everything you'd like for your trip.
How do you see your trip? *
Discovery: cultural and nature must-sees
Exploration: off the beaten path
Freedom
Exceptional: exclusive experiences and unique accommodations
Multiple selections possible
Please select at least one option
For accommodation, you prefer... *
Homestay, guesthouse, etc.
Simple hotels (clean and inexpensive)
Comfortable
Charm & Luxury
Unusual
Please select an option
How would you like to be guided? *
Accompanied by a driver-guide
Accompanied by a guide
Without accompaniment
Join a small existing group
Please select an option
Your travel project in a few words
Optional
Budget
Let's talk budget
This helps us offer you a realistic and personalized trip.
What is your budget per person? *
Per person, excluding international flights.
$500
$2000
$5000+
Ideal Budget
/person
Please enter a valid budget
Maximum Budget
/person
Please enter a valid budget
Maximum budget must be greater than or equal to ideal budget
For a trip to Jordan, budgets generally start around $1500 per person for one week.
Personal Space
Create your personal space to send your trip request to the local agency
Personal Information *
Title *
Select
Mrs
Mr
Please select a title
Date of Birth *
Please enter your date of birth
First Name *
Please enter your first name
Last Name *
Please enter your last name
Email *
Please enter a valid email address
Phone *
Please enter your phone number
Country of Residence *
Select a country
Please select your country of residence
Create Your Account
Password *
Must contain at minimum: 14 characters, 1 number, 1 letter
Please enter a valid password
Confirm Password *
Passwords do not match
I would like to receive Evaneos newsletters and news
I have read and accept the Terms and Conditions of Use. *
You must accept the terms and conditions
I accept to receive Evaneos communications by email and SMS: Personalized advice, notifications related to my travel projects, alternative destinations & Evaneos news. *
You must accept the data policy
Previous
Next Step
Send
document.addEventListener("DOMContentLoaded", () => {
const BASE_URL = "http://127.0.0.1:8000"; // ✅ your base URL
const POST_URL = BASE_URL + "/express"; // ✅ final POST endpoint
const form = document.getElementById("trip-form");
const messageArea = document.getElementById("message-area");
form.addEventListener("submit", async (e) => {
e.preventDefault();
messageArea.innerHTML = "";
const formData = new FormData(form);
const csrfToken = document.querySelector('input[name="_token"]').value;
try {
const response = await fetch(POST_URL, {
method: "POST",
headers: {
"X-CSRF-TOKEN": csrfToken,
"Accept": "application/json"
},
body: formData
});
const data = await response.json();
if (response.ok && data.success) {
messageArea.innerHTML = `${data.message}`;
form.reset();
}
else if (response.status === 422) {
const errors = data.errors || {};
const list = Object.values(errors).map(e => `${e}`).join('');
messageArea.innerHTML = `${list}`;
}
else {
messageArea.innerHTML = `Something went wrong.`;
}
} catch (error) {
messageArea.innerHTML = `Server error. Please try again.`;
console.error(error);
}
});
});
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('trip-form');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const submitBtn = document.getElementById('submit-btn');
const progressBar = document.querySelector('.progress-bar');
const stepText = document.querySelector('.text-center.mb-4');
let currentStep = 1;
const totalSteps = 5;
// Show/hide form steps
function showStep(step) {
// Hide all steps
document.querySelectorAll('.form-step').forEach(el => {
el.classList.remove('active');
});
// Show current step with animation
setTimeout(() => {
document.getElementById(`step-${step}`).classList.add('active');
}, 50);
// Update step indicators
document.querySelectorAll('.step').forEach((el, index) => {
if (index + 1 < step) {
el.classList.add('completed');
el.classList.remove('active');
} else if (index + 1 === step) {
el.classList.add('active');
el.classList.remove('completed');
} else {
el.classList.remove('active', 'completed');
}
});
// Update progress bar
const progress = (step / totalSteps) * 100;
progressBar.style.width = `${progress}%`;
progressBar.setAttribute('aria-valuenow', progress);
// Update step text
stepText.textContent = `Step ${step}/${totalSteps}`;
// Update buttons
if (step === 1) {
prevBtn.style.display = 'none';
} else {
prevBtn.style.display = 'block';
}
if (step === totalSteps) {
nextBtn.style.display = 'none';
submitBtn.style.display = 'block';
} else {
nextBtn.style.display = 'block';
submitBtn.style.display = 'none';
}
// Scroll to top of form
document.querySelector('.form-container').scrollIntoView({ behavior: 'smooth' });
}
// Validate current step
function validateStep(step) {
let isValid = true;
const currentStepElement = document.getElementById(`step-${step}`);
// Clear previous errors
currentStepElement.querySelectorAll('.is-invalid').forEach(el => {
el.classList.remove('is-invalid');
});
currentStepElement.querySelectorAll('.error-message.show').forEach(el => {
el.classList.remove('show');
});
// Special validation for step 1
if (step === 1) {
const projectStep = document.querySelector('input[name="project_step"]:checked');
if (!projectStep) {
document.querySelector('input[name="project_step"]').classList.add('is-invalid');
isValid = false;
}
}
// Special validation for step 2
if (step === 2) {
// Validate travel group
const travelGroup = document.querySelector('input[name="travel_group"]:checked');
if (!travelGroup) {
document.querySelector('input[name="travel_group"]').classList.add('is-invalid');
isValid = false;
}
// Validate date type
const dateType = document.querySelector('input[name="date_type"]:checked');
if (!dateType) {
document.querySelector('input[name="date_type"]').classList.add('is-invalid');
isValid = false;
}
// Validate participants count if not solo
if (travelGroup && travelGroup.value !== 'alone') {
const adults = document.getElementById('adults');
const children = document.getElementById('children');
if (!adults.value || parseInt(adults.value) < 1) {
adults.classList.add('is-invalid');
isValid = false;
}
if (children.value && parseInt(children.value) > 0) {
const ageInputs = document.querySelectorAll('#age-inputs input');
let allAgesProvided = true;
ageInputs.forEach(input => {
if (!input.value) {
input.classList.add('is-invalid');
allAgesProvided = false;
}
});
if (!allAgesProvided) {
document.getElementById('children-ages-error').classList.add('show');
isValid = false;
}
}
}
// Validate exact dates if selected
if (dateType && dateType.value === 'exact') {
const departureDate = document.getElementById('departure-date');
const returnDate = document.getElementById('return-date');
if (!departureDate.value) {
departureDate.classList.add('is-invalid');
isValid = false;
}
if (!returnDate.value) {
returnDate.classList.add('is-invalid');
isValid = false;
}
if (departureDate.value && returnDate.value && new Date(returnDate.value) {
// Show success message
const formContainer = document.querySelector('.form-container');
formContainer.innerHTML = `
Thank You!
Your request has been successfully sent.
A local agent will contact you shortly to co-create your trip to Jordan.
Back to Home
`;
}, 1500);
}
});
// Event listeners for dynamic form elements
// Travel group selection
document.querySelectorAll('input[name="travel_group"]').forEach(radio => {
radio.addEventListener('change', function() {
const participantsCount = document.getElementById('participants-count');
if (this.value === 'alone') {
participantsCount.style.display = 'none';
} else {
participantsCount.style.display = 'block';
}
});
});
// Children count change
document.getElementById('children').addEventListener('change', function() {
const count = parseInt(this.value);
const childrenAges = document.getElementById('children-ages');
const ageInputs = document.getElementById('age-inputs');
if (count > 0) {
childrenAges.style.display = 'block';
ageInputs.innerHTML = '';
for (let i = 0; i < count; i++) {
const div = document.createElement('div');
div.className = 'col-md-3 mb-3';
div.innerHTML = `
Child ${i + 1}
Please enter age
`;
ageInputs.appendChild(div);
}
} else {
childrenAges.style.display = 'none';
}
});
// Date type selection
document.querySelectorAll('input[name="date_type"]').forEach(radio => {
radio.addEventListener('change', function() {
const exactDatesSection = document.getElementById('exact-dates-section');
const approximateDatesSection = document.getElementById('approximate-dates-section');
if (this.value === 'exact') {
exactDatesSection.style.display = 'block';
approximateDatesSection.style.display = 'none';
} else {
exactDatesSection.style.display = 'none';
approximateDatesSection.style.display = 'block';
}
});
});
// Budget slider
const budgetSlider = document.getElementById('budget-slider');
const budgetValue = document.getElementById('budget-value');
const idealBudget = document.getElementById('ideal-budget');
const maxBudget = document.getElementById('max-budget');
budgetSlider.addEventListener('input', function() {
const value = this.value;
budgetValue.textContent = `$${value}`;
idealBudget.value = value;
maxBudget.value = parseInt(value) + 500;
});
idealBudget.addEventListener('change', function() {
budgetSlider.value = this.value;
budgetValue.textContent = `$${this.value}`;
maxBudget.value = parseInt(this.value) + 500;
});
// Set minimum date for date inputs to today
const today = new Date().toISOString().split('T')[0];
document.getElementById('departure-date').setAttribute('min', today);
document.getElementById('return-date').setAttribute('min', today);
// Ensure return date is after departure date
document.getElementById('departure-date').addEventListener('change', function() {
const departureDate = new Date(this.value);
const minReturnDate = new Date(departureDate);
minReturnDate.setDate(minReturnDate.getDate() + 1);
const returnDateInput = document.getElementById('return-date');
returnDateInput.setAttribute('min', minReturnDate.toISOString().split('T')[0]);
if (new Date(returnDateInput.value)
{
const option = new Option(
`${country.name} (+${country.tel})`,
country.name,
false,
false
);
selectElement.append(option);
});
// Initialize Select2
selectElement.select2({
placeholder: "Select a country",
allowClear: true,
templateResult: formatCountry,
templateSelection: formatCountrySelection
});
// Format function for displaying countries in dropdown
function formatCountry(country) {
if (!country.id) { return country.text; }
const countryCode = countries.find(c => c.id === parseInt(country.id))?.code;
const flagEmoji = getFlagEmoji(countryCode);
return $(
`${flagEmoji} ${country.text}`
);
}
// Format function for displaying selected country
function formatCountrySelection(country) {
if (!country.id) { return country.text; }
const countryCode = countries.find(c => c.id === parseInt(country.id))?.code;
const flagEmoji = getFlagEmoji(countryCode);
return $(
`${flagEmoji} ${country.text}`
);
}
// Function to get flag emoji from country code
function getFlagEmoji(countryCode) {
if (!countryCode) return '🏳️';
const codePoints = countryCode
.toUpperCase()
.split('')
.map(char => 127397 + char.charCodeAt());
return String.fromCodePoint(...codePoints);
}
});