@extends('layouts.self-paced-dashboard')

@section('title', 'Result — ' . ($result->user->name ?? 'Unknown'))
@section('page-title', 'Exam Result Details')
@section('page-subtitle', ($result->user->name ?? 'Unknown') . ' — ' . ($result->course->title ?? 'Unknown Course'))

@section('hero-actions')
    <a href="{{ route('self-paced.dashboard.results.result-slip', $result) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white text-indigo-700 font-semibold text-sm rounded-lg hover:bg-indigo-50 transition shadow">
        <i class="fas fa-download"></i> Download Result Slip
    </a>
    <a href="{{ route('self-paced.dashboard.results.index') }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back
    </a>
@endsection

@section('content')
<div class="space-y-5">

    {{-- Result Summary Card --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

        {{-- Main Result Info --}}
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-6">

            {{-- Pass / Fail Hero --}}
            <div class="flex items-center gap-5 mb-6 pb-6 border-b border-gray-100">
                @if($result->passed)
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-trophy text-green-500 text-3xl"></i>
                    </div>
                    <div>
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-bold bg-green-100 text-green-700 mb-1">
                            <i class="fas fa-check-circle"></i> PASSED
                        </span>
                        <p class="text-4xl font-extrabold text-green-600">{{ number_format((float) $result->score_percentage, 1) }}%</p>
                        <p class="text-sm text-gray-500 mt-0.5">{{ $result->correct_answers }} out of {{ $result->total_questions }} correct</p>
                    </div>
                @else
                    <div class="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-times-circle text-red-400 text-3xl"></i>
                    </div>
                    <div>
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-700 mb-1">
                            <i class="fas fa-times-circle"></i> FAILED
                        </span>
                        <p class="text-4xl font-extrabold text-red-500">{{ number_format((float) $result->score_percentage, 1) }}%</p>
                        <p class="text-sm text-gray-500 mt-0.5">{{ $result->correct_answers }} out of {{ $result->total_questions }} correct</p>
                    </div>
                @endif
            </div>

            {{-- Detail Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                {{-- Trainee --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-user text-gray-300"></i> Trainee
                    </p>
                    <div class="flex items-center gap-2">
                        <span class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center text-sm font-bold text-purple-600 flex-shrink-0">
                            {{ strtoupper(substr($result->user->name ?? 'U', 0, 1)) }}
                        </span>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">{{ $result->user->name ?? '—' }}</p>
                            <p class="text-xs text-gray-400">{{ $result->user->email ?? '—' }}</p>
                        </div>
                    </div>
                </div>

                {{-- Course --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-book text-gray-300"></i> Course
                    </p>
                    <a href="{{ route('self-paced.dashboard.courses.show', $result->course) }}"
                       class="text-sm font-semibold text-indigo-600 hover:text-indigo-800 transition">
                        {{ $result->course->title ?? '—' }}
                    </a>
                </div>

                {{-- Total Questions --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-list-ol text-gray-300"></i> Total Questions
                    </p>
                    <p class="text-sm font-semibold text-gray-800">{{ $result->total_questions }}</p>
                </div>

                {{-- Correct Answers --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-check text-gray-300"></i> Correct Answers
                    </p>
                    <p class="text-sm font-semibold text-gray-800">{{ $result->correct_answers }}</p>
                </div>

                {{-- Score Percentage --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-percent text-gray-300"></i> Score
                    </p>
                    <p class="text-sm font-semibold text-gray-800">{{ number_format((float) $result->score_percentage, 2) }}%</p>
                </div>

                {{-- Passing Threshold --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-bullseye text-gray-300"></i> Passing Threshold
                    </p>
                    <p class="text-sm font-semibold text-gray-800">{{ $result->passing_threshold }}%</p>
                </div>

                {{-- Attempt Date --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-calendar text-gray-300"></i> Attempt Date
                    </p>
                    <p class="text-sm text-gray-700">
                        {{ $result->attempt->submitted_at?->format('d M Y, H:i') ?? $result->created_at->format('d M Y, H:i') }}
                    </p>
                </div>

                {{-- Attempt Status --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-flag text-gray-300"></i> Attempt Status
                    </p>
                    @php
                        $attemptStatusMap = [
                            'submitted'   => 'bg-blue-100 text-blue-700',
                            'timed_out'   => 'bg-orange-100 text-orange-700',
                            'in_progress' => 'bg-amber-100 text-amber-700',
                            'abandoned'   => 'bg-gray-100 text-gray-500',
                        ];
                        $attemptStatus = $result->attempt->status ?? 'submitted';
                    @endphp
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $attemptStatusMap[$attemptStatus] ?? 'bg-gray-100 text-gray-500' }}">
                        {{ ucfirst(str_replace('_', ' ', $attemptStatus)) }}
                    </span>
                </div>

            </div>
        </div>

        {{-- Right Panel --}}
        <div class="space-y-4">

            {{-- Certificate Card --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-certificate text-amber-500"></i> Certificate
                </h2>

                @if($result->certificate)
                    <div class="space-y-2 text-xs mb-4">
                        <div class="flex justify-between">
                            <span class="text-gray-400">Certificate #</span>
                            <span class="font-mono font-semibold text-gray-700 text-right">{{ $result->certificate->certificate_number }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Issue Date</span>
                            <span class="text-gray-700">{{ $result->certificate->issue_date?->format('d M Y') ?? '—' }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Status</span>
                            @if($result->certificate->is_revoked)
                                <span class="text-red-600 font-semibold">Revoked</span>
                            @else
                                <span class="text-green-600 font-semibold">Valid</span>
                            @endif
                        </div>
                    </div>
                    <a href="{{ route('self-paced.dashboard.certificates.show', $result->certificate) }}"
                       class="flex items-center gap-1.5 text-xs text-indigo-600 hover:text-indigo-800 font-medium transition">
                        <i class="fas fa-arrow-right"></i> View Certificate
                    </a>
                @elseif($result->passed)
                    <p class="text-xs text-gray-400 mb-4">No certificate generated yet.</p>
                    @can('manage self-paced certificates')
                    <form action="{{ route('self-paced.dashboard.certificates.generate', $result) }}" method="POST">
                        @csrf
                        <button type="submit"
                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold rounded-lg transition">
                            <i class="fas fa-certificate"></i> Generate Certificate
                        </button>
                    </form>
                    @endcan
                @else
                    <p class="text-xs text-gray-400">Certificate not issued — trainee did not pass.</p>
                @endif
            </div>

            {{-- Score Progress Card --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-chart-bar text-indigo-500"></i> Score Breakdown
                </h2>
                <div class="space-y-3">
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-gray-500">Score</span>
                            <span class="font-semibold {{ $result->passed ? 'text-green-600' : 'text-red-500' }}">
                                {{ number_format((float) $result->score_percentage, 1) }}%
                            </span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2.5">
                            <div class="h-2.5 rounded-full transition-all {{ $result->passed ? 'bg-green-500' : 'bg-red-400' }}"
                                 style="width: {{ min(100, $result->score_percentage) }}%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-gray-500">Passing Threshold</span>
                            <span class="font-semibold text-gray-600">{{ $result->passing_threshold }}%</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2.5">
                            <div class="h-2.5 rounded-full bg-gray-400"
                                 style="width: {{ $result->passing_threshold }}%"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- Incorrect Answers Section --}}
    @if(count($incorrectAnswers) > 0)
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-times-circle text-red-400"></i> Incorrect Answers
                <span class="ml-1 px-2 py-0.5 bg-red-100 text-red-600 text-xs font-semibold rounded-full">
                    {{ count($incorrectAnswers) }}
                </span>
            </h2>
            <span class="text-xs text-gray-400">Review for learning purposes</span>
        </div>

        <div class="divide-y divide-gray-50">
            @foreach($incorrectAnswers as $idx => $item)
            @php
                /** @var \App\Models\SelfPaced\ExamQuestion $question */
                $question = $item['question'];
                $selected = $item['selected'];
                $correct  = $item['correct'];
                $optionLabels = ['A' => $question->option_a, 'B' => $question->option_b, 'C' => $question->option_c, 'D' => $question->option_d];
            @endphp
            <div class="px-5 py-4">
                <div class="flex items-start gap-3 mb-3">
                    <span class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center text-xs font-bold text-red-500 flex-shrink-0 mt-0.5">
                        {{ $idx + 1 }}
                    </span>
                    <p class="text-sm font-medium text-gray-800 leading-relaxed">{{ $question->question_text }}</p>
                </div>

                <div class="ml-9 grid grid-cols-1 sm:grid-cols-2 gap-2 mb-3">
                    @foreach($optionLabels as $letter => $text)
                    <div class="flex items-start gap-2 px-3 py-2 rounded-lg text-sm
                        @if($letter === $correct) bg-green-50 border border-green-200
                        @elseif($letter === $selected) bg-red-50 border border-red-200
                        @else bg-gray-50 border border-gray-100
                        @endif">
                        <span class="font-bold flex-shrink-0
                            @if($letter === $correct) text-green-600
                            @elseif($letter === $selected) text-red-500
                            @else text-gray-400
                            @endif">{{ $letter }}.</span>
                        <span class="
                            @if($letter === $correct) text-green-700
                            @elseif($letter === $selected) text-red-600
                            @else text-gray-500
                            @endif">{{ $text }}</span>
                        @if($letter === $correct)
                            <i class="fas fa-check text-green-500 ml-auto flex-shrink-0 mt-0.5"></i>
                        @elseif($letter === $selected)
                            <i class="fas fa-times text-red-400 ml-auto flex-shrink-0 mt-0.5"></i>
                        @endif
                    </div>
                    @endforeach
                </div>

                @if($selected)
                <div class="ml-9 flex flex-wrap gap-3 text-xs mb-2">
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-100 text-red-600 font-medium">
                        <i class="fas fa-times"></i> Trainee answered: <strong>{{ $selected }}</strong>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-100 text-green-600 font-medium">
                        <i class="fas fa-check"></i> Correct answer: <strong>{{ $correct }}</strong>
                    </span>
                </div>
                @else
                <div class="ml-9 mb-2">
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 text-xs font-medium">
                        <i class="fas fa-minus"></i> Not answered
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-100 text-green-600 text-xs font-medium ml-2">
                        <i class="fas fa-check"></i> Correct answer: <strong>{{ $correct }}</strong>
                    </span>
                </div>
                @endif

                @if($question->explanation)
                <div class="ml-9 mt-2 flex items-start gap-2 px-3 py-2 bg-blue-50 border border-blue-100 rounded-lg">
                    <i class="fas fa-lightbulb text-blue-400 text-xs mt-0.5 flex-shrink-0"></i>
                    <p class="text-xs text-blue-700 leading-relaxed">{{ $question->explanation }}</p>
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @else
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 text-center">
        <i class="fas fa-check-circle text-4xl text-green-300 mb-3 block"></i>
        <p class="text-gray-500 font-medium">All questions answered correctly</p>
        <p class="text-gray-400 text-sm mt-1">No incorrect answers to review.</p>
    </div>
    @endif

</div>
@endsection
