@extends('layouts.admin', ['title' => 'Courses'])

@section('content')
    <div class="rounded-2xl border border-white/10 bg-white/5 p-8">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <div class="text-xl font-semibold">Courses (LMS)</div>
                <div class="mt-1 text-sm text-white/60">Create courses, publish them, and add lessons.</div>
            </div>
            <a href="{{ route('admin.courses.create') }}" class="rounded-xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-white/90">
                New Course
            </a>
        </div>

        <div class="mt-8 overflow-hidden rounded-2xl border border-white/10">
            <table class="w-full text-left text-sm">
                <thead class="bg-slate-950/40 text-xs uppercase tracking-wide text-white/50">
                    <tr>
                        <th class="px-4 py-3">Order</th>
                        <th class="px-4 py-3">Title</th>
                        <th class="px-4 py-3">Slug</th>
                        <th class="px-4 py-3">Published</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                    @foreach($courses as $course)
                        <tr>
                            <td class="px-4 py-3 text-white/70">{{ $course->sort_order }}</td>
                            <td class="px-4 py-3 font-medium">{{ $course->title }}</td>
                            <td class="px-4 py-3 text-white/70">{{ $course->slug }}</td>
                            <td class="px-4 py-3 text-white/70">{{ $course->is_published ? 'Yes' : 'No' }}</td>
                            <td class="px-4 py-3 text-right">
                                <a href="{{ route('admin.courses.edit', $course) }}" class="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold hover:bg-white/10">
                                    Edit
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection