@extends('layouts.front')

@section('title', $exam->title . ' — ' . getSiteName())

@section('content')
<section class="page-section active" id="page-exam">

@if($result)
  @if($justSubmitted && $result->status === 'pass' && $examPassPoints > 0)
    <script>
      document.addEventListener('DOMContentLoaded', function(){
        if (window.nexusCelebrate) {
          window.nexusCelebrate('🏆', '+{{ $examPassPoints }} XP · {{ __('front.exam.xp_toast_passed') }}');
        }
      });
    </script>
  @endif
  <div class="container" style="max-width:560px; padding:70px 0 90px;">
    <div class="card result-card {{ $result->status === 'pass' ? 'is-pass' : 'is-fail' }}">
      <span class="eyebrow result-eyebrow">{{ __('front.exam.result_eyebrow') }}</span>

      @php
        $radius = 62;
        $circumference = 2 * M_PI * $radius;
        $offset = $circumference * (1 - $result->score / 100);
      @endphp
      <div class="result-ring-wrap">
        <svg class="result-ring" width="150" height="150" viewBox="0 0 150 150">
          <circle cx="75" cy="75" r="{{ $radius }}" fill="none" stroke="var(--border)" stroke-width="12"/>
          <circle cx="75" cy="75" r="{{ $radius }}" fill="none" stroke="{{ $result->status === 'pass' ? 'var(--green)' : 'var(--coral)' }}" stroke-width="12" stroke-linecap="round"
            stroke-dasharray="{{ round($circumference) }}" stroke-dashoffset="{{ round($offset) }}" transform="rotate(-90 75 75)"/>
          <text x="75" y="82" text-anchor="middle" font-family="Poppins" font-weight="700" font-size="26" fill="var(--text)">{{ $result->score }}%</text>
        </svg>
        <span class="result-ring-badge">
          @if($result->status === 'pass')
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6L9 17l-5-5"/></svg>
          @else
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 6L6 18M6 6l12 12"/></svg>
          @endif
        </span>
      </div>

      <h3 class="result-title">{{ $result->status === 'pass' ? __('front.exam.passed_title') : __('front.exam.failed_title') }}</h3>
      <p class="muted result-body">
        @if($result->status === 'pass')
          {{ __('front.exam.passed_body', ['points' => $examPassPoints]) }}
        @else
          {{ __('front.exam.failed_body', ['score' => $exam->passing_score]) }}
        @endif
      </p>

      <div class="result-actions">
        @if($result->status === 'pass')
          <a href="{{ route('front.profile') }}" class="btn btn-primary btn-sm">{{ __('front.exam.view_profile') }}</a>
          <a href="{{ route('front.courses.index') }}" class="btn btn-ghost btn-sm">{{ __('front.exam.next_course') }}</a>
        @else
          <a href="{{ route('front.courses.show', $course) }}" class="btn btn-ghost btn-sm">{{ __('front.exam.back_to_course') }}</a>
        @endif
      </div>
    </div>
  </div>

  <div class="container review-wrap">
    <h3>{{ __('front.exam.review_answers') }}</h3>
    @if(!$hasAnswerData)
      <p class="muted">{{ __('front.exam.no_answer_data') }}</p>
    @else
      @foreach($reviewData as $i => $q)
        <div class="review-q">
          <div class="review-q-head">
            <b>{{ __('front.exam.question_n_of', ['i' => $i + 1, 'n' => $reviewData->count()]) }}</b>
            <span style="font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:100px; background:{{ $q['correct'] ? 'var(--green-soft)' : 'var(--coral)' }}; color:{{ $q['correct'] ? 'var(--green-ink)' : '#fff' }};">
              {{ $q['correct'] ? '✓' : ($q['answered'] ? '✕' : __('front.exam.not_answered')) }}
            </span>
          </div>
          <div class="review-q-title">{{ $q['question'] }}</div>
          @if($q['attachment'])
            <a href="{{ $q['attachment']['url'] }}" download="{{ $q['attachment']['name'] }}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-bottom:12px;" title="{{ __('front.exam.download_attachment') }}">
              ⬇ {{ __('front.exam.download_attachment') }}: {{ $q['attachment']['name'] }}
            </a>
          @endif
          @foreach($q['options'] as $option)
            <div class="review-opt {{ $option['is_correct'] ? 'correct' : ($option['is_chosen'] ? 'wrong' : '') }}">
              <span class="dot">
                @if($option['is_correct'])
                  ✓
                @elseif($option['is_chosen'])
                  ✕
                @endif
              </span>
              <span class="txt">{{ $option['text'] }}</span>
              @if($option['is_correct'])
                <span class="tag">{{ __('front.exam.correct_answer') }}</span>
              @elseif($option['is_chosen'])
                <span class="tag">{{ __('front.exam.your_answer') }}</span>
              @endif
            </div>
          @endforeach
        </div>
      @endforeach
    @endif
  </div>
@else
  @php
    $examI18n = [
      'questionNOf' => __('front.exam.question_n_of', ['i' => ':i', 'n' => ':n']),
    ];
  @endphp
  <script>
    window.NEXUS_EXAM_QUESTIONS = @json($questionsData);
    window.NEXUS_EXAM_TIME_LIMIT_SECONDS = {{ (int) $exam->time_limit * 60 }};
    window.NEXUS_EXAM_I18N = @json($examI18n);
  </script>

  <div class="exam-bar">
    <div class="container exam-bar-inner">
      <span class="q-count" id="examQCount">{{ __('front.exam.question_n_of', ['i' => 1, 'n' => $questionsData->count()]) }}</span>
      <div class="exam-track"><i id="examTrackFill" style="width:{{ $questionsData->count() ? round(100 / $questionsData->count()) : 0 }}%;"></i></div>
      <span class="exam-timer" id="examTimer">⏱ {{ sprintf('%02d:%02d', $exam->time_limit, 0) }}</span>
    </div>
  </div>

  <form method="POST" action="{{ route('front.exams.submit', $exam) }}" id="examForm">
    @csrf
    <input type="hidden" name="time_taken_minutes" id="examTimeTaken" value="0">
    <div class="container exam-wrap">
      <span class="q-tag">{{ $course->title }} — {{ $exam->title }}</span>
      <h2 class="q-title" id="examQuestionTitle"></h2>

      <a href="#" id="examAttachment" download target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="display:none; margin-top:10px;" title="{{ __('front.exam.download_attachment') }}">
        ⬇ {{ __('front.exam.download_attachment') }}: <span id="examAttachmentName"></span>
      </a>

      <div class="opt-list" id="examOptionsList"></div>

      <div class="xp-note">{{ __('front.exam.xp_note', ['points' => $examPassPoints]) }}</div>

      <div class="exam-nav">
        <button type="button" class="btn btn-ghost" id="examPrevBtn" style="visibility:hidden;">{{ __('front.exam.previous') }}</button>
        <button type="button" class="btn btn-primary" id="examNextBtn">{{ __('front.exam.next_question') }}</button>
        <button type="submit" class="btn btn-primary" id="examSubmitBtn" style="display:none;">{{ __('front.exam.submit_exam') }}</button>
      </div>
    </div>
  </form>
@endif

</section>
@endsection