{{-- Work sections picker. Expects $sections; optional $user (edit). --}}
@php
    $selectedIds = isset($user) ? $user->sections->pluck('id')->all() : [];
    $startAccess = isset($user) && ($user->location ?? 'all') !== 'all' ? 'sections' : 'all';
@endphp
<div x-data="{ access: '{{ $startAccess }}' }" class="space-y-2">
    <label class="field-label">Work sections</label>
    <select name="access" class="input" x-model="access">
        <option value="all">All areas (no restriction)</option>
        <option value="sections">Only the sections I tick below</option>
    </select>
    <div x-show="access === 'sections'" x-cloak class="rounded-lg border border-border p-3 space-y-1.5">
        @forelse ($sections as $section)
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="sections[]" value="{{ $section->id }}" @checked(in_array($section->id, $selectedIds)) x-bind:disabled="access !== 'sections'">
                <span>{{ $section->name }}</span>
                <span class="text-xs text-ink-faint">{{ $section->typeLabel() }}{{ $section->is_active ? '' : ' — off' }}</span>
            </label>
        @empty
            <p class="text-xs text-ink-muted">No sections yet — add them under Sections in the menu.</p>
        @endforelse
    </div>
    <p class="text-[11px] text-ink-muted">Pick one or more. This narrows what the person can open (Restaurant POS, Bar POS, Kitchen Display) on top of their role.</p>
</div>