{{-- Add-question form for one assessment module. --}}
<form method="POST" action="{{ route('admin.courses.questions.store', [$course, $module]) }}" class="space-y-3 qform" data-module="{{ $module->id }}">
  @csrf
  <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
    <div class="sm:col-span-2">
      <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Question type</label>
      <select name="type" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none qtype" onchange="qtypeChanged(this)">
        @foreach(\App\Models\CourseQuestion::TYPES as $val => $label)<option value="{{ $val }}">{{ $label }}</option>@endforeach
      </select>
    </div>
    <div>
      <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Points</label>
      <input type="number" name="points" min="1" max="100" value="1" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
    </div>
  </div>

  <div>
    <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Question</label>
    <textarea name="text" rows="2" required class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none" placeholder="Type the question…"></textarea>
  </div>

  <div>
    <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Options — tick the correct answer(s)</label>
    <div class="space-y-2 qoptions">
      @for($i = 0; $i < 4; $i++)
        <div class="flex items-center gap-2 qopt-row">
          <input type="checkbox" name="correct[]" value="{{ $i }}" class="w-5 h-5 rounded border-outline-variant text-primary shrink-0 qcorrect" onchange="enforceSingle(this)">
          <input type="text" name="options[]" placeholder="Option {{ $i + 1 }}" class="flex-1 px-3 py-2 bg-surface-container rounded-lg border-none text-body-md outline-none">
        </div>
      @endfor
    </div>
    <button type="button" onclick="addOption(this)" class="mt-2 inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold hover:underline"><span class="material-symbols-outlined text-[16px]">add</span> Add option</button>
  </div>

  <div>
    <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Explanation (shown after answering, optional)</label>
    <input type="text" name="explanation" class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
  </div>

  <div class="flex justify-end gap-2">
    <button type="submit" class="bg-primary text-on-primary px-5 py-2 rounded-lg text-label-md font-label-md hover:opacity-90">Add question</button>
  </div>
</form>

@once
<script>
  function enforceSingle(box){
    var form = box.closest('.qform');
    var type = form.querySelector('.qtype').value;
    if((type === 'single' || type === 'true_false') && box.checked){
      form.querySelectorAll('.qcorrect').forEach(function(c){ if(c !== box) c.checked = false; });
    }
  }
  function qtypeChanged(sel){
    var form = sel.closest('.qform');
    // Uncheck extras when switching to a single-answer type
    if(sel.value === 'single' || sel.value === 'true_false'){
      var seen = false;
      form.querySelectorAll('.qcorrect').forEach(function(c){ if(c.checked){ if(seen) c.checked=false; else seen=true; } });
    }
  }
  function addOption(btn){
    var wrap = btn.previousElementSibling; // .qoptions
    var idx = wrap.querySelectorAll('.qopt-row').length;
    var row = document.createElement('div');
    row.className = 'flex items-center gap-2 qopt-row';
    row.innerHTML = '<input type="checkbox" name="correct[]" value="'+idx+'" class="w-5 h-5 rounded border-outline-variant text-primary shrink-0 qcorrect" onchange="enforceSingle(this)">'+
      '<input type="text" name="options[]" placeholder="Option '+(idx+1)+'" class="flex-1 px-3 py-2 bg-surface-container rounded-lg border-none text-body-md outline-none">';
    wrap.appendChild(row);
  }
</script>
@endonce