@@ -60,6 +60,11 @@

                 <button type="button" id="load-numbers-btn" class="btn btn--sm btn-info mb-2">Nummern laden</button>

+                <!-- Datalist for all behaelter number inputs -->

+                <datalist id="behaelter-numbers-list">

+                    <!-- Options will be loaded via Ajax -->

+                </datalist>

+

                 <div class="grid-md u-gap-2">

                     {% for i in 1..checkin.behaelter %}

                         <div class="grid-c-12">

@@ -67,16 +72,27 @@

                                 <div class="grid-c-6">

                                     <fieldset>

                                         <label for="behaelter-number-{{ i }}"><strong>Behälter {{ i }}</strong><sup class="text-danger">*</sup></label>

-                                        <select id="behaelter-number-{{ i }}" name="behaelter_numbers[]" required data-loaded="false">

-                                            <option value="">-</option>

-                                            <!-- Options will be loaded via Ajax when the select is focused -->

-                                        </select>

+                                        <input type="text" id="behaelter-number-{{ i }}" name="behaelter_numbers[]" required data-loaded="false" list="behaelter-numbers-list" autocomplete="off"

+                                            {% if form_data is defined and form_data.behaelter_numbers[i-1] is defined %}

+                                                value="{{ form_data.behaelter_numbers[i-1] }}"

+                                                {% if form_data.invalid_fields is defined and (i-1) in form_data.invalid_fields %}

+                                                    class="is-invalid"

+                                                {% endif %}

+                                            {% endif %}

+                                        >

+                                        {% if form_data is defined and form_data.invalid_fields is defined and (i-1) in form_data.invalid_fields %}

+                                            <div id="behaelter-number-{{ i }}-validation" class="validation-message error">

+                                                Bitte korrigieren Sie dieses Feld

+                                            </div>

+                                        {% endif %}

                                     </fieldset>

                                 </div>

                                 <div class="grid-c-6">

                                     <fieldset>

                                         <label for="member-number-{{ i }}"><strong>Mitgliedsnummer</strong></label>

-                                        <input type="text" id="member-number-{{ i }}" name="member_numbers[]" value="{{ current_member.memberno|default('') }}" placeholder="Mitgliedsnummer">

+                                        <input type="text" id="member-number-{{ i }}" name="member_numbers[]"

+                                            value="{% if form_data is defined and form_data.member_numbers[i-1] is defined %}{{ form_data.member_numbers[i-1] }}{% else %}{{ current_member.memberno|default('') }}{% endif %}"

+                                            placeholder="Mitgliedsnummer">

                                         <p class="text-sm text-muted">Leer lassen für aktuelle Mitgliedsnummer: {{ current_member.memberno|default('Keine') }}</p>

                                     </fieldset>

                                 </div>

@@ -127,9 +143,89 @@

                 border-bottom: 1px dashed #ccc;

                 margin-bottom: 5px;

             }

+

+            /* Style for datalist options */

+            option {

+                padding: 5px;

+                font-size: 14px;

+            }

+

+            /* Style for input fields with datalist */

+            input[list] {

+                background-color: #fff;

+                border: 1px solid #ccc;

+                border-radius: 4px;

+                padding: 8px 12px;

+                width: 100%;

+                box-sizing: border-box;

+            }

+

+            input[list]:focus {

+                border-color: #3498db;

+                outline: none;

+                box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);

+            }

+

+            /* Validation styles */

+            input[list].is-invalid {

+                border-color: #dc3545;

+                box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);

+            }

+

+            input[list].is-valid {

+                border-color: #28a745;

+                box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);

+            }

+

+            .validation-message {

+                font-size: 12px;

+                margin-top: 4px;

+                display: none;

+            }

+

