@extends('layouts.app')
@section('title', 'Course Builder')
@section('content')

  @include('partials.flash')

  @php
    $moduleTypes = \App\Models\CourseModule::TYPES;
    $qTypes = \App\Models\CourseQuestion::TYPES;
  @endphp

  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-stack-lg">
    <div>
      <a href="{{ route('admin.courses.index') }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-outline hover:text-primary mb-1">
        <span class="material-symbols-outlined text-[18px]">arrow_back</span> Courses
      </a>
      <h3 class="text-headline-md font-headline-md text-on-surface">{{ $course->title }}</h3>
      <p class="text-label-md font-label-md text-outline">{{ $course->modules->count() }} modules · Build the learning path and question banks</p>
    </div>
    <div class="flex items-center gap-2">
      <a href="{{ route('admin.courses.images', $course) }}" class="inline-flex items-center gap-1.5 bg-surface-container-high text-on-surface-variant px-4 py-2 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest"><span class="material-symbols-outlined text-[18px]">image</span> Images</a>
      <a href="{{ route('admin.courses.tracking', $course) }}" class="inline-flex items-center gap-1.5 bg-surface-container-high text-on-surface-variant px-4 py-2 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest"><span class="material-symbols-outlined text-[18px]">insights</span> Tracking</a>
      <a href="{{ route('admin.courses.edit', $course) }}" class="inline-flex items-center gap-1.5 bg-surface-container-high text-on-surface-variant px-4 py-2 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest"><span class="material-symbols-outlined text-[18px]">settings</span> Course settings</a>
    </div>
  </div>

  {{-- Bulk import modules --}}
  <div class="surface-card rounded-xl p-6 mb-stack-lg">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
      <div>
        <h4 class="text-headline-md font-headline-md text-on-surface flex items-center gap-2"><span class="material-symbols-outlined text-primary">upload_file</span> Import modules</h4>
        <p class="text-label-md font-label-md text-outline mt-1">Bulk-create modules, content blocks and questions from a JSON file.</p>
      </div>
      <div class="flex items-center gap-2">
        <a href="{{ route('admin.courses.import.sample') }}" class="inline-flex items-center gap-1.5 bg-surface-container-high text-on-surface-variant px-4 py-2 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest"><span class="material-symbols-outlined text-[18px]">download</span> Sample JSON</a>
        <button type="button" onclick="toggle('importForm')" class="inline-flex items-center gap-1.5 bg-primary text-on-primary px-4 py-2 rounded-lg text-label-md font-label-md hover:opacity-90"><span class="material-symbols-outlined text-[18px]">upload</span> Import</button>
      </div>
    </div>
    <form id="importForm" method="POST" action="{{ route('admin.courses.modules.import', $course) }}" enctype="multipart/form-data" class="hidden mt-4 flex flex-col sm:flex-row items-stretch sm:items-end gap-3">
      @csrf
      <div class="flex-1">
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">JSON file</label>
        <input type="file" name="file" accept=".json,application/json" required class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
      </div>
      <button type="submit" class="bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90">Upload &amp; import</button>
    </form>
  </div>

  {{-- Add module --}}
  <div class="surface-card rounded-xl p-6 mb-stack-lg">
    <h4 class="text-headline-md font-headline-md text-on-surface mb-4 flex items-center gap-2"><span class="material-symbols-outlined text-primary">add_circle</span> Add module</h4>
    <form method="POST" action="{{ route('admin.courses.modules.store', $course) }}" class="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
      @csrf
      <div class="md:col-span-6">
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Title</label>
        <input type="text" name="title" required value="{{ old('title') }}" placeholder="e.g. Introduction to Fire Safety" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
      </div>
      <div class="md:col-span-4">
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Type</label>
        <select name="module_type" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
          @foreach($moduleTypes as $val => $label)<option value="{{ $val }}">{{ $label }}</option>@endforeach
        </select>
      </div>
      <div class="md:col-span-2">
        <button type="submit" class="w-full bg-primary text-on-primary px-4 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90">Add</button>
      </div>
    </form>
  </div>

  {{-- Modules (each card has its own edit/question forms, so the list must NOT be wrapped in a form) --}}
  <div class="flex items-center justify-between mb-3">
    <h4 class="text-headline-md font-headline-md text-on-surface">Modules</h4>
    <button type="button" onclick="saveModuleOrder()" class="inline-flex items-center gap-1.5 text-label-md font-label-md text-primary font-bold hover:underline"><span class="material-symbols-outlined text-[18px]">save</span> Save order</button>
  </div>

  <div>
    <div id="moduleList" class="space-y-4">
      @forelse($course->modules as $module)
        @php $isAssessment = in_array($module->module_type, ['knowledge_check','final_assessment'], true); @endphp
        <div class="surface-card rounded-xl overflow-hidden module-item" data-id="{{ $module->id }}">

          <div class="flex items-center gap-3 px-5 py-4 border-b border-outline-variant/60">
            <div class="flex flex-col">
              <button type="button" class="text-outline hover:text-primary leading-none" onclick="moveModule(this,-1)"><span class="material-symbols-outlined text-[18px]">expand_less</span></button>
              <button type="button" class="text-outline hover:text-primary leading-none" onclick="moveModule(this,1)"><span class="material-symbols-outlined text-[18px]">expand_more</span></button>
            </div>
            <span class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-label-md font-bold text-on-surface-variant shrink-0">{{ $loop->iteration }}</span>
            <div class="flex-1 min-w-0">
              <p class="text-body-md font-body-md text-on-surface font-semibold truncate">{{ $module->title }}</p>
              <p class="text-label-md font-label-md text-outline">
                {{ $moduleTypes[$module->module_type] ?? $module->module_type }}
                @if($isAssessment) · {{ $module->questions->count() }} questions · pass {{ $module->pass_mark }}% @endif
              </p>
            </div>
            @unless($isAssessment)
              <a href="{{ route('admin.courses.modules.content', [$course, $module]) }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold hover:underline px-2 py-1"><span class="material-symbols-outlined text-[18px]">edit_note</span> Content ({{ $module->blocks->count() }})</a>
            @endunless
            <button type="button" onclick="toggle('mod-edit-{{ $module->id }}')" class="text-label-md font-label-md text-on-surface-variant hover:text-primary px-2 py-1">Edit</button>
            <button type="submit" form="del-mod-{{ $module->id }}" onclick="return confirm('Delete this module and its questions?')" class="text-error hover:bg-error-container rounded-lg w-8 h-8 flex items-center justify-center"><span class="material-symbols-outlined text-[20px]">delete</span></button>
          </div>

          {{-- Edit module settings --}}
          <div id="mod-edit-{{ $module->id }}" class="hidden px-5 py-4 bg-surface-container-low border-b border-outline-variant/60">
            <form method="POST" action="{{ route('admin.courses.modules.update', [$course, $module]) }}" enctype="multipart/form-data" class="space-y-3">
              @csrf @method('PUT')
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Title</label>
                  <input type="text" name="title" value="{{ $module->title }}" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
                </div>
                <div>
                  <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Type</label>
                  <select name="module_type" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
                    @foreach($moduleTypes as $val => $label)<option value="{{ $val }}" @selected($module->module_type===$val)>{{ $label }}</option>@endforeach
                  </select>
                </div>
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
                <div class="sm:col-span-3">
                  <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Content note (optional)</label>
                  <textarea name="content" rows="2" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none" placeholder="Short note (rich content is built in the Content editor)">{{ $module->content }}</textarea>
                </div>
                <div>
                  <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Min. time (sec)</label>
                  <input type="number" name="min_seconds" min="0" value="{{ $module->min_seconds }}" placeholder="0" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
                  <p class="text-label-md font-label-md text-outline mt-1">Before "Mark complete" unlocks</p>
                </div>
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
                <div class="sm:col-span-4">
                  <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Header image (shown at the top of the module)</label>
                  @if($module->module_image)
                    <div class="flex items-center gap-3 mb-2">
                      <img src="{{ \App\Models\CourseContentBlock::imageUrl($module->module_image) }}" class="h-14 rounded-lg object-cover">
                      <label class="inline-flex items-center gap-1.5 text-label-md font-label-md text-error cursor-pointer"><input type="checkbox" name="remove_module_image" value="1" class="rounded border-outline-variant text-error"> Remove</label>
                    </div>
                  @endif
                  <input type="file" name="module_image" accept="image/*" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
                </div>
              </div>
              <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                <div>
                  <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Pass mark %</label>
                  <input type="number" name="pass_mark" min="1" max="100" value="{{ $module->pass_mark }}" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
                </div>
                <div>
                  <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Q / attempt</label>
                  <input type="number" name="questions_per_attempt" min="1" value="{{ $module->questions_per_attempt }}" placeholder="all" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
                </div>
                <div>
                  <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Max attempts</label>
                  <input type="number" name="max_attempts" min="1" value="{{ $module->max_attempts }}" placeholder="∞" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
                </div>
                <div class="flex flex-col justify-end gap-1.5 text-label-md font-label-md text-on-surface-variant">
                  <label class="flex items-center gap-2"><input type="checkbox" name="shuffle_questions" value="1" @checked($module->shuffle_questions) class="rounded border-outline-variant text-primary"> Shuffle Qs</label>
                  <label class="flex items-center gap-2"><input type="checkbox" name="shuffle_options" value="1" @checked($module->shuffle_options) class="rounded border-outline-variant text-primary"> Shuffle options</label>
                </div>
              </div>
              <div class="flex justify-end"><button type="submit" class="bg-primary text-on-primary px-5 py-2 rounded-lg text-label-md font-label-md hover:opacity-90">Save module</button></div>
            </form>
          </div>

          {{-- Question bank (assessments only) --}}
          @if($isAssessment)
            <div id="module-{{ $module->id }}" class="px-5 py-4">
              <div class="flex items-center justify-between mb-3">
                <p class="text-label-md font-label-md text-outline uppercase tracking-wide">Question bank ({{ $module->questions->count() }})</p>
                <button type="button" onclick="toggle('q-add-{{ $module->id }}')" class="inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold hover:underline"><span class="material-symbols-outlined text-[18px]">add</span> Add question</button>
              </div>

              @forelse($module->questions as $q)
                <div class="rounded-lg border border-outline-variant/60 p-3 mb-2">
                  <div class="flex items-start gap-2">
                    <span class="material-symbols-outlined text-[18px] text-outline mt-0.5">help</span>
                    <div class="flex-1 min-w-0">
                      <p class="text-body-md font-body-md text-on-surface font-medium">{{ $q->text }}</p>
                      <p class="text-label-md font-label-md text-outline mb-1.5">{{ $qTypes[$q->type] ?? $q->type }} · {{ $q->points }} pt{{ $q->points>1?'s':'' }}</p>
                      <ul class="space-y-0.5">
                        @foreach($q->options as $opt)
                          <li class="text-label-md font-label-md flex items-center gap-1.5 {{ $opt->is_correct ? 'text-primary font-semibold' : 'text-on-surface-variant' }}">
                            <span class="material-symbols-outlined text-[15px]">{{ $opt->is_correct ? 'check_circle' : 'radio_button_unchecked' }}</span>{{ $opt->text }}
                          </li>
                        @endforeach
                      </ul>
                    </div>
                    <form method="POST" action="{{ route('admin.courses.questions.destroy', [$course, $module, $q]) }}" onsubmit="return confirm('Delete this question?')">
                      @csrf @method('DELETE')
                      <button type="submit" class="text-error hover:bg-error-container rounded w-7 h-7 flex items-center justify-center"><span class="material-symbols-outlined text-[18px]">delete</span></button>
                    </form>
                  </div>
                </div>
              @empty
                <p class="text-label-md font-label-md text-outline mb-2">No questions yet — add some to build this assessment.</p>
              @endforelse

              {{-- Add question form --}}
              <div id="q-add-{{ $module->id }}" class="hidden mt-3 rounded-lg bg-surface-container-low p-4">
                @include('admin.courses._question-form', ['course' => $course, 'module' => $module])
              </div>
            </div>
          @endif

        </div>
      @empty
        <div class="surface-card rounded-xl px-6 py-12 text-center">
          <span class="material-symbols-outlined text-[42px] text-outline mb-2">library_books</span>
          <p class="text-body-lg font-body-lg text-on-surface font-semibold">No modules yet</p>
          <p class="text-body-md font-body-md text-outline">Add your first module above to start building this course.</p>
        </div>
      @endforelse
    </div>
  </div>

  {{-- Standalone forms kept OUTSIDE the module list so nothing is nested --}}
  <form id="reorderForm" method="POST" action="{{ route('admin.courses.modules.reorder', $course) }}" class="hidden">@csrf</form>
  @foreach($course->modules as $module)
    <form id="del-mod-{{ $module->id }}" method="POST" action="{{ route('admin.courses.modules.destroy', [$course, $module]) }}" class="hidden">@csrf @method('DELETE')</form>
  @endforeach

  <script>
    function toggle(id){ var el=document.getElementById(id); if(el) el.classList.toggle('hidden'); }
    function moveModule(btn, dir){
      var item = btn.closest('.module-item');
      var list = document.getElementById('moduleList');
      if(dir<0 && item.previousElementSibling){ list.insertBefore(item, item.previousElementSibling); }
      if(dir>0 && item.nextElementSibling){ list.insertBefore(item.nextElementSibling, item); }
    }
    function saveModuleOrder(){
      var form = document.getElementById('reorderForm');
      form.querySelectorAll('.order-input').forEach(function(e){ e.remove(); });
      document.querySelectorAll('#moduleList .module-item').forEach(function(it){
        var i = document.createElement('input');
        i.type = 'hidden'; i.name = 'order[]'; i.value = it.dataset.id; i.className = 'order-input';
        form.appendChild(i);
      });
      form.submit();
    }
  </script>

@endsection