@php
    $selectedVcenterId = old('vcenter_id') ??
        ($model?->host?->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');

            // Disable datacenter and host initially
            // Note: In edit view these might be inputs not selects, so this logic might need adjustment if intended for cascading selects.
            // For now, keeping logic but ensuring it doesn't break if elements aren't selects.
            if ($datacenter.is('select')) {
                $datacenter.prop('disabled', true);
            }
            if ($host.is('select')) {
                $host.prop('disabled', true);
            }

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

                // Reset and disable datacenter and host if they are selects
                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);
                }

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

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