+            .validation-message.error {

+                color: #dc3545;

+                display: block;

+            }

         </style>

         <script>

             (function ($) {

+                // Store the initDynamicSelects function in a global scope for reuse

+                window.initDynamicSelectsForCheckin = null;

+                window.htmxSwapOccurred = false;

+

+                // Add event listeners for HTMX events

+                document.body.addEventListener('htmx:afterSwap', function(event) {

+                    // Check if the swapped element is our check-in form

+                    if (event.detail.target && event.detail.target.id && event.detail.target.id.startsWith('wa-checkin-')) {

+                        console.log('HTMX content swapped, reinitializing JavaScript');

+                        // Set flag to indicate a swap occurred

+                        window.htmxSwapOccurred = true;

+                        // Use the stored function if available

+                        if (window.initDynamicSelectsForCheckin) {

+                            window.initDynamicSelectsForCheckin();

+                        } else {

+                            console.error('initDynamicSelectsForCheckin function not available');

+                            // Try to reinitialize the modal

+                            var id = event.detail.target.id.replace('wa-checkin-', '');

+                            if (window.modals && window.modals.wa_checkins && window.modals.wa_checkins['details' + id]) {

+                                setTimeout(function() {

+                                    window.modals.wa_checkins['details' + id].options.onOpen();

+                                }, 100);

+                            }

+                        }

+                    }

+                });

+

+                // Log HTMX request errors

+                document.body.addEventListener('htmx:responseError', function(event) {

+                    console.error('HTMX response error:', event.detail.error, event.detail.xhr);

+                });

+

+                // Log when HTMX sends a request

+                document.body.addEventListener('htmx:beforeRequest', function(event) {

+                    console.log('HTMX sending request to:', event.detail.path);

+                });

                 window.modals = window.modals || []

                 window.modals.wa_checkins = window.modals.wa_checkins || []

@@ -159,28 +255,66 @@

                     setTimeout(initDynamicSelects, 100); // Small delay to ensure DOM is ready

                 }

-                // Function to initialize the dynamic select behavior

+                // Function to initialize the dynamic input behavior

                 function initDynamicSelects() {

+                    console.log('Initializing dynamic selects for check-in form');

+                    // Store this function in the global scope for reuse after HTMX swaps

+                    window.initDynamicSelectsForCheckin = initDynamicSelects;

+

+                    // Reset the numbersLoaded flag if this is being called after an HTMX swap

+                    if (window.htmxSwapOccurred) {

+                        console.log('HTMX swap detected, resetting numbersLoaded flag');

+                        window.htmxSwapOccurred = false;

+                        numbersLoaded = false;

+

+                        // Force immediate loading of available numbers after HTMX swap

+                        setTimeout(function() {

+                            console.log('Forcing load of available numbers after HTMX swap');

+                            loadAvailableNumbers();

+                        }, 200);

+                    }

                     // Cache DOM elements and data

-                    var $selects = $('#wa-checkin-{{ id }} select[name="behaelter_numbers[]"]');

+                    var $inputs = $('#wa-checkin-{{ id }} input[name="behaelter_numbers[]"]');

+                    var $form = $('#wa-checkin-{{ id }} form');

+                    var $datalist = $('#behaelter-numbers-list');

                     var allOptionsArray = []; // Store all available options as a flat array

-                    var selectsCount = $selects.length;

+                    var inputsCount = $inputs.length;

                     var previousValues = {}; // Track previous values to detect changes

-                    var optionElements = {}; // Pre-created option elements for better performance

                     var isLoadingNumbers = false; // Flag to prevent multiple simultaneous requests

                     var numbersLoaded = false; // Flag to track if numbers have been loaded

+                    var validationInProgress = false; // Flag to track if validation is in progress

+                    var validationResults = {}; // Store validation results for each input

+

+                    // Check if there are server-side validation errors

+                    var hasServerErrors = $inputs.filter('.is-invalid').length > 0;

+

+                    // If there are server-side errors, scroll to the first invalid field

+                    if (hasServerErrors) {

+                        var $firstInvalid = $inputs.filter('.is-invalid').first();

+                        if ($firstInvalid.length) {

+                            setTimeout(function() {

+                                $firstInvalid[0].scrollIntoView({ behavior: 'smooth', block: 'center' });

+                                $firstInvalid.focus();

+                            }, 500);

+                        }

+                    }

+

+                    // Load available numbers immediately when the modal is opened

+                    loadAvailableNumbers();

                     // Function to load available numbers via Ajax

                     function loadAvailableNumbers() {

+                        console.log('Loading available numbers for check-in form');

                         if (isLoadingNumbers || numbersLoaded) {

+                            console.log('Numbers already loading or loaded, skipping');

                             return;

                         }

                         isLoadingNumbers = true;

                         // Show loading animation

-                        $selects.prop('disabled', true);

-                        $selects.first().after('<div id="numbers-loading" class="text-sm text-muted"><div class="loading-spinner"></div> Lade verfügbare Nummern...</div>');

+                        $inputs.prop('disabled', true);

+                        $inputs.first().after('<div id="numbers-loading" class="text-sm text-muted"><div class="loading-spinner"></div> Lade verfügbare Nummern...</div>');

                         // Make Ajax request to get available numbers

                         $.ajax({

@@ -210,24 +344,30 @@

                                         };

                                     });

-                                    // Pre-create option elements for better performance

+                                    // Clear the datalist

+                                    $datalist.empty();

+

+                                    // Add options to the datalist

                                     allOptionsArray.forEach(function(option) {

-                                        optionElements[option.value] = $('<option>', {

+                                        var $option = $('<option>', {

                                             value: option.value,

-                                            text: option.text,

                                             class: option.isSpecial ? 'special-option' : ''

-                                        })[0]; // Get the raw DOM element for better performance

-                                    });

+                                        });

-                                    // Update all selects with the available numbers

-                                    updateSelectOptions();

+                                        // For the special option, add a label

+                                        if (option.isSpecial) {

+                                            $option.text('Nummer nicht bekannt');

+                                        }

-                                    // Mark all selects as loaded

-                                    $selects.attr('data-loaded', 'true');

+                                        $datalist.append($option);

+                                    });

