245 lines
12 KiB
Twig
245 lines
12 KiB
Twig
{% 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.accepted ? 'Deine Buchung' : 'Dein Angebot' }}{% 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.accepted ? 'Deine Buchung' : 'Dein Angebot' }}
|
|
</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.accepted ? 'Gebuchte' : 'Angefragte' }} 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 and booking.open %}
|
|
<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"></rect>
|
|
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="rte-content" data-toggle-target="content">
|
|
{% set icons = ctx.hotelCmsData.icons %}
|
|
{% set iconMap = {
|
|
bedsCount: { icon: 'bed', label: 'Anzahl Betten' },
|
|
parkingCount: { icon: 'parking', label: 'Anzahl Parkplätze' },
|
|
altitude: { icon: 'mountain', label: 'Höhe' },
|
|
partyroom: { icon: 'party', label: 'Partyraum' },
|
|
gamesroom: { icon: 'dice', label: 'Spieleraum' },
|
|
distanceBus: { icon: 'bus', label: 'Entfernung Bus' },
|
|
distanceLift: { icon: 'lift', label: 'Entfernung Lifte' },
|
|
sauna: { icon: 'sauna', label: 'Sauna' },
|
|
shower: { icon: 'shower', label: 'Dusche' },
|
|
wifi: { icon: 'wifi', label: 'WiFi' },
|
|
} %}
|
|
{% if icons is not empty %}
|
|
<ul class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
{% for key, value in icons %}
|
|
{% set mapping = iconMap[key] ?? null %}
|
|
{% set isBool = value is same as(true) or value is same as(false) %}
|
|
<li class="flex items-center gap-2">
|
|
<div class="border-2 border-gray-900 rounded-full w-16 h-16 shrink-0 flex flex-col items-center justify-center">
|
|
{% if mapping %}
|
|
{{ icon(mapping.icon, 'w-8 h-8 shrink-0 text-gray-900') }}
|
|
{% endif %}
|
|
</div>
|
|
<div class="text-sm font-bold">
|
|
{% if isBool %}
|
|
{{ mapping ? mapping.label : '' }}
|
|
{% else %}
|
|
{{ mapping ? mapping.label ~ ': ' ~ value : value }}
|
|
{% endif %}
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
|
|
{{ ctx.hotelCmsData.description | raw }}
|
|
|
|
{% if ctx.hotelCmsData.features|striptags|trim is not empty %}
|
|
<h2>
|
|
Details zur Unterkunft
|
|
</h2>
|
|
{{ ctx.hotelCmsData.features | raw }}
|
|
{% endif %}
|
|
|
|
{% if ctx.hotelCmsData.roomTypes|striptags|trim is not empty %}
|
|
<h2>
|
|
Die Zimmer
|
|
</h2>
|
|
{{ ctx.hotelCmsData.roomTypes | raw }}
|
|
{% endif %}
|
|
|
|
{% if ctx.hotelCmsData.additionalInformation|striptags|trim is not empty %}
|
|
<h2>
|
|
Weitere Infos
|
|
</h2>
|
|
{{ ctx.hotelCmsData.additionalInformation | raw }}
|
|
{% endif %}
|
|
</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"></rect>
|
|
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
|
|
</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 %}
|