@extends('core::layouts.dashboard')

@section('title', $title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard/game.css') }}?v={{ time() }}">
@endpush

@section('content')
<h1 class="page-title">Poin Permainan</h1>

<!-- Stats Cards -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-card-header">
            <div class="stat-icon">
                <i class="fas fa-coins"></i>
            </div>
            <div class="stat-label">Total Poin yang Didapat</div>
        </div>
        <div class="stat-value">{{ number_format($total_points ?? 0) }} Poin</div>
        <div class="stat-trend">
            <i class="fas fa-arrow-up"></i>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-header">
            <div class="stat-icon">
                <i class="fas fa-calendar-day"></i>
            </div>
            <div class="stat-label">Total Poin Hari ini</div>
        </div>
        <div class="stat-value">{{ number_format($today_points ?? 0) }} Poin</div>
        <div class="stat-trend">
            <i class="fas fa-arrow-up"></i>
        </div>
    </div>
</div>

<!-- Data Table Section -->
<div class="data-section">
    <div class="data-section-header">
        <div class="data-section-icon">
            <i class="fas fa-table"></i>
        </div>
        <h2 class="data-section-title">Data Tabel Game Reward</h2>
    </div>

    <div class="search-box">
        <p style="font-size: 0.875rem; color: #9ca3af; margin-bottom: 0.75rem;">Cari Data</p>
        <div class="search-wrapper">
            <input type="text" class="search-input" placeholder="Cari data">
        </div>
    </div>

    <div class="table-responsive">
        <table class="reward-table">
            <thead>
                <tr>
                    <th>Game</th>
                    <th>Poin</th>
                    <th>Tanggal</th>
                    <th>Wallet</th>
                </tr>
            </thead>
            <tbody>
                @forelse($game_rewards ?? [] as $reward)
                <tr>
                    <td class="game-name">{{ $reward->game->name ?? 'Unknown Game' }}</td>
                    <td class="poin-value">+{{ number_format($reward->points_earned) }}</td>
                    <td>{{ $reward->ended_at ? \Carbon\Carbon::parse($reward->ended_at)->format('d/m/Y') : '-' }}</td>
                    <td><span class="wallet-link">-</span></td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="text-center" style="padding: 2rem; color: #9ca3af;">
                        <i class="fas fa-gamepad" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
                        Belum ada riwayat game. Mainkan game untuk mendapatkan poin!
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if(method_exists($game_rewards, 'hasPages') && $game_rewards->hasPages())
    <div class="pagination-wrapper">
        <div class="pagination-info">
            Showing {{ $game_rewards->firstItem() ?? 1 }}-{{ $game_rewards->lastItem() ?? 10 }} from {{ $game_rewards->total() ?? 0 }}
        </div>
        <div class="pagination-controls">
            <div class="rows-per-page">
                <label>Rows per page:</label>
                <select class="rows-select" onchange="window.location.href='?per_page='+this.value">
                    <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                    <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                </select>
            </div>
            <div class="pagination-buttons">
                <button class="pagination-btn" {{ method_exists($game_rewards, 'onFirstPage') && $game_rewards->onFirstPage() ? 'disabled' : '' }} onclick="window.location.href='{{ method_exists($game_rewards, 'previousPageUrl') ? $game_rewards->previousPageUrl() : '#' }}'">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="pagination-btn" {{ method_exists($game_rewards, 'hasMorePages') && !$game_rewards->hasMorePages() ? 'disabled' : '' }} onclick="window.location.href='{{ method_exists($game_rewards, 'nextPageUrl') ? $game_rewards->nextPageUrl() : '#' }}'">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Games Section -->
<div class="games-section">
    <div class="section-header">
        <h2 class="section-title">SEMUA Permainan</h2>
        <p class="section-subtitle">Mainkan Permainan dibawah untuk mendapatkan koin sebanyak-banyaknya</p>
    </div>

    <div class="games-grid">
        @forelse($games ?? [] as $game)
        <!-- {{ $game->name }} -->
        <div class="game-card">
            <img src="{{ $game->thumbnail ? asset('storage/' . $game->thumbnail) : 'https://placehold.co/400x200/4c1d95/white?text=' . urlencode($game->name) }}"
                 alt="{{ $game->name }}"
                 class="game-image">
            <div class="game-content">
                <h3 class="game-title">{{ $game->name }}</h3>
                <p class="game-description">{{ $game->description ?? 'Dapatkan ' . $game->point_reward . ' koin dalam mempermainkan game ini' }}</p>
                <div class="game-stats" style="display: flex; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.75rem; color: #9ca3af;">
                    <span><i class="fas fa-coins"></i> {{ $game->point_reward }} poin</span>
                    <span><i class="fas fa-gamepad"></i> {{ $game->remaining_plays ?? $game->daily_limit }}/{{ $game->daily_limit }} sisa</span>
                    @if($game->user_high_score > 0)
                    <span><i class="fas fa-trophy"></i> {{ number_format($game->user_high_score) }} skor</span>
                    @endif
                </div>
                @if($game->can_play ?? true)
                <button class="play-btn" onclick="window.location.href='{{ route('game.play', $game->slug) }}'">
                    Main sekarang
                </button>
                @else
                <button class="play-btn" disabled style="opacity: 0.5; cursor: not-allowed;">
                    Limit tercapai hari ini
                </button>
                @endif
            </div>
        </div>
        @empty
        <div class="col-span-full" style="grid-column: 1/-1; text-align: center; padding: 3rem; color: #9ca3af;">
            <i class="fas fa-gamepad" style="font-size: 3rem; margin-bottom: 1rem; display: block;"></i>
            <p>Belum ada Permainan tersedia saat ini.</p>
            <p style="font-size: 0.875rem;">Silakan kembali lagi nanti!</p>
        </div>
        @endforelse
    </div>
</div>
@endsection