@extends('layouts.app', ['title' => 'অনুশীলন কেন্দ্র — কুইজ ও লেখা অনুশীলন'])

@section('content')
<div class="space-y-3.5 w-full -mx-1 sm:mx-0">
    
    <!-- Top 3D Banner (fragment_quiz.xml img_quiz_header) -->
    <div class="relative rounded-3xl overflow-hidden shadow-2xl border border-purple-900/60 cursor-pointer hover:brightness-105 transition">
        <img src="{{ asset('assets/images/quiz_header_v2.webp') }}" alt="অনুশীলন কেন্দ্র — কুইজ ও লেখা অনুশীলন" class="w-full h-36 sm:h-40 object-cover">
    </div>

    <!-- Section Title (fragment_quiz.xml tv_quiz_section_title) -->
    <div class="px-2 pt-1 flex items-center justify-between">
        <h3 class="text-lg font-black text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] font-siliguri flex items-center gap-1.5">
            🎯 কুইজ গুলো
        </h3>
        <span class="text-xs font-bold text-emerald-300 font-outfit bg-emerald-950/80 border border-emerald-500/40 px-2.5 py-0.5 rounded-full">
            লেভেল {{ $level ?? 'A0' }}
        </span>
    </div>

    <!-- Quiz Cards List (item_quiz.xml) -->
    <div class="space-y-3">
        @php
            $quizCards = [
                ['id' => 1, 'num' => '১', 'title' => 'শব্দ অর্থ কুইজ', 'label' => 'কুইজ ১', 'icon' => 'ic_card_meaning.webp', 'time' => '১০ মিনিট', 'questions' => '১০ প্রশ্ন', 'score' => '০/১০', 'progress' => 0, 'badge_bg' => 'from-amber-400 to-amber-300', 'badge_border' => 'border-amber-300'],
                ['id' => 2, 'num' => '২', 'title' => 'বাংলা → ইতালিয়ান', 'label' => 'কুইজ ২', 'icon' => 'ic_card_vocabulary.webp', 'time' => '১০ মিনিট', 'questions' => '১০ প্রশ্ন', 'score' => '০/১০', 'progress' => 0, 'badge_bg' => 'from-sky-400 to-cyan-300', 'badge_border' => 'border-sky-300'],
                ['id' => 3, 'num' => '৩', 'title' => 'শূন্যস্থান পূরণ', 'label' => 'কুইজ ৩', 'icon' => 'ic_card_grammar.webp', 'time' => '১০ মিনিট', 'questions' => '১০ প্রশ্ন', 'score' => '০/১০', 'progress' => 0, 'badge_bg' => 'from-purple-400 to-pink-300', 'badge_border' => 'border-purple-300'],
                ['id' => 4, 'num' => '৪', 'title' => 'মিশ্র কুইজ', 'label' => 'কুইজ ৪', 'icon' => 'ic_card_conversation.png', 'time' => '১৫ মিনিট', 'questions' => '১৫ প্রশ্ন', 'score' => '০/১৫', 'progress' => 0, 'badge_bg' => 'from-emerald-400 to-green-300', 'badge_border' => 'border-emerald-300'],
            ];
        @endphp

        @foreach($quizCards as $q)
        <div class="bg-[#07001E] rounded-3xl p-4 shadow-2xl border border-indigo-900/70 relative overflow-hidden group hover:scale-[1.01] transition">
            
            <div class="flex items-start justify-between gap-3">
                <!-- Left 3D Icon (52dp x 52dp) -->
                <div class="w-13 h-13 rounded-2xl bg-indigo-950/80 border border-indigo-500/40 p-1 flex items-center justify-center flex-shrink-0 shadow-lg group-hover:scale-105 transition">
                    <img src="{{ asset('assets/images/' . $q['icon']) }}" alt="{{ $q['title'] }}" class="w-11 h-11 object-contain">
                </div>

                <!-- Middle Content -->
                <div class="flex-1 min-w-0 pr-12">
                    <span class="text-xs text-[#9FA2D8] font-medium font-outfit block">
                        {{ $q['label'] }}
                    </span>
                    <h4 class="text-base sm:text-lg font-black text-white font-siliguri drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] leading-tight truncate">
                        {{ $q['title'] }}
                    </h4>
                    
                    <div class="flex items-center gap-3 mt-2 text-xs text-[#B8BAEA]">
                        <span class="flex items-center gap-1">
                            <span class="text-[#9FA2D8]">◷</span> {{ $q['time'] }}
                        </span>
                        <span class="flex items-center gap-1">
                            <span class="text-[#9FA2D8]">◉</span> {{ $q['questions'] }}
                        </span>
                    </div>
                </div>

                <!-- Right Top Score Box (bg_quiz_badge_gold/blue/purple/green) -->
                <div class="absolute top-4 right-4 bg-gradient-to-tr {{ $q['badge_bg'] }} text-[#2B1743] font-black text-xs px-2.5 py-1.5 rounded-xl shadow-lg border {{ $q['badge_border'] }} text-center font-outfit min-w-[50px]">
                    {{ $q['score'] }}
                </div>
            </div>

            <!-- Bottom Progress Bar (pb_quiz_compact) -->
            <div class="w-full bg-indigo-950/80 rounded-full h-2 mt-3.5 overflow-hidden border border-indigo-900/60">
                <div class="bg-gradient-to-r from-purple-500 via-pink-500 to-amber-400 h-full rounded-full" style="width: {{ $q['progress'] }}%"></div>
            </div>

            <!-- Interactive Start Trigger -->
            <button onclick="openQuizRunner('{{ $q['title'] }}', '{{ $q['label'] }}')" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                কুইজ শুরু করুন
            </button>
        </div>
        @endforeach
    </div>

