{{-- user/games/math_quiz.blade.php | Obrempong | Jcode --}}
@extends('layouts.app')
@section('title','Math Quiz')
@push('styles')
<style>
.quiz-card{background:var(--surface);border-radius:20px;padding:28px 20px;text-align:center;box-shadow:var(--shadow-lg);}
.question-box{font-size:36px;font-weight:800;color:var(--text);margin:20px 0;padding:24px;background:var(--primary-light);border-radius:16px;letter-spacing:2px;}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0;}
.option-btn{padding:18px;border-radius:14px;border:2px solid var(--border);background:var(--surface);font-size:20px;font-weight:800;cursor:pointer;transition:.2s;color:var(--text);}
.option-btn:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
.option-btn.correct{border-color:var(--success);background:#DCFCE7;color:#166534;}
.option-btn.wrong{border-color:var(--danger);background:#FEE2E2;color:#991B1B;}
.score-bar{height:8px;background:#E2E8F0;border-radius:4px;overflow:hidden;}
.score-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--success));border-radius:4px;transition:width .5s;}
</style>
@endpush
@section('content')
<div class="page-header"><h2>🧮 Math Quiz</h2><p>Answer 5 questions to earn {{ $game->points_per_win }} points!</p></div>
<div class="section">
    {{-- Progress --}}
    <div style="margin-bottom:16px;">
        <div style="display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:6px;">
            <span>Question <span id="q-num">1</span>/5</span>
            <span>Score: <span id="score">0</span>/5</span>
        </div>
        <div class="score-bar"><div class="score-fill" id="score-fill" style="width:0%;"></div></div>
    </div>

    <div class="quiz-card" id="quiz-area">
        <div style="font-size:13px;color:var(--text-muted);">Time remaining</div>
        <div id="timer" style="font-size:32px;font-weight:800;color:var(--primary);">30</div>
        <div class="question-box" id="question">Loading...</div>
        <div class="options-grid" id="options"></div>
    </div>

    {{-- Result Screen (hidden) --}}
    <div id="result-screen" style="display:none;" class="quiz-card">
        <div id="result-emoji" style="font-size:64px;">🎉</div>
        <div id="result-title" style="font-size:24px;font-weight:800;margin:12px 0;"></div>
        <div id="result-msg"   style="font-size:14px;color:var(--text-muted);margin-bottom:20px;"></div>
        <button class="btn btn-primary btn-block btn-lg" onclick="location.href='{{ route('games.index') }}'">Back to Games</button>
    </div>
</div>
@endsection
@push('scripts')
<script>
const GAME_ID    = {{ $game->id }};
const POINTS_WIN = {{ $game->points_per_win }};
const SCORE_URL  = '{{ route('games.score', $game) }}';

const questions = generateQuestions(5);
let current=0, score=0, timer=30, timerInt=null;

function generateQuestions(n){
    const ops=['+','-','×'];
    return Array.from({length:n},()=>{
        const op=ops[Math.floor(Math.random()*ops.length)];
        let a=Math.floor(Math.random()*20)+1,b=Math.floor(Math.random()*20)+1,ans;
        if(op==='+')ans=a+b;
        else if(op==='-'){if(a<b)[a,b]=[b,a];ans=a-b;}
        else{a=Math.floor(Math.random()*12)+1;b=Math.floor(Math.random()*12)+1;ans=a*b;}
        const wrongs=new Set();
        while(wrongs.size<3){const w=ans+Math.floor(Math.random()*20)-10;if(w!==ans&&w>=0)wrongs.add(w);}
        const opts=shuffle([ans,...wrongs]);
        return{q:`${a} ${op} ${b} = ?`,ans,opts};
    });
}

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

function loadQuestion(){
    if(current>=questions.length){endGame();return;}
    clearInterval(timerInt);timer=30;
    document.getElementById('q-num').textContent=current+1;
    document.getElementById('question').textContent=questions[current].q;
    const optDiv=document.getElementById('options');
    optDiv.innerHTML='';
    questions[current].opts.forEach(o=>{
        const b=document.createElement('button');
        b.className='option-btn';b.textContent=o;
        b.onclick=()=>answer(o,b);
        optDiv.appendChild(b);
    });
    timerInt=setInterval(()=>{
        timer--;
        document.getElementById('timer').textContent=timer;
        if(timer<=5)document.getElementById('timer').style.color='var(--danger)';
        if(timer<=0){clearInterval(timerInt);nextQuestion(false);}
    },1000);
}

function answer(val,btn){
    clearInterval(timerInt);
    const correct=val===questions[current].ans;
    btn.className='option-btn '+(correct?'correct':'wrong');
    if(correct){score++;document.getElementById('score').textContent=score;document.getElementById('score-fill').style.width=(score/5*100)+'%';}
    document.querySelectorAll('.option-btn').forEach(b=>b.disabled=true);
    setTimeout(()=>nextQuestion(correct),800);
}

function nextQuestion(){current++;loadQuestion();}

async function endGame(){
    clearInterval(timerInt);
    const won=score>=3;
    document.getElementById('quiz-area').style.display='none';
    document.getElementById('result-screen').style.display='block';
    document.getElementById('result-emoji').textContent=won?'🎉':'😅';
    document.getElementById('result-title').textContent=won?`You Won! +${POINTS_WIN} pts`:'Better Luck Next Time!';
    document.getElementById('result-msg').textContent=`Score: ${score}/5 – ${won?'Awesome job!':'You need 3+ correct to win.'}`;

    try{
        await post(SCORE_URL,{won,score,duration:5*30-timer});
    }catch(e){}
}

loadQuestion();
</script>
@endpush