{% extends 'layout.html.twig' %}

{% block title %}Buchung bestätigen{% endblock %}

{% block content %}
    {% include '_partials/_flashes.html.twig' %}

    <h1>Neue Buchung</h1>

    {% if bookingCreateDto.bookingStatus == 'A' %}
        <div class="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
            <div class="flex items-start">
                <svg class="w-5 h-5 text-amber-600 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
                <div>
                    <h3 class="text-amber-900 font-semibold">Achtung: Buchung auf Anfrage</h3>
                    <p class="text-amber-800 text-sm mt-1">Diese Buchung erfolgt auf Anfrage. Nach der Absendung wird deine Anfrage geprüft. Du erhältst anschließend eine verbindliche Buchungsbestätigung oder eine Absage per E-Mail.</p>
                </div>
            </div>
        </div>
    {% endif %}

    <div id="form-wrapper">
            <h2 class="mb-6">Buchung bestätigen</h2>

            {# Travel Summary #}
            <div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-xl font-semibold mb-4">Reise</h3>
                <dl class="grid grid-cols-2 gap-4">
                    <div>
                        <dt class="font-semibold text-gray-700">Reiseziel</dt>
                        <dd>{{ bookingCreateDto.travel.label }}</dd>
                    </div>
                    <div>
                        <dt class="font-semibold text-gray-700">Zeitraum</dt>
                        <dd>{{ bookingCreateDto.travel.dateFrom|date('d.m.Y') }} - {{ bookingCreateDto.travel.dateTo|date('d.m.Y') }}</dd>
                    </div>
                </dl>
            </div>

            {# Rooms Summary #}
            <div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-xl font-semibold mb-4">Zimmer / Unterkünfte</h3>
                {% if pricingData.rooms is not empty %}
                    <ul class="space-y-2">
                        {% for roomPricing in pricingData.rooms %}
                            <li class="flex justify-between">
                                <span>{{ roomPricing.quantity }}x {{ roomPricing.label }}</span>
                                <span class="font-semibold">{{ roomPricing.totalPrice|number_format(2, ',', '.') }} €</span>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>

            {# Participants Summary #}
            <div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-xl font-semibold mb-4">Teilnehmer ({{ participantsCount }})</h3>
                {% for participant in bookingCreateDto.participants %}
                    <div class="mb-6 pb-6 {% if not loop.last %}border-b border-gray-300{% endif %}">
                        <h4 class="font-semibold text-lg mb-3">
                            {{ participant.firstName }} {{ participant.lastName }}
                            {% if loop.first %}<span class="text-sm text-gray-600">(Anmelder)</span>{% endif %}
                        </h4>

                        <dl class="grid grid-cols-2 gap-4 text-sm">
                            {# Personal Data #}
                            {% if participant.dateOfBirth %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Geburtsdatum</dt>
                                    <dd>{{ participant.dateOfBirth|date('d.m.Y') }}</dd>
                                </div>
                            {% endif %}
                            {% if participant.gender %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Geschlecht</dt>
                                    <dd>{{ participant.gender == 'M' ? 'Männlich' : 'Weiblich' }}</dd>
                                </div>
                            {% endif %}
                            {% if participant.email %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">E-Mail</dt>
                                    <dd>{{ participant.email }}</dd>
                                </div>
                            {% endif %}
                            {% if participant.mobile %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Telefon</dt>
                                    <dd>{{ participant.mobile }}</dd>
                                </div>
                            {% endif %}
                            {% if participant.nationality %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Nationalität</dt>
                                    <dd>{{ participant.nationality }}</dd>
                                </div>
                            {% endif %}

                            {# Address #}
                            {% if participant.address and (participant.address.street or participant.address.city) %}
                                <div class="col-span-2">
                                    <dt class="text-gray-600 font-semibold">Adresse</dt>
                                    <dd>
                                        {% if participant.address.street %}{{ participant.address.street }}<br>{% endif %}
                                        {% if participant.address.postCode or participant.address.city %}
                                            {{ participant.address.postCode }} {{ participant.address.city }}<br>
                                        {% endif %}
                                        {% if participant.address.country %}{{ participant.address.country }}{% endif %}
                                    </dd>
                                </div>
                            {% endif %}

                            {# Room Assignment #}
                            {% set assignedRoom = bookingCreateDto.travel.getRoomById(participant.assignedRoomId) %}
                            {% if assignedRoom %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Zimmer</dt>
                                    <dd>{{ assignedRoom.label }}</dd>
                                </div>
                            {% endif %}

                            {# Room Remarks #}
                            {% if participant.remarksRoom %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Zimmerwunsch</dt>
                                    <dd>{{ participant.remarksRoom }}</dd>
                                </div>
                            {% endif %}

                            {# Transportation Services #}
                            {% if participant.transportationOutbound %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Anreise</dt>
                                    <dd>{{ participant.transportationOutbound.label }}</dd>
                                </div>
                            {% endif %}
                            {% if participant.transportationInbound %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Abreise</dt>
                                    <dd>{{ participant.transportationInbound.label }}</dd>
                                </div>
                            {% endif %}

                            {# Pickup Location #}
                            {% if participant.pickup %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Zu- und Ausstieg</dt>
                                    <dd>{{ participant.pickup.label }}</dd>
                                </div>
                            {% endif %}

                            {# Parking & License Plate #}
                            {% if participant.parking %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Parkplatz</dt>
                                    <dd>Ja</dd>
                                </div>
                            {% endif %}
                            {% if participant.licensePlate %}
                                <div>
                                    <dt class="text-gray-600 font-semibold">Kennzeichen</dt>
                                    <dd>{{ participant.licensePlate }}</dd>
                                </div>
                            {% endif %}

                            {# Board Services #}
                            {% if participant.board is not empty %}
                                <div class="col-span-2">
                                    <dt class="text-gray-600 font-semibold mb-1">Verpflegung</dt>
                                    <dd>
                                        <ul class="list-disc list-inside">
                                            {% for boardItem in participant.board %}
                                                <li>{{ boardItem.label }}</li>
                                            {% endfor %}
                                        </ul>
                                    </dd>
                                </div>
                            {% endif %}

                            {# Ski Pass #}
                            {% if participant.skiPass %}
                                <div class="col-span-2">
                                    <dt class="text-gray-600 font-semibold">Skipass</dt>
                                    <dd>{{ participant.skiPass.label }}</dd>
                                </div>
                            {% endif %}

                            {# Rentals #}
                            {% if participant.rentals is not empty %}
                                <div class="col-span-2">
                                    <dt class="text-gray-600 font-semibold mb-1">Ausrüstung</dt>
                                    <dd>
                                        <ul class="list-disc list-inside">
                                            {% for rental in participant.rentals %}
                                                <li>{{ rental.label }}</li>
                                            {% endfor %}
                                        </ul>
                                    </dd>
                                </div>
                            {% endif %}

                            {# Rental Insurance #}
                            {% if participant.rentalInsuranceSelected and participant.rentalInsurance %}
                                <div class="col-span-2">
                                    <dt class="text-gray-600 font-semibold">Leihmaterial-Versicherung</dt>
                                    <dd>{{ participant.rentalInsurance.label }}</dd>
                                </div>
                            {% endif %}

                            {# Body Dimensions (if rentals selected) #}
                            {% if participant.rentals is not empty %}
                                {% if participant.height or participant.weight or participant.shoeSize %}
                                    <div class="col-span-2">
                                        <dt class="text-gray-600 font-semibold mb-1">Körpermaße</dt>
                                        <dd>
                                            {% if participant.height %}Größe: {{ participant.height }} cm{% endif %}
                                            {% if participant.weight %}{% if participant.height %}, {% endif %}Gewicht: {{ participant.weight }} kg{% endif %}
                                            {% if participant.shoeSize %}{% if participant.height or participant.weight %}, {% endif %}Schuhgröße: {{ participant.shoeSize }}{% endif %}
                                        </dd>
                                    </div>
                                {% endif %}
                            {% endif %}

                            {# Courses #}
                            {% if participant.courses is not empty %}
                                <div class="col-span-2">
                                    <dt class="text-gray-600 font-semibold mb-1">Kurse</dt>
                                    <dd>
                                        <ul class="list-disc list-inside">
                                            {% for course in participant.courses %}
                                                <li>{{ course.label }}</li>
                                            {% endfor %}
                                        </ul>
                                    </dd>
                                </div>
                            {% endif %}

                            {# Additional Services #}
                            {% if participant.additionalServices is not empty %}
                                <div class="col-span-2">
                                    <dt class="text-gray-600 font-semibold mb-1">Zusatzleistungen</dt>
                                    <dd>
                                        <ul class="list-disc list-inside">
                                            {% for service in participant.additionalServices %}
                                                <li>{{ service.label }}</li>
                                            {% endfor %}
                                        </ul>
                                    </dd>
                                </div>
                            {% endif %}

                            {# Insurance #}
                            {% if participant.insurance %}
                                <div class="col-span-2">
                                    <dt class="text-gray-600 font-semibold">Reiseversicherung</dt>
                                    <dd>{{ participant.insurance.label }}</dd>
                                </div>
                            {% endif %}
                        </dl>
                    </div>
                {% endfor %}
            </div>

            {# Payment Summary #}
            <div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-xl font-semibold mb-4">Zahlungsart</h3>
                <dl class="space-y-2">
                    <div>
                        <dt class="font-semibold text-gray-700">Gewählte Zahlungsart</dt>
                        <dd>
                            {% if bookingCreateDto.paymentMethod == constant('App\\BusProNet\\Constants::PAYMENT_METHOD_DEBIT') %}
                                Lastschrift (Einzugsermächtigungsverfahren)
                            {% else %}
                                Überweisung
                            {% endif %}
                        </dd>
                    </div>
                    {% if bookingCreateDto.paymentMethod == constant('App\\BusProNet\\Constants::PAYMENT_METHOD_DEBIT') and bookingCreateDto.bankAccount %}
                        <div>
                            <dt class="font-semibold text-gray-700">IBAN</dt>
                            <dd class="font-mono">{{ bookingCreateDto.bankAccount.iban }}</dd>
                        </div>
                        <div>
                            <dt class="font-semibold text-gray-700">Kontoinhaber</dt>
                            <dd>{{ bookingCreateDto.bankAccount.accountHolder }}</dd>
                        </div>
                    {% endif %}
                </dl>
            </div>

            {# Confirmation Form #}
            {{ form_start(form, {
                'attr': {
                    'novalidate': 'novalidate',
                    'hx-post': path('app_booking_create_step_4'),
                    'hx-target': '#form-wrapper',
                    'hx-select': '#form-wrapper',
                    'hx-swap': 'outerHTML'
                }
            }) }}

            <div class="mb-8 p-6 bg-blue-50 border border-blue-200 rounded-lg">
                {{ form_row(form.confirmationAccepted, {
                    'label_attr': {'class': 'text-base font-semibold'}
                }) }}
            </div>

            <div class="flex justify-between pt-6">
                <a href="{{ path('app_booking_create_step_3') }}" class="button bg-button bg-button--secondary">Zurück</a>
                <button type="submit" class="button bg-button bg-button--primary" {{ stimulus_action('loading', 'toggle') }}>Verbindlich buchen</button>
            </div>

            {{ form_end(form) }}
    </div>
{% endblock %}