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

@section('content')
    <div class="rounded-2xl border border-white/10 bg-white/5 p-8">
        <div class="flex items-center justify-between gap-4">
            <div>
                <div class="text-xl font-semibold">Create Lesson</div>
                <div class="mt-1 text-sm text-white/60">{{ $course->title }}</div>
            </div>
            <a href="{{ route('admin.courses.edit', $course) }}" class="text-sm text-white/60 hover:text-white">Back</a>
        </div>

        <form class="mt-8 space-y-5" method="POST" action="{{ route('admin.lessons.store', $course) }}">
            @csrf

            <div>
                <label class="text-xs text-white/70">Title</label>
                <input name="title" value="{{ old('title') }}" required class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
            </div>

            <div class="grid gap-4 md:grid-cols-3">
                <div>
                    <label class="text-xs text-white/70">Slug (optional)</label>
                    <input name="slug" value="{{ old('slug') }}" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
                <div>
                    <label class="text-xs text-white/70">Sort Order</label>
                    <input name="sort_order" type="number" min="0" value="{{ old('sort_order', 0) }}" required class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
                <div class="flex items-center gap-2 pt-7">
                    <input name="is_published" type="checkbox" value="1" {{ old('is_published') ? 'checked' : '' }} class="rounded border-white/20 bg-white/5">
                    <label class="text-sm text-white/70">Published</label>
                </div>
            </div>

            <div>
                <label class="text-xs text-white/70">Video URL (optional)</label>
                <input name="video_url" value="{{ old('video_url') }}" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
            </div>

            <div>
                <label class="text-xs text-white/70">Content</label>
                <textarea name="content" rows="10" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">{{ old('content') }}</textarea>
            </div>

            <button class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-white/90">
                Create Lesson
            </button>
        </form>
    </div>
@endsection