303 lines
16 KiB
Twig
303 lines
16 KiB
Twig
{% extends 'layout.html.twig' %}
|
|
|
|
{% block title %}Buchung bestätigen{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>Neue Buchung</h1>
|
|
|
|
<div id="form-wrapper">
|
|
{% include '_partials/_flashes.html.twig' %}
|
|
|
|
<h2 class="mb-6">Buchung bestätigen</h2>
|
|
|
|
{# Travel Summary #}
|
|
<div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
|
<h3 class="text-xl font-semibold mb-4">Reise</h3>
|
|
<dl class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<dt class="font-semibold text-gray-700">Reiseziel</dt>
|
|
<dd>{{ bookingCreateDto.travel.label }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="font-semibold text-gray-700">Zeitraum</dt>
|
|
<dd>{{ bookingCreateDto.travel.dateFrom|date('d.m.Y') }} - {{ bookingCreateDto.travel.dateTo|date('d.m.Y') }}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
{# Rooms Summary #}
|
|
<div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
|
<h3 class="text-xl font-semibold mb-4">Zimmer / Unterkünfte</h3>
|
|
{% if pricingData.rooms is not empty %}
|
|
<ul class="space-y-2">
|
|
{% for roomPricing in pricingData.rooms %}
|
|
<li class="flex justify-between">
|
|
<span>{{ roomPricing.quantity }}x {{ roomPricing.label }}</span>
|
|
<span class="font-semibold">{{ roomPricing.totalPrice|number_format(2, ',', '.') }} €</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# Participants Summary #}
|
|
<div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
|
<h3 class="text-xl font-semibold mb-4">Teilnehmer ({{ participantsCount }})</h3>
|
|
{% for participant in bookingCreateDto.participants %}
|
|
<div class="mb-6 pb-6 {% if not loop.last %}border-b border-gray-300{% endif %}">
|
|
<h4 class="font-semibold text-lg mb-3">
|
|
{{ participant.firstName }} {{ participant.lastName }}
|
|
{% if loop.first %}<span class="text-sm text-gray-600">(Anmelder)</span>{% endif %}
|
|
</h4>
|
|
|
|
<dl class="grid grid-cols-2 gap-4 text-sm">
|
|
{# Personal Data #}
|
|
{% if participant.dateOfBirth %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Geburtsdatum</dt>
|
|
<dd>{{ participant.dateOfBirth|date('d.m.Y') }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if participant.gender %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Geschlecht</dt>
|
|
<dd>{{ participant.gender == 'M' ? 'Männlich' : 'Weiblich' }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if participant.email %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">E-Mail</dt>
|
|
<dd>{{ participant.email }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if participant.mobile %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Telefon</dt>
|
|
<dd>{{ participant.mobile }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if participant.nationality %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Nationalität</dt>
|
|
<dd>{{ participant.nationality }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Address #}
|
|
{% if participant.address and (participant.address.street or participant.address.city) %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold">Adresse</dt>
|
|
<dd>
|
|
{% if participant.address.street %}{{ participant.address.street }}<br>{% endif %}
|
|
{% if participant.address.postCode or participant.address.city %}
|
|
{{ participant.address.postCode }} {{ participant.address.city }}<br>
|
|
{% endif %}
|
|
{% if participant.address.country %}{{ participant.address.country }}{% endif %}
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Room Assignment #}
|
|
{% set assignedRoom = bookingCreateDto.travel.getRoomById(participant.assignedRoomId) %}
|
|
{% if assignedRoom %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Zimmer</dt>
|
|
<dd>{{ assignedRoom.label }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Room Remarks #}
|
|
{% if participant.remarksRoom %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Zimmerwunsch</dt>
|
|
<dd>{{ participant.remarksRoom }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Transportation Services #}
|
|
{% if participant.transportationOutbound %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Anreise</dt>
|
|
<dd>{{ participant.transportationOutbound.label }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if participant.transportationInbound %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Abreise</dt>
|
|
<dd>{{ participant.transportationInbound.label }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Pickup Location #}
|
|
{% if participant.pickup %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Zu- und Ausstieg</dt>
|
|
<dd>{{ participant.pickup.label }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Parking & License Plate #}
|
|
{% if participant.parking %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Parkplatz</dt>
|
|
<dd>Ja</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if participant.licensePlate %}
|
|
<div>
|
|
<dt class="text-gray-600 font-semibold">Kennzeichen</dt>
|
|
<dd>{{ participant.licensePlate }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Board Services #}
|
|
{% if participant.board is not empty %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold mb-1">Verpflegung</dt>
|
|
<dd>
|
|
<ul class="list-disc list-inside">
|
|
{% for boardItem in participant.board %}
|
|
<li>{{ boardItem.label }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Ski Pass #}
|
|
{% if participant.skiPass %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold">Skipass</dt>
|
|
<dd>{{ participant.skiPass.label }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Rentals #}
|
|
{% if participant.rentals is not empty %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold mb-1">Ausrüstung</dt>
|
|
<dd>
|
|
<ul class="list-disc list-inside">
|
|
{% for rental in participant.rentals %}
|
|
<li>{{ rental.label }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Rental Insurance #}
|
|
{% if participant.rentalInsuranceSelected and participant.rentalInsurance %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold">Leihmaterial-Versicherung</dt>
|
|
<dd>{{ participant.rentalInsurance.label }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Body Dimensions (if rentals selected) #}
|
|
{% if participant.rentals is not empty %}
|
|
{% if participant.height or participant.weight or participant.shoeSize %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold mb-1">Körpermaße</dt>
|
|
<dd>
|
|
{% if participant.height %}Größe: {{ participant.height }} cm{% endif %}
|
|
{% if participant.weight %}{% if participant.height %}, {% endif %}Gewicht: {{ participant.weight }} kg{% endif %}
|
|
{% if participant.shoeSize %}{% if participant.height or participant.weight %}, {% endif %}Schuhgröße: {{ participant.shoeSize }}{% endif %}
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{# Courses #}
|
|
{% if participant.courses is not empty %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold mb-1">Kurse</dt>
|
|
<dd>
|
|
<ul class="list-disc list-inside">
|
|
{% for course in participant.courses %}
|
|
<li>{{ course.label }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Additional Services #}
|
|
{% if participant.additionalServices is not empty %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold mb-1">Zusatzleistungen</dt>
|
|
<dd>
|
|
<ul class="list-disc list-inside">
|
|
{% for service in participant.additionalServices %}
|
|
<li>{{ service.label }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Insurance #}
|
|
{% if participant.insurance %}
|
|
<div class="col-span-2">
|
|
<dt class="text-gray-600 font-semibold">Reiseversicherung</dt>
|
|
<dd>{{ participant.insurance.label }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
</dl>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{# Payment Summary #}
|
|
<div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
|
<h3 class="text-xl font-semibold mb-4">Zahlungsart</h3>
|
|
<dl class="space-y-2">
|
|
<div>
|
|
<dt class="font-semibold text-gray-700">Gewählte Zahlungsart</dt>
|
|
<dd>
|
|
{% if bookingCreateDto.paymentMethod == constant('App\\BusProNet\\Constants::PAYMENT_METHOD_DEBIT') %}
|
|
Lastschrift (Einzugsermächtigungsverfahren)
|
|
{% else %}
|
|
Überweisung
|
|
{% endif %}
|
|
</dd>
|
|
</div>
|
|
{% if bookingCreateDto.paymentMethod == constant('App\\BusProNet\\Constants::PAYMENT_METHOD_DEBIT') and bookingCreateDto.bankAccount %}
|
|
<div>
|
|
<dt class="font-semibold text-gray-700">IBAN</dt>
|
|
<dd class="font-mono">{{ bookingCreateDto.bankAccount.iban }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="font-semibold text-gray-700">Kontoinhaber</dt>
|
|
<dd>{{ bookingCreateDto.bankAccount.accountHolder }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
</dl>
|
|
</div>
|
|
|
|
{# Confirmation Form #}
|
|
{{ form_start(form, {
|
|
'attr': {
|
|
'novalidate': 'novalidate',
|
|
'hx-post': path('app_booking_create_step_4'),
|
|
'hx-target': '#form-wrapper',
|
|
'hx-select': '#form-wrapper',
|
|
'hx-swap': 'outerHTML'
|
|
}
|
|
}) }}
|
|
|
|
<div class="mb-8 p-6 bg-blue-50 border border-blue-200 rounded-lg">
|
|
{{ form_row(form.confirmationAccepted, {
|
|
'label_attr': {'class': 'text-base font-semibold'}
|
|
}) }}
|
|
</div>
|
|
|
|
<div class="flex justify-between pt-6">
|
|
<a href="{{ path('app_booking_create_step_3') }}" class="button bg-button bg-button--secondary">Zurück</a>
|
|
<button type="submit" class="button bg-button bg-button--primary" {{ stimulus_action('loading', 'toggle') }}>Verbindlich buchen</button>
|
|
</div>
|
|
|
|
{{ form_end(form) }}
|
|
</div>
|
|
{% endblock %}
|