update

resources/views/components/module/v-center.blade.php

@@ -21,44 +21,57 @@
     </div>
 </div>
 
-@push('scripts')
+@push('custom-scripts')
     <script>
-        $(document).ready(function() {
+            $(document).ready(function () {
             // Prevent multiple initializations using namespace
             if (window.vcenterComponentInitialized) {
                 return;
             }
             window.vcenterComponentInitialized = true;
 
-            initSelect2();
+            $('.select2').select2({
+                width: '100%'
+            });
+
             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);
+            // 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() {
+            $vcenter.off('change.vcenterComponent').on('change.vcenterComponent', 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);
+                // 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) {
-                    $datacenter.prop('disabled', false);
+                    if ($datacenter.is('select')) $datacenter.prop('disabled', false);
                 }
             });
 
             // Trigger initial state
             if ($vcenter.val()) {
-                $datacenter.prop('disabled', false);
+                if ($datacenter.is('select')) $datacenter.prop('disabled', false);
             }
         });
-    </script>
+                </script>
 @endpush