<div class="grid gap-6 sm:grid-cols-1">
    <div>
        <span class="setel-users-filter-label" id="work-noc-label">NOC asignado</span>
        <p class="mt-0.5 text-xs text-[var(--setel-text-muted)]">Usuario con rol NOC responsable del seguimiento (el detalle de cambios queda en Historial / auditoría).</p>
        @if ($this->coordinatorSelectedNoc)
            <div class="setel-picker-chip-row mt-2">
                <span class="setel-picker-chip" aria-live="polite">{{ $this->coordinatorSelectedNoc->fullName() }}</span>
                <button type="button" class="setel-picker-chip-clear" wire:click="clearNocSelection">Quitar</button>
            </div>
        @endif
        <div class="setel-combobox mt-2" wire:click.outside="closeNocPicker">
            <div class="setel-input-icon-wrap isolate w-full">
                <span class="setel-input-icon" aria-hidden="true"><flux:icon.search class="size-5 shrink-0" /></span>
                <input
                    id="work-noc-search"
                    type="search"
                    class="setel-input setel-input--has-icon"
                    wire:model.live.debounce.300ms="pickerNocQuery"
                    wire:focus="openNocPicker"
                    wire:keydown.escape="closeNocPicker"
                    placeholder="Nombre, documento o correo…"
                    autocomplete="off"
                    aria-labelledby="work-noc-label"
                    aria-expanded="{{ $pickerNocOpen ? 'true' : 'false' }}"
                    aria-controls="work-noc-listbox"
                />
            </div>
            @if ($pickerNocOpen)
                <div id="work-noc-listbox" class="setel-combobox-panel" role="listbox" aria-label="Usuarios NOC">
                    @if ($this->nocPickerResults->isEmpty())
                        <p class="setel-combobox-empty">No hay usuarios NOC que coincidan.</p>
                    @else
                        <ul class="setel-combobox-list">
                            @foreach ($this->nocPickerResults as $user)
                                <li role="none">
                                    <button
                                        type="button"
                                        class="setel-combobox-option text-start"
                                        wire:key="noc-opt-{{ $user->id }}"
                                        wire:click="selectNocUser({{ $user->id }})"
                                        role="option"
                                    >
                                        <span class="font-medium text-[var(--setel-text)]">{{ $user->fullName() }}</span>
                                        @if ($user->document || $user->email)
                                            <span class="mt-0.5 block text-xs text-[var(--setel-text-muted)]">{{ $user->document }} @if ($user->document && $user->email) · @endif {{ $user->email }}</span>
                                        @endif
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            @endif
        </div>
        @error('form.noc_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
        <span class="setel-users-filter-label" id="work-tech-label">Técnico asignado</span>
        <p class="mt-0.5 text-xs text-[var(--setel-text-muted)]">Técnico de campo asociado a la OT.</p>
        @if ($this->coordinatorSelectedTechnician)
            <div class="setel-picker-chip-row mt-2">
                <span class="setel-picker-chip" aria-live="polite">{{ $this->coordinatorSelectedTechnician->fullName() }}</span>
                <button type="button" class="setel-picker-chip-clear" wire:click="clearTechnicianSelection">Quitar</button>
            </div>
        @endif
        <div class="setel-combobox mt-2" wire:click.outside="closeTechnicianPicker">
            <div class="setel-input-icon-wrap isolate w-full">
                <span class="setel-input-icon" aria-hidden="true"><flux:icon.search class="size-5 shrink-0" /></span>
                <input
                    id="work-tech-search"
                    type="search"
                    class="setel-input setel-input--has-icon"
                    wire:model.live.debounce.300ms="pickerTechnicianQuery"
                    wire:focus="openTechnicianPicker"
                    wire:keydown.escape="closeTechnicianPicker"
                    placeholder="Nombre, documento o correo…"
                    autocomplete="off"
                    aria-labelledby="work-tech-label"
                    aria-expanded="{{ $pickerTechnicianOpen ? 'true' : 'false' }}"
                    aria-controls="work-tech-listbox"
                />
            </div>
            @if ($pickerTechnicianOpen)
                <div id="work-tech-listbox" class="setel-combobox-panel" role="listbox" aria-label="Técnicos">
                    @if ($this->technicianPickerResults->isEmpty())
                        <p class="setel-combobox-empty">No hay técnicos que coincidan.</p>
                    @else
                        <ul class="setel-combobox-list">
                            @foreach ($this->technicianPickerResults as $user)
                                <li role="none">
                                    <button
                                        type="button"
                                        class="setel-combobox-option text-start"
                                        wire:key="tech-opt-{{ $user->id }}"
                                        wire:click="selectTechnicianUser({{ $user->id }})"
                                        role="option"
                                    >
                                        <span class="font-medium text-[var(--setel-text)]">{{ $user->fullName() }}</span>
                                        @if ($user->document || $user->email)
                                            <span class="mt-0.5 block text-xs text-[var(--setel-text-muted)]">{{ $user->document }} @if ($user->document && $user->email) · @endif {{ $user->email }}</span>
                                        @endif
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            @endif
        </div>
        @error('form.technician_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
        <span class="setel-users-filter-label" id="work-coord-label">Coordinador</span>
        <p class="mt-0.5 text-xs text-[var(--setel-text-muted)]">Coordinador de operaciones vinculado a la asignación.</p>
        @if ($this->coordinatorSelectedCoordinator)
            <div class="setel-picker-chip-row mt-2">
                <span class="setel-picker-chip" aria-live="polite">{{ $this->coordinatorSelectedCoordinator->fullName() }}</span>
                <button type="button" class="setel-picker-chip-clear" wire:click="clearCoordinatorSelection">Quitar</button>
            </div>
        @endif
        <div class="setel-combobox mt-2" wire:click.outside="closeCoordinatorPicker">
            <div class="setel-input-icon-wrap isolate w-full">
                <span class="setel-input-icon" aria-hidden="true"><flux:icon.search class="size-5 shrink-0" /></span>
                <input
                    id="work-coord-search"
                    type="search"
                    class="setel-input setel-input--has-icon"
                    wire:model.live.debounce.300ms="pickerCoordinatorQuery"
                    wire:focus="openCoordinatorPicker"
                    wire:keydown.escape="closeCoordinatorPicker"
                    placeholder="Nombre, documento o correo…"
                    autocomplete="off"
                    aria-labelledby="work-coord-label"
                    aria-expanded="{{ $pickerCoordinatorOpen ? 'true' : 'false' }}"
                    aria-controls="work-coord-listbox"
                />
            </div>
            @if ($pickerCoordinatorOpen)
                <div id="work-coord-listbox" class="setel-combobox-panel" role="listbox" aria-label="Coordinadores">
                    @if ($this->coordinatorPickerResults->isEmpty())
                        <p class="setel-combobox-empty">No hay coordinadores que coincidan.</p>
                    @else
                        <ul class="setel-combobox-list">
                            @foreach ($this->coordinatorPickerResults as $user)
                                <li role="none">
                                    <button
                                        type="button"
                                        class="setel-combobox-option text-start"
                                        wire:key="coord-opt-{{ $user->id }}"
                                        wire:click="selectCoordinatorUser({{ $user->id }})"
                                        role="option"
                                    >
                                        <span class="font-medium text-[var(--setel-text)]">{{ $user->fullName() }}</span>
                                        @if ($user->document || $user->email)
                                            <span class="mt-0.5 block text-xs text-[var(--setel-text-muted)]">{{ $user->document }} @if ($user->document && $user->email) · @endif {{ $user->email }}</span>
                                        @endif
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            @endif
        </div>
        @error('form.coordinator_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
</div>
