@php
$selectedVcenterId = old('vcenter_id') ??
    ($model?->host?->datacenter?->vcenter_id ?? (
        $model?->datacenter?->vcenter_id ??
        ($model?->ipaddress?->host?->datacenter?->vcenter?->id ??
        $model?->vcenter_id ?? null)
    ));
@endphp

<div class="row form-group align-items-center mb-0">
    <label for="vcenter_id" class="col-md-3 text-right">Chọn vCenter</label>
    <div class="col-md-9 p-1 bg-customer">
        <select class="form-control select2 single__select vcenter_id" name="vcenter_id"
            data-selected="{{ $selectedVcenterId }}">
            <option value="">--- Chọn vCenter ---</option>
            @if(isset($vcenters) && $vcenters->count())
                @foreach ($vcenters as $vc)
                    <option value="{{ $vc->id }}" @selected($selectedVcenterId == $vc->id)>{{ $vc->host }}</option>
                @endforeach
            @endif
        </select>
    </div>
</div>

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

                $('.select2').select2({
                    width: '100%'
                });

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

                if ($datacenter.is('select')) {
                    $datacenter.prop('disabled', true);
                }
                if ($host.is('select')) {
                    $host.prop('disabled', true);
                }

                $vcenter.off('change.vcenterComponent').on('change.vcenterComponent', function () {
                    const vcenterId = $(this).val();

                    if ($datacenter.is('select')) {
                        $datacenter.html('<option value="">--- Chọn Datacenter ---</option>').prop('disabled', true);
                    }
                    if ($host.is('select')) {
                        $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
                    }

                    if (vcenterId) {
                        if ($datacenter.is('select')) $datacenter.prop('disabled', false);
                    }
                });

                if ($vcenter.val()) {
                    if ($datacenter.is('select')) $datacenter.prop('disabled', false);
                }
            });
        </script>
@endpush