@extends('layouts.app')

@section('content')
  <div class="row justify-content-center">
    <div class="col-lg-10 col-md-12">
      <div class="modern-card fade-in">
        <div class="text-center mb-5">
          <h1 class="quiz-title">
            <i class="fas fa-trophy me-3"></i>
            Quiz Results
          </h1>
          <p class="text-muted fs-5">Congratulations, {{ $employeeQuiz->name }}!</p>
        </div>

        <!-- Score Display -->
        <div class="result-card mb-5">
          <div class="score-display">
            {{ $employeeQuiz->score }}/{{ count($employeeQuiz->quiz->questions) }}
          </div>
          <p class="text-muted fs-4">Your Final Score</p>
        </div>

        <!-- Statistics Grid -->
        <div class="stats-grid mb-5">
          <div class="stat-item">
            <div class="stat-value">{{ $employeeQuiz->quiz->name }}</div>
            <div class="stat-label">Quiz Name</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ round(($employeeQuiz->score / count($employeeQuiz->quiz->questions)) * 100) }}%
            </div>
            <div class="stat-label">Success Rate</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ $timeTaken }}s</div>
            <div class="stat-label">Time Taken</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ count($employeeQuiz->quiz->questions) }}</div>
            <div class="stat-label">Total Questions</div>
          </div>
        </div>
       @if (!$employeeQuiz->quiz->is_active)
        <!-- Answer Breakdown -->
        <div class="mb-4">
          <h3 class="text-center mb-4">
            <i class="fas fa-list-ul me-2"></i>
            Answer Breakdown
          </h3>

          @foreach ($employeeQuiz->employeeQuizParticipations as $index => $participation)
            <div class="modern-card mb-3">
              <div class="row align-items-center">
                <div class="col-md-8">
                  <h5 class="mb-2">
                    <span class="badge bg-primary me-2">Q{{ $index + 1 }}</span>
                    {{ $participation->question->question_text }}
                  </h5>

                  <div class="mb-2">
                    <strong>Your Answer:</strong>
                    @if ($participation->selectedOption)
                      <span
                        class="{{ $participation->selectedOption->id === $participation->question->options->firstWhere('is_correct', true)->id
                            ? 'text-success'
                            : 'text-danger' }}">
                        <i
                          class="fas {{ $participation->selectedOption->id === $participation->question->options->firstWhere('is_correct', true)->id
                              ? 'fa-check'
                              : 'fa-times' }} me-1"></i>
                        {{ $participation->selectedOption->option_text }}
                      </span>
                    @else
                      <span class="text-warning">
                        <i class="fas fa-clock me-1"></i>No answer
                      </span>
                    @endif
                  </div>

                  <div>
                    <strong>Correct Answer:</strong>
                    <span class="text-success">
                      <i class="fas fa-check me-1"></i>
                      {{ $participation->question->options->firstWhere('is_correct', true)->option_text }}
                    </span>
                  </div>
                </div>
                <div class="col-md-4 text-center">
                  @if (
                      $participation->selectedOption &&
                          $participation->selectedOption->id === $participation->question->options->firstWhere('is_correct', true)->id)
                    <div class="badge bg-success fs-6">
                      <i class="fas fa-check me-1"></i>Correct
                    </div>
                  @else
                    <div class="badge bg-danger fs-6">
                      <i class="fas fa-times me-1"></i>Incorrect
                    </div>
                  @endif
                </div>
              </div>
            </div>
          @endforeach
        </div>
        @endif

        <!-- Action Buttons -->
        <div class="text-center">
          <a href="{{ route('employee.quiz.index') }}" class="btn btn-primary btn-lg">
            <i class="fas fa-home me-2"></i>Back to Dashboard
          </a>
        </div>
      </div>
    </div>
  </div>
@endsection