myep/templates/booking/_summary.html.twig

<div class="booking-summary p-8 bg-gray-50 rounded-lg border sticky top-4">
    <h3 class="font-bold text-xl mb-6 text-gray-800">Buchungsübersicht</h3>

    {# Mutability information (edit mode only) #}
    {% if mutableData is defined %}
        <div class="mb-6 pb-4 border-b border-gray-200">
            <h4 class="font-semibold text-lg mb-3 text-gray-800">Aktualisierung möglich bis</h4>
            <ul class="space-y-1 text-sm text-gray-600">
                <li class="flex items-start">
                    <span class="mr-2">•</span>
                    <span>
                        <span class="font-medium">Zusatzleistungen:</span>
                        {% if mutableData.items['additional_services'].mutable %}
                            {{ mutableData.items['additional_services'].mutableBefore|date('d.m.Y') }}
                        {% else %}
                            <span class="text-red-600">nicht mehr möglich</span>
                        {% endif %}
                    </span>
                </li>
                <li class="flex items-start">
                    <span class="mr-2">•</span>
                    <span>
                        <span class="font-medium">Beförderung:</span>
                        {% if mutableData.items['transportation'].mutable %}
                            {{ mutableData.items['transportation'].mutableBefore|date('d.m.Y') }}
                        {% else %}
                            <span class="text-red-600">nicht mehr möglich</span>
                        {% endif %}
                    </span>
                </li>
                <li class="flex items-start">
                    <span class="mr-2">•</span>
                    <span>
                        <span class="font-medium">Zustiege:</span>
                        {% if mutableData.items['pickup'].mutable %}
                            {{ mutableData.items['pickup'].mutableBefore|date('d.m.Y') }}
                        {% else %}
                            <span class="text-red-600">nicht mehr möglich</span>
                        {% endif %}
                    </span>
                </li>
            </ul>
        </div>
    {% endif %}

    {# Travel Information #}
    <div class="mb-6 pb-4 border-b border-gray-200">
        {% if cmsData.hotel.images is defined %}
            <img src="{{ cmsData.hotel.images.resized.l[0].url }}" alt="{{ cmsData.hotel.images.resized.s[0].alt }}" class="w-full rounded mb-4">
        {% endif %}
        {% if cmsData.hotel.address is defined %}
            <address>
                {{ cmsData.hotel.name }}
                <br>
                {{ cmsData.hotel.address | nl2br }}
            </address>
        {% endif %}
        <div class="space-y-2 text-sm text-gray-600">
            <div><span class="font-medium">Reise:</span> {{ bookingCreateDto.travel.label }}</div>
            <div><span class="font-medium">Zeitraum:</span> {{ bookingCreateDto.travel.dateFrom|date('d.m.Y') }} - {{ bookingCreateDto.travel.dateTo|date('d.m.Y') }}</div>
            <div><span class="font-medium">Hotel:</span> {{ bookingCreateDto.travel.hotel.name }}</div>
            <div><span class="font-medium">Teilnehmer:</span> {{ participantCount }}</div>
        </div>
    </div>

    {# Rooms Section #}
    {% if pricingData.rooms is not empty %}
        <div class="mb-6 pb-4 border-b border-gray-200">
            <h4 class="font-semibold text-lg mb-3 text-gray-800">Unterkunft</h4>
            <div class="space-y-2">
                {% for roomPricing in pricingData.rooms %}
                    <div class="flex justify-between items-start">
                        <div class="text-sm text-gray-600">
                            <span class="font-medium">{{ roomPricing.quantity }}x {{ roomPricing.label }}</span>
                            {% if assignmentCounts is defined and assignmentCounts[roomPricing.roomId] is defined %}
                                <span class="block text-xs text-gray-500">{{ assignmentCounts[roomPricing.roomId] }} belegt</span>
                            {% endif %}
                        </div>
                        <div class="text-right">
                            <div class="text-gray-900">
                                €{{ roomPricing.totalPrice|number_format(2, ',', '.') }}
                            </div>
                            <div class="text-xs text-gray-500">
                                €{{ roomPricing.unitPrice|number_format(2, ',', '.') }} pro Person
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {# Services Section #}
    {% if pricingData.services is not empty %}
        <div class="mb-6">
            <h4 class="font-semibold text-lg mb-3 text-gray-800">Leistungen</h4>
            {% for serviceGroup in pricingData.services %}
                <div class="mb-4 last:mb-0">
                    <h5 class="font-medium text-sm text-gray-700 mb-2 uppercase tracking-wide">{{ serviceGroup.groupName }}</h5>
                    <div class="space-y-1 ml-4">
                        {% for servicePricing in serviceGroup.services %}
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-gray-600">
                                    {{ servicePricing.participantCount }}x {{ servicePricing.label }}
                                </span>
                                <span class="font-medium text-gray-900">
                                    €{{ servicePricing.totalPrice|number_format(2, ',', '.') }}
                                </span>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    {# Surcharges Section (Edit mode only) #}
    {% if pricingData.surcharges is defined and pricingData.surcharges is not empty %}
        <div class="mb-6 pb-4 border-b border-gray-200">
            <h4 class="font-semibold text-lg mb-3 text-gray-800">Zuschläge</h4>
            <div class="space-y-1">
                {% for surchargePricing in pricingData.surcharges %}
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">
                            {{ surchargePricing.participantCount }}x {{ surchargePricing.label }}
                        </span>
                        <span class="font-medium text-gray-900">
                            €{{ surchargePricing.totalPrice|number_format(2, ',', '.') }}
                        </span>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {# Total Section #}
    {% if pricingData.grandTotal is defined and pricingData.grandTotal > 0 %}
        <div class="pt-4 border-t-2 border-gray-300">
            <div class="flex justify-between items-center">
                <span class="font-bold text-lg text-gray-800">Gesamtpreis:</span>
                <span class="font-bold text-xl text-gray-900" {{ qa_attribute('summary-total') }}>
                    €{{ pricingData.grandTotal|number_format(2, ',', '.') }}
                </span>
            </div>
        </div>
    {% endif %}
</div>