@props([
    'teachers',
    'error' => null,
    'name' => 'teacherId',
    'label' => 'Docente',
    'required' => false,
    'live' => false,
    'syncEvent' => 'teacher-select-sync',
    'placeholder' => 'Buscar por nombre o documento…',
    'disabled' => false,
    // Nombre de una propiedad Livewire boolean/truthy: si se pasa, el
    // campo se habilita/deshabilita en vivo según su valor (sin esto,
    // `disabled` solo fija el estado inicial — adentro de wire:ignore,
    // Livewire no vuelve a tocar este HTML en renders posteriores).
    'watchProperty' => null,
])

{{-- Select con buscador (Tom Select) reskineado para verse igual que .form-input. --}}
<x-ui.field :label="$label" :name="$name" :error="$error" :required="$required">
    <div
        wire:ignore
        class="searchable-select"
        x-data="{ select: null }"
        x-init="
            select = new TomSelect($refs.input, {
                placeholder: @js($placeholder),
                maxOptions: null,
                allowEmptyOption: true,
                hideSelected: false,
            });
        "
        x-on:{{ $syncEvent }}.window="select.setValue($event.detail.teacherId ? String($event.detail.teacherId) : '', true)"
        @if ($watchProperty)
            x-effect="$wire.{{ $watchProperty }} ? select.enable() : select.disable()"
        @endif
    >
        <select
            id="{{ $name }}"
            x-ref="input"
            @if ($live) wire:model.live="{{ $name }}" @else wire:model="{{ $name }}" @endif
            autocomplete="off"
            @disabled($disabled)
        >
            <option value=""></option>
            @foreach ($teachers as $teacher)
                <option value="{{ $teacher->id }}">{{ $teacher->displayName() }} — {{ $teacher->document_number }}</option>
            @endforeach
        </select>
    </div>
</x-ui.field>