{{-- user/games/index.blade.php | Obrempong | Jcode --}}
@extends('layouts.app')
@section('title','Games')
@section('content')
<div class="page-header"><h2>🎮 Games</h2><p>Play & earn points every day!</p></div>

<div class="section">
    {{-- Spin & Scratch Quick Links --}}
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;">
        <a href="{{ route('spin.index') }}" style="text-decoration:none;">
            <div class="card card-body text-center" style="padding:18px;background:linear-gradient(135deg,#8B5CF6,#7C3AED);color:#fff;border:none;">
                <div style="font-size:36px;margin-bottom:6px;">🎡</div>
                <div style="font-weight:700;font-size:14px;">Spin Wheel</div>
                <div style="font-size:11px;opacity:.8;margin-top:2px;">Up to 1,000 pts</div>
            </div>
        </a>
        <a href="{{ route('scratch.index') }}" style="text-decoration:none;">
            <div class="card card-body text-center" style="padding:18px;background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff;border:none;">
                <div style="font-size:36px;margin-bottom:6px;">🎫</div>
                <div style="font-weight:700;font-size:14px;">Scratch Cards</div>
                <div style="font-size:11px;opacity:.8;margin-top:2px;">Instant prizes</div>
            </div>
        </a>
    </div>

    {{-- Game Cards --}}
    <div class="section-title">All Games</div>
    @forelse($games as $game)
    <div class="card card-body" style="margin-bottom:10px;display:flex;align-items:center;gap:14px;">
        <div style="width:56px;height:56px;border-radius:14px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;">
            {{ match($game->type){'math_quiz'=>'🧮','trivia'=>'🧩','memory'=>'🃏',default=>'🎮'} }}
        </div>
        <div style="flex:1;">
            <div style="font-weight:700;font-size:15px;">{{ $game->name }}</div>
            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">{{ $game->description }}</div>
            <div style="display:flex;gap:12px;margin-top:6px;">
                <span style="font-size:11px;font-weight:600;color:var(--success);">+{{ $game->points_per_win }} pts/win</span>
                <span style="font-size:11px;color:var(--text-muted);">{{ $game->plays_today }}/{{ $game->daily_play_limit }} played today</span>
            </div>
        </div>
        <div style="flex-shrink:0;">
            @if($game->can_play)
            <a href="{{ route('games.play',$game) }}" class="btn btn-primary btn-sm">Play</a>
            @else
            <button class="btn btn-sm" style="background:#F1F5F9;color:#94A3B8;" disabled>Done ✓</button>
            @endif
        </div>
    </div>
    @empty
    <div class="card card-body text-center" style="padding:40px;">No games available yet.</div>
    @endforelse
</div>
@endsection