@extends('layouts.portal')

@php
    $letters = fn ($opts) => collect($opts)->map(function ($o, $i) {
        if (is_array($o)) { return ['key' => (string) ($o['key'] ?? chr(65 + $i)), 'text' => (string) ($o['text'] ?? $o['label'] ?? '')]; }
        return ['key' => is_int($i) ? chr(65 + $i) : (string) $i, 'text' => (string) $o];
    })->values();
    $review = session('quiz_review') ?: ($last?->answers ?? null);
    $fresh = session()->has('quiz_review');
    $passed = $last && $last->status === 'passed';
    $qCount = $questions->count();
    $courseModel = $quiz->course;
@endphp

@section('title', $quiz->title)
@section('subtitle', ($courseModel ? $courseModel->title.' · ' : '').$qCount.' questions · pass mark '.$quiz->pass_percent.'%')
@section('actions')
  @if($courseModel)<a class="btn btn-secondary btn-sm" href="{{ route('lms.course', $courseModel->slug) }}"><x-icon name="arrow-left" :size="15"/> Course home</a>@endif
@endsection

@section('content')
<div class="lm-quiz">
  @if($last)
    <section class="card lm-qscore {{ $passed ? 'is-pass' : 'is-fail' }}" aria-labelledby="qz-score-h">
      <div class="ring" style="--p:{{ min(100, (float) $last->score) }}" role="img" aria-label="Score {{ round($last->score) }} percent"><b>{{ round($last->score) }}%</b></div>
      <div class="grow">
        <h2 id="qz-score-h" class="lm-qscore-h">{{ $passed ? 'You passed this quiz' : 'Not passed yet' }}</h2>
        <p class="mb-0 muted">{{ $fresh ? 'Just now' : 'Last attempt '.$last->submitted_at?->diffForHumans() }} · pass mark {{ $quiz->pass_percent }}%. @if($review){{ collect($review)->where('ok', true)->count() }} of {{ count($review) }} correct.@endif</p>
      </div>
      <x-pill :status="$last->status"/>
    </section>

    @if($review)
    <section class="panel" aria-labelledby="qz-rev-h">
      <div class="panel-head"><h2 id="qz-rev-h">Answers &amp; explanations</h2><span class="small muted">From your {{ $fresh ? 'latest' : 'last' }} attempt</span></div>
      @foreach($quiz->questions as $i => $q)
        @php
            $r = $review[$q->id] ?? ['given' => null, 'ok' => false];
            $opts = $letters($q->options)->keyBy('key');
            $state = $r['given'] === null || $r['given'] === '' ? 'skip' : ($r['ok'] ? 'ok' : 'no');
        @endphp
        <article class="q-review {{ $state }}">
          <div class="row between mb-1"><b>Question {{ $i + 1 }}</b><span class="pill {{ ['ok' => 'pill-green', 'no' => 'pill-red', 'skip' => 'pill-gray'][$state] }}">{{ ['ok' => 'Correct', 'no' => 'Incorrect', 'skip' => 'Not answered'][$state] }}</span></div>
          <div class="q-text lm-q-text">{{ \App\Support\ExamText::html($q->question) }}</div>
          <dl class="rs-answers">
            <dt>Your answer</dt><dd class="{{ $state === 'ok' ? 'good' : ($state === 'no' ? 'bad' : 'none') }}">@if($state === 'skip')<i>No answer given</i>@else{{ $opts[$r['given']]['text'] ?? $r['given'] }}@endif</dd>
            @if($state !== 'ok')<dt>Correct answer</dt><dd class="good">{{ $opts[$q->correct_key]['text'] ?? $q->correct_key }}</dd>@endif
          </dl>
          @if($q->explanation)<p class="rs-expl"><b>Why:</b> {{ $q->explanation }}</p>@endif
        </article>
      @endforeach
    </section>
    @endif
  @endif

  <form method="post" action="{{ route('lms.quiz.submit', $quiz) }}" class="panel lm-qform" aria-labelledby="qz-form-h" data-quiz-form>
    @csrf
    <div class="panel-head"><h2 id="qz-form-h">{{ $last ? 'Try again' : 'Answer the questions' }}</h2><span class="small muted"><b data-q-answered>0</b> of {{ $qCount }} answered</span></div>
    <div class="panel-body">
      @forelse($questions as $i => $q)
        <fieldset class="lm-qfield">
          <legend><span class="lm-qn">{{ $i + 1 }}</span> <span class="lm-qt">{{ \App\Support\ExamText::html($q->question) }}</span></legend>
          @foreach($letters($q->options) as $o)
            <label class="q-opt"><input type="radio" name="answers[{{ $q->id }}]" value="{{ $o['key'] }}"><span class="k" aria-hidden="true">{{ $o['key'] }}</span><span class="grow">{{ \App\Support\ExamText::option($o['text']) }}</span></label>
          @endforeach
        </fieldset>
      @empty
        <x-empty icon="list-checks" title="No questions yet" text="This quiz does not have any questions. Your trainer will add them soon."/>
      @endforelse
    </div>
    @if($qCount)
    <div class="lm-qfoot"><span class="small muted">You can retake this quiz as often as you like. Your best result is kept.</span><button type="submit" class="btn btn-primary">Submit answers <x-icon name="arrow-right" :size="16"/></button></div>
    @endif
  </form>
</div>
@endsection

@push('scripts')
<script nonce="{{ csp_nonce() }}">
(function () {
  var f = document.querySelector('[data-quiz-form]'); if (!f) return;
  var out = f.querySelector('[data-q-answered]');
  var upd = function () { var n = {}; Array.prototype.forEach.call(f.querySelectorAll('input[type=radio]:checked'), function (i) { n[i.name] = 1; }); out.textContent = Object.keys(n).length; };
  f.addEventListener('change', function (e) { if (e.target.matches('input[type=radio]')) { var g = f.querySelectorAll('input[name="' + e.target.name + '"]'); Array.prototype.forEach.call(g, function (r) { r.closest('.q-opt').classList.toggle('selected', r.checked); }); upd(); } });
  f.addEventListener('submit', function (e) {
    var total = f.querySelectorAll('.lm-qfield').length, answered = parseInt(out.textContent, 10) || 0;
    if (answered < total && !window.confirm((total - answered) + ' question(s) are unanswered and will score zero. Submit anyway?')) e.preventDefault();
  });
})();
</script>
@endpush