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

{% block content %}
    <h1>Neue Buchung</h1>

    <div class="grid grid-cols-3 gap-8">
        <div id="form-wrapper" class="col-span-2">
            {% include '_partials/_flashes.html.twig' %}

            <h2 class="mb-6">Zahlungsart</h2>

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

            {# Payment method selection with HTMX #}
            <div id="form-payment"
                 hx-post="{{ path('app_booking_create_step_3_refresh') }}"
                 hx-trigger="change"
                 hx-target="#form-payment"
                 hx-select="#form-payment"
                 hx-swap="outerHTML">
                {{ form_row(form.paymentMethod) }}

                {# Bank account section - conditionally rendered #}
                {% if form.bankAccount is defined %}
                    <div class="border border-gray-300 rounded-lg p-4 bg-gray-50 mt-4">
                        <h3 class="font-semibold text-lg mb-4">Bankverbindung</h3>

                        <div class="space-y-4">
                            {{ form_row(form.bankAccount.iban) }}
                            {{ form_row(form.bankAccount.accountHolder) }}
                            {{ form_row(form.bankAccount.bankName) }}

                            <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
                                {{ form_row(form.bankAccount.sepaMandateAccepted, {
                                    'label_attr': {'class': 'text-sm'}
                                }) }}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>

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

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

        <div id="booking-summary">
            {% include 'booking/_summary.html.twig' with {
                'bookingCreateDto': bookingCreateDto,
                'participantCount': participantsCount,
                'groupedSelectedRooms': groupedSelectedRooms,
                'assignmentCounts': assignmentCounts
            } %}
        </div>
    </div>
{% endblock %}