@push('js')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<style>
    /* Ensure visibility in both light and dark themes */
    .ts-wrapper .ts-control {
        background-color: #ffffff !important;
        color: #1d273b !important;
        border: 1px solid #ced4da !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 4px !important;
    }
    .ts-dropdown {
        background-color: #ffffff !important;
        color: #1d273b !important;
    }
    .ts-dropdown-content {
        max-height: 300px !important;
        overflow-y: auto !important;
    }
    .ts-dropdown .active {
        background-color: #f1f5f9 !important;
    }
    .ts-dropdown .option {
        padding: 8px 12px !important;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
<script>
    (function() {
        const initTomSelect = () => {
            document.querySelectorAll('select').forEach((el) => {
                if (el.tomselect) return;
                
                // Skip if it's hidden or specifically excluded
                if (el.offsetWidth === 0 && el.offsetHeight === 0) return;

                new TomSelect(el, {
                    copyClassesToDropdown: false,
                    dropdownParent: 'body',
                    controlInput: '<input>',
                    maxOptions: null,
                    sortField: [{
                        field: 'text',
                        direction: 'asc',
                        func: function(a, b) {
                            return a.text.localeCompare(b.text, undefined, {numeric: true, sensitivity: 'base'});
                        }
                    }]
                });
            });
        };

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initTomSelect);
        } else {
            initTomSelect();
        }
    })();
</script>
@endpush
