@extends('layouts.school')
@section('title', 'Teachers')
@section('header', 'Teachers')
@section('content')
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <form method="GET" class="flex flex-wrap items-center gap-3">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search teachers..."
                   class="rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 w-64">
            <select name="status" class="rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                <option value="">All statuses</option>
                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
            @if (request()->filled('department'))
                <input type="hidden" name="department" value="{{ request('department') }}">
            @endif
            @if (request()->filled('campus_id'))
                <input type="hidden" name="campus_id" value="{{ request('campus_id') }}">
            @endif
            <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Filter</button>
        </form>
        <a href="{{ route('school.teachers.create', request()->route('schoolId')) }}" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">+ Add Teacher</a>
    </div>
    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Employee ID</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Department</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Qualification</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Portal</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($teachers as $teacher)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4">
                            <a href="{{ route('school.teachers.show', [request()->route('schoolId'), $teacher->id]) }}" class="flex items-center gap-3 group">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-100 text-xs font-bold text-primary-700">
                                    @if ($teacher->photo)
                                        <img src="{{ asset('storage/' . $teacher->photo) }}" alt="" class="h-full w-full object-cover">
                                    @else
                                        {{ $teacher->initials }}
                                    @endif
                                </span>
                                <span class="text-sm font-medium text-gray-900 group-hover:text-primary-600">{{ $teacher->full_name }}</span>
                            </a>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $teacher->employee_id }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $teacher->department ?? '—' }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $teacher->qualification ?? '—' }}</td>
                        <td class="px-6 py-4">
                            @if ($teacher->user)
                                <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium {{ $teacher->user->is_active ? 'bg-green-50 text-green-700' : 'bg-yellow-50 text-yellow-700' }}">
                                    {{ $teacher->user->is_active ? 'Enabled' : 'Disabled' }}
                                </span>
                            @else
                                <span class="inline-flex rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500">No account</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $teacher->is_active ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700' }}">{{ $teacher->is_active ? 'Active' : 'Inactive' }}</span>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">No teachers found.</td></tr>
                @endforelse
            </tbody>
        </table>
        <div class="border-t border-gray-200 px-6 py-3">{{ $teachers->links() }}</div>
    </div>
@endsection