@extends('layouts.app')
@section('title', 'Assessment Result')
@section('content')

  @php
    $passed = $attempt->passed;
    $canRetake = ! $passed && (! $module->max_attempts || $attempt->attempt_number < $module->max_attempts);
  @endphp

  {{-- Result banner --}}
  <div class="surface-card rounded-xl p-6 mb-stack-lg">
    <div class="flex flex-col sm:flex-row sm:items-center gap-5">
      <div class="relative w-24 h-24 shrink-0 mx-auto sm:mx-0">
        <svg width="96" height="96" viewBox="0 0 96 96" class="-rotate-90">
          <circle cx="48" cy="48" r="42" fill="none" stroke="#EAEEF2" stroke-width="8"/>
          <circle cx="48" cy="48" r="42" fill="none" stroke="{{ $passed ? '#0E7C7B' : '#C1473A' }}" stroke-width="8"
            stroke-dasharray="{{ round(2 * M_PI * 42) }}" stroke-dashoffset="{{ round(2 * M_PI * 42 * (1 - $attempt->score_percent / 100)) }}" stroke-linecap="round"/>
        </svg>
        <div class="absolute inset-0 flex items-center justify-center font-bold text-headline-md text-on-surface">{{ $attempt->score_percent }}%</div>
      </div>
      <div class="flex-1 text-center sm:text-left">
        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-label-md font-label-md {{ $passed ? 'bg-primary/10 text-primary' : 'bg-error-container text-error' }}">
          <span class="material-symbols-outlined text-[18px]">{{ $passed ? 'verified' : 'cancel' }}</span> {{ $passed ? 'Passed' : 'Not passed' }}
        </span>
        <h3 class="text-headline-md font-headline-md text-on-surface mt-2">{{ $module->title }}</h3>
        <p class="text-body-md font-body-md text-outline">{{ $course->title }} · Pass mark {{ $module->pass_mark }}% · Attempt {{ $attempt->attempt_number }}</p>
      </div>
      <div class="flex flex-col gap-2 shrink-0">
        <a href="{{ auth()->user()->learnRoute('course.show', $course->slug) }}" class="text-center bg-surface-container-high text-on-surface-variant px-5 py-2.5 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest">Back to course</a>
        @if($canRetake)
          <a href="{{ auth()->user()->learnRoute('course.assessment.start', [$course->slug, $module->id]) }}" class="text-center bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90">Retake</a>
        @endif
      </div>
    </div>
  </div>

  {{-- Per-question review --}}
  <h4 class="text-headline-md font-headline-md text-on-surface mb-3">Review</h4>
  <div class="space-y-3">
    @foreach($attempt->answers ?? [] as $i => $log)
      @php $q = $questions->get($log['question_id']); @endphp
      @continue(! $q)
      @php $selected = collect($log['selected'] ?? []); $wasCorrect = $log['correct'] ?? false; @endphp
      <div class="surface-card rounded-xl p-5 border-l-4 {{ $wasCorrect ? 'border-primary' : 'border-error' }}">
        <div class="flex items-start gap-2 mb-3">
          <span class="material-symbols-outlined text-[20px] {{ $wasCorrect ? 'text-primary' : 'text-error' }}">{{ $wasCorrect ? 'check_circle' : 'cancel' }}</span>
          <p class="text-body-md font-body-md text-on-surface font-semibold flex-1">{{ $loop->iteration }}. {{ $q->text }}</p>
        </div>
        <ul class="space-y-1 pl-7">
          @foreach($q->options as $opt)
            @php $chosen = $selected->contains($opt->id); @endphp
            <li class="text-body-md font-body-md flex items-center gap-2
                {{ $opt->is_correct ? 'text-primary font-semibold' : ($chosen ? 'text-error' : 'text-on-surface-variant') }}">
              <span class="material-symbols-outlined text-[16px]">
                {{ $opt->is_correct ? 'check_circle' : ($chosen ? 'cancel' : 'radio_button_unchecked') }}
              </span>
              {{ $opt->text }}
              @if($chosen && !$opt->is_correct)<span class="text-label-md">(your answer)</span>@endif
              @if($opt->is_correct && !$chosen)<span class="text-label-md">(correct answer)</span>@endif
            </li>
          @endforeach
        </ul>
        @if($q->explanation)
          <p class="text-label-md font-label-md text-outline mt-2 pl-7"><span class="font-bold">Why:</span> {{ $q->explanation }}</p>
        @endif
      </div>
    @endforeach
  </div>

@endsection