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

@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">Edit Lesson</div>
                <div class="mt-1 text-sm text-white/60">{{ $course->title }}</div>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('courses.lesson', [$course, $lesson->slug]) }}" class="rounded-xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-semibold text-white/90 transition hover:bg-white/10">Preview</a>
                <a href="{{ route('admin.courses.edit', $course) }}" class="text-sm text-white/60 hover:text-white">Back</a>
            </div>
        </div>

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

            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="text-xs text-white/70">Title</label>
                    <input name="title" value="{{ old('title', $lesson->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>
                    <label class="text-xs text-white/70">Slug</label>
                    <input name="slug" value="{{ old('slug', $lesson->slug) }}" 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>

            <div class="grid gap-4 md:grid-cols-3">
                <div>
                    <label class="text-xs text-white/70">Sort Order</label>
                    <input name="sort_order" type="number" min="0" value="{{ old('sort_order', $lesson->sort_order) }}" 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', $lesson->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', $lesson->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="12" 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', $lesson->content) }}</textarea>
            </div>

            <div class="flex flex-wrap items-center gap-3">
                <button class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-white/90">Save</button>
            </div>
        </form>

        <form class="mt-4" method="POST" action="{{ route('admin.lessons.destroy', [$course, $lesson]) }}" onsubmit="return confirm('Delete this lesson?')">
            @csrf
            @method('DELETE')
            <button class="rounded-xl border border-rose-400/30 bg-rose-500/10 px-6 py-3 text-sm font-semibold text-rose-100 hover:bg-rose-500/20">Delete Lesson</button>
        </form>
    </div>
@endsection