195 lines
9.8 KiB
Twig
195 lines
9.8 KiB
Twig
{% extends 'layout_booking.html.twig' %}
|
|
|
|
{% 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 min-h-0 overflow-y-auto px-4 lg:px-8 py-8">
|
|
|
|
<h1 class="text-2xl font-bold mb-2">
|
|
{{ booking.inquiry ? 'Dein Angebot' : 'Deine Buchung' }}
|
|
</h1>
|
|
<p class="text-gray-500 mb-6">{{ ctx.accommodation.name }}</p>
|
|
|
|
{# Booked services #}
|
|
{% if booking.boardServiceLabel or booking.additionalServices | length > 0 %}
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-bold mb-2">Gebuchte Leistungen</h2>
|
|
<ul class="text-sm list-disc list-inside">
|
|
{% if booking.boardServiceLabel %}
|
|
<li>{{ booking.boardServiceLabel }}</li>
|
|
{% endif %}
|
|
{% for service in booking.additionalServices %}
|
|
<li>{{ service.label }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if ctx.hotelCmsData is not null %}
|
|
<div class="rte-content">
|
|
<h2>
|
|
Die Unterkunft
|
|
</h2>
|
|
{{ 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 }}
|
|
<h2>
|
|
Bilder
|
|
</h2>
|
|
</div>
|
|
{% set largeImages = ctx.hotelCmsData.images.resized.l %}
|
|
{% set mediumImages = ctx.hotelCmsData.images.resized.m %}
|
|
{% if largeImages | length > 0 %}
|
|
<div class="grid md:grid-cols-2 gap-8" {{ stimulus_controller('gallery') }}>
|
|
{% for image in largeImages %}
|
|
<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 ?? ctx.accommodation.name }}">
|
|
<img src="{{ mediumImages[loop.index0].url ?? image.url }}"
|
|
alt="{{ image.alt ?? ctx.accommodation.name }}"
|
|
class="block w-full h-auto">
|
|
{% if loop.index0 == 1 and largeImages | length > 2 %}
|
|
<div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white font-bold text-lg">
|
|
+{{ largeImages | length - 2 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% set visibleIcons = (ctx.hotelCmsData.icons ?? null) | visible_cms_icons %}
|
|
{% if visibleIcons is not empty %}
|
|
<ul class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-6 text-sm text-gray-600">
|
|
{% for item in visibleIcons %}
|
|
<li class="flex items-center gap-2">
|
|
{{ icon(item.key, 'w-5 h-5 shrink-0') }}
|
|
{{ item.label }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if ctx.hotelCmsData is not null and ctx.hotelCmsData.region is defined %}
|
|
{% set region = ctx.hotelCmsData.region %}
|
|
<div class="rte-content mt-8">
|
|
<h2>Die Region {{ region.name }}</h2>
|
|
{% 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.ski_area | default('') | raw }}
|
|
{{ region.ski_area_extended | default('') | raw }}
|
|
{% if region.news %}
|
|
<h2>Aktuelles aus der Region</h2>
|
|
{{ region.news | raw }}
|
|
{% endif %}
|
|
</div>
|
|
{% if region.region_maps is defined and region.region_maps | length > 0 %}
|
|
<div class="grid md:grid-cols-2 gap-8 mt-6" {{ stimulus_controller('gallery') }}>
|
|
{% for mapUrl in region.region_maps %}
|
|
<div class="relative block w-full h-auto cursor-pointer{{ loop.index0 >= 2 ? ' hidden' : '' }}"
|
|
data-gallery-target="item"
|
|
data-gallery-href="{{ mapUrl }}"
|
|
data-gallery-alt="{{ region.name }}">
|
|
<img src="{{ mapUrl }}" alt="{{ region.name }}" class="block w-full h-auto">
|
|
{% if loop.index0 == 1 and region.region_maps | length > 2 %}
|
|
<div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white font-bold text-lg">
|
|
+{{ region.region_maps | length - 2 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% set regionLargeImages = region.images.resized.l ?? [] %}
|
|
{% set regionMediumImages = region.images.resized.m ?? [] %}
|
|
{% if regionLargeImages | length > 0 %}
|
|
<div class="grid md:grid-cols-2 gap-8 mt-6" {{ stimulus_controller('gallery') }}>
|
|
{% for image in regionLargeImages %}
|
|
<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 ?? region.name }}">
|
|
<img src="{{ regionMediumImages[loop.index0].url ?? image.url }}"
|
|
alt="{{ image.alt ?? region.name }}"
|
|
class="block w-full h-auto">
|
|
{% if loop.index0 == 1 and regionLargeImages | length > 2 %}
|
|
<div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white font-bold text-lg">
|
|
+{{ regionLargeImages | length - 2 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if booking.remarks %}
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-bold mb-2">Anmerkungen</h2>
|
|
<p class="text-sm">{{ booking.remarks | nl2br }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% if justAccepted %}
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-lg w-full z-30">
|
|
{% include '_partials/_alert.html.twig' with {
|
|
level: 'success',
|
|
title: 'Bestätigt',
|
|
messages: ['Deine Buchung ist verbindlich bestätigt.'],
|
|
} %}
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|