{{--
    Teacher Student Select Component
    Renders a consistent student dropdown for teacher forms.

    Usage:
        <x-teacher-student-select
            :students="$students"
            name="student_id"
            :selected="old('student_id', $selectedId ?? null)"
            label="Student"
            required
        />

    Props:
        $students   — Collection of User models (students)
        $name       — form field name (default: student_id)
        $selected   — currently selected student ID
        $label      — label text (default: Student)
        $required   — whether field is required (default: false)
        $placeholder — placeholder option text
--}}
@props([
    'students'    => collect(),
    'name'        => 'student_id',
    'selected'    => null,
    'label'       => 'Student',
    'required'    => false,
    'placeholder' => 'Select a student...',
])

<div class="flex flex-col gap-1">
    @if($label)
        <label for="{{ $name }}"
               class="text-sm font-medium text-slate-700 dark:text-slate-300">
            {{ $label }}
            @if($required)
                <span class="text-red-500 ml-0.5">*</span>
            @endif
        </label>
    @endif

    @if($students->isNotEmpty())
        <select
            id="{{ $name }}"
            name="{{ $name }}"
            @if($required) required @endif
            class="block w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 text-sm px-3 py-2 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
        >
            <option value="">{{ $placeholder }}</option>
            @foreach($students as $student)
                <option value="{{ $student->id }}"
                    {{ (string)$selected === (string)$student->id ? 'selected' : '' }}>
                    {{ $student->name }}
                </option>
            @endforeach
        </select>
    @else
        <div class="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/20 px-3 py-2 text-sm text-amber-700 dark:text-amber-400">
            <svg class="h-4 w-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            No students assigned to you yet.
        </div>
        {{-- Hidden field so form still submits without crashing --}}
        <input type="hidden" name="{{ $name }}" value="">
    @endif

    @error($name)
        <p class="text-xs text-red-600 dark:text-red-400 mt-0.5">{{ $message }}</p>
    @enderror
</div>