@php
    $selectedVcenterId = old('vcenter_id') ??
        ($model?->ipaddress?->host?->datacenter?->vcenter_id ??
        ($model?->vcenter_id ??
        ($model?->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 id="vcenter_id" class="form-control select2 single__select" name="vcenter_id"
                data-selected="{{ $selectedVcenterId }}">
            <option value="">--- Chọn vCenter ---</option>
            @foreach ($vcenters as $vc)
                <option value="{{ $vc->id }}" @selected($selectedVcenterId == $vc->id)>{{ $vc->host }}</option>
            @endforeach
        </select>
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function () {
            // Initialize Select2 using global function
            if (typeof window.initSelect2 === 'function') {
                window.initSelect2();
            }
            const $vcenter = $('#vcenter_id');
            const $datacenter = $('#datacenter_id');
            const $host = $('#host_id');

            // Disable datacenter and host initially
            $datacenter.prop('disabled', true);
            $host.prop('disabled', true);

            // When vcenter changes
            $vcenter.on('change', function () {
                const vcenterId = $(this).val();

                // Reset and disable datacenter and host
                $datacenter.html('<option value="">--- Chọn Datacenter ---</option>').prop('disabled', true);
                $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);

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

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