{% block content %}
    {% if modal %}<div class="modal-content">{% endif %}
    <div id="wa-checkin-{{ id }}" hx-target="this" hx-swap="outerHTML" class="frame">
        <div class="frame__header">
            <h3>Check-in</h3>
            <div class="grid-md u-gap-2">
                <div class="grid-c-6 mb-2 mb-0-md">
                    <div class="u-flex u-items-center u-gap-1">
                        <i class="icon-uhr-outline"></i>
                        <div class="t-label">Tag/Urzeit</div>
                    </div>
                    <div class="">{{ slot.time|date('d.m.Y H:i') }}</div>
                </div>

                <div class="grid-c-6 mb-2 mb-0-md">
                    <div class="u-flex u-items-center u-gap-1">
                        <i class="icon-standort-outline"></i>
                        <div class="t-label">Standort</div>
                    </div>
                    <div class="">{{ standort.title }}</div>
                </div>

                <div class="grid-c-6 mb-2 mb-0-md">
                    <div class="u-flex u-items-center u-gap-1">
                        <i class="icon-behaelter-outline"></i>
                        <div class="t-label">Gebuchte Behälterkapazität</div>
                    </div>
                    <div class="">{{ buchung.behaelter }}</div>
                </div>

                <div class="grid-c-6 mb-2 mb-0-md">
                    <div class="u-flex u-items-center u-gap-1">
                        <i class="icon-reben-outline"></i>
                        <div class="t-label">Anliefernde Sorten</div>
                    </div>
                    <div class="">{{ buchung.sorten|join(', ') }}</div>
                </div>

                {% if slot.anmerkungen %}
                    <div class="grid-c-12 mb-2 mb-0-md">
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="icon-info-outline"></i>
                            <div class="t-label">Anmerkungen</div>
                        </div>
                        {{ slot.anmerkungen|raw }}
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="divider m-0 mb-2"></div>

        <div class="frame__body">
            <h3>Behälternummern zuweisen</h3>
            {% if toast is defined %}
                {{ toast|raw }}
            {% endif %}
            <form hx-post="/_ajax/vr_wa/v1/slot?do=updateCheckin" enctype="multipart/form-data">
                <input type="hidden" name="id" value="{{ id }}">

                <!-- 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">
                            <div class="grid-md u-gap-2">
                                <div class="grid-c-6">
                                    <fieldset>
                                        <label for="behaelter-number-{{ i }}"><strong>Behälter {{ i }}</strong><sup class="text-danger">*</sup></label>
                                        <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="{% 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>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <fieldset>
                    <button id="checkin-submit" type="submit">Check-in durchführen</button>
                </fieldset>
            </form>
        </div>
    </div>
    {% if modal %}</div>{% endif %}
{% endblock %}

