@extends('frontend.layouts.app')

@section('content')
    @php 
        $isLogin = auth()->check(); 
        $prefix = $isLogin ? '/secure' : '';
        
    @endphp
    <div id="showM">
        <div class="overlap g8mmenu-close"></div>
        @include('frontend.partials.mobile.header')
        @include('frontend.partials.mobile.sidebar-menu')

        <div class="content">
            @include('frontend.partials.mobile.navbar')

            <div class="nav__title">Sportsbook</div>
            
            <section class="box">
                <div class="box__detail s1">
                    @forelse($sportsbooks as $game)
                        @php
                            $gameUrl = $prefix."/sportsbook/games?sg=".strtolower($game->provider_code);
                        @endphp
                        
                        <div class="box__detail-img" style="margin-bottom: 10px;">
                            <a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="{{ $gameUrl }}">
                                <img src="{{ $game->game_image }}" alt="{{ $game->game_name }}" style="width: 100%; border-radius: 8px; object-fit: cover;" loading="lazy" onerror="this.src='{{ asset('assets/custom/img/default.png') }}'">
                            </a>
                        </div>
                    @empty
                        <div class="box__detail-img"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=wb&gs=wbsport"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/mobile-v2/sportsbook-WBET-mobile.webp" alt="sb-wb" loading="lazy"></a></div>
                        <div class="box__detail-img"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=ibc&gs=isport"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/mobile-v2/sportsbook-IBC-mobile.webp" alt="sb-i" loading="lazy"></a></div>
                        <div class="box__detail-img"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=sbo&gs=ssport"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/mobile-v2/sportsbook-SBO-mobile.webp" alt="sb-s" loading="lazy"></a></div>
                        <div class="box__detail-img"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=sbo&gs=ssport2g"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/mobile-v2/sportsbook-SBO2G-mobile.webp" alt="sb-s-2g" loading="lazy"></a></div>
                        <div class="box__detail-img"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=bti&gs=sbsport"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/mobile-v2/sportsbook-BTI-mobile.webp" alt="sb-bti" loading="lazy"></a></div>
                        <div class="box__detail-img"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=cmd&gs=flashtech"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/mobile-v2/sportsbook-CMD-mobile.webp" alt="sb-cmd" loading="lazy"></a></div>
                    @endforelse
                </div>
            </section>
            <section class="seo"></section>
        </div>
        
        @include('frontend.partials.mobile.bottom-nav')
    </div>


    <div id="showD">
        @include('frontend.partials.desktop.header')

        <section class="slider">
            <section class="marquee">
                <div class="wrapper">
                    <div class="s-a">
                        <div class="marquee__bullhorn">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <marquee scrolldelay="150" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" direction="left">
                            <div style="width: 100000px; transform: translateX(0px);" class="js-marquee-wrapper">
                                <div class="js-marquee" style="margin-right: 0px; float: left;">{{ general()->title }}</div>
                            </div>
                        </marquee>
                    </div>
                </div>
            </section>
            
            <div class="swiper__img">
                <div style="padding-top: 37px;"></div>
                <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/category-v2/sb.jpg" style="width: 100%; max-width: 1200px; margin: 0 auto; display: block;" alt="Sportsbook Banner">
            </div>
        </section>

        <section class="featured">
            <div class="wrapper">
                <div class="featured__detail">
                    <div class="featured__detail-content">

                        @forelse($sportsbooks as $game)
                            @php
                                $gameUrl = $prefix."/sportsbook/games?sg=".strtolower($game->provider_code);
                            @endphp

                            <div class="content-box">
                                <a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="{{ $gameUrl }}" style="position: absolute; width: 100%; height: 100%; z-index: 10;"></a>
                                <div class="content-box__img has-shadow">
                                    <img src="{{ $game->game_image }}" alt="{{ $game->game_name }}" class="img-blur" loading="lazy" onerror="this.src='{{ asset('assets/custom/img/default.png') }}'">
                                    <div class="cta-play"><div class="button-play">Main Sekarang</div></div>
                                </div>
                                <div class="content-box__text">
                                    <div class="content-box__text-title text-center"><strong>{{ $game->game_name }}</strong></div>
                                </div>
                            </div>
                        @empty
                            <div class="content-box"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=wb&gs=wbsport" style="position: absolute; width: 100%; height: 100%; z-index: 10;"></a><div class="content-box__img has-shadow"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/desktop-v2/sportsbook-WBET-web.webp" alt="sb-wb" class="img-blur" loading="lazy"><div class="cta-play"><div class="button-play">Main Sekarang</div></div></div><div class="content-box__text"><div class="content-box__text-title text-center"><strong>WB Sport</strong></div></div></div>
                            <div class="content-box"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=ibc&gs=isport" style="position: absolute; width: 100%; height: 100%; z-index: 10;"></a><div class="content-box__img has-shadow"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/desktop-v2/sportsbook-IBC-web.webp" alt="sb-i" class="img-blur" loading="lazy"><div class="cta-play"><div class="button-play">Main Sekarang</div></div></div><div class="content-box__text"><div class="content-box__text-title text-center"><strong>I Sport</strong></div></div></div>
                            <div class="content-box"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=sbo&gs=ssport" style="position: absolute; width: 100%; height: 100%; z-index: 10;"></a><div class="content-box__img has-shadow"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/desktop-v2/sportsbook-SBO-web.webp" alt="sb-s" class="img-blur" loading="lazy"><div class="cta-play"><div class="button-play">Main Sekarang</div></div></div><div class="content-box__text"><div class="content-box__text-title text-center"><strong>S Sport</strong></div></div></div>
                            <div class="content-box"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=sbo&gs=ssport2g" style="position: absolute; width: 100%; height: 100%; z-index: 10;"></a><div class="content-box__img has-shadow"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/desktop-v2/sportsbook-SBO2G-web.webp" alt="sb-s-2g" class="img-blur" loading="lazy"><div class="cta-play"><div class="button-play">Main Sekarang</div></div></div><div class="content-box__text"><div class="content-box__text-title text-center"><strong>S Sport (WAP 2G)</strong></div></div></div>
                            <div class="content-box"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=bti&gs=sbsport" style="position: absolute; width: 100%; height: 100%; z-index: 10;"></a><div class="content-box__img has-shadow"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/desktop-v2/sportsbook-BTI-web.webp" alt="sb-bti" class="img-blur" loading="lazy"><div class="cta-play"><div class="button-play">Main Sekarang</div></div></div><div class="content-box__text"><div class="content-box__text-title text-center"><strong>BTI Sport</strong></div></div></div>
                            <div class="content-box"><a href="javascript:void(0)" class="{{ auth()->check() ? 'play-game-btn' : 's-check-login' }}" data-url="/secure/shr/playGame?gc=sportsbook&gg=cmd&gs=flashtech" style="position: absolute; width: 100%; height: 100%; z-index: 10;"></a><div class="content-box__img has-shadow"><img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/desktop-v2/sportsbook-CMD-web.webp" alt="sb-cmd" class="img-blur" loading="lazy"><div class="cta-play"><div class="button-play">Main Sekarang</div></div></div><div class="content-box__text"><div class="content-box__text-title text-center"><strong>CMD Sport</strong></div></div></div>
                        @endforelse

                    </div>
                </div>
            </div>
        </section>

        <section class="sidebar s-sidebar"></section>
        
        @include('frontend.partials.desktop.footer')
    </div>
