@extends('layouts.admin')
@section('header', 'Learning Results')
@section('content')
<div class='bg-white dark:bg-gray-800 shadow-md rounded-lg p-6'>
    <div class='space-y-6'>
        <div class='grid grid-cols-1 md:grid-cols-2 gap-6'>
            <div class='md:col-span-2'>
                <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'>{{ $attempt->score }}%</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>
        </div>
    </div>
    <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'>Answers</h2>
        @if($attempt->answers && $attempt->answers->count() > 0)
            <div class='space-y-6'>
                @foreach($attempt->answers as $answer)
                    <div class='border border-gray-200 dark:border-gray-700 rounded-lg p-4'>
                        <p class='font-medium text-gray-900 dark:text-white mb-2'>{{ $answer->question->text }}</p>
                        <p class='text-gray-700 dark:text-gray-300 mb-2'>Selected: {{ $answer->option->text }}</p>
                        <p class='text-{{ $answer->is_correct ? "green" : "red" }}-600 dark:text-{{ $answer->is_correct ? "green" : "red" }}-400'>
                            {{ $answer->is_correct ? "Correct" : "Incorrect" }}
                        </p>
                        @if(!$answer->is_correct && $answer->question->incorrect_feedback)
                            <div class='mt-2 p-3 bg-red-50 dark:bg-red-900 text-red-800 dark:text-red-200 rounded'>
                                <p class='text-sm'>{{ $answer->question->incorrect_feedback }}</p>
                            </div>
                        @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