<div class="dropdown dropdown-select">
    <button class="form-control form-select dropdown-toggle cat-selected" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fal fa-loader me-1"></i> <span class="sl-txt"> {{__('deals.deal_status_id')}} <span style="color:red">*</span></span>
        @if(isset($deal))
            <span class="cat-txt me-1">{{$deal->dealStatus->currentDescription->title}}</span>
        @endif
    </button>
    <ul class="dropdown-menu cat-selects">
        @foreach($deal_statuses as $row)
            <li>
                <div class="form-check">
                    <input class="form-check-input" type="radio" {{ ($deal->deal_status_id ?? '' ) == $row->id ? 'checked' : '' }} name="deal_status_id" value="{{$row->id}}" id="stat{{$row->id}}">
                    <label class="form-check-label" for="stat{{$row->id}}">
                        {{$row->title}}
                    </label>
                </div>
            </li>
        @endforeach
        <li> <span class="don-btn"> done </span> </li>
    </ul>
</div>


<script>
    const dropdowns = document.querySelectorAll('.dropdown-select');
    dropdowns.forEach(dropdown => {
        const checkboxes = dropdown.querySelectorAll('.cat-selects input[type="checkbox"], .cat-selects input[type="radio"]');
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const dropdownButton = dropdown.querySelector('.cat-selected');
                dropdownButton.querySelectorAll('.cat-txt:not(:first-child)').forEach(el => el.remove());

                checkboxes.forEach(cb => {
                    if (cb.checked) {
                        const label = cb.nextElementSibling.innerText;
                        const newText = document.createElement('span');
                        newText.classList.add('cat-txt', 'me-1');
                        newText.textContent = label;
                        dropdownButton.appendChild(newText);
                    }
                });
            });
        });
    });

    $(".don-btn").on("click", function(){
        $(this).parents(".dropdown-menu").removeClass("show")
    })
    // Select all elements with the 'prevent-close' class
    document.querySelectorAll('.dropdown-select .dropdown-menu').forEach(function(element) {
        element.addEventListener('click', function(event) {
            event.stopPropagation(); // Prevents the dropdown menu from closing
        });
    });
</script>