@endsection

@push('scripts')
<script type="text/javascript">
    window.loadMeIfReady = function() {
    };

    $(document).ready(function() {
        $(document).on('click', '.play-game-btn', function(e) {
            e.preventDefault();
            let url = $(this).attr('data-url');
            
            $(this).siblings('.content-box__img').find('.button-play').html('<i class="fa fa-spinner fa-spin"></i> Loading');
            window.location.href = url; 
        });

        $(document).on('click', '.s-check-login', function(e) {
            e.preventDefault();
            if (typeof jAlert === "function") {
                jAlert('Silahkan login atau mendaftar untuk masuk kedalam permainan.', 'Peringatan');
            } else {
                alert('Silahkan login atau mendaftar untuk masuk kedalam permainan.');
            }
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        
        $(document).on('click', '.play-game-btn', function(e) {
            e.preventDefault();
            let url = $(this).attr('data-url');
            
            $(this).siblings('.content-box__img').find('.button-play').html('<i class="fa fa-spinner fa-spin"></i> Loading...');
            
            window.location.href = url; 
        });

        $(document).on('click', '.s-check-login', function(e) {
            e.preventDefault();
            
            if (typeof jAlert === "function") {
                jAlert('Silahkan login atau mendaftar untuk masuk kedalam permainan.', 'Peringatan');
            } else {
                alert('Silahkan login atau mendaftar untuk masuk kedalam permainan.');
            }
        });

    });
</script>
@endpush