@extends('layouts.app')

@section('content')
<div class='container mx-auto px-4 py-8'>
    <div class='bg-white dark:bg-gray-800 shadow-md rounded-lg p-6'>
        @if(session('success'))
            <div class='mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded'>
                {{ session('success') }}
            </div>
        @endif
        
        <div class='grid grid-cols-1 md:grid-cols-2 gap-6'>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Assessment</p>
                <p class='text-gray-900 dark:text-white'>{{ $attempt->assessment->name }}</p>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Module</p>
                <p class='text-gray-900 dark:text-white'>{{ $attempt->assessment->module->name }}</p>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Status</p>
                <div>
                    @if($attempt->passed)
                        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100'>Passed</span>
                    @else
                        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100'>Failed</span>
                    @endif
                </div>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Score</p>
                <p class='text-gray-900 dark:text-white'>{{ number_format($attempt->score_percent, 1) }}%</p>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Completion</p>
                <p class='text-gray-900 dark:text-white'>{{ $attempt->completed_at && $attempt->completed_at instanceof \DateTime ? $attempt->completed_at->format("M d, Y H:i") : "Not completed" }}</p>
            </div>
        </div>
        <div class='flex items-center space-x-4 pt-4 border-t border-gray-200 dark:border-gray-700'>
            <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>
    
    @if(!$attempt->passed)
        <div class='mt-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
    
    <div class='mt-8 bg-white dark:bg-gray-800 shadow-md rounded-lg p-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>
</div>
@endsection