@include('mobile.partials.pages.cardslots')
{{-- ================= CARD SPORTS ================= --}}
<article class="card card--split card--primary">
    <div class="card__item">
        <div class="card__title">
            <a href="/sports" class="">
                <img alt="Sports+" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/sports-muted.aba62f9.svg" class="brand-icon brand-icon--sm">
                <span>Sports+</span>
            </a>
        </div>
        <a href="/sports" class="">
            <img src="https://cdn-proxy.globalcontentcloud.com/common/default/sport.png" alt="Sports+" loading="lazy" class="card__image">
        </a>
        <a href="/sports" class="btn btn--flex btn--brand card__cta"> Main Sports+ </a>
    </div>
    <div class="card__item">
        <div class="card__title">
            <a href="/poker" class="">
                <img alt="Poker" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/poker-muted.a0c9bb9.svg" class="brand-icon brand-icon--sm">
                <span>Poker</span>
            </a>
        </div>
        <a href="/poker" class="">
            <img src="https://cdn-proxy.globalcontentcloud.com/common/default/poker.png" alt="Poker" loading="lazy" class="card__image">
        </a>
        <a href="/poker" class="btn btn--flex btn--brand card__cta"> Main Poker </a>
    </div>
</article>
@include('mobile.partials.pages.hotslots')
{{-- ================= CARD CASINO ================= --}}
<article class="card card--full card--primary">

    <header class="card__header">
        <div class="card__title">
            <a href="/casino">
                <img src="{{ asset('assets/svg/muted/casino-muted.svg') }}" class="brand-icon brand-icon--sm" alt="Casino">
                <span>Casino</span>
            </a>
        </div>

        <a href="/casino" class="btn--sm btn--flex card__see-all">
            Lihat semua
        </a>
    </header>
    <div class="card__body">
        <div class="casino-carousel">
            <ul>

                <li class="casino-carousel__fill"></li>

                @php
                $providers = [
                    ["name"=>"IDNLIVE","slug"=>"IDNLIVE","flag"=>"Spesial","count"=>53,"img"=>"https://cdn.globalcontentcloud.com/game-images/idnlive/14252/thumbnail.webp","code"=>"idn0"],
                    ["name"=>"Pragmatic Play","slug"=>"PR","flag"=>"","count"=>211,"img"=>"https://cdn.globalcontentcloud.com/game-images/pragmaticplay/947/thumbnail.webp","code"=>"pr0"],
                    ["name"=>"Live Mania","slug"=>"PR","flag"=>"New","count"=>0,"img"=>"https://cdn.globalcontentcloud.com/game-images/pragmaticplay/14772/thumbnail.webp","code"=>"pr1"],
                    ["name"=>"Evolution","slug"=>"GE","flag"=>"Promosi","count"=>262,"img"=>"https://cdn.globalcontentcloud.com/game-images/evolution/2306/thumbnail.webp","code"=>"ge0"],
                    ["name"=>"Microgaming Live","slug"=>"MP","flag"=>"Spesial","count"=>53,"img"=>"https://cdn.globalcontentcloud.com/game-images/microgaming-live/7198/thumbnail.webp","code"=>"mp0"],
                ];
                @endphp

                @foreach ($providers as $p)

                @php
                    $flagClass = match($p['flag']) {
                        'Promosi' => 'casino-game--promo',
                        'Spesial' => 'casino-game--special',
                        'New'     => 'casino-game--new',
                        default   => ''
                    };

                    $flagAttr = $p['flag'] ? 'data-flag="'.$p['flag'].'"' : '';
                @endphp

                <li class="casino-game casino-carousel__item {{ $flagClass }} casino-game--light" {!! $flagAttr !!}>

                    @auth
                        <a href="{{ url('main/PlayGame') }}?sid={{ urlencode(auth()->user()->extplayer) }}&provider={{ $p['slug'] }}&type=LC&code={{ $p['code'] }}" target="_blank">
                    @else
                        <a href="javascript:void(0)" data-modal="loginModal">
                    @endauth

                        <div class="casino-game__container">
                            <div class="casino-game__skeleton"></div>

                            <div class="casino-game__count">
                                <span>{{ (int)$p['count'] }}</span>
                            </div>

                            <img src="{{ $p['img'] }}" alt="{{ $p['name'] }}" style="opacity:1;">

                            <div class="casino-game__placeholder">
                                <img src="{{ $p['img'] }}" alt="{{ $p['name'] }}">
                            </div>
                        </div>

                        <span class="casino-game__provider">
                            {{ $p['name'] }}
                        </span>

                    </a>
                </li>
                @endforeach
                <li class="casino-carousel__fill"></li>
            </ul>
        </div>
    </div>
    <div class="card__cta">
        <a href="/casino" class="btn btn--flex btn--brand">
            Main Casino
        </a>
    </div>
