fix: align tomselect configuration with tablar native implementation

resources/views/components/tomselect.blade.php

@@ -1,32 +1,19 @@
 <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
-<style>
-    .ts-control { background-color: #ffffff !important; border: 1px solid #ced4da !important; min-height: 38px !important; }
-</style>
 <script>
-    (function() {
+    document.addEventListener("DOMContentLoaded", function () {
-        const init = () => {
+        document.querySelectorAll('select').forEach((el) => {
-            console.log('TomSelect Initializing...');
+            if (el.tomselect) return;
-            const selects = document.querySelectorAll('select');
+
-            console.log('Select count:', selects.length);
+            new TomSelect(el, {
-            selects.forEach((el) => {
+                copyClassesToDropdown: false,
-                if (el.tomselect) return;
+                dropdownParent: 'body',
-                try {
+                controlInput: '<input>',
-                    new TomSelect(el, {
+                sortField: {
-                        create: false,
+                    field: 'text',
-                        sortField: { field: 'text', direction: 'asc' }
+                    direction: 'asc'
-                    });
-                    console.log('Initialized TomSelect on', el);
-                } catch(e) {
-                    console.error('TomSelect init error', e);
                 }
             });
-        };
+        });
-        
+    });
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', init);
-        } else {
-            init();
-        }
-    })();
 </script>