Suchfunktion bei Key anlegen

v2_adminpanel/templates/batch_form.html

@@ -33,12 +33,19 @@
 
     <form method="post" action="/batch" accept-charset="UTF-8">
         <div class="row g-3">
-            <div class="col-md-6">
+            <div class="col-md-12">
+                <label for="customerSelect" class="form-label">Kunde auswählen</label>
+                <select class="form-select" id="customerSelect" name="customer_id" required>
+                    <option value="">🔍 Kunde suchen oder neuen Kunden anlegen...</option>
+                    <option value="new">➕ Neuer Kunde</option>
+                </select>
+            </div>
+            <div class="col-md-6" id="customerNameDiv" style="display: none;">
                 <label for="customerName" class="form-label">Kundenname</label>
                 <input type="text" class="form-control" id="customerName" name="customer_name" 
-                       placeholder="Firma GmbH" accept-charset="UTF-8" required>
+                       placeholder="Firma GmbH" accept-charset="UTF-8">
             </div>
-            <div class="col-md-6">
+            <div class="col-md-6" id="emailDiv" style="display: none;">
                 <label for="email" class="form-label">E-Mail</label>
                 <input type="email" class="form-control" id="email" name="email" 
                        placeholder="kontakt@firma.de" accept-charset="UTF-8">
@@ -113,6 +120,83 @@ document.addEventListener('DOMContentLoaded', function() {
     const oneYearLater = new Date();
     oneYearLater.setFullYear(oneYearLater.getFullYear() + 1);
     document.getElementById('validUntil').value = oneYearLater.toISOString().split('T')[0];
+    
+    // Initialisiere Select2 für Kundenauswahl
+    $('#customerSelect').select2({
+        theme: 'bootstrap-5',
+        placeholder: '🔍 Kunde suchen oder neuen Kunden anlegen...',
+        allowClear: true,
+        ajax: {
+            url: '/api/customers',
+            dataType: 'json',
+            delay: 250,
+            data: function (params) {
+                return {
+                    q: params.term,
+                    page: params.page || 1
+                };
+            },
+            processResults: function (data, params) {
+                params.page = params.page || 1;
+                
+                // "Neuer Kunde" Option immer oben anzeigen
+                const results = data.results || [];
+                if (params.page === 1) {
+                    results.unshift({
+                        id: 'new',
+                        text: '➕ Neuer Kunde',
+                        isNew: true
+                    });
+                }
+                
+                return {
+                    results: results,
+                    pagination: data.pagination
+                };
+            },
+            cache: true
+        },
+        minimumInputLength: 0,
+        language: {
+            inputTooShort: function() { return ''; },
+            noResults: function() { return 'Keine Kunden gefunden'; },
+            searching: function() { return 'Suche...'; },
+            loadingMore: function() { return 'Lade weitere Ergebnisse...'; }
+        }
+    });
+    
+    // Event Handler für Kundenauswahl
+    $('#customerSelect').on('select2:select', function (e) {
+        const selectedValue = e.params.data.id;
+        const nameDiv = document.getElementById('customerNameDiv');
+        const emailDiv = document.getElementById('emailDiv');
+        const nameInput = document.getElementById('customerName');
+        const emailInput = document.getElementById('email');
+        
+        if (selectedValue === 'new') {
+            // Zeige Eingabefelder für neuen Kunden
+            nameDiv.style.display = 'block';
+            emailDiv.style.display = 'block';
+            nameInput.required = true;
+            emailInput.required = true;
+        } else {
+            // Verstecke Eingabefelder bei bestehendem Kunden
+            nameDiv.style.display = 'none';
+            emailDiv.style.display = 'none';
+            nameInput.required = false;
+            emailInput.required = false;
+            nameInput.value = '';
+            emailInput.value = '';
+        }
+    });
+    
+    // Clear handler
+    $('#customerSelect').on('select2:clear', function (e) {
+        document.getElementById('customerNameDiv').style.display = 'none';
+        document.getElementById('emailDiv').style.display = 'none';
+        document.getElementById('customerName').required = false;
+        document.getElementById('email').required = false;
+    });
 });
 
 // Vorschau-Funktion