<?php $__env->startSection('content'); ?>

<?php
    // ==========================================
    // 1. DATA KATEGORI TOMBOL (FILTER)
    // ==========================================
    $categoryButtons = [
        ['id' => '1', 'name' => 'Semua'],
        ['id' => '3', 'name' => 'Baru'],
        ['id' => '2', 'name' => 'Top'],
        ['id' => '8', 'name' => 'Bonus Buy'],
        ['id' => '6', 'name' => 'Video'],
    ];
?>

<div class="middlebackground background-design5">
    <div role="main" class="container">
        <div class="row">
            
            <div class="col-xs-12 main-content">
                <div class="content slot-content">
                    
                    
                    <div class="content-header slot-content-header game-content-header">
                        <div class="content-title slot-title game-title-header">
                            
                            
                            <h4 class="game-title"><?php echo e($providerName ?? 'Games'); ?></h4>
                            
                            <div class="input-form-group search-form">
                                <input type="text" id="inputSearchGame" class="form-control" autocomplete="off" placeholder="Search" onkeypress="return event.keyCode !== 13;">
                                <button id="btnsearchgame" class="btn btn-default" type="button" onclick="updateSearchGame();">
                                    <span class="fa-solid fa-magnifying-glass"></span>
                                </button>
                            </div>
                        </div>
                        
                        
                        <div class="category-btn-group">
                            <div class="btn-group-md">
                                <?php $__currentLoopData = $categoryButtons; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <button type="button" class="btn btn-default btn-category" data-category="<?php echo e($cat['id']); ?>" onclick="clickCategory('<?php echo e($cat['id']); ?>')"><?php echo e($cat['name']); ?></button>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                    </div>

                    
                    <div class="content-body slot-content-body enable-search">
                        
                        
                        <div class="loader loader-d-n">
                            <img src="/assets/images/loading.gif" alt="loading"/>
                        </div>
                        
                        <div class="game-lists slot-game-lists">
                            
                            
                            <?php $__empty_1 = true; $__currentLoopData = $games; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $game): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <div class="game-box" onclick="checkLoginAndPlay()" style="cursor: pointer;">
                                    <div class="game-content" data-name="<?php echo e($game->game_name); ?>">
                                        <div class="tnhover">
                                            <span class="fa-solid fa-play"></span>&nbsp;&nbsp;Play
                                        </div>
                                        <div class="tntitle"><?php echo e(\Illuminate\Support\Str::limit($game->game_name, 11, '...')); ?></div>
                                        <div class="tnimg">
                                            <img class="img-responsive img-center" 
                                                 alt="<?php echo e($game->game_name); ?>" 
                                                 title="<?php echo e($game->game_name); ?>" 
                                                 data-tnsrc="<?php echo e($game->game_image ?? 'https://d17yzjd28y7r7s.cloudfront.net/images/gameicon/round/'.strtolower($slug).'/'.$game->provider_code.'.webp'); ?>" 
                                                 src="<?php echo e($game->game_image); ?>"/>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                
                                <div class="col-xs-12 text-center" style="padding: 20px; color: #fff;">
                                    Belum ada game yang tersedia untuk provider ini.
                                </div>
                            <?php endif; ?>

                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>
<?php $__env->startPush('script'); ?>
<script>
    // 1. Fungsi Pencarian (Dipanggil saat tombol kaca pembesar diklik)
    function updateSearchGame() {
        // Ambil teks yang diketik user, ubah ke huruf kecil (lowercase) agar tidak case-sensitive
        let searchQuery = document.getElementById('inputSearchGame').value.toLowerCase();
        
        // Ambil seluruh elemen kotak game yang ada di halaman
        let gameBoxes = document.querySelectorAll('.game-lists .game-box');
        
        // Lakukan perulangan untuk mengecek setiap game
        gameBoxes.forEach(function(box) {
            let gameContent = box.querySelector('.game-content');
            
            if (gameContent) {
                // Ambil nama game dari atribut data-name
                let gameName = gameContent.getAttribute('data-name').toLowerCase();
                
                // Jika nama game mengandung kata kunci yang dicari, tampilkan. Jika tidak, sembunyikan.
                if (gameName.includes(searchQuery)) {
                    box.style.display = ""; // Kembalikan ke tampilan semula
                } else {
                    box.style.display = "none"; // Sembunyikan game ini
                }
            }
        });
    }

    // 2. Event Listener agar pencarian berjalan otomatis setiap kali tombol keyboard dilepas (real-time typing)
    document.addEventListener("DOMContentLoaded", function() {
        let searchInput = document.getElementById('inputSearchGame');
        
        if (searchInput) {
            searchInput.addEventListener('keyup', function(e) {
                updateSearchGame();
            });
        }
    });

    // 3. Fungsi Pengecekan Login & Play (Dari diskusi sebelumnya)
    function checkLoginAndPlay() {
        <?php if(auth()->guard()->guest()): ?>
            // Jika user guest (belum login), munculkan alert
            alert('Please login first.');
        <?php else: ?>
            // Jika user auth (sudah login), alihkan halaman
            window.location.href = "<?php echo e(route('account.home')); ?>";
        <?php endif; ?>
    }
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('frontend.mobile.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /www/wwwroot/website/sewa/dragon158/resources/views/frontend/mobile/pages/game/list.blade.php ENDPATH**/ ?>