@extends('layouts.app')

@push('styles')
<style>
.pg-head{margin-bottom:16px}
.pg-head h1{font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--text)}
.pg-head p{font-size:12px;color:var(--text2);margin-top:2px}

.search-wrap{position:relative;margin-bottom:16px}
.search-input{
    width:100%;min-height:44px;padding:10px 14px 10px 38px;
    border:1px solid var(--border2);border-radius:var(--r);
    font-size:13.5px;font-family:inherit;
    background:var(--surface);color:var(--text);outline:none;
    transition:border-color var(--transition),box-shadow var(--transition);
}
.search-input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--ring);
}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}

.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:540px){.game-grid{grid-template-columns:repeat(4,1fr);gap:12px}}
@media(min-width:860px){.game-grid{grid-template-columns:repeat(5,1fr);gap:14px}}
@media(min-width:1100px){.game-grid{grid-template-columns:repeat(6,1fr);gap:16px}}
@media(max-width:380px){
    .game-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .game-card-body{padding:10px}
    .game-card-name{font-size:12px}
    .game-card-dev{font-size:10.5px}
}

.game-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);overflow:hidden;text-decoration:none;display:block;
    transition:all var(--transition);
}
.game-card:hover{
    border-color:var(--accent);
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.game-card:active{transform:scale(.98)}
.game-card:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.game-card-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--elevated);display:block}
.game-card-ph{
    width:100%;aspect-ratio:1;
    background:var(--elevated);
    display:flex;align-items:center;justify-content:center;
}
.game-card-body{padding:8px 9px 10px}
.game-card-name{
    font-size:12px;font-weight:700;color:var(--text);line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.game-card-dev{font-size:10.5px;color:var(--text2);margin-top:2px}

.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-state i{font-size:32px;display:block;margin-bottom:12px;color:var(--muted)}
.empty-state p{font-size:13px;color:var(--text2)}
</style>
@endpush

@section('content')
<div class="pg-head">
    <h1>Top Up Game &amp; Produk Digital</h1>
    <p>Pilih kategori game atau produk digital untuk pemesanan instan</p>
</div>

<div class="search-wrap">
    <i class="fas fa-magnifying-glass search-icon"></i>
    <input type="text" class="search-input" id="searchGame"
           placeholder="Cari game atau produk digital..." oninput="filterGames()">
</div>

@if($games->count() > 0)
<div class="game-grid" id="gameGrid">
    @foreach($games as $game)
    <a href="{{ route('topup.show', $game->slug) }}"
       class="game-card"
       data-name="{{ strtolower($game->name) }} {{ strtolower($game->developer ?? '') }}">
        @if($game->image)
            <img src="{{ $game->image }}" alt="{{ $game->name }}" class="game-card-img" loading="lazy" width="160" height="160">
        @else
            <div class="game-card-ph">
                <i class="fas fa-gamepad" style="font-size:24px;color:var(--accent);opacity:.7"></i>
            </div>
        @endif
        <div class="game-card-body">
            <div class="game-card-name">{{ $game->name }}</div>
            @if($game->developer)
            <div class="game-card-dev">{{ $game->developer }}</div>
            @endif
        </div>
    </a>
    @endforeach
</div>
<div class="empty-state" id="emptyState" style="display:none">
    <i class="fas fa-magnifying-glass"></i>
    <p>Produk tidak ditemukan</p>
</div>
@else
<div class="empty-state">
    <i class="fas fa-gamepad"></i>
    <p>Belum ada produk game tersedia</p>
</div>
@endif
@endsection

@push('scripts')
<script>
function filterGames(){
    var q=document.getElementById('searchGame').value.toLowerCase();
    var cards=document.querySelectorAll('#gameGrid .game-card');
    var shown=0;
    cards.forEach(function(c){
        var match=c.dataset.name.includes(q);
        c.style.display=match?'':'none';
        if(match)shown++;
    });
    document.getElementById('emptyState').style.display=shown===0?'block':'none';
}
</script>
@endpush