</article>
@include('mobile.partials.pages.promotions')
@include('mobile.partials.pages.toptables')
<article class="card card--full card--light">
    <header class="card__header">
        <div class="card__title">
            @auth
                <a href="/exclusive">
            @else
                <a href="javascript:void(0)" data-modal="loginModal">
            @endauth
                <img alt="Eksklusif" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/exclusive-muted.ccee61c.svg" class="brand-icon brand-icon--sm">
                <span>Eksklusif</span>
            </a>
        </div>

        @auth
            <a href="/exclusive" class="btn--sm btn--flex card__see-all">
        @else
            <a href="javascript:void(0)" data-modal="loginModal" class="btn--sm btn--flex card__see-all">
        @endauth
            Lihat semua
        </a>
    </header>

    <div class="card__body">
        <div class="exclusive-card">
            <ul>

                {{-- SLOT MANIA --}}
                <li>
                    @auth
                        <a href="/slots/category/hot">
                    @else
                        <a href="javascript:void(0)" data-modal="loginModal">
                    @endauth
                        <img src="https://cdn-proxy.globalcontentcloud.com/common/default/exclusive/pp98.webp" alt="Slot PR">
                    </a>
                </li>

                {{-- LIVE MANIA --}}
                <li>
                    @auth
                        <a href="/sns">
                            <img src="https://cdn-proxy.globalcontentcloud.com/common/default/exclusive/sns.webp" alt="SNS" loading="lazy">
                        </a>
                    @else
                        <button data-modal="loginModal">
                            <img src="https://cdn-proxy.globalcontentcloud.com/common/default/exclusive/sns.webp" alt="SNS" loading="lazy">
                        </button>
                    @endauth
                </li>

                {{-- KONG --}}
                <li>
                    @auth
                        <a href="/sports">
                    @else
                        <a href="javascript:void(0)" data-modal="loginModal">
                    @endauth
                        <img src="https://cdn-proxy.globalcontentcloud.com/common/default/exclusive/sportgg.webp" alt="Sportsgg">
                    </a>
                </li>

            </ul>
        </div>
    </div>
</article>
{{-- ================= CARD TOP TABLES ================= --}}
<article class="card card--arcade-carousel card--full card--primary">
    <header class="card__header">
        <div class="card__title">
            <a href="/arcade/category/hot" class="">
                <img alt="Arcade" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/arcade-muted.120303a.svg" class="brand-icon brand-icon--sm">
                <span>Arcade</span>
            </a>
        </div>
        <a href="/arcade/category/hot" class="btn--sm btn--flex card__see-all"> Lihat semua </a>
    </header>
    <div class="card__body">
        <div class="carousel arcade-carousel arcade-carousel--dark">
            <div class="carousel__control carousel__prev highlight carousel__control--disabled">
                <i class="icon-arrow-left icon--sm"></i>
            </div>
            <div class="carousel__inner">
                <div class="carousel__container transition" style="transform:translateX(0px);">
                    <ul>
                        <li>
                            <a href="/arcade/category/hot" class="arcade-carousel__item">
                                <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/provider/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/minigame.svg" alt="Minigame">
                                </div>
                                <span>Minigame</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/originals.svg" alt="Kong Original">
                                    <div class="arcade-carousel__by-idn surface">
                                        <img src="https://cdn-proxy.globalcontentcloud.com/common/dark/arcade/idnplay.svg" alt="Kong Original">
                                    </div>
                                </div>
                                <span>Kong Original</span>
                            </a>
                        </li>
                        <li>
                            <a href="/arcade/provider/microgaming" class="arcade-carousel__item">
                                <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/provider/spadegaming" 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">
                <i class="icon-arrow-right icon--sm"></i>
            </div>
        </div>
    </div>
    <div class="card__cta">
        <a href="/arcade/category/hot" class="btn btn--flex btn--brand"> Main Arcade </a>
    </div>
</article>
<article class="card card--split card--light">
    <div class="card__item">
        <div class="card__title">
            <a href="/lotto" class="">
                <img alt="Lotto" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/lotto-muted.42a4023.svg" class="brand-icon brand-icon--sm">
                <span>Lotto</span>
            </a>
        </div>
        <a href="/lotto" class="">
            <img src="https://cdn-proxy.globalcontentcloud.com/common/default/lotto.png" alt="Lotto" loading="lazy" class="card__image">
        </a>
        <a href="/lotto" class="btn btn--flex btn--brand card__cta"> Main Lotto </a>
    </div>
    <div class="card__item">
        <div class="card__title">
            <a href="/fishing" class="">
                <img alt="Fishing" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/fishing-muted.3bbc777.svg" class="brand-icon brand-icon--sm">
                <span>Fishing</span>
            </a>
        </div>
        <a href="/fishing" class="">
            <img src="https://cdn-proxy.globalcontentcloud.com/common/default/fishing.png" alt="Fishing" loading="lazy" class="card__image">
        </a>
        <div class="card__cta">
            <a href="/fishing" class="btn btn--flex btn--brand"> Main Fishing </a>
        </div>
    </div>

</article>