<?php 
include 'common/header.php'; 
?>

<div class="container mx-auto px-4 py-6 mb-20 max-w-4xl">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
            <i class="fa-solid fa-fire text-sky-500"></i> All Games
        </h2>
        <span class="text-[10px] bg-sky-50 text-sky-600 px-2 py-1 rounded font-bold uppercase tracking-wider">Instant Delivery</span>
    </div>

    <div class="relative mb-8">
        <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-gray-300 text-sm"></i>
        <input type="text" id="searchGame" onkeyup="filterGames()" placeholder="Search your favorite game..." 
               class="w-full bg-white border border-gray-100 p-3.5 pl-11 rounded-xl shadow-sm focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500/20 transition-all text-sm">
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4" id="gameGrid">
        <?php 
        $games = $conn->query("SELECT * FROM games ORDER BY name ASC");
        if($games->num_rows > 0):
            while($game = $games->fetch_assoc()): ?>
            <a href="game_detail.php?id=<?php echo $game['id']; ?>" 
               class="game-card bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all block overflow-hidden group">
                
                <div class="aspect-[4/5] bg-gray-50 overflow-hidden relative">
                    <img src="<?php echo $game['image']; ?>" 
                         class="w-full h-full object-cover group-hover:scale-105 transition duration-500" 
                         alt="<?php echo $game['name']; ?>">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                </div>

                <div class="p-3 text-center">
                    <h3 class="game-name font-bold text-xs text-gray-800 truncate mb-1"><?php echo $game['name']; ?></h3>
                    <p class="text-[10px] text-sky-500 font-bold uppercase tracking-tighter">Shop Now</p>
                </div>
            </a>
        <?php endwhile; 
        else: ?>
            <div class="col-span-full text-center py-20">
                <i class="fa-solid fa-ghost text-gray-200 text-5xl mb-4"></i>
                <p class="text-gray-400 text-sm">No games matched your search.</p>
            </div>
        <?php endif; ?>
    </div>

    <div class="text-center py-12">
        <p class="text-[10px] text-gray-300 font-bold uppercase tracking-widest">
            &copy; <?php echo date("Y"); ?> <?php echo getSetting($conn, 'site_name'); ?>
        </p>
    </div>
</div>

<script>
    function filterGames() {
        let input = document.getElementById('searchGame').value.toLowerCase();
        let cards = document.getElementsByClassName('game-card');
        let found = false;
        
        for (let i = 0; i < cards.length; i++) {
            let name = cards[i].getElementsByClassName('game-name')[0].innerText.toLowerCase();
            if (name.includes(input)) {
                cards[i].style.display = "";
                found = true;
            } else {
                cards[i].style.display = "none";
            }
        }
    }
</script>

<?php include 'common/bottom.php'; ?>