{% block modal %}
    {% if modal %}
        <style>
            .loading-spinner {
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 2px solid rgba(0, 0, 0, 0.1);
                border-left-color: #3498db;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                vertical-align: middle;
                margin-right: 5px;
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            #numbers-loading {
                display: flex;
                align-items: center;
                margin: 10px 0;
            }

            /* Style for the special option "Nummer nicht bekannt" */
            .special-option {
                font-weight: bold;
                color: #3498db;
                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 || []

                if (window.modals.wa_checkins.details{{ id }} === undefined)
                {
                    window.modals.wa_checkins.details{{ id }} = new jBox('Modal', {
                    closeButton: 'box',
                    content: $('#wa-checkin-{{ id }}'),
                    maxWidth: 650,
                    minWidth: 100,
                    minHeight: 100,
                    width: 650,
                    overlay: true,
                    closeOnClick: false,
                    zIndex: 'auto',
                    addClass: '',
                    onOpen: function() {
                        // Initialize the dynamic select behavior
                        initDynamicSelects();
                    }
                }).open();
                } else {
                    window.modals.wa_checkins.details{{ id }}.content.empty();
                    window.modals.wa_checkins.details{{ id }}.setContent($('#wa-checkin-{{ id }}')).open();
                    // Initialize the dynamic select behavior
                    setTimeout(initDynamicSelects, 100); // Small delay to ensure DOM is ready
                }

                // 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 $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 inputsCount = $inputs.length;
                    var previousValues = {}; // Track previous values to detect changes
                    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
                        $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({
                            url: '/_ajax/vr_wa/v1/slot',
                            method: 'GET',
                            data: {
                                do: 'getAvailableNumbers',
                                id: '{{ id }}',
                                limit: 500 // Adjust this based on your needs
                            },
                            dataType: 'json',
                            success: function(response) {
                                if (response.numbers && response.numbers.length > 0) {
                                    // Store the numbers in the allOptionsArray
                                    allOptionsArray = response.numbers.map(function(number) {
                                        // Special handling for the value 9999
                                        if (number === '9999') {
                                            return {
                                                value: number,
                                                text: 'Nummer nicht bekannt',
                                                isSpecial: true
                                            };
                                        }
                                        return {
                                            value: number,
                                            text: number
                                        };
                                    });

                                    // Clear the datalist
                                    $datalist.empty();

                                    // Add options to the datalist
                                    allOptionsArray.forEach(function(option) {
                                        var $option = $('<option>', {
                                            value: option.value,
                                            class: option.isSpecial ? 'special-option' : ''
                                        });

                                        // For the special option, add a label
                                        if (option.isSpecial) {
                                            $option.text('Nummer nicht bekannt');
                                        }

                                        $datalist.append($option);
                                    });

                                    // Mark all inputs as loaded
                                    $inputs.attr('data-loaded', 'true');
                                    numbersLoaded = true;
                                } else {
                                    // Handle case where no numbers are available
                                    $inputs.first().after('<div class="text-sm text-danger">Keine Nummern verfügbar</div>');
                                }
                            },
                            error: function(xhr) {
                                var errorMessage = 'Fehler beim Laden der Nummern';
                                try {
                                    var response = JSON.parse(xhr.responseText);
                                    if (response.error) {
                                        errorMessage = response.error;
                                    }
                                } catch (e) {}

                                $inputs.first().after('<div class="text-sm text-danger">' + errorMessage + '</div>');
                            },
                            complete: function() {
                                // Remove loading indicator and re-enable inputs
                                $('#numbers-loading').remove();
                                $inputs.prop('disabled', false);
                                isLoadingNumbers = false;
                            }
                        });
                    }

                    // 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
                        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();
                        }, 300);

                        // Get all currently used values
                        var usedValues = {};

                        $inputs.each(function() {
                            var val = $(this).val();
                            if (val && val !== '9999') { // Allow multiple use of special value 9999
                                usedValues[val] = true;
                            }
                        });

                        // Clear the datalist
                        $datalist.empty();

                        // 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);
                        }

                        // 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);
                            }
                        });
                    }

                    // Function to validate a single input field
                    function validateInput($input) {
                        var inputId = $input.attr('id');
                        var value = $input.val().trim();

                        // Remove any existing validation message
                        $('#' + inputId + '-validation').remove();

                        // Reset validation classes
                        $input.removeClass('is-valid is-invalid');

                        // 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;

                            $inputs.each(function(index) {
                                var $otherInput = $(this);
                                // Skip the current input
                                if ($otherInput.attr('id') === inputId) {
                                    return;
                                }

                                var otherValue = $otherInput.val().trim();
                                if (otherValue === value) {
                                    duplicateFound = true;
                                    duplicateIndex = index + 1; // +1 because index is zero-based
                                    return false; // Break the loop
                                }
                            });

                            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>');

                                // Store validation result
                                validationResults[inputId] = false;
                                return Promise.resolve(false);
                            }
                        }

                        // 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 inputs
                    $inputs.on('change', function() {
                        updateDatalist();
                    });

                    // 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);
                        });
                    });
                }

            })(jQuery);
        </script>
    {% endif %}
{% endblock %}