fix: use IIFE to prevent tomselect double initialization

resources/views/components/tomselect.blade.php

@@ -1,27 +1,24 @@
 <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>
-    /* Aggressive visibility for debug */
+    .ts-control { background-color: #ffffff !important; border: 1px solid #ced4da !important; }
-    .ts-control, .ts-wrapper .ts-control {
-        background-color: #ffffff !important;
-        border: 2px solid red !important;
-        min-height: 50px !important;
-        opacity: 1 !important;
-    }
-    .ts-dropdown {
-        display: block !important;
-        z-index: 10000 !important;
-        background-color: white !important;
-        border: 1px solid black !important;
-    }
 </style>
 <script>
-    window.addEventListener('load', function() {
+    (function() {
-        document.querySelectorAll('select').forEach(function(el) {
+        const init = () => {
-            new TomSelect(el, {
+            document.querySelectorAll('select').forEach((el) => {
-                create: false,
+                if (el.tomselect) return;
-                sortField: { field: 'text', direction: 'asc' }
+                new TomSelect(el, {
+                    create: false,
+                    sortField: { field: 'text', direction: 'asc' }
+                });
             });
-        });
+        };
-    });
+        // Use a single listener to prevent multiple triggers
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', init);
+        } else {
+            init();
+        }
+    })();
 </script>