@props([
    'name' => '',
    'label' => '',
    'options' => [],
    'selected' => [],
    'placeholder' => 'Select options...',
])

<div x-data="multiSelect({
    name: '{{ $name }}',
    options: @js($options),
    selected: @js($selected)
})" class="relative">
    <label class="block text-sm font-medium mb-1">{{ $label }}</label>
    
    <div class="relative">
        <div 
            @click="open = !open"
            class="w-full border rounded p-2 cursor-pointer bg-white min-h-[42px] flex flex-wrap gap-1 items-center"
            :class="{'ring-2 ring-blue-500': open}"
        >
            <template x-if="selected.length === 0">
                <span class="text-gray-400">{{ $placeholder }}</span>
            </template>
            <template x-for="item in selected" :key="item.id">
                <span class="inline-flex items-center gap-1 bg-blue-100 text-blue-800 text-sm px-2 py-0.5 rounded">
                    <span x-text="item.name"></span>
                    <button 
                        type="button"
                        @click.stop="toggle(item)"
                        class="text-blue-600 hover:text-blue-800 font-bold"
                    >
                        &times;
                    </button>
                </span>
            </template>
        </div>
        
        <div 
            x-show="open"
            @click.away="open = false"
            class="absolute z-50 w-full mt-1 bg-white border rounded shadow-lg max-h-60 overflow-auto"
            style="display: none;"
        >
            <div class="p-2 border-b sticky top-0 bg-white">
                <input 
                    type="text" 
                    x-model="search" 
                    placeholder="Search..."
                    class="w-full border rounded p-1 text-sm"
                    @click.stop
                >
            </div>
            <div class="p-1">
                <button 
                    type="button"
                    @click="selectAll()"
                    class="w-full text-left px-3 py-1.5 text-sm text-blue-600 hover:bg-blue-50 rounded"
                >
                    Select All
                </button>
                <button 
                    type="button"
                    @click="clearAll()"
                    class="w-full text-left px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50 rounded"
                >
                    Clear All
                </button>
            </div>
            <template x-for="option in filteredOptions" :key="option.id">
                <div 
                    @click="toggle(option)"
                    class="px-3 py-2 cursor-pointer hover:bg-gray-100 flex items-center gap-2"
                    :class="{'bg-blue-50': isSelected(option)}"
                >
                    <input 
                        type="checkbox" 
                        :checked="isSelected(option)"
                        class="rounded border-gray-300"
                        @click.stop
                        readonly
                    >
                    <span x-text="option.name"></span>
                </div>
            </template>
            <template x-if="filteredOptions.length === 0">
                <div class="px-3 py-2 text-gray-500 text-sm">No options found</div>
            </template>
        </div>
    </div>
    
    <input type="hidden" :name="name" :value="selectedIds">
</div>

@push('scripts')
<script>
function multiSelect(config) {
    return {
        open: false,
        search: '',
        options: config.options || [],
        selected: config.selected || [],
        
        get filteredOptions() {
            if (!this.search) return this.options;
            const search = this.search.toLowerCase();
            return this.options.filter(opt => 
                opt.name.toLowerCase().includes(search)
            );
        },
        
        get selectedIds() {
            return this.selected.map(item => item.id).join(',');
        },
        
        isSelected(option) {
            return this.selected.some(item => item.id == option.id);
        },
        
        toggle(option) {
            const index = this.selected.findIndex(item => item.id == option.id);
            if (index > -1) {
                this.selected.splice(index, 1);
            } else {
                this.selected.push(option);
            }
        },
        
        selectAll() {
            this.selected = [...this.filteredOptions];
        },
        
        clearAll() {
            this.selected = [];
        }
    };
}
</script>
@endpush