chore: commit remaining workspace changes

resources/js/Pages/Admin/Academy/CourseBuilder.jsx

@@ -0,0 +1,540 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Head, Link, router, useForm, usePage } from '@inertiajs/react'
+import AdminLayout from '../../../Layouts/AdminLayout'
+import NovaSelect from '../../../components/ui/NovaSelect'
+
+function laneKey(sectionId) {
+  return sectionId == null ? 'unsectioned' : `section:${sectionId}`
+}
+
+function sortSections(items = []) {
+  return [...items].sort((left, right) => {
+    const orderDiff = Number(left?.order_num || 0) - Number(right?.order_num || 0)
+    if (orderDiff !== 0) return orderDiff
+    return Number(left?.id || 0) - Number(right?.id || 0)
+  })
+}
+
+function sortLessons(items = []) {
+  return [...items].sort((left, right) => {
+    const leftSection = left?.section_id == null ? -1 : Number(left.section_id)
+    const rightSection = right?.section_id == null ? -1 : Number(right.section_id)
+
+    if (leftSection !== rightSection) return leftSection - rightSection
+
+    const orderDiff = Number(left?.order_num || 0) - Number(right?.order_num || 0)
+    if (orderDiff !== 0) return orderDiff
+
+    return Number(left?.id || 0) - Number(right?.id || 0)
+  })
+}
+
+function buildLessonLanes(sections = [], lessons = []) {
+  const orderedSections = sortSections(sections)
+  const orderedLessons = sortLessons(lessons)
+
+  return [
+    {
+      key: 'unsectioned',
+      sectionId: null,
+      title: 'Core lessons',
+      description: 'Lessons shown before the course branches into sections.',
+      isVisible: true,
+      lessons: orderedLessons.filter((lesson) => lesson.section_id == null),
+    },
+    ...orderedSections.map((section) => ({
+      key: laneKey(section.id),
+      sectionId: section.id,
+      title: section.title,
+      description: section.description || 'Section lessons appear together in this stage.',
+      isVisible: Boolean(section.is_visible),
+      lessons: orderedLessons.filter((lesson) => Number(lesson.section_id) === Number(section.id)),
+    })),
+  ]
+}
+
+function reindexLessonsFromLanes(sections = [], lessons = []) {
+  const lanes = buildLessonLanes(sections, lessons)
+
+  return lanes.flatMap((lane) => lane.lessons.map((lesson, index) => ({
+    ...lesson,
+    section_id: lane.sectionId,
+    order_num: index,
+  })))
+}
+
+function moveLessonToPosition(sections = [], lessons = [], lessonId, nextSectionId, targetIndex) {
+  const lanes = buildLessonLanes(sections, lessons).map((lane) => ({ ...lane, lessons: [...lane.lessons] }))
+  let draggedLesson = null
+
+  lanes.forEach((lane) => {
+    const lessonIndex = lane.lessons.findIndex((lesson) => Number(lesson.id) === Number(lessonId))
+    if (lessonIndex === -1) return
+    draggedLesson = { ...lane.lessons[lessonIndex], section_id: nextSectionId }
+    lane.lessons.splice(lessonIndex, 1)
+  })
+
+  if (!draggedLesson) return lessons
+
+  const destinationLane = lanes.find((lane) => lane.sectionId === nextSectionId)
+  if (!destinationLane) return lessons
+
+  const nextIndex = Math.max(0, Math.min(Number(targetIndex), destinationLane.lessons.length))
+  destinationLane.lessons.splice(nextIndex, 0, draggedLesson)
+
+  return reindexLessonsFromLanes(sections, lanes.flatMap((lane) => lane.lessons))
+}
+
+function shiftLesson(sections = [], lessons = [], lessonId, direction) {
+  const lanes = buildLessonLanes(sections, lessons)
+
+  for (const lane of lanes) {
+    const lessonIndex = lane.lessons.findIndex((lesson) => Number(lesson.id) === Number(lessonId))
+    if (lessonIndex === -1) continue
+
+    const nextIndex = lessonIndex + direction
+    if (nextIndex < 0 || nextIndex >= lane.lessons.length) {
+      return lessons
+    }
+
+    return moveLessonToPosition(sections, lessons, lessonId, lane.sectionId, nextIndex)
+  }
+
+  return lessons
+}
+
+function placementSignature(lessons = []) {
+  return JSON.stringify(sortLessons(lessons).map((lesson) => ({
+    id: Number(lesson.id),
+    section_id: lesson.section_id == null ? null : Number(lesson.section_id),
+    order_num: Number(lesson.order_num || 0),
+  })))
+}
+
+function formatStepLabel(value) {
+  return `Step ${String(value).padStart(2, '0')}`
+}
+
+function resolveDraggedLessonId(event, fallbackLessonId = null) {
+  const nativeLessonId = event?.dataTransfer?.getData('text/plain') || ''
+
+  if (nativeLessonId !== '') {
+    return Number(nativeLessonId)
+  }
+
+  return fallbackLessonId == null ? null : Number(fallbackLessonId)
+}
+
+function FormCard({ title, description, children }) {
+  return (
+    <section className="rounded-[30px] border border-white/[0.08] bg-white/[0.03] p-6">
+      <div className="mb-5">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Course builder</p>
+        <h2 className="mt-2 text-xl font-semibold tracking-[-0.04em] text-white">{title}</h2>
+        {description ? <p className="mt-2 text-sm leading-7 text-slate-400">{description}</p> : null}
+      </div>
+      {children}
+    </section>
+  )
+}
+
+function CheckboxCardField({ label, checked, onChange, description }) {
+  return (
+    <label className={`flex cursor-pointer items-start gap-4 rounded-[28px] border px-5 py-4 transition ${checked ? 'border-[#f39a24]/35 bg-[#f39a24]/10' : 'border-white/10 bg-black/20 hover:border-white/20 hover:bg-white/[0.04]'}`}>
+      <input type="checkbox" checked={Boolean(checked)} onChange={onChange} className="sr-only" />
+      <span className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border text-sm transition ${checked ? 'border-[#f39a24] bg-[#f39a24] text-white' : 'border-white/10 bg-[#151a29] text-transparent'}`}>
+        <i className="fa-solid fa-check" />
+      </span>
+      <span>
+        <span className="block font-semibold text-white">{label}</span>
+        {description ? <span className="mt-1 block text-xs leading-5 text-slate-400">{description}</span> : null}
+      </span>
+    </label>
+  )
+}
+
+function EditableSectionCard({ section }) {
+  const form = useForm({
+    title: section.title || '',
+    slug: section.slug || '',
+    description: section.description || '',
+    order_num: section.order_num || 0,
+    is_visible: Boolean(section.is_visible),
+  })
+
+  return (
+    <form onSubmit={(event) => { event.preventDefault(); form.patch(section.updateUrl) }} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
+      <div className="grid gap-4 lg:grid-cols-2">
+        <label className="grid gap-2 text-sm text-slate-200">
+          <span>Title</span>
+          <input value={form.data.title} onChange={(event) => form.setData('title', event.target.value)} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" />
+        </label>
+        <label className="grid gap-2 text-sm text-slate-200">
+          <span>Slug</span>
+          <input value={form.data.slug} onChange={(event) => form.setData('slug', event.target.value)} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" />
+        </label>
+        <label className="grid gap-2 text-sm text-slate-200 lg:col-span-2">
+          <span>Description</span>
+          <textarea value={form.data.description} onChange={(event) => form.setData('description', event.target.value)} rows={3} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" />
+        </label>
+        <label className="grid gap-2 text-sm text-slate-200">
+          <span>Order</span>
+          <input type="number" value={form.data.order_num} onChange={(event) => form.setData('order_num', event.target.value)} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" />
+        </label>
+        <CheckboxCardField
+          label="Visible section"
+          checked={Boolean(form.data.is_visible)}
+          onChange={(event) => form.setData('is_visible', event.target.checked)}
+          description="Hide the whole section from the public course outline without deleting its lessons or structure."
+        />
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-3">
+        <button type="submit" disabled={form.processing} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-4 py-2 text-sm font-semibold text-sky-100">{form.processing ? 'Saving...' : 'Save section'}</button>
+        <button type="button" onClick={() => { if (!window.confirm('Delete this section?')) return; router.delete(section.destroyUrl) }} className="rounded-full border border-rose-300/20 bg-rose-300/10 px-4 py-2 text-sm font-semibold text-rose-100">Delete</button>
+      </div>
+    </form>
+  )
+}
+
+function EditableCourseLessonCard({ courseLesson, sectionOptions, stepLabel }) {
+  const form = useForm({
+    section_id: courseLesson.section_id || '',
+    order_num: courseLesson.order_num || 0,
+    is_required: Boolean(courseLesson.is_required),
+    access_override: courseLesson.access_override || '',
+    unlock_after_lesson_id: courseLesson.unlock_after_lesson_id || '',
+  })
+
+  const accessOptions = [
+    { value: '', label: 'Use lesson access' },
+    { value: 'free', label: 'Free' },
+    { value: 'creator', label: 'Creator' },
+    { value: 'pro', label: 'Pro' },
+    { value: 'premium', label: 'Premium' },
+  ]
+
+  useEffect(() => {
+    form.setData('section_id', courseLesson.section_id || '')
+    form.setData('order_num', courseLesson.order_num || 0)
+  }, [courseLesson.order_num, courseLesson.section_id])
+
+  return (
+    <form onSubmit={(event) => { event.preventDefault(); form.patch(courseLesson.updateUrl) }} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <div className="flex flex-wrap items-center gap-2">
+            {stepLabel ? <span className="rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-100">{stepLabel}</span> : null}
+            <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">{courseLesson.category || 'Academy'} · {courseLesson.difficulty || 'lesson'}</p>
+          </div>
+          <h3 className="mt-2 text-lg font-semibold text-white">{courseLesson.title}</h3>
+          <p className="mt-2 text-sm leading-7 text-slate-300">{courseLesson.excerpt || 'This lesson is attached to the course.'}</p>
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-4 lg:grid-cols-3">
+        <NovaSelect label="Section" value={form.data.section_id} onChange={(nextValue) => form.setData('section_id', nextValue || '')} options={sectionOptions} searchable={false} className="rounded-2xl bg-white/[0.04]" />
+        <label className="grid gap-2 text-sm text-slate-200">
+          <span>Order</span>
+          <input type="number" value={form.data.order_num} onChange={(event) => form.setData('order_num', event.target.value)} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" />
+        </label>
+        <NovaSelect label="Access override" value={form.data.access_override} onChange={(nextValue) => form.setData('access_override', nextValue || '')} options={accessOptions} searchable={false} className="rounded-2xl bg-white/[0.04]" />
+      </div>
+
+      <div className="mt-4">
+        <CheckboxCardField
+          label="Required for course completion"
+          checked={Boolean(form.data.is_required)}
+          onChange={(event) => form.setData('is_required', event.target.checked)}
+          description="Only required lessons count toward the course completion percentage."
+        />
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-3">
+        <button type="submit" disabled={form.processing} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-4 py-2 text-sm font-semibold text-sky-100">{form.processing ? 'Saving...' : 'Save lesson settings'}</button>
+        <button type="button" onClick={() => { if (!window.confirm('Remove this lesson from the course?')) return; router.delete(courseLesson.destroyUrl) }} className="rounded-full border border-rose-300/20 bg-rose-300/10 px-4 py-2 text-sm font-semibold text-rose-100">Detach</button>
+      </div>
+    </form>
+  )
+}
+
+function ReorderLessonCard({
+  lesson,
+  lane,
+  laneIndex,
+  laneCount,
+  globalStepNumber,
+  isDragging,
+  isDropTarget,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDrop,
+  onMoveUp,
+  onMoveDown,
+  onMoveLeft,
+  onMoveRight,
+}) {
+  return (
+    <div
+      draggable
+      onDragStart={(event) => {
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('text/plain', String(lesson.id))
+        onDragStart(lesson.id)
+      }}
+      onDragEnd={onDragEnd}
+      onDragOver={(event) => {
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'move'
+        onDragOver(lesson.id)
+      }}
+      onDrop={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        onDrop(event, lane.sectionId, lesson.id)
+      }}
+      className={[
+        'rounded-[24px] border bg-black/20 p-4 transition',
+        isDragging ? 'border-sky-300/40 opacity-60' : 'border-white/10 hover:border-white/20',
+        isDropTarget ? 'ring-2 ring-sky-300/35' : '',
+      ].join(' ')}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-100">{formatStepLabel(globalStepNumber)}</span>
+            {lesson.is_required ? <span className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Required</span> : <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400">Optional</span>}
+          </div>
+          <h3 className="mt-3 text-base font-semibold tracking-[-0.03em] text-white">{lesson.title}</h3>
+          <p className="mt-1 text-[11px] uppercase tracking-[0.16em] text-slate-500">{lesson.category || 'Academy'} · {lesson.difficulty || 'lesson'} · order {Number(lesson.order_num) + 1}</p>
+          <p className="mt-3 text-sm leading-6 text-slate-300">{lesson.excerpt || 'Drag this lesson to reposition it inside the course flow.'}</p>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          <button type="button" onClick={onMoveUp} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-xs font-semibold text-white disabled:opacity-40" disabled={lane.lessons[0]?.id === lesson.id}>
+            <i className="fa-solid fa-arrow-up" />
+          </button>
+          <button type="button" onClick={onMoveDown} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-xs font-semibold text-white disabled:opacity-40" disabled={lane.lessons[lane.lessons.length - 1]?.id === lesson.id}>
+            <i className="fa-solid fa-arrow-down" />
+          </button>
+          <button type="button" onClick={onMoveLeft} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-xs font-semibold text-white disabled:opacity-40" disabled={laneIndex <= 0}>
+            <i className="fa-solid fa-arrow-left" />
+          </button>
+          <button type="button" onClick={onMoveRight} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-xs font-semibold text-white disabled:opacity-40" disabled={laneIndex >= laneCount - 1}>
+            <i className="fa-solid fa-arrow-right" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function AcademyCourseBuilder({ course, sections = [], courseLessons = [], availableLessons = [], routes = {} }) {
+  const flash = usePage().props.flash || {}
+  const sectionForm = useForm({ title: '', slug: '', description: '', order_num: sections.length, is_visible: true })
+  const attachForm = useForm({ lesson_id: '', section_id: '', order_num: courseLessons.length, is_required: true, access_override: '', unlock_after_lesson_id: '' })
+  const [draftLessons, setDraftLessons] = useState(() => reindexLessonsFromLanes(sections, courseLessons))
+  const [draggedLessonId, setDraggedLessonId] = useState(null)
+  const [dropTargetLessonId, setDropTargetLessonId] = useState(null)
+  const [reorderProcessing, setReorderProcessing] = useState(false)
+
+  const sectionOptions = [{ value: '', label: 'Unsectioned' }, ...sections.map((section) => ({ value: section.id, label: section.title }))]
+  const lessonOptions = availableLessons.map((lesson) => ({ value: lesson.id, label: `${lesson.title}${lesson.attached ? ' · attached' : ''}` }))
+  const attachableLessonOptions = availableLessons.filter((lesson) => !lesson.attached).map((lesson) => ({ value: lesson.id, label: lesson.title }))
+  const accessOverrideOptions = [
+    { value: '', label: 'Use lesson access' },
+    { value: 'free', label: 'Free' },
+    { value: 'creator', label: 'Creator' },
+    { value: 'pro', label: 'Pro' },
+    { value: 'premium', label: 'Premium' },
+  ]
+  const lessonLanes = useMemo(() => buildLessonLanes(sections, draftLessons), [sections, draftLessons])
+  const reorderDirty = useMemo(() => placementSignature(draftLessons) !== placementSignature(reindexLessonsFromLanes(sections, courseLessons)), [courseLessons, draftLessons, sections])
+  const courseLessonMap = useMemo(() => new Map(courseLessons.map((courseLesson) => [Number(courseLesson.id), courseLesson])), [courseLessons])
+  const orderedCourseLessons = useMemo(() => reindexLessonsFromLanes(sections, courseLessons.map((courseLesson) => ({
+    ...courseLesson,
+    ...(draftLessons.find((draftLesson) => Number(draftLesson.id) === Number(courseLesson.id)) || {}),
+  }))), [courseLessons, draftLessons, sections])
+  const globalStepMap = useMemo(() => new Map(lessonLanes.flatMap((lane) => lane.lessons).map((lesson, index) => [Number(lesson.id), index + 1])), [lessonLanes])
+
+  useEffect(() => {
+    setDraftLessons(reindexLessonsFromLanes(sections, courseLessons))
+  }, [courseLessons, sections])
+
+  const moveLessonAcrossLanes = (lessonId, laneIndexDelta) => {
+    const lanes = buildLessonLanes(sections, draftLessons)
+    const currentLaneIndex = lanes.findIndex((lane) => lane.lessons.some((lesson) => Number(lesson.id) === Number(lessonId)))
+    if (currentLaneIndex === -1) return
+
+    const nextLane = lanes[currentLaneIndex + laneIndexDelta]
+    if (!nextLane) return
+
+    setDraftLessons((current) => moveLessonToPosition(sections, current, lessonId, nextLane.sectionId, nextLane.lessons.length))
+  }
+
+  const saveReorder = () => {
+    setReorderProcessing(true)
+    router.patch(routes.reorder, {
+      sections: sortSections(sections).map((section, index) => ({ id: section.id, order_num: index })),
+      lessons: reindexLessonsFromLanes(sections, draftLessons).map((lesson) => ({
+        id: lesson.id,
+        order_num: lesson.order_num,
+        section_id: lesson.section_id,
+      })),
+    }, {
+      preserveScroll: true,
+      onFinish: () => setReorderProcessing(false),
+    })
+  }
+
+  return (
+    <AdminLayout title={`${course.title} Builder`} subtitle="Arrange sections, attach lessons, and control course flow.">
+      <Head title={`Admin · ${course.title} Builder`} />
+
+      {flash.success ? <div className="mb-6 rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">{flash.success}</div> : null}
+      {flash.error ? <div className="mb-6 rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{flash.error}</div> : null}
+
+      <div className="mb-6 flex flex-wrap gap-3">
+        <Link href={routes.index} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white">Back to courses</Link>
+        <Link href={routes.edit} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white">Edit course</Link>
+        <Link href={routes.preview} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">Preview public page</Link>
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_420px]">
+        <div className="space-y-6">
+          <FormCard title="Structure overview" description="The course builder keeps the lesson content reusable while controlling order, access, and required progress here.">
+            <div className="grid gap-4 md:grid-cols-3">
+              <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4"><p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Sections</p><p className="mt-2 text-2xl font-semibold text-white">{sections.length}</p></div>
+              <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4"><p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Attached lessons</p><p className="mt-2 text-2xl font-semibold text-white">{courseLessons.length}</p></div>
+              <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4"><p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Published course lessons</p><p className="mt-2 text-2xl font-semibold text-white">{courseLessons.filter((lesson) => lesson.title).length}</p></div>
+            </div>
+          </FormCard>
+
+          <FormCard title="Sections" description="Chapters are optional, but they help group lessons into cleaner stages.">
+            <div className="space-y-4">
+              {sections.map((section) => (
+                <EditableSectionCard key={section.id} section={section} />
+              ))}
+            </div>
+          </FormCard>
+
+          <FormCard title="Lesson flow" description="Manage the course order as one visual path. Drag lessons between lanes, use arrows for exact moves, then save the sequence in one action.">
+            <div className="flex flex-wrap items-center justify-between gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
+              <div>
+                <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Flow board</p>
+                <p className="mt-1 text-sm text-slate-300">Core lessons stay first, then each visible section keeps its own ordered lane.</p>
+              </div>
+              <div className="flex flex-wrap gap-3">
+                {reorderDirty ? <span className="rounded-full border border-amber-300/25 bg-amber-300/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-amber-100">Unsaved order changes</span> : <span className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-emerald-100">Order is saved</span>}
+                <button type="button" onClick={() => setDraftLessons(reindexLessonsFromLanes(sections, courseLessons))} disabled={!reorderDirty || reorderProcessing} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white disabled:opacity-40">Reset</button>
+                <button type="button" onClick={saveReorder} disabled={!reorderDirty || reorderProcessing} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-4 py-2 text-sm font-semibold text-sky-100 disabled:opacity-40">{reorderProcessing ? 'Saving order...' : 'Save order'}</button>
+              </div>
+            </div>
+
+            <div className="mt-5 grid gap-4 xl:grid-cols-2">
+              {lessonLanes.map((lane, laneIndex) => (
+                <section
+                  key={lane.key}
+                  onDragOver={(event) => event.preventDefault()}
+                  onDrop={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    const activeLessonId = resolveDraggedLessonId(event, draggedLessonId)
+                    if (activeLessonId == null) return
+                    setDraftLessons((current) => moveLessonToPosition(sections, current, activeLessonId, lane.sectionId, lane.lessons.length))
+                    setDraggedLessonId(null)
+                    setDropTargetLessonId(null)
+                  }}
+                  className={`rounded-[26px] border p-4 ${lane.isVisible ? 'border-white/10 bg-white/[0.03]' : 'border-amber-300/20 bg-amber-300/8'}`}
+                >
+                  <div className="flex flex-wrap items-start justify-between gap-3">
+                    <div>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">{lane.sectionId == null ? 'Core lane' : 'Section lane'}</p>
+                        {!lane.isVisible ? <span className="rounded-full border border-amber-300/20 bg-amber-300/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Hidden on public page</span> : null}
+                      </div>
+                      <h3 className="mt-2 text-lg font-semibold tracking-[-0.03em] text-white">{lane.title}</h3>
+                      <p className="mt-2 text-sm leading-6 text-slate-400">{lane.description}</p>
+                    </div>
+                    <span className="rounded-full border border-white/10 bg-black/20 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{lane.lessons.length} lessons</span>
+                  </div>
+
+                  <div className="mt-4 space-y-3 min-h-20">
+                    {lane.lessons.length ? lane.lessons.map((lesson) => (
+                      <ReorderLessonCard
+                        key={lesson.id}
+                        lesson={lesson}
+                        lane={lane}
+                        laneIndex={laneIndex}
+                        laneCount={lessonLanes.length}
+                        globalStepNumber={globalStepMap.get(Number(lesson.id)) || 1}
+                        isDragging={Number(draggedLessonId) === Number(lesson.id)}
+                        isDropTarget={Number(dropTargetLessonId) === Number(lesson.id)}
+                        onDragStart={setDraggedLessonId}
+                        onDragEnd={() => {
+                          setDraggedLessonId(null)
+                          setDropTargetLessonId(null)
+                        }}
+                        onDragOver={setDropTargetLessonId}
+                        onDrop={(event, targetSectionId, targetLessonId) => {
+                          const activeLessonId = resolveDraggedLessonId(event, draggedLessonId)
+                          if (activeLessonId == null) return
+                          if (Number(activeLessonId) === Number(targetLessonId)) return
+                          const targetLane = lessonLanes.find((entry) => entry.sectionId === targetSectionId)
+                          const targetIndex = Math.max(0, (targetLane?.lessons || []).findIndex((entry) => Number(entry.id) === Number(targetLessonId)))
+                          setDraftLessons((current) => moveLessonToPosition(sections, current, activeLessonId, targetSectionId, targetIndex))
+                          setDraggedLessonId(null)
+                          setDropTargetLessonId(null)
+                        }}
+                        onMoveUp={() => setDraftLessons((current) => shiftLesson(sections, current, lesson.id, -1))}
+                        onMoveDown={() => setDraftLessons((current) => shiftLesson(sections, current, lesson.id, 1))}
+                        onMoveLeft={() => moveLessonAcrossLanes(lesson.id, -1)}
+                        onMoveRight={() => moveLessonAcrossLanes(lesson.id, 1)}
+                      />
+                    )) : <div className="rounded-[22px] border border-dashed border-white/10 bg-black/20 px-4 py-6 text-sm text-slate-500">Drop lessons here to move them into this lane.</div>}
+                  </div>
+                </section>
+              ))}
+            </div>
+          </FormCard>
+
+          <FormCard title="Attached lessons" description="Each lesson stays reusable across courses. Adjust order, requirement status, and access overrides here.">
+            <div className="space-y-4">
+              {orderedCourseLessons.map((courseLesson, index) => (
+                <EditableCourseLessonCard key={courseLesson.id} courseLesson={{ ...courseLessonMap.get(Number(courseLesson.id)), ...courseLesson }} sectionOptions={sectionOptions} stepLabel={formatStepLabel(index + 1)} />
+              ))}
+            </div>
+          </FormCard>
+        </div>
+
+        <div className="space-y-6 xl:sticky xl:top-6 xl:self-start">
+          <FormCard title="Create section" description="Create a chapter before attaching lessons into it.">
+            <form onSubmit={(event) => { event.preventDefault(); sectionForm.post(routes.sectionStore) }} className="space-y-4">
+              <label className="grid gap-2 text-sm text-slate-200"><span>Title</span><input value={sectionForm.data.title} onChange={(event) => sectionForm.setData('title', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" /></label>
+              <label className="grid gap-2 text-sm text-slate-200"><span>Slug</span><input value={sectionForm.data.slug} onChange={(event) => sectionForm.setData('slug', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" placeholder="auto-generated if blank" /></label>
+              <label className="grid gap-2 text-sm text-slate-200"><span>Description</span><textarea value={sectionForm.data.description} onChange={(event) => sectionForm.setData('description', event.target.value)} rows={4} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm leading-7 text-white outline-none" /></label>
+              <button type="submit" disabled={sectionForm.processing} className="w-full rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">{sectionForm.processing ? 'Creating...' : 'Create section'}</button>
+            </form>
+          </FormCard>
+
+          <FormCard title="Attach lesson" description="Attach an existing Academy lesson to this course without duplicating content.">
+            <form onSubmit={(event) => { event.preventDefault(); attachForm.post(routes.attachLesson) }} className="space-y-4">
+              <NovaSelect label="Lesson" value={attachForm.data.lesson_id} onChange={(nextValue) => attachForm.setData('lesson_id', nextValue || '')} options={attachableLessonOptions.length ? attachableLessonOptions : lessonOptions} className="rounded-2xl bg-black/20" />
+              <NovaSelect label="Section" value={attachForm.data.section_id} onChange={(nextValue) => attachForm.setData('section_id', nextValue || '')} options={sectionOptions} searchable={false} className="rounded-2xl bg-black/20" />
+              <label className="grid gap-2 text-sm text-slate-200"><span>Order</span><input type="number" value={attachForm.data.order_num} onChange={(event) => attachForm.setData('order_num', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" /></label>
+              <NovaSelect label="Access override" value={attachForm.data.access_override} onChange={(nextValue) => attachForm.setData('access_override', nextValue || '')} options={accessOverrideOptions} searchable={false} className="rounded-2xl bg-black/20" />
+              <CheckboxCardField
+                label="Required for completion"
+                checked={Boolean(attachForm.data.is_required)}
+                onChange={(event) => attachForm.setData('is_required', event.target.checked)}
+                description="Only required lessons count toward course completion."
+              />
+              <button type="submit" disabled={attachForm.processing || !attachForm.data.lesson_id} className="w-full rounded-full border border-amber-300/25 bg-amber-300/12 px-5 py-3 text-sm font-semibold text-amber-100">{attachForm.processing ? 'Attaching...' : 'Attach lesson'}</button>
+            </form>
+          </FormCard>
+        </div>
+      </div>
+    </AdminLayout>
+  )
+}