{{-- Single OS Version Selection (cho module vmware) --}}
@if (isset($os_versions) && $os_versions)
    <div class="row form-group align-items-center mb-0">
        <label for="os_version" class="col-md-3 text-right">Os Version</label>
        <div class="col-md-9 p-1 bg-customer">
            <select class="custom-select" id="os_version" name="os_version">
                <option value="0">---------</option>
                @foreach ($os_versions->all() as $item)
                    <option @selected($model && $item->id == $model?->os?->id) value="{{ $item->id }}">
                        {{ $item->version }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
@endif

{{-- Multiple OS Selection (cho VPS products) --}}
@if (isset($os) && $os)
    <div class="row form-group align-items-center mb-0">
        <label for="operating_systems" class="col-md-3 text-right">Hệ điều hành hỗ trợ</label>
        <div class="col-md-9 p-1 bg-customer">
            <select name="operating_systems[]" id="operating_systems" class="form-control" multiple="multiple"
                style="width: 100%;">
                @foreach ($os as $osItem)
                    <option value="{{ $osItem->id }}" @if (isset($model) && $model->operatingSystems && $model->operatingSystems->contains('id', $osItem->id)) selected @endif>
                        {{ $osItem->version }}
                        @if ($osItem->osGroup)
                            ({{ $osItem->osGroup->name }})
                        @endif
                    </option>
                @endforeach
            </select>
            <small class="text-muted">Chọn các hệ điều hành được hỗ trợ cho sản phẩm VPS này</small>
        </div>
    </div>

    @push('scripts')
        <script>
            // Initialize Select2 for Operating Systems in OS Version Component
            function initializeOSVersionSelect() {
                if (typeof $ !== 'undefined' && typeof $.fn.select2 !== 'undefined') {
                    // Initialize Select2 for Multiple OS Selection
                    if ($('#operating_systems').length && !$('#operating_systems').hasClass('select2-hidden-accessible')) {
                        $('#operating_systems').select2({
                            placeholder: "Chọn hệ điều hành...",
                            allowClear: true,
                            width: '100%',
                            theme: 'default'
                        });
                        console.log('Select2 initialized for Operating Systems in OS Version component');
                    }
                } else {
                    // Retry after a short delay
                    setTimeout(initializeOSVersionSelect, 100);
                }
            }

            // Initialize when DOM is ready
            $(document).ready(function() {
                initializeOSVersionSelect();
            });

            // Fallback: try to initialize when window loads
            $(window).on('load', function() {
                if ($('#operating_systems').length && !$('#operating_systems').hasClass('select2-hidden-accessible')) {
                    initializeOSVersionSelect();
                }
            });
        </script>
    @endpush
@endif