@extends('layouts.app')
@section('title', $module->title)
@section('content')

  @include('partials.flash')

  @php $total = $questions->count(); $perQ = 60; $r = 32; $circ = 2 * M_PI * $r; @endphp

  <a href="{{ auth()->user()->learnRoute('course.show', $course->slug) }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-outline hover:text-primary mb-stack-lg">
    <span class="material-symbols-outlined text-[18px]">arrow_back</span> Back to {{ $course->title }}
  </a>

  {{-- Header: title + per-question countdown (same ring as the module timer) --}}
  <div class="surface-card rounded-xl p-6 mb-stack-lg">
    <div class="flex items-center gap-4">
      <span class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center shrink-0"><span class="material-symbols-outlined text-primary">quiz</span></span>
      <div class="flex-1 min-w-0">
        <h3 class="text-headline-md font-headline-md text-on-surface">{{ $module->title }}</h3>
        <p class="text-label-md font-label-md text-outline">
          {{ $total }} {{ Str::plural('question', $total) }} · Pass mark {{ $module->pass_mark }}%
          @if($module->max_attempts) · Attempt {{ $attemptNo }} of {{ $module->max_attempts }} @else · Attempt {{ $attemptNo }} @endif
          · {{ $perQ }}s per question
        </p>
      </div>
      {{-- Countdown ring --}}
      <div class="relative w-[72px] h-[72px] shrink-0">
        <svg width="72" height="72" viewBox="0 0 72 72" class="-rotate-90">
          <circle cx="36" cy="36" r="{{ $r }}" fill="none" stroke="#EAEEF2" stroke-width="6"/>
          <circle id="qRing" cx="36" cy="36" r="{{ $r }}" fill="none" stroke="#0E7C7B" stroke-width="6" stroke-linecap="round"
            stroke-dasharray="{{ round($circ, 1) }}" stroke-dashoffset="0" style="transition: stroke-dashoffset 1s linear"/>
        </svg>
        <div class="absolute inset-0 flex items-center justify-center">
          <span id="qTime" class="text-lg font-bold text-on-surface tabular-nums leading-none">{{ $perQ }}</span>
        </div>
      </div>
    </div>
    {{-- Progress bar --}}
    <div class="mt-4 flex items-center gap-3">
      <div class="flex-1 h-2 rounded-full bg-surface-container-high overflow-hidden">
        <div id="qBar" class="h-full bg-primary rounded-full transition-all duration-300" style="width: {{ $total ? round(100 / $total, 2) : 0 }}%"></div>
      </div>
      <span class="text-label-md font-label-md text-on-surface-variant shrink-0">Question <span id="qNum" class="font-bold text-on-surface">1</span> of {{ $total }}</span>
    </div>
  </div>

  <form method="POST" action="{{ auth()->user()->learnRoute('course.assessment.submit', [$course->slug, $module->id]) }}" id="assessForm">
    @csrf
    @foreach($questions as $i => $q)
      <div class="q-step surface-card rounded-xl p-6 {{ $i === 0 ? '' : 'hidden' }}" data-step="{{ $i }}">
        <div class="flex items-start gap-3 mb-4">
          <span class="w-7 h-7 rounded-full bg-surface-container-high flex items-center justify-center text-label-md font-bold text-on-surface-variant shrink-0">{{ $i + 1 }}</span>
          <div class="flex-1">
            <p class="text-body-lg font-body-lg text-on-surface font-semibold">{{ $q->text }}</p>
            @if($q->type === 'multiple')<p class="text-label-md font-label-md text-outline mt-0.5">Select all that apply</p>@endif
          </div>
        </div>
        <div class="space-y-2 pl-10">
          @foreach($q->options as $opt)
            <label class="flex items-center gap-3 px-4 py-2.5 rounded-lg border border-outline-variant/60 hover:bg-surface-container-high cursor-pointer">
              @if($q->type === 'multiple')
                <input type="checkbox" name="answers[{{ $q->id }}][]" value="{{ $opt->id }}" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20">
              @else
                <input type="radio" name="answers[{{ $q->id }}]" value="{{ $opt->id }}" class="w-5 h-5 border-outline-variant text-primary focus:ring-primary/20">
              @endif
              <span class="text-body-md font-body-md text-on-surface">{{ $opt->text }}</span>
            </label>
          @endforeach
        </div>
      </div>
    @endforeach

    <div class="flex items-center justify-between mt-stack-lg">
      <a href="{{ auth()->user()->learnRoute('course.show', $course->slug) }}" class="px-5 py-2.5 rounded-lg text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high">Exit</a>
      <button type="button" id="nextBtn" class="bg-primary text-on-primary px-6 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 inline-flex items-center gap-1.5">
        <span class="lbl">{{ $total <= 1 ? 'Submit assessment' : 'Next question' }}</span>
        <span class="material-symbols-outlined text-[18px] ic">{{ $total <= 1 ? 'check' : 'arrow_forward' }}</span>
      </button>
    </div>
  </form>

  <script>
    (function () {
      var form = document.getElementById('assessForm');
      var steps = Array.prototype.slice.call(document.querySelectorAll('.q-step'));
      var total = {{ $total }};
      var perQ = {{ $perQ }};
      var circ = {{ round($circ, 1) }};
      if (!total) return;

      var ring = document.getElementById('qRing');
      var timeEl = document.getElementById('qTime');
      var numEl = document.getElementById('qNum');
      var barEl = document.getElementById('qBar');
      var nextBtn = document.getElementById('nextBtn');

      var current = 0, remaining = perQ, tick = null, submitting = false;

      function renderTimer() {
        timeEl.textContent = remaining;
        ring.setAttribute('stroke-dashoffset', (circ * (1 - remaining / perQ)).toFixed(1));
        var urgent = remaining <= 10;
        ring.setAttribute('stroke', urgent ? '#C1473A' : '#0E7C7B');
        timeEl.style.color = urgent ? '#C1473A' : '';
      }

      function startTimer() {
        clearInterval(tick);
        remaining = perQ;
        // Reset the ring without a reverse-sweep animation.
        ring.style.transition = 'none';
        renderTimer();
        void ring.getBoundingClientRect();
        ring.style.transition = 'stroke-dashoffset 1s linear';
        tick = setInterval(function () {
          remaining--;
          if (remaining < 0) { clearInterval(tick); advance(); return; }
          renderTimer();
        }, 1000);
      }

      function showStep(i) {
        steps.forEach(function (s, n) { s.classList.toggle('hidden', n !== i); });
        numEl.textContent = (i + 1);
        barEl.style.width = ((i + 1) / total * 100) + '%';
        var last = (i === total - 1);
        nextBtn.querySelector('.lbl').textContent = last ? 'Submit assessment' : 'Next question';
        nextBtn.querySelector('.ic').textContent = last ? 'check' : 'arrow_forward';
        startTimer();
      }

      function advance() {
        if (current < total - 1) { current++; showStep(current); }
        else {                                   // last question — submit (time up or clicked)
          if (submitting) return;
          submitting = true;
          clearInterval(tick);
          form.submit();
        }
      }

      nextBtn.addEventListener('click', advance);
      showStep(0);   // kick off question 1 + its timer
    })();
  </script>

@endsection