@extends('layouts.teacher')

@section('title', 'Detail Jawaban')
@section('header_title', 'Detail Jawaban Siswa')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Header Section -->
    <div class="mb-8 bg-gradient-to-r from-indigo-50 to-white rounded-2xl border border-indigo-100 p-6 shadow-sm">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex-1">
                <a href="{{ route('guru.ujian.results', $exam->id) }}" 
                   class="inline-flex items-center text-indigo-500 hover:text-indigo-700 transition-all text-sm font-medium mb-3 group">
                    <i class="ph ph-arrow-left mr-2 group-hover:-translate-x-1 transition-transform"></i> 
                    Kembali ke Hasil Ujian
                </a>
                
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">{{ $exam->title }}</h1>
                
                <!-- Student Info Cards -->
                <div class="flex flex-wrap gap-3 mt-4">
                    <div class="inline-flex items-center bg-white rounded-lg px-4 py-2 shadow-xs border border-gray-200">
                        <div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center mr-3">
                            <i class="ph ph-user text-indigo-600"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Nama Siswa</p>
                            <p class="font-semibold text-gray-800">{{ $student->name }}</p>
                        </div>
                    </div>
                    
                    <div class="inline-flex items-center bg-white rounded-lg px-4 py-2 shadow-xs border border-gray-200">
                        <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
                            <i class="ph ph-identification-card text-blue-600"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">NISN</p>
                            <p class="font-semibold text-gray-800">{{ $student->nisn }}</p>
                        </div>
                    </div>
                    
                    <div class="inline-flex items-center bg-white rounded-lg px-4 py-2 shadow-xs border border-gray-200">
                        <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center mr-3">
                            <i class="ph ph-users-three text-emerald-600"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Kelas</p>
                            <p class="font-semibold text-gray-800">{{ $student->class }}</p>
                        </div>
                    </div>
                    
                    <!-- Total Attempt Badge -->
                    @if(count($attempts) > 1)
                    <div class="inline-flex items-center bg-white rounded-lg px-4 py-2 shadow-xs border border-purple-200">
                        <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
                            <i class="ph ph-repeat text-purple-600"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Total Attempt</p>
                            <p class="font-semibold text-purple-700">{{ count($attempts) }} Kali</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
            
            <!-- Score Card with Highest Score -->
            <div class="bg-white rounded-xl border border-gray-200 p-5 shadow-lg min-w-[220px]">
                <div class="text-center mb-3">
                    <p class="text-sm text-gray-500 mb-1">Nilai Tertinggi</p>
                    <div class="flex items-center justify-center gap-2">
                        <div class="relative">
                            @php
                                // Cari nilai tertinggi dari semua attempt
                                $highestScore = 0;
                                $bestAttempt = null;
                                foreach($attempts as $attempt) {
                                    if($attempt['score'] > $highestScore) {
                                        $highestScore = $attempt['score'];
                                        $bestAttempt = $attempt;
                                    }
                                }
                                $isBestPassed = $bestAttempt ? $bestAttempt['is_passed'] : $is_passed;
                            @endphp
                            <div class="w-20 h-20 rounded-full flex items-center justify-center 
                                {{ $isBestPassed ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-4 border-green-100' : 'bg-gradient-to-r from-red-50 to-rose-50 border-4 border-red-100' }}">
                                <span class="text-2xl font-bold {{ $isBestPassed ? 'text-green-700' : 'text-red-700' }}">
                                    {{ $highestScore }}
                                </span>
                            </div>
                            @if($isBestPassed)
                            <div class="absolute -top-1 -right-1">
                                <i class="ph ph-check-circle-fill text-2xl text-green-500"></i>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="text-xs text-gray-500 mt-2">
                        @if(count($attempts) > 1)
                            (Dari {{ count($attempts) }} kali mengerjakan)
                        @endif
                    </div>
                </div>
                
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-600">Status:</span>
                        <span class="px-3 py-1 rounded-full text-xs font-semibold 
                            {{ $is_passed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $status }}
                        </span>
                    </div>
                    
                    <!-- Waktu Submit -->
                    <div class="pt-3 border-t border-gray-100">
                        <div class="flex flex-col items-center justify-center text-center">
                            <div>
                                @if($submitted_at && $submitted_at !== '-')
                                    <span class="text-sm font-semibold text-gray-800 block">
                                        {{ \Carbon\Carbon::parse($submitted_at)->format('d M Y') }}
                                    </span>
                                    <span class="text-xs text-gray-500 block mt-0.5">
                                        {{ \Carbon\Carbon::parse($submitted_at)->format('H:i') }} WIB
                                    </span>
                                @else
                                    <span class="text-xs text-gray-500">-</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- All Attempts Statistics -->
    @if(count($attempts) > 1)
    <div class="mb-6 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-200 p-5">
        <h3 class="text-lg font-bold text-gray-800 mb-4">📊 Rekapan Semua Attempt</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            @foreach($attempts as $index => $attempt)
            <div class="p-4 rounded-lg border {{ $attempt['is_best'] ? 'border-green-300 bg-green-50' : 'border-gray-200 bg-white' }}">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-semibold text-gray-700">
                        Attempt {{ $attempt['attempt_number'] ?? ($index + 1) }}
                        @if($attempt['is_best'])
                            <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-800">
                                Terbaik
                            </span>
                        @endif
                    </span>
                    <span class="text-sm {{ $attempt['is_passed'] ? 'text-green-600' : 'text-red-600' }}">
                        {{ $attempt['score'] }}
                    </span>
                </div>
                <div class="text-xs text-gray-500">
                    {{ $attempt['submitted_at'] ?? '-' }}
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Warning Message -->
    @if(isset($message) && !$has_detailed_answers)
    <div class="mb-6 bg-gradient-to-r from-yellow-50 to-amber-50 border-l-4 border-yellow-400 rounded-r-lg p-4 shadow-sm">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="ph ph-warning-circle-fill text-2xl text-yellow-500"></i>
            </div>
            <div class="ml-3 flex-1">
                <p class="text-sm text-yellow-800 font-medium">{{ $message }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Questions Section with Multiple Attempt Comparison -->
    <div class="space-y-6">
        @forelse($questions as $index => $question)
        <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
            <!-- Question Header -->
            <div class="bg-gradient-to-r from-gray-50 to-white px-6 py-4 border-b border-gray-100">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-100 to-indigo-50 border border-indigo-200 flex items-center justify-center mr-4 shadow-sm">
                                <span class="font-bold text-lg text-indigo-700">{{ $index + 1 }}</span>
                            </div>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 line-clamp-2">{{ $question['question'] }}</h3>
                    </div>
                    
                    <!-- Status Badge -->
                    <div class="flex-shrink-0">
                        @if($has_detailed_answers)
                            @if($question['student_answer'] === $question['correct_option'])
                            <div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200">
                                <i class="ph ph-check-circle-fill text-green-500 mr-2"></i>
                                <span class="font-semibold text-green-700">Benar</span>
                            </div>
                            @elseif($question['student_answer'] !== null)
                            <div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-red-50 to-rose-50 border border-red-200">
                                <i class="ph ph-x-circle-fill text-red-500 mr-2"></i>
                                <span class="font-semibold text-red-700">Salah</span>
                            </div>
                            @else
                            <div class="inline-flex items-center px-4 py-2 rounded-full bg-gray-100 border border-gray-300">
                                <i class="ph ph-minus-circle text-gray-500 mr-2"></i>
                                <span class="font-semibold text-gray-700">Tidak Dijawab</span>
                            </div>
                            @endif
                        @else
                        <div class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 border border-blue-200">
                            <i class="ph ph-question-fill text-blue-500 mr-2"></i>
                            <span class="font-semibold text-blue-700">Jawaban tidak tersimpan</span>
                        </div>
                        @endif
                    </div>
                </div>
                
                <!-- Question Image if exists -->
                @if(isset($question['question_image']) && $question['question_image'])
                <div class="mt-3">
                    <img src="{{ $question['question_image'] }}" 
                         alt="Gambar Soal" 
                         class="max-w-md rounded-lg border border-gray-200">
                </div>
                @endif
            </div>

            <!-- Options Grid -->
            <div class="p-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 mb-6">
                    @foreach(['a', 'b', 'c', 'd'] as $option)
                    <div class="group flex items-center p-4 rounded-xl border-2 transition-all duration-200 
                        @if($option === $question['correct_option']) 
                            bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 shadow-sm
                        @elseif($has_detailed_answers && $option === $question['student_answer'])
                            bg-gradient-to-r from-red-50 to-rose-50 border-red-200 shadow-sm
                        @else
                            bg-gray-50 border-gray-200 hover:border-gray-300 hover:bg-gray-100
                        @endif">
                        
                        <!-- Option Indicator -->
                        <div class="flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center mr-4
                            @if($option === $question['correct_option']) 
                                bg-green-100 text-green-700 ring-2 ring-green-200
                            @elseif($has_detailed_answers && $option === $question['student_answer'])
                                bg-red-100 text-red-700 ring-2 ring-red-200
                            @else
                                bg-gray-200 text-gray-700
                            @endif">
                            <span class="font-bold">{{ strtoupper($option) }}</span>
                        </div>
                        
                        <!-- Option Text -->
                        <div class="flex-1 min-w-0">
                            <p class="text-gray-800 font-medium @if($option === $question['correct_option'] || ($has_detailed_answers && $option === $question['student_answer'])) font-semibold @endif">
                                {{ $question['options'][$option] }}
                            </p>
                        </div>
                        
                        <!-- Icons -->
                        <div class="ml-3 flex-shrink-0">
                            @if($option === $question['correct_option'])
                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center" title="Jawaban Benar">
                                <i class="ph ph-check-fill text-green-600"></i>
                            </div>
                            @elseif($has_detailed_answers && $option === $question['student_answer'])
                            <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center" title="Jawaban Siswa">
                                <i class="ph ph-x-fill text-red-600"></i>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- Multiple Attempt Answers Comparison -->
                @if(count($attempts) > 1 && isset($attempts) && $has_detailed_answers)
                <div class="mt-6 pt-6 border-t border-gray-100">
                    <h4 class="text-sm font-bold text-gray-700 mb-4">📝 Perbandingan Jawaban di Setiap Attempt:</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white border border-gray-200 rounded-lg">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Attempt</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jawaban Siswa</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nilai Attempt</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Waktu</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @foreach($attempts as $attempt)
                                @php
                                    // PERBAIKAN DI SINI: Gunakan array access bukan method get()
                                    $attemptAnswer = null;
                                    if(isset($attempt['answers']) && isset($attempt['answers'][$question['id']])) {
                                        $attemptAnswer = $attempt['answers'][$question['id']];
                                    }
                                @endphp
                                <tr class="{{ $attempt['is_best'] ? 'bg-green-50' : 'hover:bg-gray-50' }}">
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="text-sm font-medium text-gray-900">
                                                Attempt {{ $attempt['attempt_number'] ?? ($loop->index + 1) }}
                                            </span>
                                            @if($attempt['is_best'])
                                            <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-800">
                                                Terbaik
                                            </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        @if($attemptAnswer && isset($attemptAnswer['selected_option']))
                                            <div class="flex items-center">
                                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full {{ $attemptAnswer['selected_option'] === $question['correct_option'] ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }} text-xs font-bold mr-2">
                                                    {{ strtoupper($attemptAnswer['selected_option']) }}
                                                </span>
                                                <span class="text-sm text-gray-700">
                                                    {{ $question['options'][$attemptAnswer['selected_option']] ?? '-' }}
                                                </span>
                                            </div>
                                        @else
                                            <span class="text-sm text-gray-500">-</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        @if($attemptAnswer)
                                            @if($attemptAnswer['selected_option'] === $question['correct_option'])
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <i class="ph ph-check-circle mr-1"></i> Benar
                                                </span>
                                            @elseif($attemptAnswer['selected_option'])
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                    <i class="ph ph-x-circle mr-1"></i> Salah
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                    <i class="ph ph-minus-circle mr-1"></i> Kosong
                                                </span>
                                            @endif
                                        @else
                                            <span class="text-sm text-gray-500">-</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="text-sm font-semibold {{ $attempt['is_passed'] ? 'text-green-600' : 'text-red-600' }}">
                                                {{ $attempt['score'] }}
                                            </span>
                                            @if($attempt['is_passed'])
                                                <i class="ph ph-check-circle ml-1 text-green-500"></i>
                                            @else
                                                <i class="ph ph-x-circle ml-1 text-red-500"></i>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        {{ $attempt['submitted_at'] ?? '-' }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                @endif

                <!-- Answer Summary -->
                <div class="mt-6 pt-6 border-t border-gray-100">
                    <div class="flex flex-col md:flex-row md:items-start justify-between gap-6">
                        <div class="flex-1">
                            <h4 class="text-sm font-bold text-gray-700 mb-3">Kunci Jawaban:</h4>
                            <div class="flex items-center bg-emerald-50 p-4 rounded-lg border border-emerald-200">
                                <div class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center mr-3">
                                    <i class="ph ph-key-fill text-emerald-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Jawaban Benar:</p>
                                    <div class="flex items-center gap-3 mt-1">
                                        <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-100 text-emerald-800 font-bold">
                                            {{ strtoupper($question['correct_option']) }}
                                        </span>
                                        <span class="font-semibold text-gray-800">{{ $question['correct_answer'] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        @if($has_detailed_answers)
                        <div class="flex-1">
                            <h4 class="text-sm font-bold text-gray-700 mb-3">Jawaban Siswa (Attempt Terbaik):</h4>
                            <div class="flex items-center {{ $question['student_answer'] === $question['correct_option'] ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200' }} p-4 rounded-lg border">
                                <div class="w-10 h-10 rounded-lg {{ $question['student_answer'] === $question['correct_option'] ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600' }} flex items-center justify-center mr-3">
                                    <i class="ph ph-student"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Jawaban Siswa:</p>
                                    <div class="flex items-center gap-3 mt-1">
                                        @if($question['student_answer'])
                                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full {{ $question['student_answer'] === $question['correct_option'] ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }} font-bold">
                                                {{ strtoupper($question['student_answer']) }}
                                            </span>
                                            <span class="font-semibold text-gray-800">
                                                {{ $question['options'][$question['student_answer']] ?? '-' }}
                                            </span>
                                        @else
                                            <span class="text-gray-500">Tidak dijawab</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @empty
        <!-- Empty State -->
        <div class="text-center py-16 bg-gradient-to-br from-gray-50 to-white rounded-2xl border-2 border-dashed border-gray-300">
            <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-r from-gray-100 to-gray-200 flex items-center justify-center">
                <i class="ph ph-file-text text-3xl text-gray-400"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">Belum Ada Soal</h3>
            <p class="text-gray-500 max-w-sm mx-auto">Ujian ini belum memiliki soal yang dapat ditampilkan.</p>
        </div>
        @endforelse
    </div>

    <!-- Statistics Section -->
    @if($has_detailed_answers && isset($statistics) && $statistics['total_questions'] > 0)
    <div class="mt-8 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-200 p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">📈 Statistik Performa Siswa</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <!-- Total Soal -->
            <div class="text-center p-4 rounded-lg bg-white border border-gray-200 shadow-sm">
                <div class="text-2xl font-bold text-indigo-600 mb-1">
                    {{ $statistics['total_questions'] }}
                </div>
                <p class="text-sm text-gray-600">Total Soal</p>
                <div class="text-xs text-indigo-500 mt-1">
                    <i class="ph ph-list-numbers mr-1"></i> Semua soal
                </div>
            </div>
            
            <!-- Jawaban Benar -->
            <div class="text-center p-4 rounded-lg bg-white border border-green-200 shadow-sm">
                <div class="text-2xl font-bold text-green-600 mb-1">
                    {{ $statistics['correct_count'] }}
                </div>
                <p class="text-sm text-gray-600">Jawaban Benar</p>
                <div class="text-xs text-green-500 mt-1">
                    <i class="ph ph-check-circle mr-1"></i> 
                    @if($statistics['total_questions'] > 0)
                        {{ number_format(($statistics['correct_count'] / $statistics['total_questions']) * 100, 1) }}%
                    @else
                        0%
                    @endif
                </div>
            </div>
            
            <!-- Jawaban Salah -->
            <div class="text-center p-4 rounded-lg bg-white border border-red-200 shadow-sm">
                <div class="text-2xl font-bold text-red-600 mb-1">
                    {{ $statistics['wrong_count'] }}
                </div>
                <p class="text-sm text-gray-600">Jawaban Salah</p>
                <div class="text-xs text-red-500 mt-1">
                    <i class="ph ph-x-circle mr-1"></i> 
                    @if($statistics['total_questions'] > 0)
                        {{ number_format(($statistics['wrong_count'] / $statistics['total_questions']) * 100, 1) }}%
                    @else
                        0%
                    @endif
                </div>
            </div>
            
            <!-- Tidak Dijawab -->
            <div class="text-center p-4 rounded-lg bg-white border border-gray-200 shadow-sm">
                <div class="text-2xl font-bold text-gray-600 mb-1">
                    {{ $statistics['unanswered_count'] }}
                </div>
                <p class="text-sm text-gray-600">Tidak Dijawab</p>
                <div class="text-xs text-gray-500 mt-1">
                    <i class="ph ph-minus-circle mr-1"></i> 
                    @if($statistics['total_questions'] > 0)
                        {{ number_format(($statistics['unanswered_count'] / $statistics['total_questions']) * 100, 1) }}%
                    @else
                        0%
                    @endif
                </div>
            </div>
        </div>
        
        <!-- Progress Bar Akurasi -->
        @if($statistics['total_questions'] > 0)
        <div class="pt-6 border-t border-gray-100">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium text-gray-700">Akurasi Jawaban</span>
                <span class="text-sm font-bold text-gray-800">
                    {{ $statistics['accuracy_percentage'] ?? number_format(($statistics['correct_count'] / $statistics['total_questions']) * 100, 1) }}%
                </span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-3">
                <div class="bg-green-600 h-3 rounded-full" 
                     style="width: {{ $statistics['accuracy_percentage'] ?? ($statistics['total_questions'] > 0 ? ($statistics['correct_count'] / $statistics['total_questions']) * 100 : 0) }}%">
                </div>
            </div>
            
            <!-- Attempt Comparison -->
            @if(count($attempts) > 1)
            <div class="mt-6">
                <h4 class="text-sm font-bold text-gray-700 mb-3">Perbandingan Semua Attempt:</h4>
                <div class="space-y-2">
                    @foreach($attempts as $attempt)
                    <div class="flex items-center justify-between p-3 rounded-lg {{ $attempt['is_best'] ? 'bg-green-50 border border-green-200' : 'bg-gray-50' }}">
                        <div class="flex items-center">
                            <span class="font-medium text-gray-700 mr-3">
                                Attempt {{ $attempt['attempt_number'] ?? ($loop->index + 1) }}
                            </span>
                            @if($attempt['is_best'])
                            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 font-medium">
                                Nilai Tertinggi
                            </span>
                            @endif
                        </div>
                        <div class="flex items-center">
                            <span class="font-bold {{ $attempt['is_passed'] ? 'text-green-600' : 'text-red-600' }} mr-2">
                                {{ $attempt['score'] }}
                            </span>
                            <span class="text-xs text-gray-500">
                                ({{ $attempt['submitted_at'] ?? '-' }})
                            </span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
        @endif
    </div>
    @endif
</div>

<!-- Add some custom styles -->
<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .shadow-xs {
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }
    
    .group:hover .group-hover\:-translate-x-1 {
        transform: translateX(-4px);
    }
    
    /* Smooth transitions */
    .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }
</style>
@endsection