@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/select.css')}}"/>
    @endpush
@endonce

@props([
    'options',
    'selected' => null,
    'name',
    'id',
    'class',
    'label',
    'placeholder' => '',  //placeholder for when nothing is selected
    'clearable' => false,   //adds -- options that allows deselecting
    'searchable' => false
])


<div blade="{{ $viewName ?? 'unknown' }}" class="select-wrapper modal">
    <label for="{{ $id ?? $name}}" class="form-label">{{ $label }}</label>
    <select
        {{$attributes}}
        class="selectpicker toselect" {{ $attributes->merge(['class' => 'form-select select']) }}
        name="{{ $name }}"
        id="{{ $id ?? $name }}"
        title="{{$placeholder}}"
        data-live-search="{{$searchable}}"


    >
        @if($clearable == true)
            <option value="">
                --
            </option>
        @endif
@php
    $limit = 96;
    @endphp
            @foreach ($options as $option)
                @php
                    $display_name_full = $option['ui_name'] ?? $option['view_name'] ?? $option['name'] ?? $option['name_el'] ?? $option['name_en'] ?? $option;
                    $display_name = $display_name_full;

                    if (mb_strlen($display_name, 'UTF-8') > $limit) {
                        $display_name = mb_substr($display_name, 0, $limit, 'UTF-8') . '...';
                    }
                @endphp
                <option
                    value="{{ $option['id'] ?? $option }}"
                    data-full-name="{{ $display_name_full }}"
                    @if( ($option['id'] ?? $option )== $selected) selected @endif
                >
                    {{ $display_name }}
                </option>
            @endforeach
    </select>

</div>
{{--<script>--}}
{{--    document.addEventListener('click', function (e) {--}}
{{--        const target = e.target.closest('.filter-option');--}}
{{--        if (target) {--}}

{{--            const options = Array.from(selectEl.options);--}}

{{--            // Find dropdown container near the select--}}
{{--            const dropdownMenu = selectEl.parentElement.querySelector('.dropdown-menu .inner');--}}

{{--            if (!dropdownMenu) return;--}}

{{--            const anchors = dropdownMenu.querySelectorAll('li a.dropdown-item');--}}

{{--            anchors.forEach(function (anchorEl, index) {--}}
{{--                const fullName = options[index]?.getAttribute('data-full-name') || '';--}}
{{--                const visibleText = options[index]?.textContent.trim() || '';--}}

{{--                if (fullName && fullName.trim() !== visibleText) {--}}
{{--                    anchorEl.setAttribute('title', fullName.trim());--}}
{{--                } else {--}}
{{--                    anchorEl.removeAttribute('title');--}}
{{--                }--}}
{{--            });--}}
{{--        }--}}
{{--    });--}}
{{--   </script>--}}
<script>
    document.addEventListener('click', function (e) {
        // Match if the clicked element or any of its parents has class 'filter-option'
        const filterOption = e.target.classList.contains('filter-option')
            ? e.target
            : e.target.closest('.filter-option');

        if (filterOption) {

            // Use querySelector to get the first .bootstrap-select on the page
            const wrapper = document.querySelector('.bootstrap-select');

            if (!wrapper) return;
            const selectEl = wrapper.querySelector('select.toselect');
            if (!selectEl) return;

            const options = Array.from(selectEl.options);
            const dropdownMenu = wrapper.querySelector('.dropdown-menu .inner');
            if (!dropdownMenu) return;

            const anchors = dropdownMenu.querySelectorAll('li a.dropdown-item');
            anchors.forEach(function (anchorEl, index) {
                const fullName = options[index]?.getAttribute('data-full-name') || '';
                    anchorEl.setAttribute('title', fullName);
            });
        }
    });
</script>