{{-- user/games/memory.blade.php | Obrempong | Jcode --}}
@extends('layouts.app')
@section('title','Memory Match')
@push('styles')
<style>
.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;}
.mem-card{aspect-ratio:1;border-radius:12px;border:2px solid var(--border);background:var(--primary);cursor:pointer;font-size:28px;display:flex;align-items:center;justify-content:center;transition:.3s;position:relative;transform-style:preserve-3d;}
.mem-card.flipped,.mem-card.matched{background:var(--surface);}
.mem-card .front{position:absolute;backface-visibility:hidden;font-size:28px;}
.mem-card .back{position:absolute;color:#fff;font-size:24px;font-weight:800;backface-visibility:hidden;transform:rotateY(180deg);}
.mem-card.matched{border-color:var(--success);background:#DCFCE7;}
.mem-card.flipped{transform:rotateY(180deg);}
</style>
@endpush
@section('content')
<div class="page-header"><h2>🃏 Memory Match</h2><p>Match all pairs to earn {{ $game->points_per_win }} points!</p></div>
<div class="section">
    <div style="display:flex;justify-content:space-between;margin-bottom:12px;">
        <div class="card card-body" style="padding:10px 16px;display:flex;gap:20px;">
            <div style="text-align:center;"><div style="font-size:20px;font-weight:800;" id="moves">0</div><div style="font-size:11px;color:var(--text-muted);">Moves</div></div>
            <div style="text-align:center;"><div style="font-size:20px;font-weight:800;" id="pairs">0</div><div style="font-size:11px;color:var(--text-muted);">Pairs</div></div>
            <div style="text-align:center;"><div style="font-size:20px;font-weight:800;" id="timer">0</div><div style="font-size:11px;color:var(--text-muted);">Secs</div></div>
        </div>
    </div>
    <div class="memory-grid" id="grid"></div>
    <div id="win-msg" style="display:none;" class="card card-body text-center" style="padding:32px;">
        <div style="font-size:56px;">🎉</div>
        <div style="font-size:22px;font-weight:800;margin:8px 0;">You matched all pairs!</div>
        <div style="color:var(--text-muted);margin-bottom:16px;">+{{ $game->points_per_win }} points earned!</div>
        <button class="btn btn-primary btn-block" onclick="location.reload()">Play Again</button>
        <a href="{{ route('games.index') }}" class="btn btn-outline btn-block" style="margin-top:8px;">Back to Games</a>
    </div>
</div>
@endsection
@push('scripts')
<script>
const emojis=['🍎','🍊','🍋','🍇','🍓','🍒','🥝','🍑'];
const cards=[...emojis,...emojis];
let flipped=[],matched=0,moves=0,lock=false,seconds=0,done=false;
const 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 shuffled=shuffle([...cards]);
const grid=document.getElementById('grid');

shuffled.forEach((emoji,i)=>{
    const card=document.createElement('div');
    card.className='mem-card';
    card.dataset.emoji=emoji;
    card.dataset.index=i;
    card.innerHTML=`<span class="front">❓</span><span class="back">${emoji}</span>`;
    card.addEventListener('click',()=>flip(card));
    grid.appendChild(card);
});

const timerInt=setInterval(()=>{if(!done)document.getElementById('timer').textContent=++seconds;},1000);

function flip(card){
    if(lock||card.classList.contains('flipped')||card.classList.contains('matched'))return;
    card.classList.add('flipped');
    flipped.push(card);
    if(flipped.length===2){
        moves++;document.getElementById('moves').textContent=moves;
        lock=true;
        setTimeout(()=>{
            if(flipped[0].dataset.emoji===flipped[1].dataset.emoji){
                flipped.forEach(c=>c.classList.add('matched'));
                matched++;document.getElementById('pairs').textContent=matched;
                if(matched===8){done=true;clearInterval(timerInt);setTimeout(win,600);}
            }else{
                flipped.forEach(c=>c.classList.remove('flipped'));
            }
            flipped=[];lock=false;
        },700);
    }
}
async function win(){
    document.getElementById('grid').style.display='none';
    document.getElementById('win-msg').style.display='block';
    await post('{{ route('games.score',$game) }}',{won:true,score:matched,duration:seconds});
}
</script>
@endpush