feat: groups price calculator admin crud, booking/offer flow and api
This commit is contained in:
Björn Fromme
@@ -0,0 +1,31 @@
|
||||
{% extends 'htmx_modal.html.twig' %}
|
||||
|
||||
{% block title %}Angebot verbindlich buchen{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% from '_partials/_validation_errors.html.twig' import validation_alert %}
|
||||
{{ validation_alert(confirmationForm, 'Bitte akzeptiere die AGB, um die Buchung abzuschließen.', false) }}
|
||||
|
||||
<p class="mb-6">
|
||||
Möchtest du dieses Angebot jetzt verbindlich buchen?
|
||||
</p>
|
||||
|
||||
{{ form_start(confirmationForm, {
|
||||
'action': path('app_groups_booking_offer_confirm', { uuid: booking.uuid }),
|
||||
'attr': {
|
||||
'hx-target': '#htmx-modal',
|
||||
'hx-swap': 'outerHTML',
|
||||
}
|
||||
}) }}
|
||||
{{ form_row(confirmationForm.termsAccepted) }}
|
||||
|
||||
<div class="mt-6 flex flex-col space-y-4 md:flex-row md:space-y-0 justify-between">
|
||||
<button type="button" class="button button--secondary" {{ stimulus_action('modal', 'close') }}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" class="button button--primary">
|
||||
Jetzt verbindlich buchen
|
||||
</button>
|
||||
</div>
|
||||
{{ form_end(confirmationForm) }}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,196 @@
|
||||
{% block booking_summary %}
|
||||
<div class="bg-white h-full flex flex-col lg:border-l lg:border-primary-bg"
|
||||
id="booking-summary">
|
||||
{# Header #}
|
||||
<div class="shrink-0 px-4 lg:px-8 py-4 shadow-md relative z-10">
|
||||
{% if ctx.priceBreakdown is not null %}
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<span class="block uppercase font-semibold">Gesamtpreis</span>
|
||||
<span class="font-semibold">{{ (displayTotal / 100)|format_currency(currency) }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="block uppercase font-semibold">Übersicht</span>
|
||||
<button type="button"
|
||||
class="lg:hidden button button--small bg-primary-light"
|
||||
data-action="toggle#toggle">
|
||||
<svg class="w-4 h-4 text-white transition-transform"
|
||||
data-toggle-target="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"/>
|
||||
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Content #}
|
||||
<div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto px-4 lg:px-8 py-8"
|
||||
data-toggle-target="content">
|
||||
|
||||
{# Accommodation info #}
|
||||
{% set hasImage = ctx.hotelCmsData is not null
|
||||
and ctx.hotelCmsData.images is not null
|
||||
and ctx.hotelCmsData.images.resized is defined
|
||||
and ctx.hotelCmsData.images.resized.l is defined
|
||||
and ctx.hotelCmsData.images.resized.l[0] is defined %}
|
||||
<div class="border border-primary-bg mb-4">
|
||||
<div class="p-2 bg-primary-bg uppercase font-semibold">Unterkunft</div>
|
||||
<div class="grid grid-cols-3 gap-x-4 p-2">
|
||||
{% if hasImage %}
|
||||
<img src="{{ ctx.hotelCmsData.images.resized.l[0].url }}"
|
||||
alt="{{ ctx.hotelCmsData.images.resized.l[0].alt ?? ctx.accommodation.name }}"
|
||||
class="block w-full h-auto">
|
||||
{% endif %}
|
||||
<div class="{{ hasImage ? 'col-span-2' : 'col-span-3' }}">
|
||||
<span class="block font-semibold">{{ ctx.accommodation.name }}</span>
|
||||
{% if ctx.hotelCmsData is not null and ctx.hotelCmsData.address is not null %}
|
||||
<div class="text-sm text-gray-500 mt-1">{{ ctx.hotelCmsData.address|nl2br }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Price breakdown #}
|
||||
{% if ctx.priceBreakdown is not null %}
|
||||
<div class="border border-primary-bg mt-4">
|
||||
<div class="p-2 bg-primary-bg uppercase font-semibold">Preise</div>
|
||||
<table class="w-full table-fixed text-sm">
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Zeitraum
|
||||
</td>
|
||||
<td class="p-2 text-right">
|
||||
{{ booking.dateFrom|date('d.m.Y') }} – {{ booking.dateTo|date('d.m.Y') }},
|
||||
<br>
|
||||
{{ booking.nights }} {{ booking.nights != 1 ? 'Nächte' : 'Nacht' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Anzahl Personen
|
||||
</td>
|
||||
<td class="p-2 text-right">
|
||||
{{ booking.paxCount }}
|
||||
</td>
|
||||
</tr>
|
||||
{% if booking.minorsCount > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">davon Kinder (0–3 J.)</td>
|
||||
<td class="p-2 text-right">{{ booking.minorsCount }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if booking.childrenCount > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">davon Kinder (4–{{ ctx.accommodation.maxAdolescentAge }} J.)</td>
|
||||
<td class="p-2 text-right">{{ booking.childrenCount }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
|
||||
{% if ctx.priceBreakdown.basePrice > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Basispreis
|
||||
<p class="text-xs text-gray-500">für {{ ctx.priceBreakdown.includedPax }} Pers.</p>
|
||||
</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.basePrice / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if ctx.priceBreakdown.additionalPersonsPrice > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Aufpreis Personenzahl
|
||||
<p class="text-xs text-gray-500">für {{ ctx.priceBreakdown.effectivePax - ctx.priceBreakdown.includedPax }} Pers.</p>
|
||||
</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.additionalPersonsPrice / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if ctx.priceBreakdown.shortTermSurcharge > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">Aufpreis Kurzzeit</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.shortTermSurcharge / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if ctx.priceBreakdown.boardPrice > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">Verpflegung{% if booking.boardServiceLabel %} ({{ booking.boardServiceLabel }}){% endif %}</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.boardPrice / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if ctx.priceBreakdown.undersubscriptionSurcharge > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Verpflegungs-Aufschlag
|
||||
<p class="text-xs text-gray-500">für Gruppen unter {{ ctx.priceBreakdown.undersubscriptionThreshold }} Pers.</p>
|
||||
</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.undersubscriptionSurcharge / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% for service in ctx.priceBreakdown.serviceDetails %}
|
||||
{% if service.price > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">{{ service.label }}</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (service.price / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if ctx.priceBreakdown.runningCosts > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">Strom- und Abfallgebühren</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.runningCosts / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr class="border-t border-primary-bg font-semibold text-base">
|
||||
<td class="p-2">
|
||||
Gesamtpreis
|
||||
<p class="text-xs font-bold">zzgl. ortsabhängiger Gebühren</p>
|
||||
</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">
|
||||
{{ (ctx.priceBreakdown.total / 100)|format_currency(currency) }}
|
||||
</td>
|
||||
</tr>
|
||||
{% if booking.accommodationDiscount is not null or booking.boardServiceDiscount is not null or booking.additionalServicesDiscount is not null %}
|
||||
{% if booking.accommodationDiscount is not null %}
|
||||
{% set accommodationDiscountAmount = ((ctx.priceBreakdown.basePrice + ctx.priceBreakdown.additionalPersonsPrice) * booking.accommodationDiscount / 100) | round %}
|
||||
<tr class="text-green-700">
|
||||
<td class="p-2">Rabatt Unterkunft {{ booking.accommodationDiscount }} %</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">– {{ (accommodationDiscountAmount / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if booking.boardServiceDiscount is not null %}
|
||||
{% set boardDiscountAmount = (ctx.priceBreakdown.boardPrice * booking.boardServiceDiscount / 100) | round %}
|
||||
<tr class="text-green-700">
|
||||
<td class="p-2">Rabatt Verpflegung {{ booking.boardServiceDiscount }} %</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">– {{ (boardDiscountAmount / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if booking.additionalServicesDiscount is not null %}
|
||||
{% set servicesDiscountAmount = (ctx.priceBreakdown.servicesPrice * booking.additionalServicesDiscount / 100) | round %}
|
||||
<tr class="text-green-700">
|
||||
<td class="p-2">Rabatt Zusatzleistungen {{ booking.additionalServicesDiscount }} %</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">– {{ (servicesDiscountAmount / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr class="border-t border-primary-bg font-bold text-base text-green-700">
|
||||
<td class="p-2">Gesamtpreis nach Rabatt</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ ((booking.totalPrice ?? ctx.priceBreakdown.total) / 100)|format_currency(currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if booking.remarks %}
|
||||
<div class="border border-primary-bg mt-4">
|
||||
<div class="p-2 bg-primary-bg uppercase font-semibold">Anmerkungen</div>
|
||||
<div class="p-2 text-sm">
|
||||
{{ booking.remarks | nl2br }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,33 @@
|
||||
{% set current_step = current_step ?? 1 %}
|
||||
{% set step_routes = {
|
||||
1: 'app_groups_booking_step_1',
|
||||
2: 'app_groups_booking_step_2',
|
||||
3: 'app_groups_booking_step_3',
|
||||
4: 'app_groups_booking_step_4',
|
||||
} %}
|
||||
<nav class="pagination">
|
||||
{% for step in 1..4 %}
|
||||
<div class="pagination-item">
|
||||
{% if step < current_step %}
|
||||
<a href="{{ path(step_routes[step]) }}"
|
||||
class="pagination-item__border">
|
||||
<span class="pagination-item__inner bg-primary-bg text-gray-800">
|
||||
{{ step }}
|
||||
</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-item__border">
|
||||
<span class="{{ html_classes('pagination-item__inner', {
|
||||
'bg-primary-light text-white': step == current_step and booking_theme() == 'base',
|
||||
'bg-sbw-primary text-white': step == current_step and booking_theme() == 'sbw',
|
||||
'bg-snz-primary-dark text-white': step == current_step and booking_theme() == 'snz',
|
||||
'bg-ser-primary text-white': step == current_step and booking_theme() == 'ser',
|
||||
'bg-primary-bg text-gray-800': step != current_step
|
||||
}) }}">
|
||||
{{ step }}
|
||||
</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
@@ -0,0 +1,80 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 pb-4">
|
||||
{% for monthData in months %}
|
||||
<div class="mb-10">
|
||||
|
||||
<h3 class="text-base font-semibold mb-3">{{ monthData.label }}</h3>
|
||||
|
||||
{# Weekday headers (Mon–Sun) #}
|
||||
<div class="grid grid-cols-7 text-center text-xs font-medium text-gray-400 mb-1">
|
||||
<div>Mo</div>
|
||||
<div>Di</div>
|
||||
<div>Mi</div>
|
||||
<div>Do</div>
|
||||
<div>Fr</div>
|
||||
<div>Sa</div>
|
||||
<div>So</div>
|
||||
</div>
|
||||
|
||||
{# Day grid #}
|
||||
<div class="grid grid-cols-7 gap-0.5">
|
||||
{% for week in monthData.weeks %}
|
||||
{% for dayData in week %}
|
||||
{% if dayData.inMonth %}
|
||||
{% set dateStr = dayData.date|date('Y-m-d') %}
|
||||
{% set entry = enrichedByDate[dateStr] ?? null %}
|
||||
{% set status = (dateStr < todayStr) ? 'past' : (entry ? entry.status : 'ok') %}
|
||||
{% set minNights = entry ? entry.minNights : 0 %}
|
||||
<button type="button"
|
||||
class="pc-day"
|
||||
data-price-calendar-target="day"
|
||||
data-action="price-calendar#selectDate"
|
||||
data-date="{{ dateStr }}"
|
||||
data-status="{{ status }}"
|
||||
data-min-nights="{{ minNights }}"
|
||||
{% if status == 'blocked' %}title="Nicht verfügbar"{% elseif minNights > 1 %}title="Mindestaufenthalt {{ minNights }} Nächte"{% endif %}>
|
||||
{{ dayData.date|date('j') }}
|
||||
</button>
|
||||
{% else %}
|
||||
<div class="pc-day pc-day--out-of-month"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
{# Status message (arrival hint, short-stay warning, etc.) #}
|
||||
<div class="text-sm text-primary-medium mb-2 min-h-[1.25rem]"
|
||||
data-price-calendar-target="message"></div>
|
||||
|
||||
{# Reset link — revealed once a start date is selected #}
|
||||
<button type="button"
|
||||
class="text-sm text-gray-400 underline mb-4"
|
||||
data-price-calendar-target="resetButton"
|
||||
data-action="price-calendar#reset">
|
||||
Auswahl zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{# Navigation — prev/next trigger HTMX month swap; no Stimulus involvement #}
|
||||
<div class="flex items-center justify-between">
|
||||
<button type="button"
|
||||
class="button button--secondary"
|
||||
{% if offset == 0 %}disabled{% endif %}
|
||||
hx-get="{{ path('app_groups_booking_calendar_grid', {'offset': offset - 1}) }}"
|
||||
hx-target="#calendar-mount"
|
||||
hx-swap="innerHTML">
|
||||
← früher
|
||||
</button>
|
||||
<button type="button"
|
||||
class="button button--secondary"
|
||||
{% if offset >= totalMonths - 2 %}disabled{% endif %}
|
||||
hx-get="{{ path('app_groups_booking_calendar_grid', {'offset': offset + 1}) }}"
|
||||
hx-target="#calendar-mount"
|
||||
hx-swap="innerHTML">
|
||||
später →
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
{% extends 'htmx_modal.html.twig' %}
|
||||
|
||||
{% block title %}Buchung bestätigen{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% from '_partials/_validation_errors.html.twig' import validation_alert %}
|
||||
{{ validation_alert(confirmationForm, 'Bitte akzeptiere die AGB, um die Buchung abzuschließen.', false) }}
|
||||
|
||||
{{ form_start(confirmationForm, {
|
||||
'action': path('app_groups_booking_step_4_confirm'),
|
||||
'attr': {
|
||||
'hx-target': '#htmx-modal',
|
||||
'hx-swap': 'outerHTML',
|
||||
}
|
||||
}) }}
|
||||
{{ form_row(confirmationForm.termsAccepted) }}
|
||||
|
||||
<div class="mt-6 flex flex-col space-y-4 md:flex-row md:space-y-0 justify-between">
|
||||
<button type="submit" class="button button--primary">
|
||||
Buchung verbindlich absenden
|
||||
</button>
|
||||
<button type="button" class="button button--secondary" {{ stimulus_action('modal', 'close') }}>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
{{ form_end(confirmationForm) }}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,18 @@
|
||||
{% extends 'htmx_modal.html.twig' %}
|
||||
|
||||
{% block title %}Anfrage bestätigen{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<p class="mb-6">Möchtest du diese unverbindliche Anfrage jetzt absenden?</p>
|
||||
|
||||
{{ form_start(inquiryForm, { 'action': path('app_groups_booking_step_4') }) }}
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 justify-between">
|
||||
<button type="submit" class="button button--primary">
|
||||
Jetzt anfragen
|
||||
</button>
|
||||
<button type="button" class="button button--secondary" {{ stimulus_action('modal', 'close') }}>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
{{ form_end(inquiryForm) }}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,31 @@
|
||||
<div class="border border-primary-bg mb-4">
|
||||
<div class="p-2 bg-primary-bg uppercase font-semibold">Persönliche Daten</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 p-2 text-sm">
|
||||
<div>
|
||||
<span class="text-gray-600 font-semibold">Gruppenname:</span>
|
||||
{{ dto.groupName }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600 font-semibold">Name:</span>
|
||||
{{ dto.salutation }} {{ dto.firstName }} {{ dto.lastName }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600 font-semibold">E-Mail:</span>
|
||||
{{ dto.email }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600 font-semibold">Telefon:</span>
|
||||
{{ dto.phone }}
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<span class="text-gray-600 font-semibold">Adresse:</span>
|
||||
{{ dto.street }}, {{ dto.zip }} {{ dto.city }}
|
||||
</div>
|
||||
{% if dto.remarks %}
|
||||
<div class="md:col-span-2">
|
||||
<span class="text-gray-600 font-semibold">Anmerkungen:</span>
|
||||
{{ dto.remarks }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
{% set selectedBoardService = null %}
|
||||
{% for service in ctx.boardServices %}
|
||||
{% if service.id == dto.selectedBoardServiceId %}
|
||||
{% set selectedBoardService = service %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% set selectedAdditionalServices = ctx.additionalServices|filter(service => service.id in dto.selectedAdditionalServiceIds) %}
|
||||
|
||||
<div class="border border-primary-bg mb-4">
|
||||
<div class="p-2 bg-primary-bg uppercase font-semibold">Ausgewählte Leistungen</div>
|
||||
<div class="p-2 text-sm">
|
||||
<div class="mb-2">
|
||||
<span class="text-gray-600 font-semibold">Verpflegung:</span>
|
||||
{% if selectedBoardService %}
|
||||
{{ selectedBoardService.label }}
|
||||
{% if selectedBoardService.price > 0 %}
|
||||
— {{ (selectedBoardService.price / 100)|format_currency(ctx.accommodation.currency) }} pro Person und Nacht
|
||||
{% endif %}
|
||||
{% if selectedBoardService.description %}
|
||||
<div class="text-xs text-gray-500">{{ selectedBoardService.description|nl2br }}</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
Selbstversorgung
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if selectedAdditionalServices is not empty %}
|
||||
<div>
|
||||
<span class="text-gray-600 font-semibold">Zusatzleistungen:</span>
|
||||
<ul class="list-disc list-inside">
|
||||
{% for service in selectedAdditionalServices %}
|
||||
<li>
|
||||
{{ service.label }}
|
||||
— {{ (service.price / 100)|format_currency(ctx.accommodation.currency) }} {{ service.type.label|trans }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,163 @@
|
||||
{% block booking_summary %}
|
||||
<div class="bg-white h-full flex flex-col lg:border-l lg:border-primary-bg"
|
||||
id="booking-summary"
|
||||
{% if htmx_oob_swap ?? false %}hx-swap-oob="outerHTML"{% endif %}>
|
||||
{# Header #}
|
||||
<div class="shrink-0 px-4 lg:px-8 py-4 lg:flex lg:flex-col lg:justify-center shadow-md relative z-10">
|
||||
{% if ctx.priceBreakdown is not null %}
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<span class="block uppercase font-semibold">Gesamtpreis</span>
|
||||
<span class="font-semibold">{{ (ctx.priceBreakdown.total / 100)|format_currency(ctx.accommodation.currency) }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="block uppercase font-semibold">Übersicht</span>
|
||||
<button type="button"
|
||||
class="lg:hidden button button--small bg-primary-light"
|
||||
data-action="toggle#toggle">
|
||||
<svg class="w-4 h-4 text-white transition-transform"
|
||||
data-toggle-target="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"/>
|
||||
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Content #}
|
||||
<div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto px-4 lg:px-8 py-8"
|
||||
data-toggle-target="content">
|
||||
|
||||
{# Accommodation info #}
|
||||
{% set hasImage = ctx.hotelCmsData is not null
|
||||
and ctx.hotelCmsData.images is not null
|
||||
and ctx.hotelCmsData.images.resized is defined
|
||||
and ctx.hotelCmsData.images.resized.l is defined
|
||||
and ctx.hotelCmsData.images.resized.l[0] is defined %}
|
||||
<div class="border border-primary-bg mb-4">
|
||||
<div class="p-2 bg-primary-bg uppercase font-semibold">Unterkunft</div>
|
||||
<div class="grid grid-cols-3 gap-x-4 p-2">
|
||||
{% if hasImage %}
|
||||
<img src="{{ ctx.hotelCmsData.images.resized.l[0].url }}"
|
||||
alt="{{ ctx.hotelCmsData.images.resized.l[0].alt ?? ctx.accommodation.name }}"
|
||||
class="block w-full h-auto">
|
||||
{% endif %}
|
||||
<div class="{{ hasImage ? 'col-span-2' : 'col-span-3' }}">
|
||||
<span class="block font-semibold">{{ ctx.accommodation.name }}</span>
|
||||
{% if ctx.hotelCmsData is not null and ctx.hotelCmsData.address is not null %}
|
||||
<div class="text-sm text-gray-500 mt-1">{{ ctx.hotelCmsData.address|nl2br }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Price breakdown #}
|
||||
{% if ctx.priceBreakdown is not null %}
|
||||
<div class="border border-primary-bg mt-4">
|
||||
<div class="p-2 bg-primary-bg uppercase font-semibold">Preise</div>
|
||||
<table class="w-full table-fixed text-sm">
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Zeitraum
|
||||
</td>
|
||||
<td class="p-2 text-right">
|
||||
{% if dto.dateFrom %}
|
||||
{{ dto.dateFrom|date('d.m.Y') }} – {{ dto.dateTo|date('d.m.Y') }},
|
||||
<br>
|
||||
{{ dto.nights }} {{ dto.nights != 1 ? 'Nächte' : 'Nacht' }}
|
||||
{% else %}
|
||||
<span class="italic">noch nicht gewählt</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Anzahl Personen
|
||||
</td>
|
||||
<td class="p-2 text-right">
|
||||
{{ dto.paxCount }}
|
||||
</td>
|
||||
</tr>
|
||||
{% if dto.minorsCount > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">davon Kinder (0–3 J.)</td>
|
||||
<td class="p-2 text-right">{{ dto.minorsCount }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if dto.childrenCount > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">davon Kinder (4–{{ ctx.accommodation.maxAdolescentAge }} J.)</td>
|
||||
<td class="p-2 text-right">{{ dto.childrenCount }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
|
||||
{% if ctx.priceBreakdown.basePrice > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Basispreis
|
||||
<p class="text-xs text-gray-500">für {{ ctx.priceBreakdown.includedPax }} Pers.</p>
|
||||
</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.basePrice / 100)|format_currency(ctx.accommodation.currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if ctx.priceBreakdown.additionalPersonsPrice > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Aufpreis Personenzahl
|
||||
<p class="text-xs text-gray-500">für {{ ctx.priceBreakdown.effectivePax - ctx.priceBreakdown.includedPax }} Pers.</p>
|
||||
</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.additionalPersonsPrice / 100)|format_currency(ctx.accommodation.currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if ctx.priceBreakdown.shortTermSurcharge > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">Aufpreis Kurzzeit</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.shortTermSurcharge / 100)|format_currency(ctx.accommodation.currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if ctx.priceBreakdown.boardPrice > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">Verpflegung</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.boardPrice / 100)|format_currency(ctx.accommodation.currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if ctx.priceBreakdown.undersubscriptionSurcharge > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
Verpflegungs-Aufschlag
|
||||
<p class="text-xs text-gray-500">für Gruppen unter {{ ctx.priceBreakdown.undersubscriptionThreshold }} Pers.</p>
|
||||
</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.undersubscriptionSurcharge / 100)|format_currency(ctx.accommodation.currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% for service in ctx.priceBreakdown.serviceDetails %}
|
||||
{% if service.price > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">{{ service.label }}</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (service.price / 100)|format_currency(ctx.accommodation.currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if ctx.priceBreakdown.runningCosts > 0 %}
|
||||
<tr>
|
||||
<td class="p-2">Strom- und Abfallgebühren</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">{{ (ctx.priceBreakdown.runningCosts / 100)|format_currency(ctx.accommodation.currency) }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr class="border-t border-primary-bg font-semibold text-base">
|
||||
<td class="p-2">
|
||||
Gesamtpreis
|
||||
<p class="text-xs font-bold">zzgl. ortsabhängiger Gebühren</p>
|
||||
</td>
|
||||
<td class="p-2 text-right whitespace-nowrap">
|
||||
{{ (ctx.priceBreakdown.total / 100)|format_currency(ctx.accommodation.currency) }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,18 @@
|
||||
{% extends 'layout.html.twig' %}
|
||||
|
||||
{% block title %}Fehler{% endblock %}
|
||||
|
||||
{% block background %}bg-outer bg-outer--summer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex-1 flex items-center justify-center px-4">
|
||||
<div class="max-w-lg w-full">
|
||||
{% set errorMessages = app.flashes('error')|default(['Es ist ein Fehler aufgetreten. Bitte überprüfe den Link oder versuche es erneut.']) %}
|
||||
{% include '_partials/_alert.html.twig' with {
|
||||
level: 'error',
|
||||
title: 'Das hat nicht geklappt',
|
||||
messages: errorMessages
|
||||
} %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,216 @@
|
||||
{% extends 'layout_booking.html.twig' %}
|
||||
|
||||
{% macro imageGallery(images, thumbImages, defaultAlt) %}
|
||||
{% if images|length > 0 %}
|
||||
<div class="grid md:grid-cols-2 gap-8" {{ stimulus_controller('gallery') }}>
|
||||
{% for image in images %}
|
||||
<div class="relative block w-full h-auto cursor-pointer{{ loop.index0 >= 2 ? ' hidden' : '' }}"
|
||||
data-gallery-target="item"
|
||||
data-gallery-href="{{ image.url }}"
|
||||
data-gallery-alt="{{ image.alt ?? defaultAlt }}">
|
||||
<img src="{{ thumbImages[loop.index0].url ?? image.url }}"
|
||||
alt="{{ image.alt ?? defaultAlt }}"
|
||||
class="block w-full h-auto">
|
||||
{% if loop.index0 == 1 and images|length > 2 %}
|
||||
<div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white font-bold text-lg">
|
||||
+{{ images|length - 2 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% import _self as macros %}
|
||||
|
||||
{% block title %}{{ booking.inquiry ? 'Dein Angebot' : 'Deine Buchung' }}{% endblock %}
|
||||
|
||||
{% block background %}bg-outer bg-outer--summer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% set currency = booking.pricingCurrency ?? priceBreakdown.currency %}
|
||||
{% set displayTotal = booking.totalPrice ?? (priceBreakdown.total ?? null) %}
|
||||
|
||||
<div class="flex-1 flex flex-col lg:grid lg:grid-cols-5 min-h-0 relative">
|
||||
|
||||
{# Sidebar summary #}
|
||||
<div id="booking-summary-wrapper"
|
||||
class="order-1 lg:order-2 lg:flex-1 lg:min-h-0 lg:col-span-2"
|
||||
{{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'open': 'absolute inset-0 z-20', 'iconOpen': 'rotate-180' }) }}>
|
||||
{% include 'groups/booking/_offer_summary.html.twig' with {
|
||||
booking: booking,
|
||||
ctx: ctx,
|
||||
currency: currency,
|
||||
displayTotal: displayTotal,
|
||||
} %}
|
||||
</div>
|
||||
|
||||
{# Main area #}
|
||||
<div class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col gap-y-8 min-h-0 overflow-y-auto px-4 lg:px-8 py-8">
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
|
||||
<hgroup>
|
||||
<h1 class="text-2xl lg:text-4xl font-bold mb-2">
|
||||
{{ booking.inquiry ? 'Dein Angebot' : 'Deine Buchung' }}
|
||||
</h1>
|
||||
<p class="text-2xl">
|
||||
{{ ctx.accommodation.name }}
|
||||
</p>
|
||||
</hgroup>
|
||||
|
||||
{# Booked services #}
|
||||
{% if booking.boardServiceLabel or booking.additionalServices | length > 0 %}
|
||||
<div>
|
||||
<h2 class="text-xl font-bold mb-2">
|
||||
{{ booking.inquiry ? 'Angefragte' : 'Gebuchte' }} Leistungen
|
||||
</h2>
|
||||
<ul class="list-disc pl-4">
|
||||
{% if booking.boardServiceLabel %}
|
||||
<li>{{ booking.boardServiceLabel }}</li>
|
||||
{% endif %}
|
||||
{% for service in booking.additionalServices %}
|
||||
<li>{{ service.label }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if booking.inquiry %}
|
||||
<div>
|
||||
<button type="button"
|
||||
class="button button--primary w-full"
|
||||
hx-get="{{ path('app_groups_booking_offer_confirm', { uuid: booking.uuid }) }}"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
Angebot verbindlich buchen
|
||||
</button>
|
||||
</div>
|
||||
{% elseif booking.acceptedAt is not null %}
|
||||
<div class="flex items-center space-x-2">
|
||||
{{ icon('info', 'w-5 h-5') }}
|
||||
<div class="text-gray-500">
|
||||
Angebot angenommen am {{ booking.acceptedAt | date('d.m.Y') }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# hotel description #}
|
||||
{% if ctx.hotelCmsData is not null %}
|
||||
<div {{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'iconOpen': 'rotate-180' }) }}>
|
||||
<button type="button"
|
||||
class="flex items-center justify-between w-full text-left"
|
||||
data-action="toggle#toggle">
|
||||
<h2>
|
||||
Die Unterkunft
|
||||
</h2>
|
||||
<svg class="w-5 h-5 shrink-0 transition-transform"
|
||||
data-toggle-target="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"/>
|
||||
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="rte-content" data-toggle-target="content">
|
||||
{% set icons = ctx.hotelCmsData.icons %}
|
||||
{% if icons is not empty %}
|
||||
<ul class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
||||
{% for icon, label in icons %}
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="border-2 border-gray-900 rounded-full w-16 h-16 flex flex-col items-center justify-center">
|
||||
{{ icon(icon, 'w-8 h-8 shrink-0 text-gray-900') }}
|
||||
</div>
|
||||
{{ label }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{{ ctx.hotelCmsData.description | raw }}
|
||||
|
||||
<h2>
|
||||
Details zur Unterkunft
|
||||
</h2>
|
||||
{{ ctx.hotelCmsData.features | raw }}
|
||||
|
||||
<h2>
|
||||
Die Zimmer
|
||||
</h2>
|
||||
{{ ctx.hotelCmsData.roomTypes | raw }}
|
||||
|
||||
<h2>
|
||||
Weitere Infos
|
||||
</h2>
|
||||
{{ ctx.hotelCmsData.additionalInformation | raw }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ macros.imageGallery(ctx.hotelCmsData.images.resized.l, ctx.hotelCmsData.images.resized.m, ctx.accommodation.name) }}
|
||||
{% endif %}
|
||||
|
||||
{# region description #}
|
||||
{% if ctx.hotelCmsData is not null and ctx.hotelCmsData.region is not null %}
|
||||
{% set region = ctx.hotelCmsData.region %}
|
||||
<div {{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'iconOpen': 'rotate-180' }) }}>
|
||||
<button type="button"
|
||||
class="flex items-center justify-between w-full text-left"
|
||||
data-action="toggle#toggle">
|
||||
<h2>
|
||||
Die Region {{ region.name }}
|
||||
</h2>
|
||||
<svg class="w-5 h-5 shrink-0 transition-transform"
|
||||
data-toggle-target="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"/>
|
||||
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="rte-content" data-toggle-target="content">
|
||||
{% if region.altitude or region.length or region.lifts %}
|
||||
<ul class="flex flex-wrap gap-x-6 text-sm not-prose">
|
||||
{% if region.altitude %}
|
||||
<li>{{ region.altitude }} m Höhe</li>
|
||||
{% endif %}
|
||||
{% if region.length %}
|
||||
<li>{{ region.length }} km Pisten</li>
|
||||
{% endif %}
|
||||
{% if region.lifts %}
|
||||
<li>{{ region.lifts }} Lifte</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% if region.webcam %}
|
||||
<p>
|
||||
<a href="{{ region.webcam }}" target="_blank" rel="noopener">Webcam der Region</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
{{ region.description | default('') | raw }}
|
||||
|
||||
<h2>
|
||||
Skigebiet
|
||||
</h2>
|
||||
{{ region.skiArea | default('') | raw }}
|
||||
{{ region.skiAreaExtended | default('') | raw }}
|
||||
|
||||
{% if region.news %}
|
||||
<h2>Aktuelles aus der Region</h2>
|
||||
{{ region.news | raw }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if region.regionMaps is not null and region.regionMaps | length > 0 %}
|
||||
{% set regionMapImages = region.regionMaps | map(url => {url: url}) %}
|
||||
{{ macros.imageGallery(regionMapImages, [], region.name) }}
|
||||
{% endif %}
|
||||
|
||||
{{ macros.imageGallery(region.images.resized.l ?? [], region.images.resized.m ?? [], region.name) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,13 @@
|
||||
{% extends 'layout.html.twig' %}
|
||||
|
||||
{% block title %}Link nicht verfügbar{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-lg w-full">
|
||||
{% include '_partials/_alert.html.twig' with {
|
||||
level: 'error',
|
||||
title: 'Dieser Link ist nicht (mehr) gültig',
|
||||
messages: ['Bitte wende dich an uns, damit wir dir einen neuen Link zusenden können.'],
|
||||
} %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,89 @@
|
||||
{% extends 'layout_booking.html.twig' %}
|
||||
|
||||
{% block title %}Schritt 1: Reisezeitraum wählen{% endblock %}
|
||||
|
||||
{% block background %}bg-outer bg-outer--summer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex-1 flex flex-col min-h-0"
|
||||
data-controller="price-calendar"
|
||||
data-price-calendar-hotel-code-value="{{ hotelCode }}"
|
||||
data-price-calendar-calendar-refresh-url-value="{{ path('app_groups_booking_calendar_refresh') }}"
|
||||
{% if dto.dateFrom %}
|
||||
data-price-calendar-selected-from-value="{{ dto.dateFrom|date('Y-m-d') }}"
|
||||
data-price-calendar-selected-to-value="{{ dto.dateTo|date('Y-m-d') }}"
|
||||
{% endif %}>
|
||||
|
||||
{# Pagination - mobile only (above summary) #}
|
||||
<div class="lg:hidden">
|
||||
{% include 'groups/booking/_pagination.html.twig' with { 'current_step': 1 } %}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col lg:grid lg:grid-cols-5 min-h-0 relative">
|
||||
|
||||
{# Sidebar summary #}
|
||||
<div class="order-1 lg:order-2 lg:flex-1 lg:min-h-0 lg:col-span-2"
|
||||
{{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'open': 'absolute inset-0 z-20', 'iconOpen': 'rotate-180' }) }}>
|
||||
{% include 'groups/booking/_summary.html.twig' with { 'dto': dto, 'ctx': ctx } %}
|
||||
</div>
|
||||
|
||||
{# Calendar #}
|
||||
<div class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col min-h-0">
|
||||
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
|
||||
{# Pagination - desktop only (fixed above scrollable content) #}
|
||||
<div class="hidden lg:block shrink-0">
|
||||
{% include 'groups/booking/_pagination.html.twig' with { 'current_step': 1 } %}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
|
||||
|
||||
<h2 class="pb-2">
|
||||
Gewünschter Zeitraum
|
||||
</h2>
|
||||
|
||||
{# Calendar mount — HTMX loads the grid; Stimulus wires afterSwap → initAfterLoad() #}
|
||||
<div id="calendar-mount"
|
||||
data-price-calendar-target="mount"
|
||||
hx-get="{{ path('app_groups_booking_calendar_grid') }}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<div class="text-sm text-gray-400 py-8 text-center">Kalender wird geladen…</div>
|
||||
</div>
|
||||
|
||||
{# Error state shown by Stimulus on htmx:responseError #}
|
||||
<div data-price-calendar-target="error"
|
||||
class="hidden rounded-md p-3 bg-red-100 text-red-700 text-sm mt-4">
|
||||
Kalender konnte nicht geladen werden. Bitte versuche es später erneut.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
|
||||
<form method="post">
|
||||
<input type="hidden"
|
||||
name="date_from"
|
||||
data-price-calendar-target="dateFrom"
|
||||
value="{{ dto.dateFrom ? dto.dateFrom|date('Y-m-d') : '' }}">
|
||||
<input type="hidden"
|
||||
name="date_to"
|
||||
data-price-calendar-target="dateTo"
|
||||
value="{{ dto.dateTo ? dto.dateTo|date('Y-m-d') : '' }}">
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button type="submit"
|
||||
data-price-calendar-target="submit"
|
||||
class="button button--primary{% if not dto.dateFrom %} opacity-50 cursor-not-allowed pointer-events-none{% endif %}"
|
||||
{% if not dto.dateFrom %}disabled{% endif %}>
|
||||
Weiter zu Schritt 2
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,235 @@
|
||||
{% extends 'layout_booking.html.twig' %}
|
||||
|
||||
{% block title %}Schritt 2: Personen & Leistungen{% endblock %}
|
||||
|
||||
{% block background %}bg-outer bg-outer--summer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% form_theme form 'booking/_form_theme.html.twig' %}
|
||||
|
||||
{{ form_start(form, {
|
||||
'attr': {
|
||||
'class': 'flex-1 flex flex-col min-h-0',
|
||||
}
|
||||
}) }}
|
||||
|
||||
{# Pagination - mobile only (above summary) #}
|
||||
<div class="lg:hidden">
|
||||
{% include 'groups/booking/_pagination.html.twig' with { 'current_step': 2 } %}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col lg:grid lg:grid-cols-5 min-h-0 relative">
|
||||
|
||||
{# Sidebar summary #}
|
||||
{% block accommodation_summary %}
|
||||
<div id="accommodation-summary"
|
||||
class="order-1 lg:order-2 lg:flex-1 lg:min-h-0 lg:col-span-2"
|
||||
{{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'open': 'absolute inset-0 z-20', 'iconOpen': 'rotate-180' }) }}
|
||||
{% if htmx_oob_swap is defined and htmx_oob_swap %}hx-swap-oob="true"{% endif %}>
|
||||
{% include 'groups/booking/_summary.html.twig' with { 'dto': dto, 'ctx': ctx } %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{# Main form #}
|
||||
{% block accommodation_form %}
|
||||
<div id="accommodation-form"
|
||||
class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col min-h-0"
|
||||
{% if htmx_oob_swap is defined and htmx_oob_swap %}hx-swap-oob="true"{% endif %}>
|
||||
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
|
||||
{# Pagination - desktop only (fixed above scrollable content) #}
|
||||
<div class="hidden lg:block shrink-0">
|
||||
{% include 'groups/booking/_pagination.html.twig' with { 'current_step': 2 } %}
|
||||
</div>
|
||||
|
||||
<div id="participant-form"
|
||||
class="flex-1 overflow-y-auto px-4 lg:px-8 py-8"
|
||||
hx-post="{{ path('app_groups_booking_step_2_refresh') }}"
|
||||
hx-trigger="change delay:300ms"
|
||||
hx-swap="none">
|
||||
|
||||
{# Validation errors #}
|
||||
{% from '_partials/_validation_errors.html.twig' import validation_alert %}
|
||||
{{ validation_alert(form) }}
|
||||
|
||||
{% if dto.isInquiry %}
|
||||
{% include '_partials/_alert.html.twig' with {
|
||||
level: 'warning',
|
||||
title: 'Diese Buchung wird als unverbindliche Anfrage behandelt',
|
||||
messages: dto.inquiryReasons
|
||||
} %}
|
||||
{% endif %}
|
||||
|
||||
{# Pax counts #}
|
||||
<h2 class="pb-4">
|
||||
Personenanzahl und gewünschte Leistungen
|
||||
</h2>
|
||||
|
||||
<div class="grid lg:grid-cols-3 lg:gap-x-8">
|
||||
{{ form_row(form.paxCount) }}
|
||||
{{ form_row(form.minorsCount) }}
|
||||
{{ form_row(form.childrenCount) }}
|
||||
</div>
|
||||
|
||||
{# Board services — rendered manually so price is formatted in Twig #}
|
||||
{% do form.selectedBoardServiceId.setRendered %}
|
||||
{% if ctx.boardServices is not empty %}
|
||||
<div class="pb-4">
|
||||
<fieldset class="border border-primary-bg">
|
||||
<legend class="w-full bg-primary-bg p-2 font-semibold uppercase">
|
||||
Verpflegungsleistungen
|
||||
</legend>
|
||||
<table class="w-full table-fixed border-collapse">
|
||||
<tr>
|
||||
<td class="border border-primary-bg p-2 align-top">
|
||||
<label for="board_service_none" class="cursor-pointer">Selbstversorgung</label>
|
||||
</td>
|
||||
<td class="border border-primary-bg p-2 align-top w-32 text-right"></td>
|
||||
<td class="border border-primary-bg p-2 align-top w-12 text-center">
|
||||
<input type="radio"
|
||||
id="board_service_none"
|
||||
name="{{ form.selectedBoardServiceId.vars.full_name }}"
|
||||
value=""
|
||||
{% if dto.selectedBoardServiceId is null %}checked{% endif %}
|
||||
class="form-radio">
|
||||
</td>
|
||||
</tr>
|
||||
{% for service in ctx.boardServices %}
|
||||
<tr>
|
||||
<td class="border border-primary-bg p-2 align-top">
|
||||
<label for="board_service_{{ service.id }}" class="cursor-pointer">{{ service.label }}</label>
|
||||
{% if service.description %}
|
||||
<div {{ stimulus_controller('tooltip') }}>
|
||||
<button type="button" data-tooltip-target="trigger" class="text-sm text-primary-light">Details</button>
|
||||
<template data-tooltip-target="template">
|
||||
<div class="text-sm">{{ service.description|nl2br }}</div>
|
||||
</template>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="border border-primary-bg p-2 align-top w-32 text-right">
|
||||
<div>{{ (service.price / 100)|format_currency(ctx.accommodation.currency) }}</div>
|
||||
<div class="text-xs text-gray-500">pro Person und Nacht</div>
|
||||
</td>
|
||||
<td class="border border-primary-bg p-2 align-top w-12 text-center">
|
||||
<input type="radio"
|
||||
id="board_service_{{ service.id }}"
|
||||
name="{{ form.selectedBoardServiceId.vars.full_name }}"
|
||||
value="{{ service.id }}"
|
||||
{% if dto.selectedBoardServiceId == service.id %}checked{% endif %}
|
||||
class="form-radio">
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Additional services — rendered manually to support checkbox/radio mix #}
|
||||
{% do form.selectedAdditionalServiceIds.setRendered %}
|
||||
{% set selectedAdditionalServiceBaseName = form.selectedAdditionalServiceIds.vars.full_name|replace({'[]': ''}) %}
|
||||
|
||||
{% if ctx.ungroupedAdditionalServices is not empty or ctx.groupedAdditionalServices is not empty %}
|
||||
|
||||
{# Ungrouped → checkboxes #}
|
||||
{% if ctx.ungroupedAdditionalServices is not empty %}
|
||||
<div class="pb-4">
|
||||
<fieldset class="border border-primary-bg">
|
||||
<legend class="w-full bg-primary-bg p-2 font-semibold uppercase">
|
||||
Optionale Zusatzleistungen
|
||||
</legend>
|
||||
<table class="w-full table-fixed border-collapse">
|
||||
{% for service in ctx.ungroupedAdditionalServices %}
|
||||
<tr>
|
||||
<td class="border border-primary-bg p-2 align-top">
|
||||
<label for="add_service_{{ service.id }}" class="cursor-pointer">{{ service.label }}</label>
|
||||
{% if service.description %}
|
||||
<div {{ stimulus_controller('tooltip') }}>
|
||||
<button type="button" data-tooltip-target="trigger" class="text-sm text-primary-light">Details</button>
|
||||
<template data-tooltip-target="template">
|
||||
<div class="text-sm">{{ service.description|nl2br }}</div>
|
||||
</template>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="border border-primary-bg p-2 align-top w-32 text-right">
|
||||
<div>{{ (service.price / 100)|format_currency(ctx.accommodation.currency) }}</div>
|
||||
<div class="text-xs text-gray-500">{{ service.type.label | trans }}</div>
|
||||
</td>
|
||||
<td class="border border-primary-bg p-2 align-top w-12 text-center">
|
||||
<input type="checkbox"
|
||||
id="add_service_{{ service.id }}"
|
||||
name="{{ form.selectedAdditionalServiceIds.vars.full_name }}"
|
||||
value="{{ service.id }}"
|
||||
{% if service.id in dto.selectedAdditionalServiceIds %}checked{% endif %}
|
||||
class="form-checkbox">
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Grouped → radio buttons per group, one fieldset per group #}
|
||||
{% for groupName, services in ctx.groupedAdditionalServices %}
|
||||
<div class="pb-4">
|
||||
<fieldset class="border border-primary-bg">
|
||||
<legend class="w-full bg-primary-bg p-2 font-semibold uppercase">{{ groupName }}</legend>
|
||||
<table class="w-full table-fixed border-collapse">
|
||||
{% for service in services %}
|
||||
<tr>
|
||||
<td class="border border-primary-bg p-2 align-top">
|
||||
<label for="add_service_{{ service.id }}" class="cursor-pointer">{{ service.label }}</label>
|
||||
{% if service.description %}
|
||||
<div {{ stimulus_controller('tooltip') }}>
|
||||
<button type="button" data-tooltip-target="trigger" class="text-sm text-primary-light">Details</button>
|
||||
<template data-tooltip-target="template">
|
||||
<div class="text-sm">{{ service.description|nl2br }}</div>
|
||||
</template>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="border border-primary-bg p-2 align-top w-32 text-right">
|
||||
<div>{{ (service.price / 100)|format_currency(ctx.accommodation.currency) }}</div>
|
||||
<div class="text-xs text-gray-500">{{ service.type.label | trans }}</div>
|
||||
</td>
|
||||
<td class="border border-primary-bg p-2 align-top w-12 text-center">
|
||||
<input type="radio"
|
||||
id="add_service_{{ service.id }}"
|
||||
name="{{ selectedAdditionalServiceBaseName }}[{{ groupName|e('html_attr') }}]"
|
||||
value="{{ service.id }}"
|
||||
{% if service.id in dto.selectedAdditionalServiceIds %}checked{% endif %}
|
||||
class="form-radio">
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="{{ path('app_groups_booking_step_1') }}" class="button button--secondary">
|
||||
Zurück
|
||||
</a>
|
||||
<button type="submit" class="button button--primary">
|
||||
Weiter zu Schritt 3
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ form_rest(form) }}
|
||||
{{ form_end(form) }}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,108 @@
|
||||
{% extends 'layout_booking.html.twig' %}
|
||||
|
||||
{% block title %}Schritt 3: Persönliche Daten{% endblock %}
|
||||
|
||||
{% block background %}bg-outer bg-outer--summer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% form_theme form 'booking/_form_theme.html.twig' %}
|
||||
|
||||
{{ form_start(form, {
|
||||
'attr': {
|
||||
'class': 'flex-1 flex flex-col min-h-0',
|
||||
'novalidate': 'novalidate',
|
||||
}
|
||||
}) }}
|
||||
|
||||
{# Pagination - mobile only (above summary) #}
|
||||
<div class="lg:hidden">
|
||||
{% include 'groups/booking/_pagination.html.twig' with { 'current_step': 3 } %}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col lg:grid lg:grid-cols-5 min-h-0 relative">
|
||||
|
||||
{# Static sidebar recap #}
|
||||
<div class="order-1 lg:order-2 lg:flex-1 lg:min-h-0 lg:col-span-2"
|
||||
{{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'open': 'absolute inset-0 z-20', 'iconOpen': 'rotate-180' }) }}>
|
||||
{% include 'groups/booking/_summary.html.twig' with { 'dto': dto, 'ctx': ctx } %}
|
||||
</div>
|
||||
|
||||
{# Personal data form #}
|
||||
<div class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col min-h-0">
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
|
||||
{# Pagination - desktop only (fixed above scrollable content) #}
|
||||
<div class="hidden lg:block shrink-0">
|
||||
{% include 'groups/booking/_pagination.html.twig' with { 'current_step': 3 } %}
|
||||
</div>
|
||||
|
||||
<div id="participant-form" class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
|
||||
<h2 class="pb-4">
|
||||
Persönliche Daten
|
||||
</h2>
|
||||
|
||||
{# Validation errors #}
|
||||
{% from '_partials/_validation_errors.html.twig' import validation_alert %}
|
||||
{{ validation_alert(form, 'Bitte fülle alle Pflichtfelder aus.') }}
|
||||
|
||||
{% if dto.isInquiry %}
|
||||
{% include '_partials/_alert.html.twig' with {
|
||||
level: 'warning',
|
||||
title: 'Diese Buchung wird als unverbindliche Anfrage behandelt',
|
||||
messages: dto.inquiryReasons
|
||||
} %}
|
||||
{% endif %}
|
||||
|
||||
<div class="grid lg:grid-cols-2 lg:gap-x-8">
|
||||
{{ form_row(form.groupName) }}
|
||||
{{ form_row(form.salutation) }}
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 lg:gap-x-8">
|
||||
{{ form_row(form.firstName) }}
|
||||
{{ form_row(form.lastName) }}
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 lg:gap-x-8">
|
||||
{{ form_row(form.email) }}
|
||||
{{ form_row(form.phone) }}
|
||||
</div>
|
||||
|
||||
<h3 class="pt-4 pb-2">Adresse</h3>
|
||||
|
||||
{{ form_row(form.street) }}
|
||||
|
||||
<div class="grid lg:grid-cols-2 lg:gap-x-8">
|
||||
{{ form_row(form.zip) }}
|
||||
{{ form_row(form.city) }}
|
||||
</div>
|
||||
|
||||
<h3 class="pt-4 pb-2">Anmerkungen</h3>
|
||||
{{ form_row(form.remarks) }}
|
||||
|
||||
<div class="pt-6">
|
||||
{% if form.forceInquiry is defined %}
|
||||
{{ form_row(form.forceInquiry) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="{{ path('app_groups_booking_step_2') }}" class="button button--secondary">
|
||||
Zurück
|
||||
</a>
|
||||
<div class="space-x-2">
|
||||
<button type="submit" class="button button--primary">
|
||||
weiter zu Schritt 4
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ form_rest(form) }}
|
||||
{{ form_end(form) }}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,74 @@
|
||||
{% extends 'layout_booking.html.twig' %}
|
||||
|
||||
{% block title %}Buchung bestätigen{% endblock %}
|
||||
|
||||
{% block background %}bg-outer bg-outer--summer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{# Pagination - mobile only (above summary) #}
|
||||
<div class="lg:hidden">
|
||||
{% include 'groups/booking/_pagination.html.twig' with { 'current_step': 4 } %}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col lg:grid lg:grid-cols-5 min-h-0 relative">
|
||||
|
||||
{# Static sidebar recap #}
|
||||
<div class="order-1 lg:order-2 lg:flex-1 lg:min-h-0 lg:col-span-2"
|
||||
{{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'open': 'absolute inset-0 z-20', 'iconOpen': 'rotate-180' }) }}>
|
||||
{% include 'groups/booking/_summary.html.twig' with { 'dto': dto, 'ctx': ctx } %}
|
||||
</div>
|
||||
|
||||
{# Confirmation recap #}
|
||||
<div class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col min-h-0">
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
|
||||
{# Pagination - desktop only (fixed above scrollable content) #}
|
||||
<div class="hidden lg:block shrink-0">
|
||||
{% include 'groups/booking/_pagination.html.twig' with { 'current_step': 4 } %}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
|
||||
<h2 class="pb-4">
|
||||
Bitte bestätige deine Angaben
|
||||
</h2>
|
||||
|
||||
{% if dto.isInquiry %}
|
||||
{% include '_partials/_alert.html.twig' with {
|
||||
level: 'warning',
|
||||
title: 'Diese Buchung wird als unverbindliche Anfrage behandelt',
|
||||
messages: dto.inquiryReasons
|
||||
} %}
|
||||
{% endif %}
|
||||
|
||||
{% include 'groups/booking/_step4_services_recap.html.twig' with { 'dto': dto, 'ctx': ctx } %}
|
||||
{% include 'groups/booking/_step4_personal_data_recap.html.twig' with { 'dto': dto } %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="{{ path('app_groups_booking_step_3') }}" class="button button--secondary">
|
||||
Zurück
|
||||
</a>
|
||||
<div class="space-x-2">
|
||||
<button type="button"
|
||||
class="button button--secondary"
|
||||
hx-get="{{ path('app_groups_booking_step_4_confirm_inquiry') }}"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
anfragen
|
||||
</button>
|
||||
<button type="button"
|
||||
class="{{ html_classes('button button--primary', { 'opacity-50': dto.isInquiry }) }}"
|
||||
{% if dto.isInquiry %}disabled{% endif %}
|
||||
hx-get="{{ path('app_groups_booking_step_4_confirm') }}"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
Jetzt verbindlich buchen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,19 @@
|
||||
{% extends 'layout.html.twig' %}
|
||||
|
||||
{% block title %}{{ resultType == 'booking' ? 'Buchung erfolgreich' : 'Anfrage erfolgreich' }}{% endblock %}
|
||||
|
||||
{% block background %}bg-outer bg-outer--summer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-lg w-full">
|
||||
{% include '_partials/_alert.html.twig' with {
|
||||
level: 'success',
|
||||
title: 'Vielen Dank!',
|
||||
messages: [
|
||||
resultType == 'booking'
|
||||
? 'Deine Buchung ist bei uns eingegangen. Du erhältst in Kürze eine Bestätigung.'
|
||||
: 'Deine Anfrage ist bei uns eingegangen. Wir melden uns so schnell wie möglich bei dir.'
|
||||
]
|
||||
} %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user