Addition of the custom fields in the Terminplaner

Web/templates/termin_client.html

@@ -109,6 +109,16 @@
                                     <label for="client_name" class="form-label fw-semibold">Ihr Name</label>
                                     <input type="text" id="client_name" name="client_name" class="form-control form-control-lg" placeholder="Vor- und Nachname" required>
                                 </div>
+                            
+                                {% if custom_fields %}
+                                    {% for field_label in custom_fields %}
+                                    <div>
+                                        <label class="form-label fw-semibold">{{ field_label }}</label>
+                                        <input type="text" name="custom_answers" class="form-control form-control-lg" placeholder="{{ field_label }} eingeben" required>
+                                    </div>
+                                    {% endfor %}
+                                {% endif %}
+                                
                                 <div class="d-flex flex-column flex-sm-row gap-2 pt-2">
                                     <button type="submit" class="btn btn-primary btn-lg">Termin buchen</button>
                                     <a class="btn btn-outline-secondary btn-lg" href="{{ url_for('terminplaner.main', tenant=tenant_id) }}">Zur Übersicht</a>

Web/templates/termin_configure.html

@@ -77,6 +77,16 @@
                                 <div class="form-text">Wird aus der gebuchten Zeit (abzüglich Pausen) und der Slot-Länge berechnet.</div>
                             </div>
                         </div>
+                        <div id="custom-fields-container" class="mt-4">
+                            <h3 class="mb-3">Custom Fields</h3>
+
+                            <div class="mb-3 custom-field-row">
+                                <input type="text" 
+                                       name="custom_fields" 
+                                       class="form-control form-control-lg custom-dynamic-input" 
+                                       placeholder="Zusatzfeld hinzufügen (z.B. Firma, Kundennummer...)">
+                            </div>
+                        </div>
 
                         {% if mail_service_enabled %}
                             <div>
@@ -351,6 +361,39 @@
         syncTextarea();
     }
 
+    document.addEventListener('DOMContentLoaded', function () {
+        const container = document.getElementById('custom-fields-container');
+        
+        // Monitor inputs inside the container using event delegation
+        container.addEventListener('input', function (event) {
+            // Only trigger if the user is typing inside our dynamic inputs
+            if (event.target.classList.contains('custom-dynamic-input')) {
+                const allInputs = container.querySelectorAll('.custom-dynamic-input');
+                const lastInput = allInputs[allInputs.length - 1];
+            
+                // If the user typed something into the absolute last input field, spawn a new one
+                if (lastInput.value.trim() !== '') {
+                    createNewFieldRow(container);
+                }
+            }
+        });
+    
+        // Helper function to generate and append a clean new input row
+        function createNewFieldRow(targetContainer) {
+            const rowDiv = document.createElement('div');
+            rowDiv.className = 'mb-3 custom-field-row';
+            
+            rowDiv.innerHTML = `
+                <input type="text" 
+                       name="custom_fields" 
+                       class="form-control form-control-lg custom-dynamic-input" 
+                       placeholder="Nächstes Zusatzfeld...">
+            `;
+            
+            targetContainer.appendChild(rowDiv);
+        }
+    });
+
     // Event Listeners Registration
     buildButton.addEventListener('click', renderRows);
     startDateInput.addEventListener('change', renderRows);