+

+                                    // Mark all inputs as loaded

+                                    $inputs.attr('data-loaded', 'true');

                                     numbersLoaded = true;

                                 } else {

                                     // Handle case where no numbers are available

-                                    $selects.first().after('<div class="text-sm text-danger">Keine Nummern verfügbar</div>');

+                                    $inputs.first().after('<div class="text-sm text-danger">Keine Nummern verfügbar</div>');

                                 }

                             },

                             error: function(xhr) {

@@ -239,128 +379,341 @@

                                     }

                                 } catch (e) {}

-                                $selects.first().after('<div class="text-sm text-danger">' + errorMessage + '</div>');

+                                $inputs.first().after('<div class="text-sm text-danger">' + errorMessage + '</div>');

                             },

                             complete: function() {

-                                // Remove loading indicator and re-enable selects

+                                // Remove loading indicator and re-enable inputs

                                 $('#numbers-loading').remove();

-                                $selects.prop('disabled', false);

+                                $inputs.prop('disabled', false);

                                 isLoadingNumbers = false;

                             }

                         });

                     }

-                    // Function to efficiently update select options

-                    function updateSelectOptions(changedSelect) {

+                    // Function to update the datalist when input values change

+                    function updateDatalist() {

                         // If numbers haven't been loaded yet, don't update

                         if (allOptionsArray.length === 0) {

                             return;

                         }

-                        // Show a brief loading animation when refreshing values

-                        if (changedSelect) {

-                            var $loadingIndicator = $('<div class="loading-spinner" style="position: absolute; right: 25px; top: 50%; transform: translateY(-50%);"></div>');

-                            $(changedSelect).parent().css('position', 'relative').append($loadingIndicator);

+                        // Show a brief loading animation

+                        var $loadingIndicator = $('<div class="loading-spinner" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;"></div>');

+                        $('body').append($loadingIndicator);

-                            // Remove the loading indicator after a short delay

-                            setTimeout(function() {

-                                $loadingIndicator.remove();

-                            }, 500);

-                        }

+                        // Remove the loading indicator after a short delay

+                        setTimeout(function() {

+                            $loadingIndicator.remove();

+                        }, 300);

-                        // Get all currently selected values

-                        var selectedValues = {};

-                        var hasChanges = false;

+                        // Get all currently used values

+                        var usedValues = {};

-                        $selects.each(function() {

+                        $inputs.each(function() {

                             var val = $(this).val();

-                            if (val) {

-                                selectedValues[val] = true;

+                            if (val && val !== '9999') { // Allow multiple use of special value 9999

+                                usedValues[val] = true;

                             }

                         });

-                        // Only update other selects if there's a change

-                        $selects.each(function() {

-                            var $select = $(this);

-                            var selectId = $select.attr('id');

-                            var currentValue = $select.val();

+                        // Clear the datalist

+                        $datalist.empty();

-                            // Skip the select that triggered the change and selects that don't need updating

-                            if (changedSelect && this === changedSelect && currentValue) {

-                                previousValues[selectId] = currentValue;

-                                return;

-                            }

+                        // First add the special option (9999) if it's available

+                        var specialOption = allOptionsArray.find(function(option) {

+                            return option.isSpecial;

+                        });

+

+                        if (specialOption) {

+                            var $specialOption = $('<option>', {

+                                value: specialOption.value,

+                                text: specialOption.text,

+                                class: 'special-option'

+                            });

+                            $datalist.append($specialOption);

+                        }

-                            // Check if we need to update this select

-                            var needsUpdate = false;

-                            if (changedSelect) {

-                                needsUpdate = true; // Always update on explicit change

-                            } else if (!previousValues[selectId] || previousValues[selectId] !== currentValue) {

-                                needsUpdate = true;

+                        // Then add all other available options

+                        allOptionsArray.forEach(function(option) {

+                            // Skip the special option (already added) and used values

+                            if (!option.isSpecial && !usedValues[option.value]) {

+                                var $option = $('<option>', {

+                                    value: option.value

+                                });

+                                $datalist.append($option);

                             }

+                        });

+                    }

-                            if (needsUpdate) {

-                                // Store current selection

-                                var currentSelection = currentValue;

+                    // Function to validate a single input field

+                    function validateInput($input) {

+                        var inputId = $input.attr('id');

+                        var value = $input.val().trim();

-                                // Efficiently update options

-                                var optionsFragment = document.createDocumentFragment();

-                                var emptyOption = $select.find('option:first').clone()[0];

-                                optionsFragment.appendChild(emptyOption);

+                        // Remove any existing validation message

+                        $('#' + inputId + '-validation').remove();

-                                // First add the special option (9999) if it's available

-                                var specialOption = null;

-                                var regularOptions = [];

+                        // Reset validation classes

+                        $input.removeClass('is-valid is-invalid');

-                                // Separate special option from regular options

-                                allOptionsArray.forEach(function(option) {

-                                    // Always include the special option (9999) or options that are either the current selection or not selected elsewhere

-                                    if (option.isSpecial || option.value === currentSelection || !selectedValues[option.value]) {

-                                        if (option.isSpecial) {

-                                            specialOption = option;

-                                        } else {

-                                            regularOptions.push(option);

-                                        }

-                                    }

-                                });

+                        // If empty, mark as invalid but don't show message (HTML5 required will handle this)

+                        if (!value) {

+                            return Promise.resolve(false);

+                        }

+

+                        // Check for duplicate values (except for special value 9999)

+                        if (value !== '9999') {

+                            var duplicateFound = false;

+                            var duplicateIndex = -1;

-                                // Add special option first (after empty option)

-                                if (specialOption) {

-                                    var specialOptionClone = optionElements[specialOption.value].cloneNode(true);

-                                    optionsFragment.appendChild(specialOptionClone);

+                            $inputs.each(function(index) {

+                                var $otherInput = $(this);

+                                // Skip the current input

+                                if ($otherInput.attr('id') === inputId) {

+                                    return;

                                 }

-                                // Then add all other options

-                                regularOptions.forEach(function(option) {

-                                    var optionClone = optionElements[option.value].cloneNode(true);

-                                    optionsFragment.appendChild(optionClone);

-                                });

+                                var otherValue = $otherInput.val().trim();

+                                if (otherValue === value) {

+                                    duplicateFound = true;

+                                    duplicateIndex = index + 1; // +1 because index is zero-based

+                                    return false; // Break the loop

+                                }

+                            });

-                                // Replace all options at once for better performance

-                                $select.empty()[0].appendChild(optionsFragment);

+                            if (duplicateFound) {

+                                $input.addClass('is-invalid');

+                                var $fieldset = $input.closest('fieldset');

+                                $fieldset.append('<div id="' + inputId + '-validation" class="validation-message error">Diese Nummer wird bereits für Behälter ' + duplicateIndex + ' verwendet.</div>');

-                                // Restore current selection

-                                if (currentSelection) {

-                                    $select.val(currentSelection);

-                                }

+                                // Store validation result

+                                validationResults[inputId] = false;

+                                return Promise.resolve(false);

+                            }

+                        }

-                                previousValues[selectId] = currentSelection;

+                        // Show loading indicator

+                        var $fieldset = $input.closest('fieldset');

+                        var $loadingIndicator = $('<div class="loading-spinner" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);"></div>');

+                        $fieldset.css('position', 'relative').append($loadingIndicator);

+

+                        // Make Ajax request to validate the number

+                        return $.ajax({

+                            url: '/_ajax/vr_wa/v1/slot',

+                            method: 'GET',

+                            data: {

+                                do: 'validateNumber',

+                                id: '{{ id }}',

+                                number: value

+                            },

+                            dataType: 'json'

+                        }).then(function(response) {

+                            // Remove loading indicator

+                            $loadingIndicator.remove();

+

+                            // Store validation result

+                            validationResults[inputId] = response.valid;

+

+                            if (response.valid) {

+                                // Valid number

+                                $input.addClass('is-valid');

+                                return true;

+                            } else {

+                                // Invalid number

+                                $input.addClass('is-invalid');

+

+                                // Add validation message

+                                var message = response.message || 'Ungültige Nummer';

+                                $fieldset.append('<div id="' + inputId + '-validation" class="validation-message error">' + message + '</div>');

+

+                                return false;

                             }

+                        }).catch(function() {

+                            // Remove loading indicator

+                            $loadingIndicator.remove();

+

+                            // Mark as invalid on error

+                            $input.addClass('is-invalid');

+                            $fieldset.append('<div id="' + inputId + '-validation" class="validation-message error">Fehler bei der Validierung</div>');

+

+                            // Store validation result

+                            validationResults[inputId] = false;

+

+                            return false;

+                        });

+                    }

+

+                    // Function to validate all inputs

+                    function validateAllInputs() {

+                        if (validationInProgress) {

+                            return Promise.reject('Validation already in progress');

+                        }

+

+                        validationInProgress = true;

+

+                        // Disable submit button during validation

+                        $('#checkin-submit').prop('disabled', true).html('<div class="loading-spinner" style="display: inline-block;"></div> Validiere...');

+

+                        // Create an array of promises for each input validation

+                        var validationPromises = [];

+

+                        $inputs.each(function() {

+                            var $input = $(this);

+                            validationPromises.push(validateInput($input));

+                        });

+

+                        // Wait for all validations to complete

+                        return Promise.all(validationPromises).then(function(results) {

+                            // Check if all inputs are valid

+                            var allValid = results.every(function(result) {

+                                return result === true;

+                            });

+

+                            // Re-enable submit button

+                            $('#checkin-submit').prop('disabled', false).text('Check-in durchführen');

+

+                            validationInProgress = false;

+                            return allValid;

+                        }).catch(function(error) {

+                            console.error('Validation error:', error);

+

+                            // Re-enable submit button

+                            $('#checkin-submit').prop('disabled', false).text('Check-in durchführen');

+

+                            validationInProgress = false;

+                            return false;

                         });

                     }

-                    // Add change event to all selects

-                    $selects.on('change', function() {

-                        updateSelectOptions(this);

+                    // Add change event to all inputs

+                    $inputs.on('change', function() {

+                        updateDatalist();

                     });

-                    // Add focus event to all selects to load numbers when first focused

-                    $selects.on('focus', function() {

+                    // Add focus event to all inputs to load numbers when first focused

+                    $inputs.on('focus', function() {

                         if (!numbersLoaded) {

                             loadAvailableNumbers();

                         }

                     });

+                    // Add input event to handle typing in the fields

+                    $inputs.on('input', function() {

+                        // Update the datalist when the user types in the field

+                        // Use a small delay to avoid too frequent updates

+                        clearTimeout($(this).data('inputTimer'));

+                        $(this).data('inputTimer', setTimeout(updateDatalist, 300));

+

+                        // Only remove validation classes and messages if this is not a server-side error

+                        // or if the user has changed the value

+                        var $input = $(this);

+                        var inputId = $input.attr('id');

+                        var initialValue = $input.data('initial-value');

+                        var currentValue = $input.val();

+

+                        // Store initial value on first input

+                        if (initialValue === undefined) {

+                            $input.data('initial-value', currentValue);

+                            initialValue = currentValue;

+                        }

+

+                        // If value has changed from initial value, remove validation classes

+                        if (currentValue !== initialValue) {

+                            $input.removeClass('is-valid is-invalid');

+                            $('#' + inputId + '-validation').remove();

+                        }

+                    });

+

+                    // Add blur event to validate when field loses focus

+                    $inputs.on('blur', function() {

+                        var $input = $(this);

+                        var value = $input.val().trim();

+

+                        // Only validate if the field has a value

+                        if (value) {

+                            validateInput($input);

+                        }

+                    });

+

+                    // Add form submit handler to validate all fields before submission

+                    $form.on('submit', function(e) {

+                        // Prevent the default form submission

+                        e.preventDefault();

+

+                        // Remove any existing toast messages

+                        $form.find('.toast').remove();

+

+                        // Validate all inputs

+                        validateAllInputs().then(function(isValid) {

+                            if (isValid) {

+                                // If all inputs are valid, submit the form using HTMX

+                                // Show loading state on submit button

+                                $('#checkin-submit').prop('disabled', true).html('<div class="loading-spinner" style="display: inline-block;"></div> Wird gespeichert...');

+

+                                // Use HTMX to submit the form

+                                var formData = new FormData($form[0]);

+                                var url = $form.attr('hx-post') || $form.attr('action');

+                                var target = $form.closest('[hx-target]').attr('hx-target');

+                                var swap = $form.closest('[hx-swap]').attr('hx-swap');

+

+                                console.log('Submitting form via HTMX to:', url);

+                                console.log('Target:', target);

+                                console.log('Swap:', swap);

+

+                                try {

+                                    // Check if HTMX is available

+                                    if (typeof htmx !== 'undefined') {

+                                        htmx.ajax('POST', url, {

+                                            target: target,

+                                            swap: swap,

+                                            values: formData,

+                                            headers: {

+                                                'HX-Request': 'true'

+                                            },

+                                            error: function(xhr, status) {

+                                                console.error('HTMX form submission error:', status);

+                                                $('#checkin-submit').prop('disabled', false).text('Check-in durchführen');

+                                                var $toast = $('<div class="toast toast--danger mx-0 mb-3"><p>Es ist ein Fehler bei der Übermittlung aufgetreten. Bitte versuchen Sie es erneut.</p></div>');

+                                                $form.prepend($toast);

+                                            }

+                                        });

+                                    } else {

+                                        // Fallback to standard form submission if HTMX is not available

+                                        console.warn('HTMX not available, falling back to standard form submission');

+                                        $form[0].submit();

+                                    }

+                                } catch (e) {

+                                    console.error('HTMX form submission exception:', e);

+                                    $('#checkin-submit').prop('disabled', false).text('Check-in durchführen');

+                                    var $toast = $('<div class="toast toast--danger mx-0 mb-3"><p>Es ist ein Fehler bei der Übermittlung aufgetreten. Bitte versuchen Sie es erneut.</p></div>');

+                                    $form.prepend($toast);

+                                }

+                            } else {

+                                // If any input is invalid, show a message

+                                var $toast = $('<div class="toast toast--danger mx-0 mb-3"><p>Bitte korrigieren Sie die markierten Felder.</p></div>');

+                                $form.prepend($toast);

+

+                                // Scroll to the first invalid input

+                                var $firstInvalid = $inputs.filter('.is-invalid').first();

+                                if ($firstInvalid.length) {

+                                    $firstInvalid[0].scrollIntoView({ behavior: 'smooth', block: 'center' });

+                                    $firstInvalid.focus();

+                                }

+

+                                // Remove the toast after 5 seconds

+                                setTimeout(function() {

+                                    $toast.fadeOut(function() {

+                                        $(this).remove();

+                                    });

+                                }, 5000);

+                            }

+                        }).catch(function(error) {

+                            console.error('Form validation error:', error);

+                            var $toast = $('<div class="toast toast--danger mx-0 mb-3"><p>Es ist ein Fehler bei der Validierung aufgetreten. Bitte versuchen Sie es erneut.</p></div>');

+                            $form.prepend($toast);

+                        });

+                    });

+

                     // Add click handler to the load numbers button

                     $('#load-numbers-btn').on('click', function(e) {

                         e.preventDefault();

@@ -112,6 +112,9 @@ class SlotAjaxController extends AbstractController

             case 'getAvailableNumbers':

                 return $this->getAvailableNumbers();

+

+            case 'validateNumber':

+                return $this->validateNumber();

         }

         return new Response('',500);

@@ -684,7 +687,7 @@ class SlotAjaxController extends AbstractController

         return $this->render('@Contao/modal_unauthorized.html.twig');

     }

-    protected function renderCheckin(bool $blnModal=true, string $error=null)

+    protected function renderCheckin(bool $blnModal=true, string $error=null, array $formData=null)

     {

         $insertTagService = Controller::getContainer()->get('contao.insert_tag.parser');

@@ -770,6 +773,11 @@ class SlotAjaxController extends AbstractController

             'current_member' => $currentMemberModel ? $currentMemberModel->row() : null

         ]);

+        // Add form data if provided (to preserve values after validation errors)

+        if ($formData !== null) {

+            $arrData['form_data'] = $formData;

+        }

+

         if (!empty($error))

         {

             $arrData['toast'] = $error;

@@ -795,7 +803,12 @@ class SlotAjaxController extends AbstractController

         $behaelterNumbers = Input::post('behaelter_numbers');

         if (!is_array($behaelterNumbers) || count($behaelterNumbers) != $Booking->behaelter)

         {

-            return $this->renderCheckin(false, '<div class="toast toast--danger mx-0">Bitte wählen Sie für jeden Behälter eine Nummer aus.</div>');

+            // Prepare form data to preserve input values

+            $formData = [

+                'behaelter_numbers' => $behaelterNumbers ?: [],

+                'member_numbers' => Input::post('member_numbers') ?: []

+            ];

+            return $this->renderCheckin(false, '<div class="toast toast--danger mx-0">Bitte wählen Sie für jeden Behälter eine Nummer aus.</div>', $formData);

         }

         // Get member numbers from the form

@@ -819,7 +832,98 @@ class SlotAjaxController extends AbstractController

         // Check for duplicate numbers (excluding the special value 9999)

         if (count(array_unique($numbersForDuplicateCheck)) != count($numbersForDuplicateCheck))

         {

-            return $this->renderCheckin(false, '<div class="toast toast--danger mx-0">Jede Nummer kann nur einmal verwendet werden.</div>');

+            // Prepare form data to preserve input values

+            $formData = [

+                'behaelter_numbers' => $behaelterNumbers,

+                'member_numbers' => $memberNumbers

+            ];

+            return $this->renderCheckin(false, '<div class="toast toast--danger mx-0">Jede Nummer kann nur einmal verwendet werden.</div>', $formData);

+        }

+

+        // Validate all numbers on the server side as a final check

+        $invalidNumbers = [];

+        $currentTime = time();

+        $Slot = $Booking->getRelated('pid');

+        $Standort = $Slot->getRelated('pid');

+

+        // Get all used numbers from current bookings (excluding past bookings)

+        $usedNumbers = [];

+

+        // Get the database connection

+        $db = Controller::getContainer()->get('database_connection');

+

+        // Query to get used numbers from current bookings

+        $sql = "SELECT r.behaelter_numbers

+                FROM tl_vr_wa_reservation r

+                JOIN tl_vr_wa_slot s ON r.pid = s.id

+                WHERE r.behaelter_numbers != ''

+                AND s.time >= ?

+                AND r.id != ?

+                AND s.pid = ?"; // Only check for the same standort

+

+        $stmt = $db->prepare($sql);

+        $stmt->bindValue(1, $currentTime);

+        $stmt->bindValue(2, $Booking->id);

+        $stmt->bindValue(3, $Standort->id);

+        $result = $stmt->executeQuery();

+

+        while ($row = $result->fetchAssociative()) {

+            $numbers = json_decode($row['behaelter_numbers'], true);

+            if (is_array($numbers)) {

+                foreach ($numbers as $item) {

+                    $usedNumbers[] = isset($item['behaelter']) ? $item['behaelter'] : $item;

+                }

+            }

+        }

+

+        // Check each number

+        foreach ($behaelterNumbers as $index => $number) {

+            // Skip the special value 9999

+            if ($number === '9999') {

+                continue;

+            }

+

+            // Check if the number is numeric

+            if (!is_numeric($number)) {

+                $invalidNumbers[] = "Behälter " . ($index + 1) . ": Die eingegebene Nummer ist keine gültige Zahl.";

+                continue;

+            }

+

+            // Check if the number is already in use

+            if (in_array($number, $usedNumbers)) {

+                $invalidNumbers[] = "Behälter " . ($index + 1) . ": Diese Nummer wird bereits in einer anderen aktiven Buchung verwendet.";

+                continue;

+            }

+

+            // Check if the number is within the valid ranges for this standort

+            $validRanges = $Standort->extractNumbersFromRanges([], 10000); // Get all possible numbers

+            if (!in_array($number, $validRanges) && !empty($validRanges)) {

+                $invalidNumbers[] = "Behälter " . ($index + 1) . ": Die eingegebene Nummer liegt nicht im gültigen Bereich für diesen Standort.";

+            }

+        }

+

+        // If there are invalid numbers, return an error

+        if (!empty($invalidNumbers)) {

+            $errorMessage = '<div class="toast toast--danger mx-0"><p>Folgende Fehler wurden gefunden:</p><ul>';

+            foreach ($invalidNumbers as $error) {

+                $errorMessage .= '<li>' . $error . '</li>';

+            }

+            $errorMessage .= '</ul></div>';

+

+            // Prepare form data to preserve input values

+            $formData = [

+                'behaelter_numbers' => $behaelterNumbers,

+                'member_numbers' => $memberNumbers,

+                'invalid_fields' => array_map(function($error) {

+                    // Extract the behälter number from the error message

+                    if (preg_match('/Behälter (\d+):/', $error, $matches)) {

+                        return (int)$matches[1] - 1; // Convert to zero-based index

+                    }

+                    return null;

+                }, $invalidNumbers)

+            ];

+

+            return $this->renderCheckin(false, $errorMessage, $formData);

         }

         // Create combined array with behaelter numbers and member numbers

@@ -926,4 +1030,91 @@ class SlotAjaxController extends AbstractController

         // Return the numbers as JSON

         return new Response(json_encode(['numbers' => $availableNumbers]), 200, ['Content-Type' => 'application/json']);

     }

+

+    protected function validateNumber()

+    {

+        if (empty($_REQUEST['id']) || !isset($_REQUEST['number']))

+        {

+            return new Response(json_encode(['valid' => false, 'message' => 'Required parameters missing']), 412, ['Content-Type' => 'application/json']);

+        }

+

+        $number = $_REQUEST['number'];

+

+        // Special case: "Nummer nicht bekannt" is always valid

+        if ($number === '9999') {

+            return new Response(json_encode(['valid' => true]), 200, ['Content-Type' => 'application/json']);

+        }

+

+        // Check if the number is a valid number format

+        if (!is_numeric($number)) {

+            return new Response(json_encode([

+                'valid' => false,

+                'message' => 'Die eingegebene Nummer ist keine gültige Zahl.'

+            ]), 200, ['Content-Type' => 'application/json']);

+        }

+

+        /** @var WeinanlieferungReservationModel $Booking */

+        if (($Booking = WeinanlieferungReservationModel::findById($_REQUEST['id'])) === null || ($Slot = $Booking->getRelated('pid')) === null)

+        {

+            return new Response(json_encode(['valid' => false, 'message' => 'Could not load booking data']), 500, ['Content-Type' => 'application/json']);

+        }

+

+        // Get the standort to access the number_ranges

+        $Standort = $Slot->getRelated('pid');

+        if ($Standort === null)

+        {

+            return new Response(json_encode(['valid' => false, 'message' => 'Could not load standort data']), 500, ['Content-Type' => 'application/json']);

+        }

+

+        // Get all used numbers from current bookings (excluding past bookings)

+        $usedNumbers = [];

+        $currentTime = time();

+

+        // Get the database connection

+        $db = Controller::getContainer()->get('database_connection');

+

+        // Query to get used numbers from current bookings

+        $sql = "SELECT r.behaelter_numbers

+                FROM tl_vr_wa_reservation r

+                JOIN tl_vr_wa_slot s ON r.pid = s.id

+                WHERE r.behaelter_numbers != ''

+                AND s.time >= ?

+                AND r.id != ?

+                AND s.pid = ?"; // Only check for the same standort

+

+        $stmt = $db->prepare($sql);

+        $stmt->bindValue(1, $currentTime);

+        $stmt->bindValue(2, $Booking->id);

+        $stmt->bindValue(3, $Standort->id);

+        $result = $stmt->executeQuery();

+

+        while ($row = $result->fetchAssociative()) {

+            $numbers = json_decode($row['behaelter_numbers'], true);

+            if (is_array($numbers)) {

+                foreach ($numbers as $item) {

+                    $usedNumbers[] = isset($item['behaelter']) ? $item['behaelter'] : $item;

+                }

+            }

+        }