{{--
Example : Put it in Slot
      <div class="option">
            <input
                type="radio"
                class="radio"
                id="employee_id{{$employee->id}}"
                name="employee"
                value="{{$employee->id}}"
                wire:model.defer="employee_id"
            />
            <label class="block w-full " for="employee_id{{$employee->id}}">{{$employee->name}}</label>
        </div>
--}}

<div class="container" x-data={show:false} wire:ignore>
    <div class="select-box" @click="show = true"  :aria-expanded="show ? 'true' : 'false'"  @click.away="show = false">
        <div class="options-container " :class="{ 'active': show }">
            {{$slot}}
            <x-jet-input-error for="{{$model}}"></x-jet-input-error>
        </div>

        <div class="selected"  >{{__('messages.select')}} {{$model_title??'option'}}</div>
        <div class="search-box" >
            <input @click="show = true"  type="text" placeholder="Start Typing..." />
        </div>
    </div>
</div>
<style>
    h4 {
        margin: 5px auto;
        font-weight: 400;
    }
    .select-box {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .select-box .options-container {
        color: #000;
        max-height: 0;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        order: 1;
    }

    .selected {
        border-radius: .30em;
        margin-bottom: 8px;
        color: #000;
        position: relative;
        border: 1px solid #ccc;
        order: 0;
        background: #fff;
        z-index: 100;
    }

    .selected::after {
        content: '\25BC';
        position: absolute;
        top: .5em;
    {{__('messages.right')}}: 0;
        padding: 0 1em;
        background: transparent;
        cursor: pointer;
        pointer-events: none;
        -webkit-transition: .25s all ease;
        -o-transition: .25s all ease;
        transition: .25s all ease;
    }
    .selected:hover::after {
        color: blue;
    }

    .select-box .options-container.active {
        max-height: 240px;
        opacity: 1;
        overflow-y: scroll;
        border: 1px solid #ccc;
        position: absolute;
        background: #fff;
        top: 85px;
        z-index: 100;
    }

    .select-box .options-container.active + .selected::after {
        transform: rotateX(180deg);
    }

    .select-box .options-container::-webkit-scrollbar {
        width: 8px;
        border-radius: 8px;
    }

    .select-box .options-container::-webkit-scrollbar-thumb {
        background: #525861;
        border-radius: 8px;
    }

    .select-box .option,
    .selected {
        padding: .5rem 1rem 0.5rem;
        height: 2.7rem;
        cursor: pointer;
    }
    .option {
        border-bottom: .7px solid #b8b6b6;
    }

    .select-box .option:hover {
        background: rgb(5, 194, 228);
        color: #fff;
    }

    .select-box label {
        cursor: pointer;
    }

    .select-box .option .radio {
        display: none;
    }

    /* Searchbox */
    .search-box {
        position: absolute;
        width: 100%;
        top: 45px;
    }

    .search-box input {
        width: 100%;
        padding: 7px 16px;
        font-size: 16px;
        position: absolute;
        border-radius: 8px 8px 0 0;
        z-index: 100;
        border: 2px solid #ccc;
        opacity: 0;
        pointer-events: none;
        transition: all 0.4s;
    }

    .search-box input:focus {
        outline: none;
    }

    .select-box .options-container.active ~ .search-box input {
        opacity: 1;
        pointer-events: auto;
    }

</style>
<script>
    const selected = document.querySelector(".selected");
    const optionsContainer = document.querySelector(".options-container");
    const searchBox = document.querySelector(".search-box input");
    const optionsList = document.querySelectorAll(".option");
    const body = document.getElementsByTagName("html")[0];
    const container = document.getElementsByClassName("container")[0];
    // When the user clicks anywhere outside of the modal, close it
    selected.addEventListener("click", () => {
        optionsContainer.classList.toggle("active");
        searchBox.value = "";
        filterList("");
        if (optionsContainer.classList.contains("active")) {
            searchBox.focus();
        }
    });


    optionsList.forEach(o => {
        o.addEventListener("click", () => {
            selected.innerHTML = o.querySelector("label").innerHTML;
            optionsContainer.classList.remove("active");
        });
    });

    searchBox.addEventListener("keyup", function(e) {
        filterList(e.target.value);
    });

    const filterList = searchTerm => {
        searchTerm = searchTerm.toLowerCase();
        optionsList.forEach(option => {
            let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
            if (label.indexOf(searchTerm) != -1) {
                option.style.display = "block";
            } else {
                option.style.display = "none";
            }
        });
    };
</script>




{{-- <x-select-box-search>
        @foreach(\App\Models\Offer::where("activate" , 1)->where("end_date" ,">=" ,now() )->pluck("name" ,"id") as $s_id => $s_offer)
            <div class="option">
                <input
                    type="radio"
                    class="radio"
                    id="offer{{$s_id}}"
                    name="name"
                    value="{{$s_id}}"
                    wire:model.model="selected_offer_id"
                />
                <label class="block w-full "
                        for="offer{{$s_id}}">{{$s_offer}}</label>
            </div>
        @endforeach
        <x-slot name="model_title">{{__('messages.Offer')}}</x-slot>
        <x-slot name="model">selected_offer_id</x-slot>
    </x-select-box-search>
    selected {{$selected_offer_id}}
    <x-jet-input-error for="selected_offer_id" class="mt-2 {{__('messages.text-left')}}" /> --}}