{{--
    Reusable "combobox with checkboxes" — an input-like control showing selected items as
    chips, opening a searchable, scrollable checkbox list. Pure vanilla JS/CSS (see the
    .ms-* styles and initMultiSelect() in layout.blade.php), no dependencies.

    Props: $name (submits as {name}[]), $msLabel, $msOptions (list of ['id'=>,'label'=>]),
    $msSelected (list of pre-checked ids), $msPlaceholder.
--}}
<div class="ms" data-multiselect>
    @if($msLabel ?? null)<label>{{ $msLabel }}</label>@endif
    <div class="ms-control" tabindex="0">
        <div class="ms-chips"><span class="ms-placeholder">{{ $msPlaceholder ?? 'Tous' }}</span></div>
        <span class="ms-arrow">▾</span>
    </div>
    <div class="ms-panel" hidden>
        <input type="text" class="ms-search" placeholder="Rechercher…">
        <div class="ms-list">
            @forelse($msOptions as $opt)
                <label class="ms-option">
                    <input type="checkbox" name="{{ $name }}[]" value="{{ $opt['id'] }}" @checked(in_array($opt['id'], $msSelected ?? []))>
                    <span>{{ $opt['label'] }}</span>
                </label>
            @empty
                <p class="muted" style="margin:6px 8px;font-size:13px">Aucune option.</p>
            @endforelse
        </div>
    </div>
</div>