@extends('layouts.siswa')

@section('title', 'Game Edukasi')
@section('page_title', 'Game Edukasi')

@section('content')
<!-- TITLE CARD -->
<div class="card" style="margin-bottom: 24px;">
    <div class="card-body">
        <h3 style="color: var(--text-dark); margin-bottom: 8px;">Game Edukasi SIPENA 🎮</h3>
        <p style="color: var(--text-gray); margin-bottom: 0;">Bermain sambil mengasah pengetahuan kamu di game edukasi ini.</p>
    </div>
</div>

<!-- STATS CARDS -->
<section class="stats-grid" style="margin-bottom: 24px;">
    <div class="stat-card">
        <div class="stat-icon bg-blue">
            <i class="fa-solid fa-gamepad"></i>
        </div>
        <div class="stat-details">
            <h3>Game Edukasi Aktif</h3>
            <div class="stat-value">{{ $games->count() }}</div>
        </div>
    </div>
</section>

<!-- GAME LIST GRID -->
<section style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; padding-bottom: 40px;">
    @forelse ($games as $game)
        <div class="card" style="display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; transition: var(--transition);">
            <div class="card-body" style="padding: 24px 24px 0 24px;">
                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 14px;">
                    <div style="width: 48px; height: 48px; border-radius: 8px; background: var(--primary-light); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                        <i class="fa-solid fa-puzzle-piece"></i>
                    </div>
                    <h3 style="font-size: 1.15rem; font-weight: 700; color: var(--text-dark); margin: 0;">{{ $game->judul }}</h3>
                </div>
                <p style="color: var(--text-gray); font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; margin-top: 0;">
                    {{ $game->deskripsi ?: 'Bermain sambil mengasah pengetahuan kamu di game edukasi ini.' }}
                </p>
            </div>
            
            <div class="card-footer" style="background: transparent; border-top: none; padding: 0 24px 24px 24px;">
                <a href="{{ route('siswa.game.main', $game) }}" class="btn btn-primary" style="width: 100%; text-decoration: none; justify-content: center; display: inline-flex; align-items: center; gap: 8px;">
                    <i class="fa-solid fa-play"></i> Mainkan Game
                </a>
            </div>
        </div>
    @empty
        <div class="card" style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-gray);">
            <div class="card-body">
                <i class="fa-solid fa-face-frown" style="font-size: 3rem; margin-bottom: 16px; color: var(--text-light);"></i>
                <p style="font-size: 1rem; margin: 0;">Belum ada game edukasi aktif saat ini. Silakan coba kembali nanti!</p>
            </div>
        </div>
    @endforelse
</section>
@endsection
