@extends('layouts.student')

@section('title', 'Détail Quiz - MentoraMind')

@section('content')
<div class="page-header">
    <a href="{{ route('student.quiz.all') }}" class="btn btn-sm btn-outline-secondary mb-2">
        <i class="bi bi-arrow-left me-1"></i>{{ __('student.quiz.back_to_all') }}
    </a>
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1>
                {{ $quiz->subject->name }}
                @if($quiz->chapter)
                    - {{ $quiz->chapter->name }}
                @endif
            </h1>
            <p class="mb-0">
                <span class="badge bg-secondary ms-2">{{ $quiz->total_questions }} {{ __('student.quiz.questions') }}</span>
                <small class="text-muted ms-3">
                    <i class="bi bi-clock me-1"></i>{{ $quiz->completed_at->diffForHumans() }}
                </small>
            </p>
        </div>
        <div class="quiz-final-score">
            <div class="final-score-value">{{ $quiz->correct_answers }}/{{ $quiz->total_possible_points }}</div>
            <div class="final-score-percent">{{ number_format($quiz->score_percentage, 0) }}%</div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <div class="stat-icon green mb-2 mx-auto">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <h3 class="mb-0">{{ $quiz->correct_answers }}</h3>
                <small class="text-muted">{{ __('student.quiz.correct_answers') }}</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <div class="stat-icon orange mb-2 mx-auto">
                    <i class="bi bi-x-circle-fill"></i>
                </div>
                <h3 class="mb-0">{{ $quiz->wrong_answers }}</h3>
                <small class="text-muted">{{ __('student.quiz.wrong_answers') }}</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <div class="stat-icon blue mb-2 mx-auto">
                    <i class="bi bi-clock-fill"></i>
                </div>
                <h3 class="mb-0">{{ floor($quiz->time_spent_seconds / 60) }}min</h3>
                <small class="text-muted">{{ __('student.quiz.duration') }}</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <div class="stat-icon green mb-2 mx-auto">
                    <i class="bi bi-trophy-fill"></i>
                </div>
                <h3 class="mb-0">{{ number_format($quiz->score_percentage, 0) }}%</h3>
                <small class="text-muted">{{ __('student.quiz.success_rate') }}</small>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">{{ __('student.quiz.question_details') }}</h5>
    </div>
    <div class="card-body">
        <div class="quiz-question-review">
            @foreach($quiz->questions as $index => $question)
                @php
                    // Laravel cast 'array' fait la conversion automatiquement
                    $userAnswers = $question->pivot->user_answer ?? [];
                    $pointsEarned = $question->pivot->points_earned ?? 0;
                    $pointsPossible = $question->pivot->points_possible ?? 0;
                    $isFullyCorrect = $pointsEarned === $pointsPossible && $pointsEarned > 0;
                @endphp
                <div class="question-review-item {{ $isFullyCorrect ? 'correct' : 'wrong' }}">
                    <div class="question-review-number">{{ $index + 1 }}</div>
                    <div class="question-review-content">
                        <h6>{{ $question->question_text }}</h6>
                        <div class="mt-2">
                            @foreach((array)$question->options as $key => $optionText)
                                @php
                                    $letter = strtoupper($key);
                                    $isCorrectAnswer = in_array(strtolower($letter), (array)$question->correct_answers);
                                    $isUserAnswer = in_array($letter, $userAnswers);
                                @endphp

                                <div class="answer-option {{ $isCorrectAnswer ? 'correct' : ($isUserAnswer && !$isCorrectAnswer ? 'wrong' : '') }}">
                                    @if($isCorrectAnswer)
                                        <i class="bi bi-check-circle-fill me-2"></i>
                                    @elseif($isUserAnswer)
                                        <i class="bi bi-x-circle-fill me-2"></i>
                                    @else
                                        <i class="bi bi-circle me-2 text-muted"></i>
                                    @endif
                                    <span><strong>{{ $letter }}.</strong> {{ $optionText }}</span>
                                    @if($isUserAnswer)
                                        <small class="{{ $isCorrectAnswer ? 'text-success' : 'text-danger' }} ms-2">({{ __('student.quiz.your_answer') }})</small>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        
                        {{-- Explinations --}}
                        @if($question->explanation)
                            <div class="alert alert-info mt-3 mb-0" style="background-color: #e0f2fe; border-left: 4px solid #0284c7;">
                                <div class="d-flex align-items-start">
                                    <i class="bi bi-lightbulb-fill me-2" style="color: #0284c7; font-size: 1.1rem;"></i>
                                    <div>
                                        <strong style="color: #0369a1;">Explication :</strong>
                                        <p class="mb-0 mt-1" style="color: #075985;">{{ $question->explanation }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                        
                        @if($pointsPossible > 1)
                            <small class="text-muted mt-2 d-block">{{ __('student.quiz.points_earned') }}: {{ $pointsEarned }}/{{ $pointsPossible }}</small>
                        @endif
                    </div>
                    <div class="question-review-status {{ $isFullyCorrect ? 'correct' : 'wrong' }}">
                        <i class="bi bi-{{ $isFullyCorrect ? 'check' : 'x' }}-circle-fill"></i>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection