@php
    $selectedDatacenterId =
        old('module_datacenter_id') ??
        ($model?->ipaddress?->host?->module_datacenter_id ?? ($model?->module_datacenter_id ?? null));
@endphp

<div class="row form-group align-items-center mb-0">
    <label for="datacenter_id" class="col-md-3 text-right">Chọn Datacenter</label>
    <div class="col-md-9 p-1 bg-customer">
        <select class="form-control select2 single__select datacenter_id" name="module_datacenter_id"
                data-selected="{{ $selectedDatacenterId }}"
                data-placeholder="--- Chọn Datacenter ---">
        </select>
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function () {
            // Prevent multiple initializations using namespace
            if (window.datacenterComponentInitialized) {
                return;
            }
            window.datacenterComponentInitialized = true;

            const $vcenter = $('.vcenter_id');
            const $datacenter = $('.datacenter_id');
            const $host = $('.host_id');
            
            // Debounce function to prevent spam API calls
            let loadDatacentersTimeout;
            
            function debounceLoadDatacenters(vcenterId, preselect = null) {
                clearTimeout(loadDatacentersTimeout);
                loadDatacentersTimeout = setTimeout(() => {
                    loadDatacenters(vcenterId, preselect);
                }, 300); // 300ms debounce
            }

            function loadDatacenters(vcenterId, preselect = null) {
                // Check if already loading to prevent duplicate calls
                if ($datacenter.prop('disabled') && $datacenter.find('option:first').text().includes('Đang tải')) {
                    return;
                }
                
                if (!vcenterId) {
                    $datacenter.html('<option value="">--- Chọn Datacenter ---</option>').prop('disabled', true);
                    $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
                    return;
                }

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

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

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

            // Remove existing event handlers and bind new ones with namespace
            $vcenter.off('change.datacenterComponent').on('change.datacenterComponent', function () {
                const vcenterId = $(this).val();
                debounceLoadDatacenters(vcenterId);
            });

            // When datacenter changes
            $datacenter.off('change.datacenterComponent').on('change.datacenterComponent', function () {
                const datacenterId = $(this).val();

                // Reset and disable host
                $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);

                // Enable host if datacenter is selected
                if (datacenterId) {
                    $host.prop('disabled', false);
                }
            });

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