@extends('layout.mobile.main')
@section('mobile')
    <main>
        <div class="container"><!----> <!---->
            <section class="slot">
                <nav data-v-9cfb8622="" class="app-menu app-menu--shadow-end">
                    <ul data-v-9cfb8622="">
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/pragmaticplay"
                                aria-current="page" class="app-link--exact-active app-link--active app-link--active"><img
                                    data-v-9cfb8622="" alt="Slots" src="../../image/pragmatic.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Pragmaticplay</span></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/pgsoft"
                                class=""><img data-v-9cfb8622="" alt="Casino" src="../../image/pgsoft.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span data-v-9cfb8622="">PG
                                    Soft</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/habanero"
                                class=""><img data-v-9cfb8622="" alt="Sports+" src="../../image/habanero.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Habanero</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/cq9"
                                class=""><img data-v-9cfb8622="" alt="cq9" src="../../image/CQ9.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">CQ9</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/joker"
                                class=""><img data-v-9cfb8622="" alt="Lotto" src="../../image/joker.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Joker</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/microgaming"
                                class=""><img data-v-9cfb8622="" alt="Fishing" src="../../image/microgaming.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Microgaming</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/spadegaming"
                                class=""><img data-v-9cfb8622="" alt="Arcade" src="../../image/spadegaming_slot.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Spadegaming</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/playstar"
                                class=""><img data-v-9cfb8622="" alt="Arcade" src="../../image/playstar.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Playstar</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/evoplay"
                                class=""><img data-v-9cfb8622="" alt="Arcade" src="../../image/evoplay.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Evoplay</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/jili"
                                class=""><img data-v-9cfb8622="" alt="Arcade" src="../../image/jili.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Jili</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/yggdarsil"
                                class=""><img data-v-9cfb8622="" alt="Arcade" src="../../image/yggdarsil.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span data-v-9cfb8622="">Ygg
                                    Darsil</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/playngo"
                                class=""><img data-v-9cfb8622="" alt="Arcade" src="../../image/playngo.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Playngo</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot/fungaming"
                                class=""><img data-v-9cfb8622="" alt="Arcade" src="../../image/fungaming.png"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Fungaming</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                    </ul>
                </nav>
                <div id="slot-search-anchor" class="slot-game-search" style="position: initial;">
                    <form>
                        <div class="input--search input__container">
                            <div class="input__root"><input type="text" autocomplete="off"
                                    placeholder="Cari permainan" class="input" id="searchInput"> <i data-v-0e010622=""
                                    class="input__icon fas fa-search fa-md"></i> <!----></div> <!---->
                        </div> <button type="button" class="btn btn--brand">{{ $title }}</button>
                    </form>
                </div>
                <div class="slot__container"><!---->
                    <div data-v-22c64660="" class="slot-content" style="">
                        <ul data-v-22c64660="" class="games-grid">
                            @if (Auth::check())
                                @foreach ($gamelist as $game)
                                    <li data-v-bb0c4606="" data-v-22c64660="" title="{{ $game->game_name }}"
                                        class="game-item__wrapper game--promo game--new game-item--normal-view">
                                        <a data-v-bb0c4606="" href="{{ route('play.show', ['id' => $game->id]) }}"
                                            class="">
                                            <div data-v-bb0c4606="" class="game-item game-item--slot">
                                                <img data-v-bb0c4606="" loading="lazy" src="{{ $game->game_image }}"
                                                    alt="{{ $game->game_name }}" class="game-item__img"
                                                    style="opacity: 1;">
                                                <div data-v-bb0c4606="" class="game-item__provider" style="opacity: 1;">
                                                    <div data-v-bb0c4606="">
                                                        <img data-v-bb0c4606="" src="{{ $game->game_image }}"
                                                            alt="PragmaticPlay">
                                                    </div>
                                                </div>
                                            </div>
                                            <span data-v-bb0c4606="" class="game-item__name">
                                                <font style="vertical-align: inherit;">
                                                    <font style="vertical-align: inherit;">{{ $game->game_name }}</font>
                                                </font>
                                            </span>
                                        </a>
                                    </li>
                                @endforeach
                            @else
                                @foreach ($gamelist as $game)
                                    <li data-v-bb0c4606="" data-v-22c64660="" title="{{ $game->game_name }}"
                                        class="game-item__wrapper game--promo game--new game-item--normal-view">
                                        <a data-v-bb0c4606="" href="javascript:void(0);" onclick="loginAlert()"
                                            class="">
                                            <div data-v-bb0c4606="" class="game-item game-item--slot">
                                                <img data-v-bb0c4606="" loading="lazy" src="{{ $game->game_image }}"
                                                    alt="{{ $game->game_name }}" class="game-item__img"
                                                    style="opacity: 1;">
                                                <div data-v-bb0c4606="" class="game-item__provider" style="opacity: 1;">
                                                    <div data-v-bb0c4606="">
                                                        <img data-v-bb0c4606="" src="{{ $game->game_image }}"
                                                            alt="PragmaticPlay">
                                                    </div>
                                                </div>
                                            </div>
                                            <span data-v-bb0c4606="" class="game-item__name">
                                                <font style="vertical-align: inherit;">
                                                    <font style="vertical-align: inherit;">{{ $game->game_name }}</font>
                                                </font>
                                            </span>
                                        </a>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                        <div data-v-22c64660="" class="loading-observer"></div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const searchInput = document.getElementById('searchInput');
            const gameItems = document.querySelectorAll('.game-item__wrapper');

            searchInput.addEventListener('input', function() {
                const query = searchInput.value.toLowerCase();
                gameItems.forEach(function(item) {
                    const gameName = item.querySelector('.game-item__name').textContent
                        .toLowerCase();
                    if (gameName.includes(query)) {
                        item.style.display = ''; // Show item
                    } else {
                        item.style.display = 'none'; // Hide item
                    }
                });
            });
        });
    </script>
@endsection