@extends('layouts.app')
@section('content')
<div class='container mx-auto px-4 py-8'>
    {{-- Single Main Results Card --}}
    <div class='bg-white dark:bg-gray-800 shadow-md rounded-lg p-6'>
        {{-- Large Score Display (No Background Circle) --}}
        <div class='text-center mb-6'>
            <div class='mb-4'>
                <span class='text-6xl font-bold {{ $attempt->passed ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400" }}' style='font-size: 4rem;'>
                    {{ number_format($attempt->score_percent, 0) }}%
                </span>
            </div>
            <div class='mb-4'>
                @if($attempt->passed)
                    <span class='px-4 py-2 text-lg font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100'>Passed</span>
                @else
                    <span class='px-4 py-2 text-lg font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100'>Failed</span>
                @endif
            </div>
        </div>

        {{-- Assessment Not Passed Warning (Integrated into main card) --}}
        @if(!$attempt->passed)
            <div class='mb-6 bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4'>
                <div class='flex'>
                    <div class='flex-shrink-0'>
                        <svg class='h-5 w-5 text-yellow-400' viewBox='0 0 20 20' fill='currentColor'>
                            <path fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd' />
                        </svg>
                    </div>
                    <div class='ml-3'>
                        <h3 class='text-sm font-medium text-yellow-800 dark:text-yellow-200'>Assessment Not Passed</h3>
                        <div class='mt-2 text-sm text-yellow-700 dark:text-yellow-300'>
                            <p>Please review the content and feedback below, then retake the assessment to continue your learning journey.</p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Detailed Results and Feedback Section --}}
        <div class='border-t border-gray-200 dark:border-gray-700 pt-6'>
            <h2 class='text-xl font-semibold text-gray-900 dark:text-white mb-4'>
                @if($attempt->passed)
                    Your Answers
                @else
                    Review Your Answers & Feedback
                @endif
            </h2>
            @if($attempt->answers && count($attempt->answers) > 0)
                <div class='space-y-6'>
                    @foreach($attempt->assessment->questions as $question)
                        @php
                            $selectedOptionIds = $attempt->answers[$question->id] ?? [];
                            if (!is_array($selectedOptionIds)) {
                                $selectedOptionIds = [$selectedOptionIds];
                            }
                            $correctOptionIds = $question->options->where('is_correct', true)->pluck('id')->toArray();
                            $isCorrect = false;
                            
                            if ($question->type === 'multi_select') {
                                sort($selectedOptionIds);
                                sort($correctOptionIds);
                                $isCorrect = ($selectedOptionIds == $correctOptionIds && !empty($selectedOptionIds));
                            } else {
                                $isCorrect = (count($selectedOptionIds) == 1 && in_array($selectedOptionIds[0], $correctOptionIds));
                            }
                        @endphp
                        <div class='border border-gray-200 dark:border-gray-700 rounded-lg p-4 {{ !$isCorrect ? "bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-700" : "bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-700" }}'>
                            <div class='flex items-start justify-between mb-3'>
                                <p class='font-medium text-gray-900 dark:text-white'>{{ $question->text }}</p>
                                <span class='ml-2 px-2 py-1 text-xs font-semibold rounded-full {{ $isCorrect ? "bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100" : "bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100" }}'>
                                    {{ $isCorrect ? "Correct" : "Incorrect" }}
                                </span>
                            </div>
                            
                            <div class='mb-3'>
                                <span class='text-sm font-medium text-gray-700 dark:text-gray-300'>Your Answer: </span>
                                @if(count($selectedOptionIds) > 0)
                                    @foreach($selectedOptionIds as $optionId)
                                        @php $selectedOption = $question->options->find($optionId); @endphp
                                        @if($selectedOption)
                                            <span class='text-gray-900 dark:text-white'>{!! $selectedOption->text !!}</span>
                                            @if(!$loop->last), @endif
                                        @endif
                                    @endforeach
                                @else
                                    <span class='text-gray-500 dark:text-gray-400 italic'>No answer selected</span>
                                @endif
                            </div>
                            
                            @if(!$isCorrect)
                                <div class='mb-3'>
                                    <span class='text-sm font-medium text-green-700 dark:text-green-300'>Correct Answer: </span>
                                    @foreach($correctOptionIds as $correctId)
                                        @php $correctOption = $question->options->find($correctId); @endphp
                                        @if($correctOption)
                                            <span class='text-green-800 dark:text-green-200 font-medium'>{!! $correctOption->text !!}</span>
                                            @if(!$loop->last), @endif
                                        @endif
                                    @endforeach
                                </div>
                                
                                @if($question->incorrect_feedback)
                                    <div class='mt-3 p-3 bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded'>
                                        <div class='flex'>
                                            <div class='flex-shrink-0'>
                                                <svg class='h-5 w-5 text-blue-400' viewBox='0 0 20 20' fill='currentColor'>
                                                    <path fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z' clip-rule='evenodd' />
                                                </svg>
                                            </div>
                                            <div class='ml-3'>
                                                <h4 class='text-sm font-medium text-blue-800 dark:text-blue-200'>Learning Tip</h4>
                                                <div class='mt-1 text-sm text-blue-700 dark:text-blue-300'>
                                                    {!! $question->incorrect_feedback !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        </div>
                    @endforeach
                </div>
            @else
                <p class='text-gray-500 dark:text-gray-400'>No answers recorded for this attempt.</p>
            @endif
        </div>

        {{-- Action Buttons at Bottom (Left-aligned with standard space-x-3 spacing) --}}
        <div class='border-t border-gray-200 dark:border-gray-700 pt-6 mt-6'>
            <div class='flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0'>
                <a href='{{ route("learning.index") }}' class='py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'>
                    Back to Learning Path
                </a>
                @if(!$attempt->passed)
                    <a href='{{ route("learning.module.show", $attempt->assessment->module->id) }}' class='py-2.5 px-5 text-sm font-medium text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'>
                        Review Content & Retake
                    </a>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection