

<?php $__env->startSection('title', 'Result — ' . ($result->user->name ?? 'Unknown')); ?>
<?php $__env->startSection('page-title', 'Exam Result Details'); ?>
<?php $__env->startSection('page-subtitle', ($result->user->name ?? 'Unknown') . ' — ' . ($result->course->title ?? 'Unknown Course')); ?>

<?php $__env->startSection('hero-actions'); ?>
    <a href="<?php echo e(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="<?php echo e(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>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-5">

    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

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

            
            <div class="flex items-center gap-5 mb-6 pb-6 border-b border-gray-100">
                <?php 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"><?php echo e(number_format((float) $result->score_percentage, 1)); ?>%</p>
                        <p class="text-sm text-gray-500 mt-0.5"><?php echo e($result->correct_answers); ?> out of <?php echo e($result->total_questions); ?> correct</p>
                    </div>
                <?php 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"><?php echo e(number_format((float) $result->score_percentage, 1)); ?>%</p>
                        <p class="text-sm text-gray-500 mt-0.5"><?php echo e($result->correct_answers); ?> out of <?php echo e($result->total_questions); ?> correct</p>
                    </div>
                <?php endif; ?>
            </div>

            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                
                <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">
                            <?php echo e(strtoupper(substr($result->user->name ?? 'U', 0, 1))); ?>

                        </span>
                        <div>
                            <p class="text-sm font-semibold text-gray-800"><?php echo e($result->user->name ?? '—'); ?></p>
                            <p class="text-xs text-gray-400"><?php echo e($result->user->email ?? '—'); ?></p>
                        </div>
                    </div>
                </div>

                
                <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="<?php echo e(route('self-paced.dashboard.courses.show', $result->course)); ?>"
                       class="text-sm font-semibold text-indigo-600 hover:text-indigo-800 transition">
                        <?php echo e($result->course->title ?? '—'); ?>

                    </a>
                </div>

                
                <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"><?php echo e($result->total_questions); ?></p>
                </div>

                
                <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"><?php echo e($result->correct_answers); ?></p>
                </div>

                
                <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"><?php echo e(number_format((float) $result->score_percentage, 2)); ?>%</p>
                </div>

                
                <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"><?php echo e($result->passing_threshold); ?>%</p>
                </div>

                
                <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">
                        <?php echo e($result->attempt->submitted_at?->format('d M Y, H:i') ?? $result->created_at->format('d M Y, H:i')); ?>

                    </p>
                </div>

                
                <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';
                    ?>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium <?php echo e($attemptStatusMap[$attemptStatus] ?? 'bg-gray-100 text-gray-500'); ?>">
                        <?php echo e(ucfirst(str_replace('_', ' ', $attemptStatus))); ?>

                    </span>
                </div>

            </div>
        </div>

        
        <div class="space-y-4">

            
            <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>

                <?php 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"><?php echo e($result->certificate->certificate_number); ?></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Issue Date</span>
                            <span class="text-gray-700"><?php echo e($result->certificate->issue_date?->format('d M Y') ?? '—'); ?></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Status</span>
                            <?php if($result->certificate->is_revoked): ?>
                                <span class="text-red-600 font-semibold">Revoked</span>
                            <?php else: ?>
                                <span class="text-green-600 font-semibold">Valid</span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <a href="<?php echo e(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>
                <?php elseif($result->passed): ?>
                    <p class="text-xs text-gray-400 mb-4">No certificate generated yet.</p>
                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('manage self-paced certificates')): ?>
                    <form action="<?php echo e(route('self-paced.dashboard.certificates.generate', $result)); ?>" method="POST">
                        <?php echo csrf_field(); ?>
                        <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>
                    <?php endif; ?>
                <?php else: ?>
                    <p class="text-xs text-gray-400">Certificate not issued — trainee did not pass.</p>
                <?php endif; ?>
            </div>

            
            <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 <?php echo e($result->passed ? 'text-green-600' : 'text-red-500'); ?>">
                                <?php echo e(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 <?php echo e($result->passed ? 'bg-green-500' : 'bg-red-400'); ?>"
                                 style="width: <?php echo e(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"><?php echo e($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: <?php echo e($result->passing_threshold); ?>%"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    
    <?php 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">
                    <?php echo e(count($incorrectAnswers)); ?>

                </span>
            </h2>
            <span class="text-xs text-gray-400">Review for learning purposes</span>
        </div>

        <div class="divide-y divide-gray-50">
            <?php $__currentLoopData = $incorrectAnswers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?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];
            ?>
            <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">
                        <?php echo e($idx + 1); ?>

                    </span>
                    <p class="text-sm font-medium text-gray-800 leading-relaxed"><?php echo e($question->question_text); ?></p>
                </div>

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

                <?php 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><?php echo e($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><?php echo e($correct); ?></strong>
                    </span>
                </div>
                <?php 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><?php echo e($correct); ?></strong>
                    </span>
                </div>
                <?php endif; ?>

                <?php 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"><?php echo e($question->explanation); ?></p>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
    <?php 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>
    <?php endif; ?>

</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.self-paced-dashboard', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/www/sshia.org/sshia/resources/views/self-paced/dashboard/results/show.blade.php ENDPATH**/ ?>