@props(['label', 'itemShow', 'array_selected', 'functionRemove', 'array', 'functionAdd', 'search', 'withChildren', 'selectAll', 'array_selected_name', 'remove_label'])

@if($remove_label == "true")
<label class="px-2 block text-base md:text-lg mb-1 font-medium" >{{$label}}:</label>
@endif
<div class="rounded hover:cursor-pointer relative w-full px-2 min-h-[48px] border border-solid border-gray-300 text-gray-800 focus:border-blue-500" x-data="{open:false, active:false}"  x-bind:class="{'z-[60]' : active}"  @click.away="active = false">
    <div class="group flex min-h-[48px] flex-row flex-wrap w-full -mx-1 py-1 pr-6" @click.self="open = !open, active = !active" x-bind:class="{'active' : active}">
        <img src="{{ Vite::asset('resources/images/dashboard/icon-arrow-down.svg')}}" class="w-[11px] h-[6px] absolute right-3 top-1/2 z-2 -translate-y-1/2 group-[&.active]:rotate-180 transition-all">
        @if($array_selected && count($array_selected) > 0)
            @foreach ($array_selected as $id => $title)
                <div class="w-auto p-1">
                    <div class="relative pr-9 py-[6px] pl-3 bg-blue-50 hover:bg-blue-100 transition-all min-h-[32px] rounded-[32px] text-blue-500 text-sm">
                        {{$title}}
                        <a wire:click="{{$functionRemove}}({{$id}})" x-on:click="open = false, active = false" class="absolute right-3 top-1/2 -translate-y-1/2 z-10 inline-block cursor-pointer" ><img src="{{ Vite::asset('resources/images/dashboard/icon-close.svg')}}" class="w-[12px] h-[12px] "></a>
                    </div>
                </div>
            @endforeach
        @else 
            {{-- <span class="absolute left-2 top-2.5 z-10 text-gray-500">Select {{$label}}</span> --}}
            <div class="absolute left-2 top-2.5 z-10" @click="open = !open, active = !active">
                Select {{$label}}
            </div>
        @endif
    </div>
    <div 
        x-cloak
        x-show="open"
        x-transition:enter="transition ease-out duration-100 bg-white"
        x-transition:enter-start="transform -translate-y-6 opacity-0"
        x-transition:enter-end="transform translate-y-0 opacity-100"
        x-transition:leave="transition ease-in duration-100 bg-transparent"
        x-transition:leave-start="transform translate-y-0 opacity-100"
        x-transition:leave-end="transform -translate-y-6 opacity-0"
        @click.away="open = false"
        
        class="absolute top-[calc(100%_+_2px)] left-0 bg-white shadow-lg min-w-full w-full rounded-lg p-2 lg:p-3">

        <div class="w-full relative mb-4">
            <img src="{{ Vite::asset('resources/images/dashboard/icon-search.svg')}}" class="w-[20px] h-[20px] absolute left-3 top-1/2 -translate-y-1/2 z-10 inline-block">
            <input type="text" wire:model="{{$search}}" placeholder="Search" class="rounded w-full p-1 min-h-[40px] pl-[42px] border-solid border-gray-300 text-gray-800 placeholder-gray-500 ring-0 focus:ring-0 focus:border-blue-500">
        </div>
        <div class="w-full overflow-y-auto max-h-[250px] mb-1">
            <ul class="mb-0">
                @if($array)
                @foreach ($array as $item)  
                    {{-- <li class="pb-1">
                        <div class="form-check mb-2 relative pl-7" wire:click="{{$functionAdd}}({{$item}})">
                            <input  wire:model='{{$array_selected_name}}.{{$item->id}}' class="form-check-input absolute left-0 top-0 appearance-none h-5 w-5 border border-gray-500 bg-white checked:bg-blue-500 checked:border-blue-500 focus:outline-none transition duration-200 rounded-[5px] mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer !ring-transparent disabled:opacity-100" type="checkbox" value="" disabled>
                            <label class="form-check-label inline-block text-gray-500 px-3 text-base md:text-lg cursor-pointer hover:bg-blue-50 hover:text-blue-500 hover:font-bold rounded-md @if(array_key_exists($item->id, $array_selected))text-blue-500 bg-blue-50 font-bold @endif" >{{$item->$itemShow}}</label>
                        </div>

                    </li> --}}
                    @if($withChildren == "true")
                        <li class="pb-1">
                            {{-- <a wire:click="{{$functionAdd}}({{$item}})" class="text-base cursor-default	 text-gray-500 py-1.5 px-3 block bg-transparent font-bold transition-all duration-300 rounded-md cursor-pointer @if(array_key_exists($item->id, $array_selected))text-blue-500 bg-blue-50 font-bold @endif">{{$item->title}}</a> --}}

                            <div class="form-check mb-2 relative pl-7" wire:click="{{$functionAdd}}({{$item}})">
                                <input  wire:model='{{$array_selected_name}}.{{$item->id}}' class="form-check-input absolute left-0 top-0 appearance-none h-5 w-5 border border-gray-500 bg-white checked:bg-blue-500 checked:border-blue-500 focus:outline-none transition duration-200 rounded-[5px] mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer !ring-transparent disabled:opacity-100" type="checkbox" value="" disabled>
                                <label class="form-check-label inline-block text-gray-500 px-3 text-base md:text-lg cursor-pointer hover:bg-blue-50 hover:text-blue-500 hover:font-bold rounded-md @if(array_key_exists($item->id, $array_selected))text-blue-500 bg-blue-50 font-bold @endif" >{{$item->$itemShow}}</label>
                            </div>
                        </li>
                        @foreach ($item->children as $child)
                            <li class="pb-1 pl-5" wire:click="{{$functionAdd}}({{$child}})">
                                {{-- <a wire:click="{{$functionAdd}}({{$child}})" class="text-base text-gray-500 py-1.5 px-3 block bg-transparent font-normal transition-all duration-300 rounded-md hover:bg-blue-50 hover:text-blue-500 hover:font-bold cursor-pointer @if(array_key_exists($child->id, $array_selected))text-blue-500 bg-blue-50 font-bold @endif">{{$child->$itemShow}}</a> --}}

                                <div class="form-check mb-2 relative pl-7" >
                                    <input  wire:model='{{$array_selected_name}}.{{$child->id}}' class="form-check-input absolute left-0 top-0  appearance-none h-5 w-5 border border-gray-500 bg-white checked:bg-blue-500 checked:border-blue-500 focus:outline-none transition duration-200 rounded-[5px] mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer !ring-transparent disabled:opacity-100" type="checkbox" value="" disabled>
                                    <label class="form-check-label inline-block text-gray-500 px-3 text-base md:text-lg cursor-pointer hover:bg-blue-50 hover:text-blue-500 hover:font-bold rounded-md @if(array_key_exists($child->id, $array_selected))text-blue-500 bg-blue-50 font-bold @endif">{{$child->$itemShow}}</label>
                                </div>
                            </li>
                        @endforeach

                    @else   
                        {{-- <li class="pb-1 pl-5">
                            <a wire:click="{{$functionAdd}}({{$item}})" class="text-base text-gray-500 py-1.5 px-3 block bg-transparent font-normal transition-all duration-300 rounded-md hover:bg-blue-50 hover:text-blue-500 hover:font-bold cursor-pointer @if(array_key_exists($item->id, $array_selected))text-blue-500 bg-blue-50 font-bold @endif">{{$item->$itemShow}}</a>
                        </li> --}}

                        <li class="pb-1">
                            {{-- <a wire:click="{{$functionAdd}}({{$item}})" class="text-base cursor-default	 text-gray-500 py-1.5 px-3 block bg-transparent font-bold transition-all duration-300 rounded-md cursor-pointer @if(array_key_exists($item->id, $array_selected))text-blue-500 bg-blue-50 font-bold @endif">{{$item->title}}</a> --}}

                            <div class="form-check mb-2 relative pl-7" wire:click="{{$functionAdd}}({{$item}})">
                                <input  wire:model='{{$array_selected_name}}.{{$item->id}}' class="form-check-input absolute left-0 top-0 appearance-none h-5 w-5 border border-gray-500 bg-white checked:bg-blue-500 checked:border-blue-500 focus:outline-none transition duration-200 rounded-[5px] mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer !ring-transparent disabled:opacity-100" type="checkbox" value="" disabled>
                                <label class="form-check-label inline-block text-gray-500 px-3 text-base md:text-lg cursor-pointer hover:bg-blue-50 hover:text-blue-500 hover:font-bold rounded-md @if(array_key_exists($item->id, $array_selected))text-blue-500 bg-blue-50 font-bold @endif" for="{{$item->id}}">{{$item->$itemShow}}</label>
                            </div>
                        </li>
                    @endif
                @endforeach
                @endif
            </ul>
        </div>
    </div>
</div>

@error('array_selected') <small class="text-red-600"">{{ $message }}</small> @enderror