@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Assessment Details</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">{{ $assessment->name }}</p>
        </div>
        <div class="flex space-x-3">
            <x-ui.buttons.secondary href="{{ route('admin.assessments.index') }}">
                ← Back to Assessments
            </x-ui.buttons.secondary>
            <x-ui.buttons.primary href="{{ route('admin.assessments.questions.index', $assessment) }}">
                Manage Questions
            </x-ui.buttons.primary>
        </div>
    </div>

    <!-- Assessment Information -->
    <x-ui.layout.card class="mb-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Assessment Information</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Title</h3>
                    <p class="mt-1 text-lg text-gray-900 dark:text-gray-100">{{ $assessment->name }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Module</h3>
                    <p class="mt-1 text-lg text-gray-900 dark:text-gray-100">{{ $assessment->module->name ?? 'N/A' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Passing Score</h3>
                    <p class="mt-1 text-lg text-gray-900 dark:text-gray-100">{{ $assessment->passing_score_percent }}%</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Total Questions</h3>
                    <p class="mt-1 text-lg text-gray-900 dark:text-gray-100">{{ count($assessment->questions ?? []) }}</p>
                </div>
                <div class="md:col-span-2">
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Description</h3>
                    <div class="mt-1 text-gray-900 dark:text-gray-100 prose dark:prose-invert max-w-none">
                        {{ $assessment->description ?? "No description available." }}
                    </div>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Associated Badges -->
    @if($assessment->badges && $assessment->badges->count() > 0)
    <x-ui.layout.card class="mb-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Associated Badges</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($assessment->badges as $badge)
                <div class="flex items-center space-x-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </div>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $badge->name }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ $badge->description }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </x-ui.layout.card>
    @endif

    <!-- Completion Statistics -->
    <x-ui.layout.card class="mb-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Completion Statistics</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div class="text-center">
                    <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ $completions->total() }}</div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">Total Attempts</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-green-600 dark:text-green-400">{{ $completions->where('passed', true)->count() }}</div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">Passed</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-red-600 dark:text-red-400">{{ $completions->where('passed', false)->count() }}</div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">Failed</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-purple-600 dark:text-purple-400">
                        {{ $completions->count() > 0 ? number_format($completions->avg('score_percent'), 1) : '0' }}%
                    </div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">Average Score</div>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Recent Completions -->
    @if($completions->count() > 0)
    <x-ui.layout.card>
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Recent Completions</h2>
        </div>
        <div class="overflow-x-auto">
            <x-ui.data.table :headers="['User', 'Email', 'Score', 'Status', 'Completed At']">
                @forelse($completions as $completion)
                <tr>
                    <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-gray-100">{{ $completion->user->name }}</td>
                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ $completion->user->email }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">{{ $completion->score_percent }}%</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @if($completion->passed)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                Passed
                            </span>
                        @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                Failed
                            </span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                        {{ $completion->created_at ? $completion->created_at->format('M j, Y g:i A') : 'N/A' }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                        No completions found for this assessment.
                    </td>
                </tr>
                @endforelse
            </x-ui.data.table>
        </div>
        
        @if($completions->hasPages())
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
            {{ $completions->links() }}
        </div>
        @endif
    </x-ui.layout.card>
    @else
    <x-ui.layout.card>
        <div class="p-6 text-center">
            <div class="text-gray-400 dark:text-gray-500 mb-4">
                <svg class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No Completions Yet</h3>
            <p class="text-gray-500 dark:text-gray-400">This assessment hasn't been completed by any users yet.</p>
        </div>
    </x-ui.layout.card>
    @endif
</div>
@endsection