253 lines
12 KiB
Twig
253 lines
12 KiB
Twig
<div class="bg-white h-full flex flex-col lg:border-l lg:border-primary-bg">
|
|
{# Header - always visible #}
|
|
<div class="shrink-0 px-4 lg:px-8 py-4 lg:flex lg:flex-col lg:justify-center shadow-md relative z-10">
|
|
<div class="flex items-center justify-between pb-2">
|
|
<span class="block uppercase font-semibold">Gesamtpreis</span>
|
|
<span class="font-semibold">{{ summaryData.payableAmount|format_currency('EUR') }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="block uppercase font-semibold">Buchungsü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 - toggleable on mobile, always visible on desktop #}
|
|
<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">
|
|
{# Travel Information #}
|
|
<div class="pb-4">
|
|
<table>
|
|
<tr>
|
|
<th class="text-left align-top border-r-2 border-gray-300 pr-2">
|
|
Reise
|
|
</th>
|
|
<td class="pl-2">
|
|
{{ bookingDto.travel.label }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="text-left align-top border-r-2 border-gray-300 pr-2">
|
|
Zeitraum
|
|
</th>
|
|
<td class="pl-2">
|
|
{{ bookingDto.travel.dateFrom|date('d.m.Y') }} - {{ bookingDto.travel.dateTo|date('d.m.Y') }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="text-left align-top border-r-2 border-gray-300 pr-2">
|
|
Unterkunft
|
|
</th>
|
|
<td class="pl-2">
|
|
{{ bookingDto.travel.hotel.name }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="text-left align-top border-r-2 border-gray-300 pr-2">
|
|
Teilnehmer
|
|
</th>
|
|
<td class="pl-2">
|
|
{{ summaryData.participantCount }}
|
|
</td>
|
|
</tr>
|
|
{% if bookingDto.bookingStatus != 'F' %}
|
|
<tr>
|
|
<th class="text-left align-top border-r-2 border-gray-300 pr-2">
|
|
Status
|
|
</th>
|
|
<td class="pl-2">
|
|
{{ bookingDto.bookingStatus|map_status }}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
|
|
{% include 'booking/_summary_hotel.html.twig' %}
|
|
|
|
{# Mutability information (edit mode only) #}
|
|
{% if bookingDto.mode == constant('App\\Form\\Model\\BookingDto::MODE_EDIT') and mutableData %}
|
|
<div class="border border-primary-bg mb-4">
|
|
<div class="p-2 bg-primary-bg uppercase font-semibold">
|
|
Aktualisierung möglich bis
|
|
</div>
|
|
<table class="w-full table-fixed">
|
|
<tr>
|
|
<td class="p-2 align-top">
|
|
Zusatzleistungen
|
|
</td>
|
|
<td class="p-2 align-top w-24 text-right whitespace-nowrap">
|
|
{% if mutableData.items['additional_services'].mutable %}
|
|
{{ mutableData.items['additional_services'].mutableBefore|date('d.m.Y') }}
|
|
{% else %}
|
|
nicht mehr möglich
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="p-2 align-top">
|
|
Beförderung
|
|
</td>
|
|
<td class="p-2 align-top w-24 text-right whitespace-nowrap">
|
|
{% if mutableData.items['transportation'].mutable %}
|
|
{{ mutableData.items['transportation'].mutableBefore|date('d.m.Y') }}
|
|
{% else %}
|
|
nicht mehr möglich
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="p-2 align-top">
|
|
Zustiege
|
|
</td>
|
|
<td class="p-2 align-top w-24 text-right whitespace-nowrap">
|
|
{% if mutableData.items['pickup'].mutable %}
|
|
{{ mutableData.items['pickup'].mutableBefore|date('d.m.Y') }}
|
|
{% else %}
|
|
nicht mehr möglich
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="p-2 align-top">
|
|
Unterkunft
|
|
</td>
|
|
<td class="p-2 align-top w-24 text-right whitespace-nowrap">
|
|
{% if mutableData.items['accommodation'].mutable %}
|
|
{{ mutableData.items['accommodation'].mutableBefore|date('d.m.Y') }}
|
|
{% else %}
|
|
nicht mehr möglich
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Rooms Section #}
|
|
{% if summaryData.pricingData.rooms is not empty %}
|
|
<div class="border border-primary-bg mb-4">
|
|
<div class="p-2 bg-primary-bg uppercase font-semibold">
|
|
Unterkunft
|
|
</div>
|
|
<table class="w-full table-fixed">
|
|
{% for roomPricing in summaryData.pricingData.rooms %}
|
|
<tr>
|
|
<td class="p-2 align-top">
|
|
{{ roomPricing.quantity }}x {{ roomPricing.label }}
|
|
</td>
|
|
<td class="p-2 align-top w-24 text-right whitespace-nowrap">
|
|
{{ roomPricing.totalPrice | format_currency('EUR') }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Services Section #}
|
|
{% if summaryData.pricingData.services is not empty %}
|
|
<div class="border border-primary-bg mb-4">
|
|
<div class="p-2 bg-primary-bg uppercase font-semibold">
|
|
Leistungen
|
|
</div>
|
|
{% for serviceGroup in summaryData.pricingData.services %}
|
|
<div class="p-2 text-primary-dark/70 uppercase font-semibold">
|
|
{{ serviceGroup.groupName }}
|
|
</div>
|
|
<table class="w-full table-fixed">
|
|
{% for servicePricing in serviceGroup.services %}
|
|
<tr>
|
|
<td class="px-2 pb-2 align-top">
|
|
{{ servicePricing.participantCount }}x {{ servicePricing.label }}
|
|
</td>
|
|
<td class="px-2 pb-2 align-top w-24 text-right whitespace-nowrap">
|
|
{{ servicePricing.totalPrice | format_service_price }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Surcharges Section (Edit mode only) #}
|
|
{% if summaryData.pricingData.surcharges is defined and summaryData.pricingData.surcharges is not empty %}
|
|
<div class="border border-primary-bg mb-4">
|
|
<div class="p-2 bg-primary-bg uppercase font-semibold">
|
|
Zu-/Abschläge
|
|
</div>
|
|
<table class="w-full table-fixed">
|
|
{% for surchargePricing in summaryData.pricingData.surcharges %}
|
|
<tr>
|
|
<td class="px-2 pb-2 align-top">
|
|
{{ surchargePricing.participantCount }}x {{ surchargePricing.label }}
|
|
</td>
|
|
<td class="px-2 pb-2 align-top w-24 text-right whitespace-nowrap">
|
|
{{ surchargePricing.totalPrice|format_currency('EUR') }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Total Section #}
|
|
{% if summaryData.totalPrice > 0 %}
|
|
{# Show subtotal and voucher discounts when vouchers are applied #}
|
|
{% set acceptedVouchers = bookingDto.getAcceptedVouchers() %}
|
|
{% if acceptedVouchers and acceptedVouchers.hasVouchers() %}
|
|
<div class="border border-primary-bg mb-4">
|
|
<div class="p-2 bg-primary-bg uppercase font-semibold">
|
|
Kostenübersicht
|
|
</div>
|
|
<table class="w-full table-fixed">
|
|
{# Subtotal before vouchers #}
|
|
<tr>
|
|
<td class="px-2 pb-2 align-top">
|
|
Gesamtpreis
|
|
</td>
|
|
<td class="px-2 pb-2 align-top w-24 text-right whitespace-nowrap">
|
|
{{ summaryData.totalPrice|format_currency('EUR') }}
|
|
</td>
|
|
</tr>
|
|
{# Voucher discounts breakdown #}
|
|
{% for voucher in acceptedVouchers.vouchers %}
|
|
<tr>
|
|
<td class="px-2 pb-2 align-top">
|
|
{% if voucher.promotional %}
|
|
Aktionsgutschein ({{ voucher.code }})
|
|
{% elseif voucher.goodwill %}
|
|
Kulanzgutschein ({{ voucher.code }})
|
|
{% elseif voucher.purchase %}
|
|
Kaufgutschein ({{ voucher.code }})
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-2 pb-2 align-top w-24 text-right whitespace-nowrap">
|
|
- {{ voucher.amount|format_currency('EUR') }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
{# Amount to pay after vouchers #}
|
|
<div class="flex items-center justify-between px-2 pb-2">
|
|
<span class="block uppercase font-semibold">Zu zahlen</span>
|
|
<span class="font-semibold">{{ summaryData.payableAmount|format_currency('EUR') }}</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center justify-between pb-2">
|
|
<span class="block uppercase font-semibold">Gesamtpreis</span>
|
|
<span class="font-semibold">{{ summaryData.payableAmount|format_currency('EUR') }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|