@php
$selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?->ipaddress?->module_host_id ?? null));
@endphp


{{-- Select Host --}}
<div class="row form-group align-items-center mb-0">
    <label for="host_id" class="col-md-3 text-right">Chọn Host</label>
    <div class="col-md-9 p-1 bg-customer">
        <select class="form-control select2 single__select host_id" name="module_host_id"
                data-selected="{{ $selectedHostId }}"
                data-placeholder="--- Chọn Host ---">
        </select>
    </div>
</div>
@push('custom-scripts')
    <script>
        $(document).ready(function () {
            // Prevent multiple initializations using namespace
            if (window.hostComponentInitialized) {
                return;
            }
            window.hostComponentInitialized = true;

            // Initialize Select2 using global function
            if (typeof window.initSelect2 === 'function') {
                window.initSelect2();
            }

            const $datacenter = $('.datacenter_id');
            const $host = $('.host_id');

            // Debounce function to prevent spam API calls
            let loadHostsTimeout;

            function debounceLoadHosts(datacenterId, preselect = null) {
                clearTimeout(loadHostsTimeout);
                loadHostsTimeout = setTimeout(() => {
                    loadHosts(datacenterId, preselect);
                }, 300); // 300ms debounce
            }

            function loadHosts(datacenterId, preselect = null) {
                // Check if already loading to prevent duplicate calls
                if ($host.prop('disabled') && $host.find('option:first').text().includes('Đang tải')) {
                    return;
                }

                if (!datacenterId) {
                    $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
                    return;
                }

                $host.html('<option value="">Đang tải Host...</option>').prop('disabled', true);

                $.ajax({
                    url: '{{ route('module-vcenter.getHost') }}',
                    type: 'GET',
                    data: {
                        datacenter: datacenterId
                    },
                    success: function (response) {
                        if (!response.error && response.data.length > 0) {
                            let options = '<option value="">--- Chọn Host ---</option>';
                            response.data.forEach(host => {
                                const selected = preselect == host.id ? 'selected' : '';
                                options +=
                                    `<option value="${host.id}" ${selected}>${host.name}</option>`;
                            });
                            $host.html(options).prop('disabled', false);

                            // If there's a preselected host ID, select it
                            if (preselect) {
                                setTimeout(() => {
                                    $host.val(preselect).trigger('change');
                                }, 100);
                            }
                        } else {
                            $host.html('<option value="">Không tìm thấy Host</option>').prop('disabled', true);
                        }
                    },
                    error: function () {
                        $host.html('<option value="">Lỗi tải Host</option>').prop('disabled', true);
                    }
                });
            }

            // Remove existing event handlers and bind new ones with namespace
            $datacenter.off('change.hostComponent').on('change.hostComponent', function () {
                const datacenterId = $(this).val();
                const selectedHostId = $host.data('selected');
                debounceLoadHosts(datacenterId, selectedHostId);
            });

            // Initial load logic
            const selectedHostId = $host.data('selected');
            if ($datacenter.val() && selectedHostId) {
                debounceLoadHosts($datacenter.val(), selectedHostId);
            } else if ($datacenter.val()) {
                // If only datacenter is selected, load hosts without preselection
                debounceLoadHosts($datacenter.val());
            }
        });
    </script>
@endpush