@extends('layouts.app')
@section('content')
    <div class="container">
        <section class="arcade">
            <nav class="app-menu app-menu--shadow-end app-menu--shadow-start">
                <ul>
                	<li class="app-menu__item">
					    <a href="/exclusive" class="">
					        <img alt="Eksklusif" src="{{ $urlweb }}/assets/svg/menu/exclusive.svg" class="brand-icon brand-icon--md">
					        <span>Eksklusif</span>
					        <i class="app-menu--active icon-sort-up icon--lg"></i>
					    </a>
					</li>
                    <li class="app-menu__item">
                        <a href="/sports" class="">
                            <img src="{{ $urlweb }}/assets/svg/menu/sports.svg" class="brand-icon brand-icon--md">
                            <span>Sports+</span>
                            <i class="app-menu--active icon-sort-up icon--lg"></i>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/slots">
                            <img src="{{ $urlweb }}/assets/svg/menu/slots.svg" class="brand-icon brand-icon--md">
                            <span>Slots</span>
                            <i class="app-menu--active icon-sort-up icon--lg"></i>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/casino" class="">
                            <img src="{{ $urlweb }}/assets/svg/menu/casino.svg" class="brand-icon brand-icon--md">
                            <span>Casino</span>
                            <i class="app-menu--active icon-sort-up icon--lg"></i>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/poker" class="">
                            <img src="{{ $urlweb }}/assets/svg/menu/poker.svg" class="brand-icon brand-icon--md">
                            <span>Poker</span>
                            <i class="app-menu--active icon-sort-up icon--lg"></i>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/lotto" class="">
                            <img src="{{ $urlweb }}/assets/svg/menu/lotto.svg" class="brand-icon brand-icon--md">
                            <span>Lotto</span>
                            <i class="app-menu--active icon-sort-up icon--lg"></i>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/arcade" class="app-link--exact-active app-link--active">
                            <img src="{{ $urlweb }}/assets/svg/menu/arcade.svg" class="brand-icon brand-icon--active brand-icon--md">
                            <span>Arcade</span>
                            <i class="app-menu--active icon-sort-up icon--lg"></i>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/fishing">
                            <img src="{{ $urlweb }}/assets/svg/menu/fishing.svg" class="brand-icon brand-icon--md">
                            <span>Fishing</span>
                            <i class="app-menu--active icon-sort-up icon--lg"></i>
                        </a>
                    </li>
                </ul>
            </nav>
            <article class="card card--full card--light">
                <div class="card__body">
                    <div class="carousel arcade-carousel arcade-carousel--dark">
                        <div class="carousel__control carousel__prev highlight">
                            <i class="icon-arrow-left icon--sm"></i>
                        </div>
                        <div class="carousel__inner">
                            <div class="carousel__container transition" style="">
                                <ul>
                                    <li>
                                        <a href="/arcade" class="arcade-carousel__item app-link--exact-active app-link--active">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/hot.svg" alt="Hot">
                                            </div>
                                            <span>Hot</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade" class="arcade-carousel__item">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/idnarcade.svg" alt="IDNArcade">
                                            </div>
                                            <span>IDNArcade</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade/pragmaticplay" class="arcade-carousel__item">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/pragmaticplay_arcade.svg" alt="PragmaticPlay">
                                            </div>
                                            <span>PragmaticPlay</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade" class="arcade-carousel__item">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/askmeslot_arcade.svg" alt="Askmeslot">
                                            </div>
                                            <span>Askmeslot</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade" class="arcade-carousel__item">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/minigame.svg" alt="Minigame">
                                            </div>
                                            <span>Minigame</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade/microgaming" class="arcade-carousel__item" aria-current="page">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/microgaming_arcade.svg" alt="Microgaming">
                                            </div>
                                            <span>Microgaming</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade" class="arcade-carousel__item">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/originals.svg" alt="Kong Original">
                                                <div class="arcade-carousel__by-idn surface">
                                                    <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/idnplay.svg">
                                                </div>
                                            </div>
                                            <span>Kong Original</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade/spadegaming_arcade" class="arcade-carousel__item">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/spadegaming_arcade.svg" alt="Spadegaming">
                                            </div>
                                            <span>Spadegaming</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade" class="arcade-carousel__item">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/ky_arcade.svg" alt="KY">
                                            </div>
                                            <span>KY</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/arcade" class="arcade-carousel__item">
                                            <div class="arcade-carousel__img-container">
                                                <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/new.svg" alt="New">
                                            </div>
                                            <span>New</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="carousel__control carousel__next highlight carousel__control--disabled">
                            <i class="icon-arrow-right icon--sm"></i>
                        </div>
                    </div>
                </div>
            </article>

           <div class="arcade-content">
                    <ul class="arcade-games" id="game-container">

                        @foreach ($groupedGames as $providerCode => $list)
                            @foreach ($list as $g)
                                <li title="{{ $g->game_name }}"
                                    class="game-item__wrapper {{ $g->game_flag ?? '' }} game-item--normal-view">

                                    @auth
                                        <a href="{{ route('launchgame', [
                                            'game_code' => $g->game_code,
                                            'game_type' => $g->game_type,
                                            'game_provider' => $g->game_provider,
                                        ]) }}"
                                            target="_blank">
                                        @else
                                            <a href="javascript:void(0)" data-modal="loginModal">
                                            @endauth

                                            <div class="game-item game-item--arcade">

                                                {{-- IMAGE --}}
                                                <img loading="lazy" src="{{ $g->game_image }}" alt="{{ $g->game_name }}"
                                                    class="game-item__img">

                                                {{-- PLACEHOLDER --}}
                                                <div class="game-item__placeholder">
                                                    <img
                                                        src="https://cdn-proxy.globalcontentcloud.com/456/logo/game-placeholder.png">
                                                </div>

                                                {{-- PROVIDER ICON --}}
                                                @if (!empty($providerIconMap[strtoupper($g->game_provider)]))
                                                    <div class="game-item__provider">
                                                        <div>
                                                            <img
                                                                src="{{ $providerIconMap[strtoupper($g->game_provider)] }}">
                                                        </div>
                                                    </div>
                                                @endif

                                            </div>

                                            <span class="game-item__name">
                                                {{ $g->game_name }}
                                            </span>

                                        </a>
                                </li>
                            @endforeach
                        @endforeach

                    </ul>
                </div>
        </section>
    </div>
    @push('scripts')
<script>
window.addEventListener("load", function () {
    if (window.location.pathname === "/arcade") {

        const container = document.querySelector(".app-menu ul");

        if (container) {
            const scrollAmount = container.scrollWidth * 0.8;

            container.scrollTo({
                left: scrollAmount,
                behavior: "smooth"
            });
        }
    }
});
</script>
@endpush
@endsection