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

@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 Course</div>
                <div class="mt-1 text-sm text-white/60">Add course details, then create lessons.</div>
            </div>
            <a href="{{ route('admin.courses.index') }}" class="text-sm text-white/60 hover:text-white">Back</a>
        </div>

        <form class="mt-8 space-y-5" method="POST" action="{{ route('admin.courses.store') }}" enctype="multipart/form-data">
            @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">Duration</label>
                    <input name="duration_label" value="{{ old('duration_label') }}" 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">Level</label>
                    <input name="level" value="{{ old('level') }}" 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>
                <label class="text-xs text-white/70">Short Description</label>
                <textarea name="short_description" class="rich-editor 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" data-editor-height="200">{{ old('short_description') }}</textarea>
            </div>

            <div>
                <label class="text-xs text-white/70">Description</label>
                <textarea name="description" class="rich-editor 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" data-editor-height="500">{{ old('description') }}</textarea>
            </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', 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>
                    <label class="text-xs text-white/70">Thumbnail (optional)</label>
                    <input name="thumbnail" type="file" accept="image/*" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none">
                </div>
            </div>

            <div>
                <label class="text-xs text-white/70">Brochure (PDF, DOC, DOCX — max 20 MB)</label>
                <input name="brochure" type="file" accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none">
                <div class="mt-1 text-xs text-white/40">Users will be able to download this brochure from the course page.</div>
            </div>

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

    @include('admin.courses._editor')
@endsection