@extends('layouts.portal')
@section('title', 'Curriculum')
@section('subtitle', $course->title.' · '.$modules->count().' '.\Illuminate\Support\Str::plural('module', $modules->count()).', '.$modules->sum(fn ($m) => $m->lessons->count()).' lessons')
@section('actions')
  <a class="btn btn-secondary btn-sm" href="{{ route('admin.courses.edit', $course) }}"><x-icon name="edit" :size="16"/> Course details</a>
  <a class="btn btn-secondary btn-sm" href="{{ route('admin.materials.index', ['course' => $course->id]) }}"><x-icon name="upload" :size="16"/> Upload videos &amp; PDFs</a>
@endsection

@section('content')
@php $icons = ['video' => 'play-circle', 'reading' => 'file-text', 'lab' => 'flask', 'quiz' => 'list-checks']; @endphp
<div class="callout" style="margin-bottom:22px">
  <x-icon name="info" :size="20"/>
  <div class="small">Modules and lessons are ordered by their <b>position</b> number (lowest first). Lesson videos and PDF files are uploaded in <a href="{{ route('admin.materials.index', ['course' => $course->id]) }}">Learning materials</a> and attached to a lesson there; a lesson can also link to a YouTube or Vimeo video.</div>
</div>

@forelse($modules as $m)
  <details class="acc-module ad-module" @if($loop->first || $errors->any()) open @endif>
    <summary>
      <span class="row" style="gap:12px;flex-wrap:nowrap;min-width:0"><span class="ad-chip"><b>{{ $m->sort_order }}</b></span><span style="min-width:0"><span class="ad-ellipsis">{{ $m->title }}</span><span class="xs muted" style="font-weight:500">{{ $m->lessons->count() }} {{ \Illuminate\Support\Str::plural('lesson', $m->lessons->count()) }}@if($m->lessons->sum('duration_minutes')) · {{ $m->lessons->sum('duration_minutes') }} min @endif</span></span></span>
      <x-icon name="chevron-down" :size="18"/>
    </summary>
    <div class="ad-module-body">
      <form method="post" action="{{ route('admin.courses.modules.update', $m) }}" class="ad-module-form">
        @csrf @method('PUT')
        <div class="field"><label class="label" for="mt-{{ $m->id }}">Module title</label><input class="input" id="mt-{{ $m->id }}" name="title" value="{{ $m->title }}" required maxlength="180"></div>
        <div class="field"><label class="label" for="mo-{{ $m->id }}">Position</label><input class="input" type="number" id="mo-{{ $m->id }}" name="sort_order" value="{{ $m->sort_order }}" min="0" max="999"></div>
        <div class="field" style="grid-column:1/-1"><label class="label" for="md-{{ $m->id }}">Description</label><input class="input" id="md-{{ $m->id }}" name="description" value="{{ $m->description }}" maxlength="600" placeholder="What this module covers (optional)"></div>
        <div class="row" style="grid-column:1/-1"><button class="btn btn-secondary btn-sm" type="submit"><x-icon name="check" :size="15"/> Save module</button></div>
      </form>

      <div class="ad-lessons">
        @foreach($m->lessons as $l)
          <details class="ad-lesson">
            <summary>
              <x-icon :name="$icons[$l->type] ?? 'file-text'" :size="18"/>
              <span class="grow ad-ellipsis"><b>{{ $l->title }}</b></span>
              <span class="pill pill-gray">{{ ucfirst($l->type) }}</span>
              @if($l->duration_minutes)<span class="xs muted nowrap">{{ $l->duration_minutes }} min</span>@endif
              @if($l->resources->count())<span class="pill pill-blue" title="Files attached in Learning materials"><x-icon name="paperclip" :size="12"/> {{ $l->resources->count() }}</span>@endif
              @unless($l->published)<span class="pill pill-amber">Hidden</span>@endunless
            </summary>
            <div class="ad-lesson-body">
              <form method="post" action="{{ route('admin.courses.lessons.update', $l) }}" id="lf-{{ $l->id }}">
                @csrf @method('PUT')
                <div class="form-grid">
                  <div class="field"><label class="label" for="lt-{{ $l->id }}">Lesson title</label><input class="input" id="lt-{{ $l->id }}" name="title" value="{{ $l->title }}" required maxlength="180"></div>
                  <div class="field"><label class="label" for="ly-{{ $l->id }}">Type</label><select class="select" id="ly-{{ $l->id }}" name="type">@foreach(['video' => 'Video', 'reading' => 'Reading', 'lab' => 'Hands-on lab', 'quiz' => 'Quiz'] as $v => $lab)<option value="{{ $v }}" @selected($l->type === $v)>{{ $lab }}</option>@endforeach</select></div>
                  <div class="field"><label class="label" for="ld-{{ $l->id }}">Duration (minutes)</label><input class="input" type="number" id="ld-{{ $l->id }}" name="duration_minutes" value="{{ $l->duration_minutes }}" min="0" max="1000"></div>
                  <div class="field"><label class="label" for="lo-{{ $l->id }}">Position</label><input class="input" type="number" id="lo-{{ $l->id }}" name="sort_order" value="{{ $l->sort_order }}" min="0" max="999"></div>
                  <div class="field full"><label class="label" for="lv-{{ $l->id }}">Video URL (YouTube / Vimeo)</label><input class="input" type="url" id="lv-{{ $l->id }}" name="video_url" value="{{ $l->video_url }}" maxlength="500" placeholder="https://www.youtube.com/watch?v=…"></div>
                  <div class="field full"><label class="label" for="lc-{{ $l->id }}">Lesson notes / reading content</label><textarea class="textarea" id="lc-{{ $l->id }}" name="content" rows="4" style="min-height:96px">{{ $l->content }}</textarea></div>
                  <div class="field full"><label class="check"><input type="hidden" name="published" value="0"><input type="checkbox" name="published" value="1" @checked($l->published)> <span>Published (visible to enrolled learners)</span></label></div>
                </div>
              </form>
              <div class="row between">
                <button class="btn btn-secondary btn-sm" type="submit" form="lf-{{ $l->id }}"><x-icon name="check" :size="15"/> Save lesson</button>
                <form method="post" action="{{ route('admin.courses.lessons.destroy', $l) }}" data-confirm="Delete the lesson &ldquo;{{ $l->title }}&rdquo; and its attached files? This cannot be undone.">@csrf @method('DELETE')<button class="btn btn-danger btn-sm" type="submit"><x-icon name="trash" :size="15"/> Delete lesson</button></form>
              </div>
            </div>
          </details>
        @endforeach
        @if($m->lessons->isEmpty())<div class="small muted" style="padding:14px 20px">No lessons in this module yet.</div>@endif

        <details class="ad-lesson ad-lesson-new">
          <summary><x-icon name="plus" :size="18"/> <b>Add a lesson to this module</b></summary>
          <div class="ad-lesson-body">
            <form method="post" action="{{ route('admin.courses.lessons.store', $m) }}">
              @csrf
              <div class="form-grid">
                <div class="field"><label class="label" for="nl-t-{{ $m->id }}">Lesson title <span class="req">*</span></label><input class="input" id="nl-t-{{ $m->id }}" name="title" required maxlength="180" placeholder="e.g. Configure virtual network peering"></div>
                <div class="field"><label class="label" for="nl-y-{{ $m->id }}">Type</label><select class="select" id="nl-y-{{ $m->id }}" name="type"><option value="video">Video</option><option value="reading">Reading</option><option value="lab">Hands-on lab</option><option value="quiz">Quiz</option></select></div>
                <div class="field"><label class="label" for="nl-d-{{ $m->id }}">Duration (minutes)</label><input class="input" type="number" id="nl-d-{{ $m->id }}" name="duration_minutes" min="0" max="1000" value="15"></div>
                <div class="field"><label class="label" for="nl-v-{{ $m->id }}">Video URL (optional)</label><input class="input" type="url" id="nl-v-{{ $m->id }}" name="video_url" maxlength="500" placeholder="https://…"></div>
                <div class="field full"><label class="label" for="nl-c-{{ $m->id }}">Notes / reading content (optional)</label><textarea class="textarea" id="nl-c-{{ $m->id }}" name="content" rows="3" style="min-height:80px"></textarea></div>
              </div>
              <button class="btn btn-primary btn-sm" type="submit"><x-icon name="plus" :size="15"/> Add lesson</button>
            </form>
          </div>
        </details>
      </div>

      <div class="row" style="justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line-2)">
        <form method="post" action="{{ route('admin.courses.modules.destroy', $m) }}" data-confirm="Delete the module &ldquo;{{ $m->title }}&rdquo; with all {{ $m->lessons->count() }} lessons and their files? This cannot be undone.">@csrf @method('DELETE')<button class="btn btn-danger btn-sm" type="submit"><x-icon name="trash" :size="15"/> Delete module</button></form>
      </div>
    </div>
  </details>
@empty
  <div class="panel"><x-empty icon="list-checks" title="No modules yet" text="Start with the first module of the syllabus; you can add lessons to it afterwards."/></div>
@endforelse

<section class="panel" style="margin-top:22px">
  <div class="panel-head"><h2>Add a module</h2></div>
  <form class="panel-body" method="post" action="{{ route('admin.courses.modules.store', $course) }}">
    @csrf
    <div class="form-grid">
      <x-field name="title" label="Module title" required placeholder="e.g. Module {{ $modules->count() + 1 }}: Implement virtual networking"/>
      <x-field name="description" label="Short description (optional)" placeholder="What learners will be able to do after this module"/>
    </div>
    <button class="btn btn-primary btn-sm" type="submit"><x-icon name="plus" :size="15"/> Add module</button>
  </form>
</section>
@endsection