@extends('layout.desktop.main')
@section('content')
    <main>
        <div class="container">
            @include('layout.desktop.running_text')
            <nav class="app-breadcrumbs app-breadcrumbs--d app-breadcrumbs--shadow-end">
                <ul>
                    <li data-pos="start" class="nav-observer"></li>
                    <li class="nav-item nav-item--home"><a href="/" name="Beranda" class="app-link--active">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">
                                    Home page
                                </font>
                            </font>
                        </a></li>
                    <li class="nav-item nav-item--fill"><i class="fas fa-chevron-right fa-xs"></i></li>
                    <li class="nav-item"><a href="/slot" aria-current="page" name="Slots" data-ref="slots"
                            class="app-link--exact-active app-link--active">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">
                                    Slot
                                </font>
                            </font>
                        </a>
                    </li>
                    <li data-pos="end" class="nav-observer"></li>
                </ul>
            </nav>
            <section class="slot slot--d">
                <nav data-v-4b95f7a8="" class="games-nav--d">
                    <ul data-v-4b95f7a8="" class="games-nav--d__links">
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot" class=""><img data-v-4b95f7a8=""
                                    src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/idnslot.svg" alt="IDNSLOT">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">IDNSLOT</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/pragmaticplay" class=""><img data-v-4b95f7a8=""
                                    src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/pragmaticplay.svg"
                                    alt="PragmaticPlay"> <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">PragmaticPlay</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/habanero" class=""><img data-v-4b95f7a8=""
                                    src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/habanero.svg" alt="Habanero">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Habanero</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item"><a data-v-4b95f7a8="" href="/slot/pgsoft"
                                class=""><img data-v-4b95f7a8=""
                                    src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/pgsoft.svg" alt="PG Soft">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">PG Soft</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/microgaming" class=""><img data-v-4b95f7a8=""
                                    src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/microgaming.svg"
                                    alt="Microgaming"> <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Microgaming</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item"><a data-v-4b95f7a8="" href="/slot/playstar"
                                class=""><img data-v-4b95f7a8=""
                                    src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/playstar.svg" alt="PlayStar">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">PlayStar</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/spadegaming" class=""><img data-v-4b95f7a8=""
                                    src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/spadegaming_slot.svg"
                                    alt="Spadegaming"> <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Spadegaming</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/cq9" class=""><img data-v-4b95f7a8="" src="../../image/cq9_logo.png"
                                    alt="Spadegaming">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">CQ9</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/joker" class=""><img data-v-4b95f7a8="" src="../../image/joker.png"
                                    alt="Spadegaming">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Joker</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/playngo" class=""><img data-v-4b95f7a8=""
                                    src="../../image/playngo.png" alt="Spadegaming">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Playngo</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/fungaming" class=""><img data-v-4b95f7a8=""
                                    src="../../image/fungaming.png" alt="Spadegaming">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Fun Gaming</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/evoplay" class=""><img data-v-4b95f7a8=""
                                    src="../../image/evoplay_logo.png" alt="Spadegaming">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Evoplay</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/yggdarsil" class=""><img data-v-4b95f7a8=""
                                    src="../../image/yggdarsil.png" alt="Spadegaming">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Ygg Darsil</font>
                                    </font>
                                </span> </a></li>
                        <li data-v-4b95f7a8="" class="games-nav--d__item games-nav--d__item--promo"><a data-v-4b95f7a8=""
                                href="/slot/jili" class=""><img data-v-4b95f7a8="" src="../../image/jili.png"
                                    alt="Spadegaming">
                                <span data-v-4b95f7a8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Jili</font>
                                    </font>
                                </span> </a></li>
                    </ul>
                </nav>
                <div class="slot__container">
                    <header class="slot-content__header">
                        <div class="slot-content__active"><i class="fas fa-fire fa-md"></i> <span>
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">
                                        {{ $title }}
                                    </font>
                                </font>
                            </span></div>
                        <div id="slot-search-anchor" class="slot-game-search">
                            <form>
                                <div class="input--search input__container">
                                    <div class="input__root">
                                        <input type="text" id="searchInput" autocomplete="off"
                                            placeholder="Search for games" class="input">
                                        <i class="input__icon fas fa-search fa-md"></i>
                                    </div>

                                </div> <button type="button" class="btn btn--brand">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">{{ $title }}</font>
                                    </font>
                                </button>
                            </form>
                        </div>
                    </header>
                    <div data-v-22c64660="" class="slot-content">
                        <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