{{--
    Select2 enhancement for every <select> rendered by the portal layout.
    Opt out with data-native on the <select>. The bridge below keeps page scripts
    written with plain DOM APIs (addEventListener('change'), select.value = ...,
    option.hidden, select.hidden, select.disabled) working unchanged.
--}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .select2-container { max-width: 100%; font: inherit; }
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple {
        min-height: var(--s2-height, 42px);
        border: 1px solid var(--line, #d8e1d9);
        border-radius: 2px;
        background: var(--surface, #fff);
        font-size: var(--s2-font-size, 13px);
    }
    .select2-container .select2-selection--single { display: flex; align-items: center; height: var(--s2-height, 42px); }
    .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 11px; padding-right: 30px; color: var(--ink, #182b25); line-height: 1.3; }
    .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted, #64756d); }
    .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; height: 26px; transform: translateY(-50%); }
    .select2-container--default .select2-selection--single .select2-selection__clear { height: auto; margin-right: 22px; color: var(--muted, #64756d); font-size: 16px; }
    .select2-container--default.select2-container--focus .select2-selection,
    .select2-container--default.select2-container--open .select2-selection { border-color: var(--focus, #246d59); outline: 3px solid rgb(36 109 89 / 12%); }
    .select2-container--default.select2-container--disabled .select2-selection { background: #f3f5f2; cursor: not-allowed; }
    .select2-dropdown { border-color: var(--focus, #246d59); border-radius: 2px; font-size: 13px; box-shadow: 0 10px 24px rgb(24 43 37 / 12%); }
    .select2-search--dropdown .select2-search__field { min-height: 34px; padding: 4px 8px; border: 1px solid var(--line, #d8e1d9); border-radius: 2px; font: inherit; }
    .select2-search--dropdown .select2-search__field:focus { border-color: var(--focus, #246d59); outline: none; }
    .select2-container--default .select2-results > .select2-results__options { max-height: 280px; }
    .select2-container--default .select2-results__option { padding: 7px 11px; }
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--forest, #143e34); color: #fff; }
    .select2-container--default .select2-results__option--selected { background: #f1f6ed; }
    .select2-container--default .select2-results__group { padding: 7px 11px 4px; color: var(--muted, #64756d); font-size: 11px; text-transform: uppercase; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice { border-color: #b9cfbd; border-radius: 2px; background: #f1f6ed; }
    .select2-container[hidden] { display: none !important; }
    .select2-results__option .s2-help { font-size: 11px; opacity: .72; line-height: 1.25; }
    @media print { .select2-dropdown { display: none !important; } }
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@if(str_starts_with(app()->getLocale(), 'es'))
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/es.js"></script>
@endif
<script>
    (($) => {
        if (!$ || !$.fn.select2) {
            return;
        }

        const language = @json(str_starts_with(app()->getLocale(), 'es') ? 'es' : 'en');
        const nativeValue = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value');
        const nativeSelectedIndex = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'selectedIndex');
        const defaultMatcher = $.fn.select2.defaults.defaults.matcher;

        const fold = (text) => String(text || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();

        // Options hidden by page scripts (e.g. lots filtered by item) stay out of the list;
        // options with data-help are also found by their help text.
        function matcher(params, data) {
            if (data.element && data.element.hidden) {
                return null;
            }

            const term = fold(params.term).trim();

            if (term === '') {
                return data;
            }

            if (data.children && data.children.length) {
                if (fold(data.text).includes(term)) {
                    return data;
                }

                const children = data.children.map((child) => matcher(params, child)).filter(Boolean);

                return children.length ? $.extend({}, data, { children }) : null;
            }

            if (defaultMatcher(params, data)) {
                return data;
            }

            const help = data.element && data.element.dataset ? data.element.dataset.help : '';

            return help && fold(help).includes(term) ? data : null;
        }

        function templateResult(data) {
            const help = data.element && data.element.dataset ? data.element.dataset.help : '';

            if (!help) {
                return data.text;
            }

            return $('<div>').append($('<div>').text(data.text), $('<div class="s2-help">').text(help));
        }

        function refresh(select) {
            $(select).trigger('change.select2');
        }

        function syncVisibility(select) {
            const instance = $(select).data('select2');

            if (instance) {
                instance.$container[0].hidden = select.hidden || select.style.display === 'none';
            }
        }

        function enhance(select) {
            if (select.dataset.native !== undefined || select.dataset.select2Ready || select.closest('template')) {
                return;
            }

            select.dataset.select2Ready = 'true';

            const style = getComputedStyle(select);
            const height = select.offsetHeight || parseFloat(style.minHeight) || parseFloat(style.height) || 38;
            const placeholderOption = select.options[0] && select.options[0].value === '' ? select.options[0] : null;

            $(select).select2({
                width: '100%',
                language,
                matcher,
                templateResult,
                minimumResultsForSearch: 8,
                placeholder: placeholderOption ? { id: '', text: placeholderOption.text } : undefined,
                allowClear: !!placeholderOption && !select.required && !select.multiple,
                dropdownParent: $(select.closest('dialog, .modal') || document.body),
            });

            const container = $(select).data('select2').$container[0];
            container.style.setProperty('--s2-height', Math.max(height, 30) + 'px');
            container.style.setProperty('--s2-font-size', style.fontSize);
            select.addEventListener('focus', () => container.querySelector('.select2-selection').focus());

            // Programmatic changes made with the DOM API update the Select2 display too.
            Object.defineProperty(select, 'value', {
                configurable: true,
                get() { return nativeValue.get.call(this); },
                set(value) { nativeValue.set.call(this, value); refresh(this); },
            });
            Object.defineProperty(select, 'selectedIndex', {
                configurable: true,
                get() { return nativeSelectedIndex.get.call(this); },
                set(value) { nativeSelectedIndex.set.call(this, value); refresh(this); },
            });

            // Select2 fires jQuery-only events; re-dispatch them as native events for page scripts.
            $(select).on('change.portalBridge', (event) => {
                if (!event.originalEvent) {
                    select.dispatchEvent(new Event('input', { bubbles: true }));
                    select.dispatchEvent(new Event('change', { bubbles: true }));
                }
            });

            new MutationObserver(() => syncVisibility(select))
                .observe(select, { attributes: true, attributeFilter: ['hidden', 'style'] });
            syncVisibility(select);
        }

        function enhanceWithin(root) {
            if (root.matches && root.matches('select')) {
                enhance(root);
            }

            root.querySelectorAll && root.querySelectorAll('select').forEach(enhance);
        }

        enhanceWithin(document);

        new MutationObserver((mutations) => {
            mutations.forEach((mutation) => mutation.addedNodes.forEach((node) => {
                if (node.nodeType === Node.ELEMENT_NODE && !node.classList.contains('select2-container')) {
                    enhanceWithin(node);
                }
            }));
        }).observe(document.body, { childList: true, subtree: true });

        document.addEventListener('reset', (event) => {
            setTimeout(() => event.target.querySelectorAll('select').forEach(refresh));
        });

        $(document).on('select2:open', () => {
            const search = document.querySelector('.select2-container--open .select2-search__field');

            if (search) {
                search.focus();
            }
        });
    })(window.jQuery);
</script>