@php

$selectedOsGroupId = old('os_group_id') ?? ($model?->os_group_id ?? null);

$lists = collect();
if ($model && $model->osGroup) {
    $lists = collect([$model->osGroup]);
}
@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 }} 
                            @if($item->host)
                                - {{ $item->host->name }} ({{ $item->host->host_id }})
                            @endif
                        </option>
                    @endif
                @endforeach
            @endif
        </select>
    </div>
</div>


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

            // Initialize Select2 using global function
            if (typeof window.initSelect2 === 'function') {
                window.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' : '';
                                const hostInfo = os.host ? ` - ${os.host.name} (${os.host.host_id})` : '';
                                options +=
                                    `<option value="${os.id}" ${selected}>${os.name}${hostInfo}</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