</div>

<!-- Interactive Quiz Modal -->
<div id="quizRunnerModal" class="hidden fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-4">
    <div class="bg-[#07001E] text-white rounded-3xl p-5 max-w-sm w-full shadow-2xl border border-indigo-500/50 relative">
        <button onclick="closeQuizModal()" class="absolute top-3 right-3 text-slate-400 hover:text-white text-xl font-bold">×</button>
        
        <span id="modalQuizLabel" class="text-xs text-[#9FA2D8] font-bold block">কুইজ ১</span>
        <h3 id="modalQuizTitle" class="text-lg font-black text-white mt-0.5">শব্দ অর্থ কুইজ</h3>
        
        <div class="my-4 p-4 bg-indigo-950/70 border border-indigo-800 rounded-2xl text-center">
            <span class="text-xs text-amber-300 font-bold block">প্রশ্ন ১ / ১০</span>
            <p class="text-base font-black text-white font-outfit mt-1">"Buongiorno" এর বাংলা অর্থ কী?</p>
        </div>

        <div class="space-y-2 text-xs font-bold">
            <button onclick="selectQuizOpt(this, true)" class="w-full p-3 rounded-2xl bg-indigo-900/60 hover:bg-emerald-600 border border-indigo-700 text-left transition flex items-center justify-between">
                <span>A) শুভ সকাল</span>
                <span class="badge">○</span>
            </button>
            <button onclick="selectQuizOpt(this, false)" class="w-full p-3 rounded-2xl bg-indigo-900/60 hover:bg-rose-600 border border-indigo-700 text-left transition flex items-center justify-between">
                <span>B) শুভ রাত্রি</span>
                <span class="badge">○</span>
            </button>
            <button onclick="selectQuizOpt(this, false)" class="w-full p-3 rounded-2xl bg-indigo-900/60 hover:bg-rose-600 border border-indigo-700 text-left transition flex items-center justify-between">
                <span>C) ধন্যবাদ</span>
                <span class="badge">○</span>
            </button>
        </div>

        <div id="quizFeedback" class="hidden mt-3 p-2.5 rounded-xl text-xs text-center font-bold"></div>
    </div>
</div>

<script>
    function openQuizRunner(title, label) {
        document.getElementById('modalQuizTitle').innerText = title;
        document.getElementById('modalQuizLabel').innerText = label;
        document.getElementById('quizFeedback').classList.add('hidden');
        document.getElementById('quizRunnerModal').classList.remove('hidden');
    }
    function closeQuizModal() {
        document.getElementById('quizRunnerModal').classList.add('hidden');
    }
    function selectQuizOpt(btn, isCorrect) {
        const feedback = document.getElementById('quizFeedback');
        feedback.classList.remove('hidden');
        if (isCorrect) {
            btn.classList.add('bg-emerald-600', 'border-emerald-500');
            btn.querySelector('.badge').innerText = '✓';
            feedback.className = 'mt-3 p-2.5 rounded-xl text-xs text-center font-bold bg-emerald-900/80 text-emerald-200 border border-emerald-500';
            feedback.innerText = '🎉 চমৎকার! সঠিক উত্তর! (+১০ XP)';
            speakItalian('Buongiorno');
        } else {
            btn.classList.add('bg-rose-600', 'border-rose-500');
            btn.querySelector('.badge').innerText = '✗';
            feedback.className = 'mt-3 p-2.5 rounded-xl text-xs text-center font-bold bg-rose-900/80 text-rose-200 border border-rose-500';
            feedback.innerText = '❌ ভুল উত্তর, আবার চেষ্টা করুন!';
        }
    }
</script>
@endsection