@php
use App\Models\Teacher;
use Illuminate\View\View;

// 获取所有老师列表
$teachers = Teacher::all();
@endphp

<div class="flex items-center justify-between p-4 bg-white border-b">
    <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
            <x-heroicon-o-squares-2x2 class="w-6 h-6 text-blue-600" />
        </div>
        <div>
            <h3 class="text-lg font-semibold text-gray-900">菜单权限管理</h3>
            <p class="text-sm text-gray-500">
                为老师 <span class="font-mono text-blue-600">{{ $teacher->teacher_id ?? 'N/A' }}</span> 管理菜单可见性
            </p>
        </div>
    </div>

    <div class="flex items-center gap-4">
        <div class="flex items-center gap-2">
            <label for="teacher-select" class="text-sm font-medium text-gray-700">
                选择老师：
            </label>
            <select
                id="teacher-select"
                class="filament-input block w-64 rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                wire:change="$set('selectedTeacherId', $event.target.value)"
            >
                @foreach($teachers as $t)
                    <option value="{{ $t->teacher_id }}" {{ $t->teacher_id === ($teacher?->teacher_id ?? '') ? 'selected' : '' }}>
                        {{ $t->name ?? $t->teacher_id }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="flex items-center gap-2 text-sm text-gray-500">
            <x-heroicon-o-user class="w-4 h-4" />
            <span>共 {{ $teachers->count() }} 位老师</span>
        </div>
    </div>
</div>

<style>
    /* 自定义选择框样式 */
    #teacher-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    /* 悬停效果 */
    #teacher-select:hover {
        border-color: #3b82f6;
    }

    /* 聚焦效果 */
    #teacher-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px #3b82f6;
        outline: 2px solid transparent;
        outline-offset: 2px;
    }
</style>
