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

{% block content %}
    {% include '_partials/_flashes.html.twig' %}
    {{ form_start(form) }}
    {% if not form.vars.valid %}
        {% set messages = form.vars.errors|map(error => error.message) %}
        {% include '_partials/_alert.html.twig' with { 'level': 'error', 'title': 'Die Buchung konnte nicht aktualisiert werden', 'messages': messages  } %}
    {% endif %}
    <div class="flex flex-col space-y-8 pb-8" {{ stimulus_controller('booking', { 'availabilities': availabilities.items }) }} {{ stimulus_controller('iframe', { 'offsetTop': 100 }) }}>
        <div class="p-8 border border-gray-300 rounded-md"
                {{ stimulus_controller('toggle', { 'open': true }, { 'closed': 'hidden' }) }}>
            <div role="button" class="flex items-center justify-between" {{ stimulus_action('toggle', 'toggle', 'click') }}>
                <span class="block text-2xl font-semibold">Reisedaten</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                </svg>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-x-8 gap-y-4 pt-4" {{ stimulus_target('toggle', 'toggle') }}>
                <div>
                    <h3 class="text-lg font-semibold">
                        Reise
                    </h3>
                    {{ bookingData.travel }}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Reisezeitraum
                    </h3>
                    {{ travelData.dateFrom|date('d.m.Y') }} - {{ travelData.dateTo|date('d.m.Y') }}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Buchungsdatum
                    </h3>
                    {{ bookingData.bookingDate|date('d.m.Y') }}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Vorgangsnummer
                    </h3>
                    {{ bookingData.bookingNumber }}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Rechnungsnummer
                    </h3>
                    {{ bookingData.invoiceNumber }}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Anmelder:in
                    </h3>
                    {{ bookingData.applicant.firstName }} {{ bookingData.applicant.name }}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Anzahl Teilnehmer:innen
                    </h3>
                    {{ bookingData.participants|length }}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Gesamtpreis
                    </h3>
                    {{ bookingData.totalPrice|format_currency('EUR') }}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Inklusivleistungen
                    </h3>
                    {% if travelData.includedServices | length == 0 %}
                        -
                    {% else %}
                        <ul class="list-disc pl-4">
                            {% for selectionGroup in travelData.includedServices %}
                                {% for service in selectionGroup.selections %}
                                    <li>
                                        {{ service.label }}
                                    </li>
                                {% endfor %}
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
                <div>
                    <h3 class="text-lg font-semibold">
                        Aktualisierung möglich bis
                    </h3>
                    <ul class="list-disc pl-4">
                        <li>
                            Zusatzleistungen: {% if mutableData.items['additional_services'].mutable %}{{ mutableData.items['additional_services'].mutableBefore|date('d.m.Y') }}{% else  %}nicht mehr möglich{% endif %}
                        </li>
                        <li>
                            Beförderung: {% if mutableData.items['transportation'].mutable %}{{ mutableData.items['transportation'].mutableBefore|date('d.m.Y') }}{% else  %}nicht mehr möglich{% endif %}
                        </li>
                        <li>
                            Zustiege: {% if mutableData.items['pickup'].mutable %}{{ mutableData.items['pickup'].mutableBefore|date('d.m.Y') }}{% else  %}nicht mehr möglich{% endif %}
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        {% for child in form.participants %}
            <div>
                {% set participant = child.vars.data %}
                {% if participant.status == 'S' %}
                    {% do child.setRendered %}
                {% endif %}
                <div class="{{ html_classes('p-8 border rounded-md mb-4', { 'border-gray-300': child.vars.valid, 'border-red-500': not child.vars.valid }) }}" {{ stimulus_controller('toggle', {'open': child.vars.valid == false}, { 'closed': 'hidden' }) }}>
                    <div role="button" class="flex items-center justify-between" {{ stimulus_action('toggle', 'toggle', 'click') }}>
                        <div class="flex items-center space-x-4">
                            <span class="text-2xl leading-none font-semibold">Teilnehmer:in {{ participant.index }}: {{ participant.firstName }} {{ participant.lastName }}</span>
                            {% if participant.status == 'S' %} <span class="inline-block px-2 py-1 text-xs bg-red-500 text-white">storniert</span>{% endif %}
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                        </svg>
                    </div>
                    <div class="hidden" {{ stimulus_target('toggle', 'toggle') }}>
                        <div class="flex flex-col space-y-4 pt-4">
                            {% if participant.status == 'S' %}
                                {% set surcharges = bookingData.surchargesForParticipant(participant.index)  %}
                                {% if surcharges|length > 0 %}
                                    <div>
                                        <h3 class="text-xl font-semibold">
                                            Zuschläge
                                        </h3>
                                        <ul>
                                            {% for surcharge in surcharges %}
                                                <li>
                                                    {{ surcharge.label }}: {{ surcharge.individualPrice[participant.index]|format_currency('EUR') }}
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% endif %}
                            {% else %}
                                <div class="relative">
                                    <h3 class="text-xl font-semibold">
                                        Persönliche Daten
                                    </h3>
                                    {% if not child.vars.data.mutable %}
                                        <div class="pt-4">
                                            {% include '_partials/_alert.html.twig' with {
                                                'level': 'info',
                                                'messages': ['Änderungen an den persönlichen Daten sind nur über die Kundenbetreuung möglich und kostenpflichtig']
                                            } %}
                                        </div>
                                    {% endif %}
                                    <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
                                        {{ form_row(child.firstName) }}
                                        {{ form_row(child.lastName) }}
                                        {{ form_row(child.gender) }}
                                        {{ form_row(child.dateOfBirth) }}
                                        {{ form_row(child.nationality) }}
                                    </fieldset>
                                    <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
                                        {{ form_row(child.email) }}
                                        {{ form_row(child.mobile) }}
                                    </fieldset>
                                    <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
                                        {{ form_row(child.height) }}
                                        {{ form_row(child.shoeSize) }}
                                        {{ form_row(child.weight) }}
                                    </fieldset>
                                    {% if not travelData.participantDataMutable %}
                                        <div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
                                    {% endif %}
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold">
                                        Unterkunft
                                    </h3>
                                    {% set room = bookingData.roomForParticipant(participant.index) %}
                                    {{ room.label }} ({{ room.individualPrice[participant.index]|format_currency('EUR') }})
                                </div>
                                <div class="relative">
                                    <h3 class="text-xl font-semibold">
                                        Leistungen
                                    </h3>
                                    <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
                                        {% if child.courses is defined %}
                                            {{ form_row(child.courses) }}
                                        {% endif %}
                                        {% if child.skiPass is defined %}
                                            {{ form_row(child.skiPass) }}
                                        {% endif %}
                                        {% if child.additionalServices is defined %}
                                            {{ form_row(child.additionalServices) }}
                                        {% endif %}
                                        {% if child.board is defined %}
                                            {{ form_row(child.board) }}
                                        {% endif %}
                                        {% if child.rentals is defined %}
                                            {{ form_row(child.rentals) }}
                                        {% endif %}
                                    </fieldset>
                                    {% if not travelData.additionalServicesMutable %}
                                        <div class="absolute inset-0 cursor-not-allowed"></div>
                                    {% endif %}
                                </div>
                                <div class="relative">
                                    <h3 class="text-xl font-semibold">
                                        Hin-/Rückreise
                                    </h3>
                                    <fieldset class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
                                        <div class="space-y-2" {{ stimulus_controller('select-toggle', { 'show': ['BUS'], 'visible': participant.transportationServiceTo is not null and participant.transportationServiceTo.subType == 'BUS' }, { 'hidden': 'hidden' }) }}>
                                            {{ form_row(child.transportationServiceTo) }}
                                            {% if child.pickup is defined %}
                                                <div {{ stimulus_target('select-toggle', 'container') }}>
                                                    {{ form_row(child.pickup) }}
                                                </div>
                                            {% endif %}
                                        </div>
                                        {{ form_row(child.transportationServiceFro) }}
                                    </fieldset>
                                    {% if not travelData.transportationServicesMutable %}
                                        <div class="absolute inset-0 cursor-not-allowed"></div>
                                    {% endif %}
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
                                    <div>
                                        <h3 class="text-xl font-semibold">
                                            Gesamtpreis
                                        </h3>
                                        <span class="text-2xl font-medium">{{ bookingData.priceForParticipant(participant.index)|format_currency('EUR') }}</span>
                                    </div>
                                    {% set surcharges = bookingData.surchargesForParticipant(participant.index)  %}
                                    {% if surcharges|length > 0 %}
                                        <div>
                                            <h3 class="text-xl font-semibold">
                                                Zuschläge
                                            </h3>
                                            <ul>
                                                {% for surcharge in surcharges %}
                                                    <li>
                                                        {{ surcharge.label }}: {{ surcharge.individualPrice[participant.index]|format_currency('EUR') }}
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if participant.status != 'S' %}
                    <button type="submit"
                            class="button bg-button bg-button--secondary" {{ stimulus_action('loading', 'toggle', null, { 'scroll': true }) }}>
                        Aktualisieren
                    </button>
                {% endif %}
            </div>
        {% endfor %}
    </div>
    <div class="flex justify-between">
        <a href="{{ path('app_bookings') }}"
           class="button bg-button" {{ stimulus_action('loading', 'toggle') }}>
            zurück
        </a>
        <button type="submit"
                class="button bg-button bg-button--secondary" {{ stimulus_action('loading', 'toggle', null, { 'scroll': true }) }}>
            Aktualisieren
        </button>
    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
{% endblock %}