@php
    $selectedVcenterId = old('vcenter_id') ??
        ($model instanceof \App\Models\vCenter ? $model->id : (
            $model?->host?->datacenter?->vcenter_id ??
            ($model?->datacenter?->vcenter_id ??
                ($model?->ipaddress?->host?->datacenter?->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 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;

                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);
                    $vcenter.trigger('change.vcenterComponent');
                }
            });
        </script>
@endpush