@props(['label', 'selected_item', 'selected_item_id', 'array', 'functionAdd', 'search', 'itemShow'])

<label class="px-2 block text-base md:text-lg mb-1 font-medium">{{$label}}</label>
<div 
    class="rounded 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-[46px] flex-row flex-wrap w-full -mx-1 py-0.5 pr-6"  x-on:click="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($selected_item)
           
            <div class="w-auto p-1">
                <div class="relative pr-3 py-[6px] pl-3 bg-blue-50 hover:bg-blue-100 transition-all min-h-[32px] rounded-[32px] text-blue-500 text-sm">
                   
                   
                    @if($itemShow)

                        {{$selected_item->$itemShow}}

                    @else
                        {{$selected_item->title}}
                    @endif

                </div>
            </div>
            
        @endif
    </div>
    <div 
        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)
                        <div class="form-check mb-2 relative pl-2" wire:click="{{$functionAdd}}({{$item}})">
                        
                            <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($selected_item_id && ($item->id == $selected_item_id))text-blue-500 bg-blue-50 font-bold @endif">
                                
                              
                                @if($itemShow)
                                    {{$item->$itemShow}}

                                @else
                      
                                    {{$item->title}}
                                @endif
                               
                            
                            </label>
                        </div>
                    @endforeach
                @endif
            </ul>
        </div>
    </div>
</div>

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