{{-- Multi-Select Component (Alpine.js powered) --}}
@props([
    'name'     => '',
    'label'    => '',
    'options'  => [],
    'selected' => [],
    'hint'     => '',
    'required' => false,
])

@php
    $trigger = 'flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-card px-3 py-2.5 text-left text-sm text-card-foreground shadow-sm transition-colors duration-200 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:border-primary-400';
    $trigger .= $errors->has($name) ? ' border-red-400' : '';
    $pill = 'inline-flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-950 dark:text-primary-300';
    $menu = 'absolute left-0 z-50 mt-2 max-h-56 w-full overflow-y-auto rounded-xl border border-border bg-card py-1 shadow-soft animate-fade-in dark:bg-card';
@endphp

<div
    class="space-y-1.5"
    x-data="{
        options: {{ Js::from($options) }},
        selected: {{ Js::from(old($name . '[]', $selected)) }},
        open: false,
        toggle(val) {
            const idx = this.selected.indexOf(val);
            if (idx === -1) { this.selected.push(val); }
            else            { this.selected.splice(idx, 1); }
        },
        isSelected(val) { return this.selected.includes(val); },
        getLabel(val)   { return this.options[val] ?? val; },
    }"
>
    @if($label)
        <label class="mb-1.5 block text-sm font-medium text-foreground">
            {{ $label }}
            @if($required)<span class="ml-0.5 text-red-500">*</span>@endif
        </label>
    @endif

    <template x-for="val in selected" :key="val">
        <input type="hidden" name="{{ $name }}[]" :value="val" />
    </template>

    <div class="relative">
        <button
            type="button"
            @click="open = !open"
            @click.outside="open = false"
            :class="open ? 'border-primary-500 ring-2 ring-primary-500/20' : ''"
            class="{{ $trigger }}"
        >
            <span class="flex min-w-0 flex-1 flex-wrap gap-1.5">
                <template x-if="selected.length === 0">
                    <span class="text-muted-foreground">Select options…</span>
                </template>
                <template x-for="val in selected" :key="val">
                    <span class="{{ $pill }}">
                        <span x-text="getLabel(val)"></span>
                        <button type="button" @click.stop="toggle(val)" class="hover:text-primary-900 dark:hover:text-primary-100">
                            <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </span>
                </template>
            </span>
            <svg class="h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform duration-200"
                 :class="open ? 'rotate-180' : ''"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </button>

        <div x-show="open" x-transition class="{{ $menu }}">
            <template x-for="(optLabel, val) in options" :key="val">
                <label class="flex cursor-pointer items-center gap-3 px-4 py-2.5 hover:bg-muted dark:hover:bg-muted/80">
                    <input
                        type="checkbox"
                        :checked="isSelected(val)"
                        @change="toggle(val)"
                        class="h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"
                    />
                    <span class="text-sm text-foreground" x-text="optLabel"></span>
                </label>
            </template>
        </div>
    </div>

    @if($hint && !$errors->has($name))
        <p class="mt-1.5 text-xs text-muted-foreground">{{ $hint }}</p>
    @endif

    <x-forms.error :name="$name" />
</div>