update

2026-02-03 16:10:49 +07:00
parent 6178a76eee
commit 0dbd9bfebe
12 changed files with 446 additions and 206 deletions
@@ -1,19 +1,102 @@
 <div class="row form-group align-items-center mb-0">
    <label for="network_id" class="col-md-3 text-right">Network</label>
    <div class="col-md-9 p-1 bg-customer">
-        <select class="custom-select" id="network_id" data-ajax="{{ route('api.getIPAddress') }}" name="module_network_id">
+        <select class="custom-select select2 network_id" id="network_id" data-route="{{ route('api.getNetwork') }}"
+            name="module_network_id" style="width: 100%;">
            <option value="0">---------</option>
            @if($networks)
                @foreach($networks->all() as $item)
-                    <option 
-                    @selected($model && (
-                        (isset($model?->ipaddress?->module_network_id) && $item->id == $model?->ipaddress?->module_network_id) || 
-                        isset($model?->module_network_id) && $item->id == $model?->module_network_id
-                    ))
-                    value="{{$item->id}}">{{$item->name}}</option>
+                    <option @selected($model && ((isset($model?->ipaddress?->module_network_id) && $item->id == $model?->ipaddress?->module_network_id) || isset($model?->module_network_id) && $item->id == $model?->module_network_id)) value="{{$item->id}}">{{$item->name}}</option>
                @endforeach
            @endif
        </select>
-
    </div>
-</div>
+</div>
+@push('custom-scripts')
+    <script>
+        $(document).ready(function () {
+            // Namespace check logic kept
+            if (window.networkComponentInitialized) {
+                return;
+            }
+            window.networkComponentInitialized = true;
+
+            const $host = $('.host_id');
+            const $network = $('.network_id');
+            // Use data-route to avoid conflict with Select2 auto-ajax feature
+            const networkAjaxUrl = $network.data('route');
+
+            function loadNetworks(hostId, preselect = null) {
+                console.log('Loading networks for host:', hostId);
+
+                if (!hostId) {
+                    $network.html('<option value="0">---------</option>').prop('disabled', true);
+                    $network.trigger('change');
+                    return;
+                }
+
+                $network.html('<option value="">Loading...</option>').prop('disabled', true);
+                $network.trigger('change');
+
+                $.ajax({
+                    url: networkAjaxUrl,
+                    type: 'GET',
+                    data: {
+                        host: hostId
+                    },
+                    success: function (response) {
+                        console.log('Network API Response Received:', response);
+
+                        // Strict check
+                        if (response.error === false && Array.isArray(response.data) && response.data.length > 0) {
+                            let options = '<option value="0">---------</option>';
+                            response.data.forEach(net => {
+                                const selected = (preselect == net.id) ? 'selected' : '';
+                                options += `<option value="${net.id}" ${selected}>${net.name}</option>`;
+                            });
+
+                            $network.html(options);
+                            $network.prop('disabled', false);
+                            $network.trigger('change');
+
+                            if (preselect) {
+                                setTimeout(() => {
+                                    $network.val(preselect).trigger('change');
+                                }, 100);
+                            }
+                        } else {
+                            console.warn('Handling empty/error response');
+                            $network.html('<option value="0">Not Found Network</option>').prop('disabled', true);
+                            $network.trigger('change');
+                        }
+                    },
+                    error: function (xhr, status, error) {
+                        console.error('AJAX Error:', error);
+                        $network.html('<option value="0">Error loading Network</option>').prop('disabled', true);
+                        $network.trigger('change');
+                    }
+                });
+            }
+
+            // Listen for changes on Host select
+            $host.off('change.networkComponent').on('change.networkComponent', function () {
+                const hostId = $(this).val();
+                loadNetworks(hostId);
+            });
+
+            // Initial state setup
+            if (!$host.val()) {
+                $network.prop('disabled', true);
+            } else {
+                // If host exists but network empty (client side nav or invalid state), load it
+                // If network already populated by server (Edit mode), don't reload
+                if ($network.find('option').length <= 1 || $network.val() == 0) {
+                    loadNetworks($host.val());
+                } else {
+                    // Just ensure it's enabled if we have values
+                    $network.prop('disabled', false);
+                }
+            }
+        });
+    </script>
+@endpush