<x-app-layout>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <h1 class="text-2xl font-bold mb-4">Courses</h1>

					@if (session('success'))
						<div class="bg-green-100 text-green-800 p-3 rounded mb-4">
							{{ session('success') }}
						</div>
					@endif

					@if ($courses->isEmpty())
						<p>No courses have been added yet.</p>
					@else
						<div class="overflow-x-auto">
							<table class="min-w-full border border-gray-200 bg-white">
								<thead class="bg-gray-100 border-b">
									<tr>
										<th class="px-4 py-2 text-left">ID</th>
										<th class="px-4 py-2 text-left">Subject</th>
										<th class="px-4 py-2 text-left">Level</th>
										<th class="px-4 py-2 text-left">Lead Teacher</th>
										<th class="px-4 py-2 text-left">Description</th>
										<th class="px-4 py-2 text-left">Created</th>
									</tr>
								</thead>
								<tbody>
									@foreach ($courses as $course)
										<tr class="border-b hover:bg-gray-50">
											<td class="px-4 py-2">{{ $course->id }}</td>
											<td class="px-4 py-2">
												<a href="{{ route('admin.courses.show', $course) }}">
													{{ $course->subject->name }} 
												</a>
											</td>
											<td class="px-4 py-2">
												{{ $course->level ? $course->level->name : '—' }}
											</td>
											<td class="px-4 py-2">{{ $course->lead_teacher }}</td>
											<td class="px-4 py-2">{{ $course->description }}</td>
											<td class="px-4 py-2">{{ $course->created_at->format('Y-m-d') }}</td>
										</tr>
									@endforeach
								</tbody>
							</table>
						</div>
					@endif
					<div class="mt-6">
						<a href="{{ route('admin.courses.create') }}"
						   class="px-4 py-2 bg-gray-200 border border-gray-300 rounded-md
								  font-semibold text-sm text-black hover:bg-gray-300
								  focus:outline-none focus:ring focus:ring-gray-400 transition">
							Add New Course
						</a>
					</div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>