@props([
    'courses',
    'error' => null,
    'name' => 'courseId',
    'label' => 'Curso',
    'required' => false,
    'syncEvent' => 'course-select-sync',
    'placeholder' => 'Buscar por código, nombre o resolución…',
    'disabled' => false,
    // Ver teacher-select.blade.php — mismo mecanismo de habilitado en vivo.
    'watchProperty' => null,
])

{{-- Solo cursos activos. Busca por código, nombre o resolución. --}}
<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,
                searchField: ['text'],
            });
        "
        x-on:{{ $syncEvent }}.window="select.setValue($event.detail.courseId ? String($event.detail.courseId) : '', true)"
        @if ($watchProperty)
            x-effect="$wire.{{ $watchProperty }} ? select.enable() : select.disable()"
        @endif
    >
        <select id="{{ $name }}" x-ref="input" wire:model.live="{{ $name }}" autocomplete="off" @disabled($disabled)>
            <option value=""></option>
            @foreach ($courses as $course)
                @php
                    $resolution = $course->resolution;
                    $resolutionBits = collect([
                        $resolution?->resolution_number,
                        $resolution?->name,
                    ])->filter()->implode(' ');
                    $labelText = $course->displayName();
                    if ($resolutionBits !== '') {
                        $labelText .= ' · '.$resolutionBits;
                    }
                    if ($course->relationLoaded('cycle')) {
                        $labelText .= ' · '.($course->cycle ? 'Ciclo '.$course->cycle->name : 'SIN CICLO');
                    }
                @endphp
                <option value="{{ $course->id }}">{{ $labelText }}</option>
            @endforeach
        </select>
    </div>
</x-ui.field>