update

resources/views/administrator/pages/product/categories/datatable/action.blade.php

@@ -4,11 +4,13 @@
         data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $row->id }}" />
 </div>
 
-@include('administrator.pages.product.categories.datatable.modal', [
-    'deleteRoute' => 'products.group.destroy',
-    'itemLabel' => 'Product Group',
-    'itemId' => $row->id,
-    'itemName' => $row->name,
-    'modalId' => 'deleteModal-' . $row->id
-])
+@push('modals')
+    @include('administrator.pages.product.categories.datatable.modal', [
+        'deleteRoute' => 'products.group.destroy',
+        'itemLabel' => 'Product Group',
+        'itemId' => $row->id,
+        'itemName' => $row->name,
+        'modalId' => 'deleteModal-' . $row->id
+    ])
+@endpush
 

resources/views/administrator/pages/product/categories/datatable/modal.blade.php

@@ -1,6 +1,6 @@
 <!-- Delete Confirmation Modal -->
 <div class="modal fade" id="{{ $modalId ?? 'deleteModal' }}" tabindex="-1"
-    aria-labelledby="deleteModalLabel-{{ $modalId ?? 'deleteModal' }}" aria-hidden="true">
+    aria-labelledby="deleteModalLabel-{{ $modalId ?? 'deleteModal' }}" aria-hidden="true" data-bs-backdrop="true">
     <div class="modal-dialog modal-dialog-centered modal-sm">
         <div class="modal-content shadow-lg border-0">
             <div class="modal-header bg-danger text-white py-2">
@@ -9,8 +9,8 @@
                     Xác nhận xóa
                 </h6>
                 <button type="button" class="btn-close btn-close-white shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body py-4">
+            </div>
+            <div class="modal-body py-4">
                 <div class="text-center">
                     <div class="mb-3">
                         <i data-lucide="alert-triangle" class="text-warning" style="width: 54px; height: 54px;"></i>
@@ -21,11 +21,11 @@
                     <div class="px-3 py-2 bg-danger-subtle rounded-3">
                         <p class="text-danger small mb-0 fw-medium">Hành động này không thể hoàn tác!</p>
                     </div>
-                    </div>
-                    </div>
-                    <div class="modal-footer bg-light border-0 py-2 d-flex justify-content-center gap-2">
-                        <x-button-c-r-m type="button" variant="secondary" size="sm" icon="x" data-bs-dismiss="modal">Hủy bỏ</x-button-c-r-m>
-                        <form action="{{ route($deleteRoute, ['id' => $itemId ?? 0]) }}" method="POST" class="d-inline m-0">
+                </div>
+            </div>
+            <div class="modal-footer bg-light border-0 py-2 d-flex justify-content-center gap-2">
+                <x-button-c-r-m type="button" variant="secondary" size="sm" icon="x" data-bs-dismiss="modal">Hủy bỏ</x-button-c-r-m>
+                <form action="{{ route($deleteRoute, ['id' => $itemId ?? 0]) }}" method="POST" class="d-inline m-0">
                     @csrf
                     @method('DELETE')
                     <x-button-c-r-m type="submit" variant="danger" size="sm" icon="trash-2">Xác nhận xóa</x-button-c-r-m>

resources/views/administrator/pages/product/categories/index.blade.php

@@ -64,8 +64,55 @@ $tabs = [
 @push('custom-scripts')
     <script>
         document.addEventListener('DOMContentLoaded', function () {
-            // DataTable is already initialized in components/datatable
-            // If we need custom behavior here, we can add it.
+            // Re-initialize Lucide icons after DataTable draws
+            $('#productTable').on('draw.dt', function() {
+                setTimeout(function() {
+                    if (typeof lucide !== 'undefined') {
+                        lucide.createIcons();
+                    }
+                }, 100);
+            });
         });
     </script>
 @endpush
+
+@push('custom-styles')
+    <style>
+        /* Fix Bootstrap 5 modal z-index to be above DataTable and all other elements */
+        .modal-backdrop {
+            z-index: 9998 !important;
+        }
+        
+        .modal {
+            z-index: 9999 !important;
+        }
+        
+        /* Override datatable wrapper overflow to prevent clipping modals */
+        .data-table-wrapper {
+            overflow: visible !important;
+            overflow-x: auto !important;
+        }
+        
+        /* Reduce z-index of sticky elements to be below modal */
+        .data-table-wrapper .table thead th {
+            z-index: 3 !important;
+        }
+        
+        .table thead th:last-child,
+        .table tbody td:last-child {
+            z-index: 2 !important;
+        }
+        
+        .table thead th:first-child,
+        .table tbody td:first-child {
+            z-index: 2 !important;
+        }
+        
+        .table thead th:nth-child(2) {
+            z-index: 4 !important;
+        }
+    </style>
+@endpush
+
+{{-- Render all modals outside datatable wrapper --}}
+@stack('modals')