{% 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 %}
    {% if booking.discount is not null and priceBreakdown is not null %}
        {% set discountAmount = (priceBreakdown.total * booking.discount / 100) | round | number_format(0, '.', '') %}
        {% set discountedTotal = booking.totalPrice ?? (priceBreakdown.total - discountAmount) %}
    {% endif %}
    {% set displayTotal = discountedTotal ?? (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,
                discountAmount: discountAmount ?? null,
                discountedTotal: discountedTotal ?? null,
            } %}
        </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 %}
            {% endif %}

            {# TODO: additional hotel and location information fetched from the CMS #}

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

            {% if booking.inquiry %}
                <div>
                    <button type="button"
                            class="button button--primary"
                            hx-get="{{ path('app_groups_booking_offer_confirm', { uuid: booking.uuid }) }}"
                            hx-target="body"
                            hx-swap="beforeend">
                        Angebot verbindlich buchen
                    </button>
                </div>
            {% else %}
                {% if booking.acceptedAt is not null %}
                    <p class="text-sm text-gray-500">
                        Angenommen am {{ booking.acceptedAt | date('d.m.Y') }} um {{ booking.acceptedAt | date('H:i') }} Uhr
                    </p>
                {% endif %}
            {% 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 %}