@extends('layout.mobile.main')
@section('mobile')
    <style>
        .carousel__container {
            display: flex;
            transition: transform 0.3s ease;
            /* Smooth transition for sliding */
            will-change: transform;
        }

        .carousel__item {
            flex: 0 0 auto;
            /* Prevent items from shrinking or growing */
        }
    </style>
    <main>
        <div class="container">
            <section class="home">
                <div class="home-carousel">
                    <div class="slick-slider">
                        @foreach ($banner as $banner)
                            <div class="xxx">
                                <a href="{{ $banner->link ?? '#' }}">
                                    <img src="{{ asset('storage/' . $banner->img) }}" loading="lazy" class="slide"
                                        alt="{{ $banner->title }}">
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const slides = document.querySelectorAll('.xxx'); // Get all the slide elements
                        let currentIndex = 0;
                        const totalSlides = slides.length;
                        const slideDuration = 5000; // Duration of each slide in milliseconds (3 seconds)

                        // Initially, show the first slide and hide others
                        slides.forEach((slide, index) => {
                            if (index !== 0) {
                                slide.style.display = 'none';
                            }
                        });

                        // Function to show the next slide
                        function showNextSlide() {
                            slides[currentIndex].style.display = 'none'; // Hide the current slide
                            currentIndex = (currentIndex + 1) % totalSlides; // Move to the next slide
                            slides[currentIndex].style.display = 'block'; // Show the new slide
                        }

                        // Set up the interval to automatically change slides
                        setInterval(showNextSlide, slideDuration);
                    });
                </script>
                <div class="home__teaser">
                    <a href="/promotion" class="btn btn--flex btn--accent-secondary" data-v-1272be00>
                        <i class="fas fa-gift" data-v-0e010622 data-v-1272be00></i>
                        Promosi
                    </a>
                    @if (Auth::check())
                        <a href="/activity" class="btn btn--flex btn--accent" data-v-1272be00>
                            <i class="fas fa-clock" data-v-0e010622 data-v-1272be00></i>
                            History
                        </a>
                        <a href="/deposit" class="btn btn--flex btn--success" data-v-1272be00>
                            <i class="fas fa-wallet " data-v-0e010622 data-v-1272be00></i>
                            Deposit
                        </a>
                    @else
                        <a href="/registerasi" class="btn btn--flex btn--brand" data-v-1272be00>
                            <i class="fas fa-user-plus " data-v-0e010622 data-v-1272be00></i>
                            Daftar
                        </a>
                        <button class="app-button btn btn--flex btn--accent" id="masuk4">
                            <i class="fas fa-sign-in-alt" data-v-0e010622></i>
                            <span>Masuk</span>
                        </button>
                    @endif

                </div>
                @include('layout.mobile.running_text')
                <nav data-v-9cfb8622="" class="app-menu app-menu--shadow-end">
                    <ul data-v-9cfb8622="">
                        <li data-v-9cfb8622="" data-pos="start" class="app-menu__observer"></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/slot"
                                class=""><img data-v-9cfb8622="" alt="Slots" src="../../_nuxt/slots.886ace3.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Slots</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active fas fa-chevron-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" class="app-menu__item"><a data-v-9cfb8622="" href="/casino"
                                class=""><img data-v-9cfb8622="" alt="Casino" src="../../_nuxt/casino.f848545.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Casino</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="/sports"
                                class=""><img data-v-9cfb8622="" alt="Sports+" src="../../_nuxt/sports.261a61b.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Sports+</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="/poker"
                                class=""><img data-v-9cfb8622="" alt="Poker" src="../../_nuxt/poker.da13013.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Poker</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="/lottery"
                                class=""><img data-v-9cfb8622="" alt="Lotto" src="../../_nuxt/lotto.94cc978.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Lotto</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="/fishing"
                                class=""><img data-v-9cfb8622="" alt="Fishing"
                                    src="../../_nuxt/fishing.bbfb353.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Fishing</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="/fishing"
                                class=""><img data-v-9cfb8622="" alt="Arcade"
                                    src="../../_nuxt/arcade.5a310ee.svg"
                                    class="brand-icon brand-icon--active brand-icon--md"> <span
                                    data-v-9cfb8622="">Arcade</span> <i data-v-0e010622="" data-v-9cfb8622=""
                                    class="app-menu--active icon-sort-up icon--lg"></i></a></li>
                        <li data-v-9cfb8622="" data-pos="end" class="app-menu__observer"></li>
                    </ul>
                </nav>

                <article class="card card--split card--primary">
                    <div class="card__item">
                        <div class="card__title"><a href="/slot" class=""><img alt="/slot"
                                    src="../../_nuxt/slots-muted.8931bbf.svg" class="brand-icon brand-icon--sm">
                                <span>Slot</span></a></div> <a href="/slot" class=""><img
                                src="../../image/zeus.png" alt="slot" loading="lazy" class="card__image"></a> <a
                            href="/slot" class="btn btn--flex btn--brand card__cta">
                            Slot
                        </a>
                    </div>
                    <div class="card__item">
                        <div class="card__title"><a href="/poker" class=""><img alt="Poker"
                                    src="../../_nuxt/poker-muted.f4e7c60.svg" class="brand-icon brand-icon--sm">
                                <span>Poker</span></a></div> <a href="/poker" class=""><img
                                src="https://dmwl0ca1bvnm.cloudfront.net/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>
                <article class="card card--full card--light">
                    <header class="card__header">
                        <div class="card__title"><a href="/casino" class=""><img alt="Casino"
                                    src="../../_nuxt/casino-muted.418351d.svg" class="brand-icon brand-icon--sm">
                                <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 data-v-5754c6fc="" class="casino-carousel">
                            <ul data-v-5754c6fc="">
                                <li data-v-5754c6fc="" class="casino-carousel__fill"></li>
                                <li data-v-5754c6fc="" data-flag="" class="casino-carousel__item"><a
                                        data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/evolution.png"
                                                alt="Evolution"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">Evolution</span>
                                    </a></li>
                                <li data-v-5754c6fc="" data-flag="Spesial"
                                    class="casino-carousel__item casino-carousel__item--special"><a data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/idnlive.png"
                                                alt="IDNLIVE"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">IDNLIVE</span>
                                    </a></li>
                                <li data-v-5754c6fc="" data-flag="" class="casino-carousel__item"><a
                                        data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/pragmaticplay.png"
                                                alt="PragmaticPlay"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">PragmaticPlay</span>
                                    </a></li>
                                <li data-v-5754c6fc="" data-flag="New"
                                    class="casino-carousel__item casino-carousel__item--new"><a data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/mg_live_grand.png"
                                                alt="MG Live Grand"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">MG Live
                                            Grand</span>
                                    </a></li>

                                <li data-v-5754c6fc="" data-flag="" class="casino-carousel__item"><a
                                        data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/og.png"
                                                alt="Oriental Game"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">Oriental
                                            Game</span>
                                    </a></li>
                                <li data-v-5754c6fc="" data-flag="" class="casino-carousel__item"><a
                                        data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/microgaming_live.png"
                                                alt="Microgaming"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">Microgaming</span>
                                    </a></li>
                                <li data-v-5754c6fc="" data-flag="" class="casino-carousel__item"><a
                                        data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/ebetlive.png"
                                                alt="WorldEntertainment"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">WorldEntertainment</span>
                                    </a></li>
                                <li data-v-5754c6fc="" data-flag="" class="casino-carousel__item"><a
                                        data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/vivo-gaming.png"
                                                alt="VivoGaming"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">VivoGaming</span>
                                    </a></li>
                                <li data-v-5754c6fc="" data-flag="" class="casino-carousel__item"><a
                                        data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/ezugi-gaming.png"
                                                alt="Ezugi"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">Ezugi</span>
                                    </a></li>
                                <li data-v-5754c6fc="" data-flag="" class="casino-carousel__item"
                                    style="margin-right: 0px;"><a data-v-5754c6fc="">
                                        <div data-v-5754c6fc=""><img data-v-5754c6fc="" loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/luckystreak.png"
                                                alt="LuckyStreak"> </div> <span data-v-5754c6fc=""
                                            class="casino-carousel__name">LuckyStreak</span>
                                    </a></li>
                                <li data-v-5754c6fc="" 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>
                <article class="card card--split card--light">
                    <div class="card__item">
                        <div class="card__title"><a href="/lottery" class=""><img alt="Lotto"
                                    src="../../_nuxt/lotto-muted.f372de0.svg" class="brand-icon brand-icon--sm">
                                <span>Lotto</span></a></div> <a href="/lotto" class=""><img
                                src="https://dmwl0ca1bvnm.cloudfront.net/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="../../_nuxt/fishing-muted.15a0c2f.svg" class="brand-icon brand-icon--sm">
                                <span>Fishing</span></a></div> <a href="/fishing" class=""><img
                                src="https://dmwl0ca1bvnm.cloudfront.net/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>
            </section>
        </div>
    </main>
@endsection