This commit is contained in:
2026-03-30 20:23:04 +02:00
parent df13b3613c
commit ca8db7a9da
23 changed files with 972 additions and 108 deletions

View File

@@ -77,6 +77,7 @@
width: 100%;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
padding: 40px 48px;
position: relative;
font-family: var(--carei-font);
@@ -93,13 +94,13 @@
background: none;
border: none;
cursor: pointer;
color: var(--carei-gray);
color: #B0B0B0;
line-height: 1;
padding: 4px;
transition: color 0.2s;
}
.carei-modal-close:hover {
color: var(--carei-blue);
color: #808080;
}
.carei-modal-title {
font-family: var(--carei-font);
@@ -140,7 +141,7 @@
}
.carei-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--carei-gap-inner);
}
.carei-form__row--top {
@@ -217,6 +218,137 @@
color: var(--carei-gray);
}
/* Floating label for text inputs */
.carei-form__float-wrap {
position: relative;
height: var(--carei-input-h);
background: var(--carei-white);
border: 1px solid transparent;
border-radius: var(--carei-radius);
transition: border-color 0.2s;
}
.carei-form__float-wrap:focus-within {
border-color: var(--carei-blue);
}
.carei-form__float-label {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-family: var(--carei-font);
font-weight: 400;
font-size: 15px;
color: var(--carei-gray);
pointer-events: none;
transition: top 0.15s, font-size 0.15s, transform 0.15s;
z-index: 1;
}
.carei-form__float-label--static {
position: static;
transform: none;
font-size: 11px;
padding: 6px 16px 0;
display: block;
}
.carei-form__input--float {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none !important;
background: transparent !important;
padding: 0 16px !important;
z-index: 2;
}
.carei-form__input--float:not(:placeholder-shown) ~ .carei-form__float-label,
.carei-form__input--float:focus ~ .carei-form__float-label {
top: 8px;
transform: none;
font-size: 10px;
}
.carei-form__input--float:not(:placeholder-shown),
.carei-form__input--float:focus {
padding-top: 16px !important;
padding-bottom: 0 !important;
}
/* Date input with floating label */
.carei-form__date-wrap {
position: relative;
height: var(--carei-input-h);
background: var(--carei-white);
border: 1px solid transparent;
border-radius: var(--carei-radius);
transition: border-color 0.2s;
cursor: pointer;
}
.carei-form__date-wrap:focus-within {
border-color: var(--carei-blue);
}
.carei-form__date-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--carei-blue);
pointer-events: none;
z-index: 3;
}
.carei-form__date-label {
position: absolute;
left: 36px;
top: 50%;
transform: translateY(-50%);
font-family: var(--carei-font);
font-weight: 400;
font-size: 15px;
color: var(--carei-gray);
pointer-events: none;
transition: top 0.15s, font-size 0.15s, transform 0.15s;
z-index: 3;
}
.carei-form__date-wrap.has-value .carei-form__date-label {
top: 7px;
transform: none;
font-size: 10px;
}
.carei-form__input--date {
border: none !important;
background: transparent !important;
height: 100% !important;
width: 100%;
padding: 0 12px 0 36px !important;
font-size: 14px;
position: relative;
z-index: 2;
}
/* Pusty: ukryj natywny tekst i zablokuj interakcję z polami wewnętrznymi */
.carei-form__input--date.is-empty {
color: transparent !important;
z-index: 1;
}
.carei-form__input--date.is-empty::-webkit-datetime-edit {
color: transparent;
-webkit-user-select: none;
user-select: none;
}
/* Wypełniony: przesuń wartość w dół pod label */
.carei-form__date-wrap.has-value .carei-form__input--date {
padding-top: 14px !important;
padding-bottom: 0 !important;
}
/* Ukryj natywną ikonę kalendarza przeglądarki */
.carei-form__input--date::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* Select wrapper */
.carei-form__select-wrap {
position: relative;
@@ -263,16 +395,30 @@
═══════════════════════════════════════════ */
.carei-form__phone-wrap {
display: flex;
align-items: center;
flex-direction: column;
background: var(--carei-white);
border-radius: var(--carei-radius);
border: 1px solid transparent;
transition: border-color 0.2s;
height: var(--carei-input-h);
padding: 4px 0 0;
}
.carei-form__phone-wrap:focus-within {
border-color: var(--carei-blue);
}
.carei-form__phone-label {
font-family: var(--carei-font);
font-weight: 400;
font-size: 10px;
color: var(--carei-gray);
padding: 0 16px;
line-height: 1;
}
.carei-form__phone-row {
display: flex;
align-items: center;
flex: 1;
}
.carei-form__phone-prefix {
display: flex;
align-items: center;
@@ -295,8 +441,10 @@
color: var(--carei-gray);
}
.carei-form__input--phone {
border: none;
background: transparent;
border: none !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
height: 100%;
padding-left: 12px;
}
@@ -305,7 +453,7 @@
letter-spacing: 2px;
}
.carei-form__input--phone:focus {
border: none;
border: none !important;
}
/* ═══════════════════════════════════════════
@@ -397,35 +545,205 @@
padding: 16px;
background: var(--carei-white);
transition: border-color 0.2s;
min-width: 0;
overflow: hidden;
}
.carei-form__extra-card:has(input:checked) {
border-color: var(--carei-blue);
}
.carei-form__checkbox-label--card {
align-items: flex-start;
align-items: center;
}
.carei-form__extra-content {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
overflow: hidden;
}
.carei-form__extra-content strong {
font-weight: 700;
font-size: 14px;
font-weight: 600;
font-size: 15px;
color: var(--carei-blue);
word-break: break-word;
min-width: 0;
}
.carei-form__extra-desc {
font-size: 12px;
color: var(--carei-gray);
font-weight: 400;
line-height: 1.4;
display: none;
}
.carei-form__extra-price {
font-weight: 700;
font-weight: 400;
font-size: 14px;
color: var(--carei-gray);
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
.carei-form__checkbox-label--abroad {
align-items: center;
font-weight: 600;
font-size: 15px;
color: var(--carei-red);
margin-top: 4px;
}
/* ═══════════════════════════════════════════
Abroad Country Search
═══════════════════════════════════════════ */
.carei-abroad {
margin-top: 16px;
}
.carei-abroad__input-wrap {
display: flex;
align-items: center;
gap: 8px;
height: 48px;
padding: 0 16px;
border: 1px solid var(--carei-border);
border-radius: var(--carei-radius);
background: var(--carei-white);
transition: border-color 0.2s;
}
.carei-abroad__input-wrap:focus-within {
border-color: var(--carei-blue);
}
.carei-abroad__plus-icon {
flex-shrink: 0;
color: var(--carei-blue);
}
.carei-abroad__input {
flex: 1;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-family: 'Albert Sans', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--carei-blue);
line-height: 48px;
padding: 0 !important;
margin: 0;
min-width: 0;
}
.carei-abroad__input::placeholder {
font-weight: 400;
color: #C7C7C7;
}
.carei-abroad__clear {
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
height: 20px;
cursor: pointer;
color: #B0B0B0;
border-radius: 50%;
transition: color 0.15s;
}
.carei-abroad__clear:hover {
color: var(--carei-gray);
}
.carei-abroad__input-wrap.has-text .carei-abroad__clear {
display: flex;
}
.carei-abroad__results {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 8px;
}
.carei-abroad__results:empty {
display: none;
}
.carei-abroad__selected {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 8px;
}
.carei-abroad__selected:empty {
display: none;
}
.carei-abroad__card {
display: flex;
align-items: center;
gap: 8px;
height: 56px;
padding: 0 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--carei-radius);
background: var(--carei-white);
transition: background-color 0.2s, border-color 0.2s;
min-width: 0;
overflow: hidden;
}
.carei-abroad__card:hover {
background: #2F24820D;
}
.carei-abroad__card--selected,
.carei-abroad__card--selected:hover {
background: rgba(47, 36, 130, 0.05);
border-color: rgba(47, 36, 130, 0.2);
}
.carei-abroad__flag {
flex-shrink: 0;
width: 24px;
height: 24px;
font-size: 20px;
line-height: 24px;
text-align: center;
}
.carei-abroad__name {
flex: 1;
font-family: 'Albert Sans', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--carei-blue);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.carei-abroad__price {
text-align: right;
color: #505050;
white-space: nowrap;
flex-shrink: 0;
}
.carei-abroad__price-small {
font-size: 10px;
}
.carei-abroad__price-val {
font-size: 14px;
}
.carei-abroad__action {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: none !important;
background: transparent !important;
background-color: transparent !important;
cursor: pointer;
font-size: 18px;
font-weight: 700;
color: var(--carei-blue);
padding: 0;
line-height: 1;
border-radius: 50%;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
}
@media (max-width: 600px) {
.carei-abroad__results,
.carei-abroad__selected {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════

View File

@@ -79,7 +79,7 @@
var overlay, form, segmentSelect, dateFrom, dateTo, daysCount;
var pickupSelect, returnSelect, returnWrap, sameReturnCheck;
var extrasWrapper, extrasContainer, insuranceContainer, errorSummary;
var extrasWrapper, extrasContainer, insuranceContainer, abroadSection, abroadToggle, abroadSearch, abroadInput, abroadResults, abroadSelected, errorSummary;
var summaryOverlay, summaryDetails, summaryTable, summaryTotal, summaryError;
var summaryBack, summaryConfirm;
var successView, successNumber, successClose;
@@ -98,6 +98,12 @@
extrasWrapper = document.getElementById('carei-extras-wrapper');
extrasContainer = document.getElementById('carei-extras-container');
insuranceContainer = document.getElementById('carei-insurance-container');
abroadSection = document.getElementById('carei-abroad-section');
abroadToggle = document.getElementById('carei-abroad-toggle');
abroadSearch = document.getElementById('carei-abroad-search');
abroadInput = document.getElementById('carei-abroad-input');
abroadResults = document.getElementById('carei-abroad-results');
abroadSelected = document.getElementById('carei-abroad-selected');
errorSummary = document.getElementById('carei-error-summary');
// Summary overlay
summaryOverlay = document.getElementById('carei-summary-overlay');
@@ -122,6 +128,8 @@
var currentReservationId = null;
var agreementDefs = [];
var lastFocusedElement = null;
var abroadItems = [];
var selectedCountries = {};
// ─── Modal Open/Close ─────────────────────────────────────────
@@ -155,7 +163,7 @@
document.body.style.overflow = 'hidden';
if (!dataLoaded) {
loadInitialData();
setDefaultDates();
initDateLabels();
dataLoaded = true;
}
setTimeout(function () {
@@ -276,30 +284,47 @@
function maybeShowExtras() {
var segment = segmentSelect ? segmentSelect.value : '';
var pickup = pickupSelect ? pickupSelect.value : '';
if (segment && pickup) { showExtras(); loadExtras(); } else { hideExtras(); }
var from = dateFrom ? dateFrom.value : '';
var to = dateTo ? dateTo.value : '';
if (segment && pickup && from && to) { showExtras(); loadExtras(); } else { hideExtras(); }
}
function showExtras() { if (extrasWrapper) extrasWrapper.style.display = ''; }
function hideExtras() { if (extrasWrapper) extrasWrapper.style.display = 'none'; }
// ─── Default Dates ────────────────────────────────────────────
// ─── Date Labels ──────────────────────────────────────────────
function setDefaultDates() {
if (!dateFrom || !dateTo) return;
var tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); tomorrow.setHours(10, 0, 0, 0);
var dayAfter = new Date(); dayAfter.setDate(dayAfter.getDate() + 2); dayAfter.setHours(10, 0, 0, 0);
dateFrom.value = fmtDT(tomorrow);
dateTo.value = fmtDT(dayAfter);
updateDaysCount();
function initDateLabels() {
[dateFrom, dateTo].forEach(function (input) {
if (!input) return;
updateDateEmpty(input);
input.addEventListener('change', function () { updateDateEmpty(input); updateDaysCount(); });
input.addEventListener('input', function () { updateDateEmpty(input); });
});
}
function fmtDT(d) {
return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
function updateDateEmpty(input) {
var wrap = input.closest('.carei-form__date-wrap');
if (input.value) {
input.classList.remove('is-empty');
if (wrap) wrap.classList.add('has-value');
} else {
input.classList.add('is-empty');
if (wrap) wrap.classList.remove('has-value');
}
}
function pad(n) { return String(n).padStart(2, '0'); }
// ─── Days Count ───────────────────────────────────────────────
function getRentalDays() {
if (!dateFrom || !dateTo) return 1;
var from = new Date(dateFrom.value), to = new Date(dateTo.value);
if (isNaN(from.getTime()) || isNaN(to.getTime()) || to <= from) return 1;
return Math.ceil((to - from) / 86400000);
}
function updateDaysCount() {
if (!dateFrom || !dateTo || !daysCount) return;
var from = new Date(dateFrom.value), to = new Date(dateTo.value);
@@ -325,6 +350,8 @@
currentPriceListId = pricelist.id;
var items = pricelist.additionalItems;
var insuranceItems = [], extraItems = [];
abroadItems = [];
selectedCountries = {};
if (Array.isArray(items)) {
items.forEach(function (item) {
var name = (item.name || '').toLowerCase();
@@ -332,7 +359,11 @@
var code = (item.code || '').toUpperCase();
if (code.indexOf('BRAK') === 0 || code.indexOf('BRUD') === 0 || code.indexOf('KARA') === 0 ||
code.indexOf('MYCIE USŁU') === 0 || code === 'MYJ WEW') return;
if (name.indexOf('ubezp') !== -1 || name.indexOf('ochrony') !== -1 ||
if (name.indexOf('wyjazd za granic') !== -1) {
item._countryName = parseCountryName(item.name);
item._countryFlag = getCountryFlag(item._countryName);
abroadItems.push(item);
} else if (name.indexOf('ubezp') !== -1 || name.indexOf('ochrony') !== -1 ||
name.indexOf('zniesienie') !== -1 || name.indexOf('insurance') !== -1) {
insuranceItems.push(item);
} else {
@@ -342,6 +373,8 @@
}
if (insuranceContainer) { insuranceContainer.innerHTML = ''; insuranceItems.forEach(function (item) { insuranceContainer.appendChild(buildExtraCard(item)); }); }
if (extrasContainer) { extrasContainer.innerHTML = ''; extraItems.forEach(function (item) { extrasContainer.appendChild(buildExtraCard(item)); }); }
if (abroadSection) { abroadSection.style.display = abroadItems.length > 0 ? '' : 'none'; }
renderAbroadSelected();
}).catch(function (err) { console.error('Failed to load pricelist:', err); });
}
@@ -363,6 +396,147 @@
return card;
}
// ─── Abroad Country Search ─────────────────────────────────────
var COUNTRY_FLAGS = {
'niemcy': '\u{1F1E9}\u{1F1EA}', 'czechy': '\u{1F1E8}\u{1F1FF}', 'słowacja': '\u{1F1F8}\u{1F1F0}',
'austria': '\u{1F1E6}\u{1F1F9}', 'francja': '\u{1F1EB}\u{1F1F7}', 'włochy': '\u{1F1EE}\u{1F1F9}',
'hiszpania': '\u{1F1EA}\u{1F1F8}', 'holandia': '\u{1F1F3}\u{1F1F1}', 'belgia': '\u{1F1E7}\u{1F1EA}',
'dania': '\u{1F1E9}\u{1F1F0}', 'szwecja': '\u{1F1F8}\u{1F1EA}', 'norwegia': '\u{1F1F3}\u{1F1F4}',
'finlandia': '\u{1F1EB}\u{1F1EE}', 'szwajcaria': '\u{1F1E8}\u{1F1ED}', 'węgry': '\u{1F1ED}\u{1F1FA}',
'chorwacja': '\u{1F1ED}\u{1F1F7}', 'słowenia': '\u{1F1F8}\u{1F1EE}', 'litwa': '\u{1F1F1}\u{1F1F9}',
'łotwa': '\u{1F1F1}\u{1F1FB}', 'estonia': '\u{1F1EA}\u{1F1EA}', 'rumunia': '\u{1F1F7}\u{1F1F4}',
'bułgaria': '\u{1F1E7}\u{1F1EC}', 'portugalia': '\u{1F1F5}\u{1F1F9}', 'grecja': '\u{1F1EC}\u{1F1F7}',
'wielka brytania': '\u{1F1EC}\u{1F1E7}', 'irlandia': '\u{1F1EE}\u{1F1EA}', 'luksemburg': '\u{1F1F1}\u{1F1FA}',
'serbia': '\u{1F1F7}\u{1F1F8}', 'czarnogóra': '\u{1F1F2}\u{1F1EA}', 'albania': '\u{1F1E6}\u{1F1F1}',
'turcja': '\u{1F1F9}\u{1F1F7}', 'ukraina': '\u{1F1FA}\u{1F1E6}', 'mołdawia': '\u{1F1F2}\u{1F1E9}'
};
function parseCountryName(name) {
var raw = (name || '').replace(/wyjazd za granic[eę]\s*[-–—]?\s*/i, '').trim();
if (!raw) return name || '';
return raw.split(/\s+/).map(function (w) {
return w.charAt(0).toUpperCase() + w.slice(1).toLowerCase();
}).join(' ');
}
function getCountryFlag(countryName) {
var key = (countryName || '').toLowerCase();
return COUNTRY_FLAGS[key] || '\u{1F3F3}\u{FE0F}';
}
function initAbroad() {
if (!abroadToggle || !abroadSearch) return;
abroadToggle.addEventListener('change', function () {
if (abroadToggle.checked) {
abroadSearch.style.display = '';
} else {
abroadSearch.style.display = 'none';
selectedCountries = {};
if (abroadInput) abroadInput.value = '';
renderAbroadResults([]);
renderAbroadSelected();
}
});
var abroadClear = document.getElementById('carei-abroad-clear');
if (abroadInput) {
abroadInput.addEventListener('input', function () {
updateAbroadClear();
var query = abroadInput.value.trim().toLowerCase();
if (!query) { renderAbroadResults([]); return; }
var filtered = abroadItems.filter(function (item) {
return item._countryName.toLowerCase().indexOf(query) !== -1;
});
renderAbroadResults(filtered);
});
abroadInput.addEventListener('focus', function () {
var query = abroadInput.value.trim().toLowerCase();
if (query) {
var filtered = abroadItems.filter(function (item) {
return item._countryName.toLowerCase().indexOf(query) !== -1;
});
renderAbroadResults(filtered);
}
});
}
if (abroadClear) {
abroadClear.addEventListener('click', function () {
if (abroadInput) { abroadInput.value = ''; abroadInput.focus(); }
renderAbroadResults([]);
updateAbroadClear();
});
}
function updateAbroadClear() {
var wrap = abroadInput ? abroadInput.closest('.carei-abroad__input-wrap') : null;
if (wrap) {
if (abroadInput.value.trim()) { wrap.classList.add('has-text'); }
else { wrap.classList.remove('has-text'); }
}
}
}
function renderAbroadResults(items) {
if (!abroadResults) return;
abroadResults.innerHTML = '';
if (!items || items.length === 0) return;
items.forEach(function (item) {
var id = item.id || item.code;
var isSelected = !!selectedCountries[id];
abroadResults.appendChild(buildCountryCard(item, isSelected));
});
}
function renderAbroadSelected() {
if (!abroadSelected) return;
abroadSelected.innerHTML = '';
var keys = Object.keys(selectedCountries);
if (keys.length === 0) return;
keys.forEach(function (id) {
var item = selectedCountries[id];
abroadSelected.appendChild(buildCountryCard(item, true));
});
}
function buildCountryCard(item, isSelected) {
var id = item.id || item.code;
var price = parseFloat(item.price || item.minPrice || 0);
var priceHtml = '<span class="carei-abroad__price-val">' + (price > 0 ? price.toFixed(0) + ' zł' : 'Gratis') + '</span>';
var card = document.createElement('div');
card.className = 'carei-abroad__card' + (isSelected ? ' carei-abroad__card--selected' : '');
card.innerHTML =
'<span class="carei-abroad__flag">' + escHtml(item._countryFlag) + '</span>' +
'<span class="carei-abroad__name">' + escHtml(item._countryName) + '</span>' +
'<span class="carei-abroad__price">' + priceHtml + '</span>' +
'<span role="button" tabindex="0" class="carei-abroad__action" data-abroad-id="' + escAttr(id) + '" title="' + (isSelected ? 'Usuń' : 'Dodaj') + '">' +
(isSelected
? '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>'
: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>'
) + '</span>';
card.querySelector('.carei-abroad__action').addEventListener('click', function (e) {
e.preventDefault();
if (selectedCountries[id]) {
delete selectedCountries[id];
} else {
selectedCountries[id] = item;
}
var query = abroadInput ? abroadInput.value.trim().toLowerCase() : '';
if (query) {
var filtered = abroadItems.filter(function (it) {
return it._countryName.toLowerCase().indexOf(query) !== -1;
});
renderAbroadResults(filtered);
} else {
renderAbroadResults([]);
}
renderAbroadSelected();
});
return card;
}
// ─── Select Helpers ───────────────────────────────────────────
function populateSelect(select, options, placeholder) {
@@ -588,13 +762,31 @@
function getSelectedExtrasForApi() {
var items = [];
if (!form) return items;
var days = getRentalDays();
form.querySelectorAll('input[name="extras[]"]:checked').forEach(function (cb) {
var price = parseFloat(cb.getAttribute('data-price') || 0);
var unit = cb.getAttribute('data-unit') || 'szt.';
var amount = unit === 'doba' ? days : 1;
items.push({
id: cb.value,
name: cb.getAttribute('data-name') || '',
unit: cb.getAttribute('data-unit') || 'szt.',
amount: 1,
unit: unit,
amount: amount,
priceBeforeDiscount: price,
discount: 0,
priceAfterDiscount: price
});
});
Object.keys(selectedCountries).forEach(function (id) {
var item = selectedCountries[id];
var price = parseFloat(item.price || item.minPrice || 0);
var unit = item.unit || 'szt.';
var amount = unit === 'doba' ? days : 1;
items.push({
id: item.id || item.code,
name: item.name,
unit: unit,
amount: amount,
priceBeforeDiscount: price,
discount: 0,
priceAfterDiscount: price
@@ -898,6 +1090,7 @@
initSameReturn();
initDynamicLoading();
initClearErrors();
initAbroad();
initSubmit();
}