@extends('layouts.school')
@section('title', $class->name)
@section('header', $class->name)
@section('content')
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ route('school.classes.index', request()->route('schoolId')) }}" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to classes</a>
        <div class="flex gap-3">
            <a href="{{ route('school.classes.edit', [request()->route('schoolId'), $class->id]) }}" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Edit</a>
            <form method="POST" action="{{ route('school.classes.destroy', [request()->route('schoolId'), $class->id]) }}" onsubmit="return confirm('Delete this class?')">
                @csrf @method('DELETE')
                <button type="submit" class="rounded-lg border border-red-200 bg-white px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50">Delete</button>
            </form>
        </div>
    </div>
    <div class="mb-6 rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
        <h3 class="text-lg font-display font-semibold text-gray-900 mb-2">{{ $class->name }}</h3>
        <p class="text-sm text-gray-500">Capacity: {{ $class->capacity }} &middot; Students: {{ $class->students_count }} &middot; Class Teacher: <span class="font-medium text-gray-700">{{ $class->classTeacher?->name ?? 'Unassigned' }}</span></p>
    </div>
    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
        <div class="border-b border-gray-200 px-6 py-4"><h3 class="font-display font-semibold text-gray-900">Enrolled Students</h3></div>
        <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">Admission No</th><th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Gender</th></tr></thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($students as $student)
                    <tr class="hover:bg-gray-50"><td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $student->full_name }}</td><td class="px-6 py-4 text-sm text-gray-600">{{ $student->admission_no }}</td><td class="px-6 py-4 text-sm text-gray-600">{{ ucfirst($student->gender ?? '—') }}</td></tr>
                @empty
                    <tr><td colspan="3" class="px-6 py-8 text-center text-sm text-gray-500">No students in this class.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection