{% 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 %}