51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
const forms = document.querySelectorAll('.booking-form');
|
|
|
|
const formatCurrency = (cents) =>
|
|
new Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
}).format(cents / 100);
|
|
|
|
const calculateDays = (start, end) => {
|
|
if (!start || !end) return null;
|
|
const startDate = new Date(start);
|
|
const endDate = new Date(end);
|
|
if (Number.isNaN(startDate.valueOf()) || Number.isNaN(endDate.valueOf())) return null;
|
|
const milliseconds = endDate.getTime() - startDate.getTime();
|
|
const days = Math.floor(milliseconds / 86400000) + 1;
|
|
return days > 0 ? days : null;
|
|
};
|
|
|
|
forms.forEach((form) => {
|
|
const startInput = form.querySelector('[data-booking-start]');
|
|
const endInput = form.querySelector('[data-booking-end]');
|
|
const daysOutput = form.querySelector('[data-summary-days]');
|
|
const totalOutput = form.querySelector('[data-summary-total]');
|
|
const rateInput = form.querySelector('input[name="price_per_day_cents"]');
|
|
const defaultRate = Number(form.dataset.dayRate || 9999);
|
|
|
|
const render = () => {
|
|
const days = calculateDays(startInput?.value, endInput?.value);
|
|
const rate = Number(rateInput?.value || defaultRate);
|
|
|
|
if (!days || rate < 0) {
|
|
if (daysOutput) daysOutput.textContent = 'Noch nicht gewaehlt';
|
|
if (totalOutput) totalOutput.textContent = formatCurrency(defaultRate);
|
|
return;
|
|
}
|
|
|
|
if (daysOutput) {
|
|
daysOutput.textContent = `${days} ${days === 1 ? 'Tag' : 'Tage'}`;
|
|
}
|
|
|
|
if (totalOutput) {
|
|
totalOutput.textContent = formatCurrency(days * rate);
|
|
}
|
|
};
|
|
|
|
startInput?.addEventListener('input', render);
|
|
endInput?.addEventListener('input', render);
|
|
rateInput?.addEventListener('input', render);
|
|
render();
|
|
});
|