@php
    // Fix: Get os_group_id from the relationship correctly
    $selectedOsGroupId = old('os_group_id') ?? ($model?->os?->os_group_id ?? null);
@endphp


<div class="row form-group align-items-center mb-0">
    <label for="os_group_id" class="col-md-3 text-right">Os Family</label>
    <div class="col-md-9 p-1 bg-customer">
        <select class="form-control os_group_id select2 single__select" name="os_group_id"
            data-selected="{{ $selectedOsGroupId }}" data-placeholder="--- Chọn OS Group ---">
            @if ($selectedOsGroupId && $lists)
                @foreach ($lists->all() as $item)
                    @if ($item->id == $selectedOsGroupId)
                        <option value="{{ $item->id }}" selected>{{ $item->name }}</option>
                    @endif
                @endforeach
            @endif
        </select>
    </div>
</div>


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

            // Initialize Select2
            initSelect2();
            
            const $host = $('.host_id');
            const $osGroup = $('.os_group_id');
            
            // Debounce function to prevent spam API calls
            let loadOsGroupsTimeout;
            
            function debounceLoadOsGroups(hostId, preselect = null) {
                clearTimeout(loadOsGroupsTimeout);
                loadOsGroupsTimeout = setTimeout(() => {
                    loadOsGroups(hostId, preselect);
                }, 300); // 300ms debounce
            }

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

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

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

                            if (preselect) {
                                setTimeout(() => {
                                    $osGroup.val(preselect).trigger('change');
                                }, 100);
                            }
                        } else {
                            $osGroup.html('<option value="">Không tìm thấy OS Group</option>').prop(
                                'disabled', true);
                        }
                    },
                    error: function() {
                        $osGroup.html('<option value="">Lỗi tải OS Group</option>').prop('disabled',
                            true);
                    }
                });
            }

            // Remove existing event handlers and bind new ones with namespace
            $host.off('change.osComponent').on('change.osComponent', function() {
                const hostId = $(this).val();
                const selectedOsGroupId = $osGroup.data('selected');
                debounceLoadOsGroups(hostId, selectedOsGroupId);
            });

            // Initial load logic
            const selectedOsGroupId = $osGroup.data('selected');
            if ($host.val()) {
                debounceLoadOsGroups($host.val(), selectedOsGroupId);
            } else {
                // Nếu chưa có host, disable OS group
                $osGroup.prop('disabled', true).html('<option value="">--- Chọn OS Group ---</option>');
            }
        });
    </script>
@endpush