{{-- Tab 4: Quiz --}}
<div x-show="activeTab === 'quiz'" x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100"
    x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100"
    x-transition:leave-end="opacity-0 transform scale-95" x-data="{
        quizQuestions: [{
                question: 'ما هو الأمر المستخدم لإنشاء Controller جديد في Laravel؟',
                options: ['php artisan make:model', 'php artisan make:controller', 'php artisan new:controller', 'php artisan controller:create'],
                answer: 'php artisan make:controller',
                userAnswer: null
            },
            {
                question: 'أي من التالي يُستخدم لتعريف مسار (Route) يقبل طلبات POST فقط؟',
                options: ['Route::get()', 'Route::any()', 'Route::post()', 'Route::put()'],
                answer: 'Route::post()',
                userAnswer: null
            },
            {
                question: 'ما هي وظيفة Blade في Laravel؟',
                options: ['نظام لإدارة قواعد البيانات', 'محرك قوالب (Templating Engine)', 'مكتبة لاختبار الوحدات (Unit Testing)', 'نظام لإدارة الحزم (Package Manager)'],
                answer: 'محرك قوالب (Templating Engine)',
                userAnswer: null
            }
        ],
        currentQuestionIndex: 0,
        quizEnded: false,
        score: 0,
        totalTime: 120, // 2 minutes
        timeLeft: 120,
        timerInterval: null,
        startQuiz() {
            this.timeLeft = this.totalTime;
            this.currentQuestionIndex = 0;
            this.quizEnded = false;
            this.score = 0;
            this.quizQuestions.forEach(q => q.userAnswer = null);
            this.timerInterval = setInterval(() => {
                if (this.timeLeft > 0) {
                    this.timeLeft--;
                } else {
                    this.endQuiz();
                }
            }, 1000);
        },
        nextQuestion() {
            if (this.currentQuestionIndex < this.quizQuestions.length - 1) {
                this.currentQuestionIndex++;
            } else {
                this.endQuiz();
            }
        },
        selectAnswer(question, answer) {
            question.userAnswer = answer;
        },
        endQuiz() {
            clearInterval(this.timerInterval);
            this.calculateScore();
            this.quizEnded = true;
        },
        calculateScore() {
            this.score = this.quizQuestions.filter(q => q.userAnswer === q.answer).length;
        },
        progressPercentage() {
            return (this.timeLeft / this.totalTime) * 100;
        }
    }" x-init="startQuiz()">

    <div class="bg-gray-900/50 rounded-lg p-6 min-h-[400px]">
        <template x-if="!quizEnded">
            <div>
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-2xl font-bold text-white"
                        x-text="`السؤال ${currentQuestionIndex + 1} من ${quizQuestions.length}`"></h3>
                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span class="text-lg font-mono"
                            x-text="`${Math.floor(timeLeft / 60).toString().padStart(2, '0')}:${(timeLeft % 60).toString().padStart(2, '0')}`"></span>
                    </div>
                </div>

                <div class="w-full bg-gray-700 rounded-full h-2.5 mb-8">
                    <div class="bg-gradient-to-r from-red-500 to-yellow-500 h-2.5 rounded-full transition-all duration-1000 ease-linear"
                        :style="`width: ${progressPercentage()}%`">
                    </div>
                </div>

                <div x-data="{ current: quizQuestions[currentQuestionIndex] }">
                    <p class="text-xl text-gray-200 mb-6" x-text="current.question"></p>

                    <div class="space-y-4">
                        <template x-for="(option, index) in current.options" :key="index">
                            <button @click="selectAnswer(current, option)"
                                :class="{
                                    'bg-cyan-600/30 border-cyan-500 ring-2 ring-cyan-500': current.userAnswer ===
                                        option,
                                    'bg-gray-800 hover:bg-gray-700 border-gray-600': current.userAnswer !== option
                                }"
                                class="w-full text-right p-4 border rounded-lg transition-all duration-200">
                                <span class="text-lg text-white" x-text="option"></span>
                            </button>
                        </template>
                    </div>

                    <div class="mt-8 text-left">
                        <template x-if="currentQuestionIndex < quizQuestions.length - 1">
                            <button @click="nextQuestion()" :disabled="!quizQuestions[currentQuestionIndex].userAnswer"
                                class="bg-cyan-600 text-white font-bold py-2 px-6 rounded-lg transition-colors hover:bg-cyan-500 disabled:bg-gray-600 disabled:cursor-not-allowed">
                                التالي
                            </button>
                        </template>
                        <template x-if="currentQuestionIndex === quizQuestions.length - 1">
                            <button @click="endQuiz()" :disabled="!quizQuestions[currentQuestionIndex].userAnswer"
                                class="bg-emerald-600 text-white font-bold py-2 px-6 rounded-lg transition-colors hover:bg-emerald-500 disabled:bg-gray-600 disabled:cursor-not-allowed">
                                إنهاء الاختبار
                            </button>
                        </template>
                    </div>
                </div>
            </div>
        </template>

        <template x-if="quizEnded">
            <div class="text-center">
                <h3 class="text-3xl font-bold text-white mb-4">انتهى الاختبار!</h3>
                <p class="text-xl text-gray-300 mb-6">
                    نتيجتك هي:
                    <span class="text-cyan-400 font-bold" x-text="`${score} من ${quizQuestions.length}`"></span>
                </p>

                <div class="space-y-4 text-right max-w-2xl mx-auto">
                    <template x-for="(q, i) in quizQuestions" :key="i">
                        <div class="p-4 rounded-lg"
                            :class="{ 'bg-green-900/50 border border-green-700': q.userAnswer === q
                                .answer, 'bg-red-900/50 border border-red-700': q.userAnswer !== q.answer }">
                            <p class="font-semibold text-lg text-white" x-text="`${i+1}. ${q.question}`"></p>
                            <p class="mt-2 text-sm"
                                :class="{ 'text-green-300': q.userAnswer === q.answer, 'text-red-300': q.userAnswer !== q
                                    .answer }">
                                إجابتك: <span x-text="q.userAnswer || 'لم تجب'"></span>
                            </p>
                            <template x-if="q.userAnswer !== q.answer">
                                <p class="mt-1 text-sm text-yellow-300">الإجابة الصحيحة: <span x-text="q.answer"></span>
                                </p>
                            </template>
                        </div>
                    </template>
                </div>

                <button @click="startQuiz()"
                    class="mt-8 bg-cyan-600 text-white font-bold py-2 px-6 rounded-lg transition-colors hover:bg-cyan-500">
                    إعادة الاختبار
                </button>
            </div>
        </template>
    </div>
</div>