feat: implement payment step

templates/booking/create_step_2.html.twig

@@ -281,13 +281,7 @@
                                                     {% endif %}
                                                     {% if participant.licensePlate is defined %}
                                                         <div class="mt-4">
-                                                            {{ form_row(participant.licensePlate, {
-                                                                'attr': {
-                                                                    'hx-trigger': 'change',
-                                                                    'hx-post': path('app_booking_create_step_2_refresh'),
-                                                                    'hx-swap': 'none'
-                                                                }
-                                                            }) }}
+                                                            {{ form_row(participant.licensePlate) }}
                                                         </div>
                                                     {% endif %}
 

templates/booking/create_step_3.html.twig

@@ -1,4 +1,81 @@
 {% extends 'layout.html.twig' %}
 
+{# Local form theme override for consistent fieldset rendering #}
+{% use 'forms.html.twig' %}
+
+{% block form_row %}
+    {%- if form.vars.expanded is defined and form.vars.expanded -%}
+        {# Expanded forms get fieldset wrapper #}
+        <fieldset class="mb-1">
+            <legend class="font-semibold mb-1">
+                {{- form.vars.label -}}
+            </legend>
+            {{- form_widget(form, {
+                'attr': attr|default({})
+            }) -}}
+            {{- form_errors(form) -}}
+            {{- form_help(form) -}}
+        </fieldset>
+    {%- else -%}
+        {{- parent() -}}
+    {%- endif -%}
+{% endblock %}
+
 {% block content %}
+    {% include '_partials/_flashes.html.twig' %}
+
+    <h1>Neue Buchung</h1>
+
+    <div class="grid grid-cols-3 gap-8">
+        <div class="col-span-2">
+            <h2 class="mb-6">Zahlungsart</h2>
+
+            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
+
+            {# Payment method selection with HTMX #}
+            <div id="form-payment"
+                 hx-post="{{ path('app_booking_create_step_3_refresh') }}"
+                 hx-trigger="change from:input[type='radio']"
+                 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">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 %}