This commit is contained in:
2026-03-25 17:45:13 +01:00
parent 2af73782f2
commit df13b3613c
11 changed files with 2341 additions and 524 deletions

View File

@@ -56,29 +56,28 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
<?php echo $button_text; ?>
</button>
<div class="carei-modal-overlay" data-carei-modal>
<div class="carei-modal-overlay" data-carei-modal role="dialog" aria-modal="true" aria-labelledby="carei-modal-title">
<div class="carei-modal">
<button type="button" class="carei-modal-close" data-carei-close-modal>
<button type="button" class="carei-modal-close" data-carei-close-modal aria-label="Zamknij formularz">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<h2 class="carei-modal-title">Wypełnij formularz rezerwacji<span>.</span></h2>
<h2 class="carei-modal-title" id="carei-modal-title">Wypełnij formularz rezerwacji<span>.</span></h2>
<form class="carei-form" id="carei-reservation-form" novalidate>
<!-- Dane wynajmu -->
<div class="carei-form__section">
<div class="carei-form__field carei-form__field--full">
<div class="carei-form__select-wrap">
<select id="carei-segment" name="segment" required>
<option value="" disabled selected>Wybierz segment pojazdu</option>
</select>
<svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
<div class="carei-form__row carei-form__row--top">
<div class="carei-form__field">
<div class="carei-form__select-wrap">
<select id="carei-segment" name="segment" required>
<option value="" disabled selected>Wybierz segment pojazdu</option>
</select>
<svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
</div>
</div>
</div>
<div class="carei-form__row carei-form__row--dates">
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-date-from">Od kiedy?</label>
<input type="datetime-local" id="carei-date-from" name="dateFrom" class="carei-form__input" required>
@@ -94,24 +93,25 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
<div class="carei-form__days-count" id="carei-days-count">Wybrano: <strong>0 dni</strong></div>
<div class="carei-form__field carei-form__field--full">
<div class="carei-form__select-wrap carei-form__select-wrap--icon">
<svg class="carei-form__icon-pin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
<select id="carei-pickup-branch" name="pickupBranch" required>
<option value="" disabled selected>Miejsce odbioru</option>
</select>
<svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
<div class="carei-form__row carei-form__row--pickup">
<div class="carei-form__field">
<div class="carei-form__select-wrap carei-form__select-wrap--icon">
<svg class="carei-form__icon-pin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
<select id="carei-pickup-branch" name="pickupBranch" required>
<option value="" disabled selected>Miejsce odbioru</option>
</select>
<svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
</div>
</div>
<label class="carei-form__checkbox-label carei-form__checkbox-label--inline">
<input type="checkbox" id="carei-same-return" name="sameReturn" checked>
<span class="carei-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-form__checkbox-text">Zwrot w tej samej lokalizacji</span>
</label>
</div>
<label class="carei-form__checkbox-label">
<input type="checkbox" id="carei-same-return" name="sameReturn" checked>
<span class="carei-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-form__checkbox-text">Zwrot w tej samej lokalizacji</span>
</label>
<div class="carei-form__field carei-form__field--full carei-form__return-wrap" id="carei-return-wrap" style="display:none;">
<div class="carei-form__select-wrap carei-form__select-wrap--icon">
<svg class="carei-form__icon-pin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
@@ -123,38 +123,23 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</div>
</div>
<!-- Opcje dodatkowe -->
<div class="carei-form__divider"><span>Opcje dodatkowe</span></div>
<!-- Ubezpieczenie + Opcje dodatkowe (ukryte do wybrania segmentu i miejsca odbioru) -->
<div id="carei-extras-wrapper" class="carei-form__extras-wrapper" style="display:none;">
<div class="carei-form__section">
<div class="carei-form__row" id="carei-extras-container">
<div class="carei-form__extra-card">
<label class="carei-form__checkbox-label carei-form__checkbox-label--card">
<input type="checkbox" name="extras[]" value="insurance">
<span class="carei-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-form__extra-content">
<strong>Rozszerzone ubezpieczenie</strong>
<span class="carei-form__extra-desc">Obejmuje brak odpowiedzialności najemcy za wszelki szkody poniesione na aucie.</span>
<span class="carei-form__extra-price">300 zł</span>
</span>
</label>
</div>
<div class="carei-form__extra-card">
<label class="carei-form__checkbox-label carei-form__checkbox-label--card">
<input type="checkbox" name="extras[]" value="child-seat">
<span class="carei-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-form__extra-content">
<strong>Fotelik dla dziecka</strong>
<span class="carei-form__extra-desc">Prosimy zawrzeć wiek dziecka w wiadomości.</span>
<span class="carei-form__extra-price">50 zł</span>
</span>
</label>
<div class="carei-form__divider"><span>Ubezpieczenie</span></div>
<div class="carei-form__section">
<div class="carei-form__row" id="carei-insurance-container">
<!-- Dynamicznie z API pricelist -->
</div>
</div>
<div class="carei-form__divider"><span>Opcje dodatkowe</span></div>
<div class="carei-form__section">
<div class="carei-form__row" id="carei-extras-container">
<!-- Dynamicznie z API pricelist -->
</div>
</div>
</div>
<!-- Dane najemcy -->
@@ -172,6 +157,21 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</div>
</div>
<div class="carei-form__row carei-form__row--address">
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-city">Miejscowość</label>
<input type="text" id="carei-city" name="city" class="carei-form__input" required>
</div>
<div class="carei-form__field carei-form__field--zipcode">
<label class="carei-form__label-small" for="carei-zipcode">Kod pocztowy</label>
<input type="text" id="carei-zipcode" name="zipCode" class="carei-form__input" placeholder="00-000" maxlength="6" required>
</div>
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-street">Ulica i nr domu</label>
<input type="text" id="carei-street" name="street" class="carei-form__input" required>
</div>
</div>
<div class="carei-form__row">
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-email">Adres e-mail</label>
@@ -189,6 +189,14 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</div>
</div>
<div class="carei-form__row">
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-pesel">PESEL</label>
<input type="text" id="carei-pesel" name="pesel" class="carei-form__input" maxlength="11" placeholder="00000000000" required>
</div>
<div class="carei-form__field"></div>
</div>
<div class="carei-form__field carei-form__field--full">
<textarea id="carei-message" name="message" class="carei-form__textarea" placeholder="Twoja wiadomość dotycząca rezerwacji" rows="4"></textarea>
</div>
@@ -203,7 +211,7 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</span>
<span class="carei-form__checkbox-text">Zgadzam się na <a href="/polityka-prywatnosci/" target="_blank">Politykę Prywatności</a></span>
</label>
<button type="submit" class="carei-form__submit">
<button type="submit" class="carei-form__submit" aria-busy="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
Wyślij
</button>
@@ -214,6 +222,37 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</div>
</form>
<!-- Podsumowanie kosztów (po submit) -->
<div id="carei-summary-overlay" class="carei-summary" style="display:none;">
<h3 class="carei-summary__title" tabindex="-1">Podsumowanie rezerwacji<span>.</span></h3>
<div class="carei-summary__details" id="carei-summary-details"></div>
<div class="carei-summary__table" id="carei-summary-table"></div>
<div class="carei-summary__total" id="carei-summary-total"></div>
<div class="carei-summary__error" id="carei-summary-error" style="display:none;"></div>
<div class="carei-summary__actions">
<button type="button" class="carei-summary__btn carei-summary__btn--back" id="carei-summary-back">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Wróć do formularza
</button>
<button type="button" class="carei-summary__btn carei-summary__btn--confirm" id="carei-summary-confirm" aria-busy="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
Potwierdź rezerwację
</button>
</div>
</div>
<!-- Sukces -->
<div id="carei-success-view" class="carei-success" style="display:none;">
<div class="carei-success__icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="carei-success__title" tabindex="-1">Rezerwacja złożona!</h3>
<p class="carei-success__number" id="carei-success-number"></p>
<p class="carei-success__message">Potwierdzenie zostanie wysłane na podany adres e-mail.</p>
<button type="button" class="carei-success__close" id="carei-success-close">Zamknij</button>
</div>
</div>
</div>
<?php