{{-- user/games/trivia.blade.php | Obrempong | Jcode --}}
@extends('layouts.app')
@section('title','Trivia Quiz')
@push('styles')
<style>
.trivia-opt{width:100%;padding:16px;border-radius:12px;border:2px solid var(--border);background:var(--surface);font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:.2s;margin-bottom:10px;color:var(--text);}
.trivia-opt:hover{border-color:var(--primary);background:var(--primary-light);}
.trivia-opt.correct{border-color:var(--success);background:#DCFCE7;color:#166534;}
.trivia-opt.wrong{border-color:var(--danger);background:#FEE2E2;color:#991B1B;}
</style>
@endpush
@section('content')
<div class="page-header"><h2>🧩 Trivia Quiz</h2><p>3 correct answers to win {{ $game->points_per_win }} points!</p></div>
<div class="section">
    <div style="display:flex;justify-content:space-between;margin-bottom:12px;font-size:13px;font-weight:600;">
        <span>Q<span id="qn">1</span>/5</span><span style="color:var(--success);">✓ <span id="sc">0</span></span>
    </div>
    <div class="card card-body" id="qbox" style="padding:24px;">
        <div id="qtxt" style="font-size:16px;font-weight:700;margin-bottom:20px;line-height:1.4;"></div>
        <div id="qopts"></div>
    </div>
    <div id="done-box" style="display:none;" class="card card-body text-center" style="padding:32px;">
        <div id="done-emoji" style="font-size:56px;"></div>
        <div id="done-title" style="font-size:22px;font-weight:800;margin:12px 0;"></div>
        <div id="done-sub"   style="color:var(--text-muted);margin-bottom:20px;"></div>
        <a href="{{ route('games.index') }}" class="btn btn-primary btn-block">Back to Games</a>
    </div>
</div>
@endsection
@push('scripts')
<script>
const qs=[
    {q:"What is the capital of Ghana?",a:"Accra",opts:["Accra","Kumasi","Tamale","Takoradi"]},
    {q:"How many days are in a leap year?",a:"366",opts:["365","366","367","364"]},
    {q:"What currency does Ghana use?",a:"Ghana Cedi",opts:["Naira","Ghana Cedi","Dalasi","Franc"]},
    {q:"Which planet is closest to the Sun?",a:"Mercury",opts:["Venus","Earth","Mercury","Mars"]},
    {q:"What is 15 × 8?",a:"120",opts:["110","120","130","105"]},
    {q:"Which ocean is the largest?",a:"Pacific",opts:["Atlantic","Indian","Pacific","Arctic"]},
    {q:"How many sides does a hexagon have?",a:"6",opts:["5","6","7","8"]},
    {q:"What is the boiling point of water (°C)?",a:"100",opts:["90","95","100","110"]},
];
function shuffle(a){for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
const selected=shuffle([...qs]).slice(0,5);
let idx=0,score=0;

function load(){
    const q=selected[idx];
    document.getElementById('qn').textContent=idx+1;
    document.getElementById('qtxt').textContent=q.q;
    const d=document.getElementById('qopts');
    d.innerHTML='';
    shuffle([...q.opts]).forEach(o=>{
        const b=document.createElement('button');
        b.className='trivia-opt';b.textContent=o;
        b.onclick=()=>{
            b.className='trivia-opt '+(o===q.a?'correct':'wrong');
            if(o===q.a){score++;document.getElementById('sc').textContent=score;}
            document.querySelectorAll('.trivia-opt').forEach(x=>x.disabled=true);
            setTimeout(()=>{idx++;idx<5?load():finish();},900);
        };
        d.appendChild(b);
    });
}

async function finish(){
    document.getElementById('qbox').style.display='none';
    document.getElementById('done-box').style.display='block';
    const won=score>=3;
    document.getElementById('done-emoji').textContent=won?'🎉':'😅';
    document.getElementById('done-title').textContent=won?`+{{ $game->points_per_win }} pts earned!`:'Try again tomorrow';
    document.getElementById('done-sub').textContent=`Score: ${score}/5`;
    try{await post('{{ route('games.score',$game) }}',{won,score,duration:0});}catch(e){}
}
load();
</script>
@endpush