{{--
    Parts.MultiSelectCategory | 商品分類 複数選択（チェックボックス式ドロップダウン）。level=1 大分類 / level=2 中分類
    - hidden input name={{ $name }} に選択IDをカンマ連結で保持（POST契約）
    - 選択状態/検索/開閉は Alpine（クライアントのみ・スナッピー）
    - 候補リストは Livewire の $data（大分類 → 中分類のカスケードでサーバ再ロード）
    - 親の変更・リセット時は Livewire から parts-multi-category-cleared（name 付き）を発火し、自分宛てのときだけ選択をクリア
    - 選択が変わったときだけ、パネルを閉じた時点で（外側クリック・トグルボタンのどちらでも）子の分類と商品入力へ通知する
--}}
<div
    class="relative w-full"
    x-data="{
        open: false,
        search: '',
        selected: ('{{ $value }}' ? '{{ $value }}'.split(',').filter(Boolean) : []),
        initial: [],
        get count() { return this.selected.length },
        matches(name) {
            return this.search === ''
                || (name || '').toLowerCase().indexOf(this.search.toLowerCase()) !== -1;
        },
        isSelected(id) { return this.selected.indexOf(String(id)) !== -1 },
        toggle(id) {
            id = String(id);
            const i = this.selected.indexOf(id);
            if (i === -1) this.selected.push(id); else this.selected.splice(i, 1);
        },
        visibleIds() {
            return Array.from(this.$root.querySelectorAll('[data-cat-id]'))
                .filter(el => this.matches(el.dataset.catName))
                .map(el => el.dataset.catId);
        },
        selectAllVisible() {
            this.visibleIds().forEach(id => { if (!this.isSelected(id)) this.selected.push(id) });
        },
        clearVisible() {
            const v = this.visibleIds();
            this.selected = this.selected.filter(id => v.indexOf(id) === -1);
        },
        openPanel() {
            // 開いた時点の選択を覚えておき、閉じたときに変わったかを判定する
            this.initial = this.selected.slice();
            this.open = true;
        },
        close() {
            if (!this.open) return;
            this.open = false;
            if (this.changed()) this.notify();
        },
        changed() {
            const key = ids => ids.slice().sort().join(',');
            return key(this.selected) !== key(this.initial);
        },
        notify() {
            if (!window.Livewire) return;
            // 子の分類（parts.multi-select-category）へ: 選択IDのカンマ連結（0件は null）
            Livewire.dispatch('parts.multi-select-category.parent.{{ $level }}', {
                value: this.selected.length ? this.selected.join(',') : null
            });
            // 商品入力（parts.input-product-by-category）の絞り込みを単一選択時と同等に保つ。
            // 商品入力は受け取った値を intval するため、カンマ連結は渡さない（単一選択時のみID、0件/複数は null）
            Livewire.dispatch('parts.select-category.parent.{{ $level }}', {
                value: this.selected.length === 1 ? this.selected[0] : null
            });
        }
    }"
    @parts-multi-category-cleared.window="if ($event.detail && $event.detail.name === '{{ $name }}') { selected = []; search = '' }"
>
    {{-- POST用の選択値（カンマ連結） --}}
    <input type="hidden" name="{{ $name }}" :value="selected.join(',')"
        @isset($id) id="{{ $id }}" @endisset />

    {{-- トグルボタン（selectの体裁に寄せる） --}}
    <button type="button" @click="open ? close() : openPanel()"
        class="input-select border w-full flex items-center justify-between text-left cursor-pointer">
        <span x-text="count > 0 ? (count + '件選択中') : '{{ $label }}を選択'"
            :class="count > 0 ? '' : 'text-gray-400'"></span>
        <svg class="w-4 h-4 ml-1 shrink-0 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
        </svg>
    </button>

    {{-- ドロップダウンパネル --}}
    <div x-show="open" x-cloak @click.outside="close()"
        class="absolute z-50 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg">

        {{-- インクリメンタル検索 --}}
        <div class="p-2 border-b border-gray-200">
            <input type="text" x-model="search" placeholder="{{ $label }}名で絞り込み"
                class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                @keydown.enter.prevent @keydown.stop />
        </div>

        {{-- 全選択 / 全解除 --}}
        <div class="flex gap-4 px-3 py-1 border-b border-gray-200 text-sm">
            <button type="button" class="text-blue-600 hover:underline" @click="selectAllVisible()">全選択</button>
            <button type="button" class="text-blue-600 hover:underline" @click="clearVisible()">全解除</button>
        </div>

        {{-- 候補リスト --}}
        <div class="max-h-60 overflow-y-auto py-1">
            @forelse($data as $item)
                <label
                    data-cat-id="{{ $item->id }}"
                    data-cat-name="{{ $item->name }}"
                    x-show="matches($el.dataset.catName)"
                    class="flex items-center gap-2 px-3 py-1 hover:bg-gray-100 cursor-pointer text-sm"
                    :class="isSelected('{{ $item->id }}') ? 'bg-blue-50' : ''">
                    <input type="checkbox" class="cursor-pointer"
                        :checked="isSelected('{{ $item->id }}')"
                        @change="toggle('{{ $item->id }}')" />
                    <span>{{ $item->name }}</span>
                </label>
            @empty
                <div class="px-3 py-2 text-sm text-gray-400">候補がありません</div>
            @endforelse
        </div>
    </div>
</div>