@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">Tangkas</div>
            
            <section class="box">
                <div class="box__detail s1">
                    @forelse($tangkas as $game)
                        @php
                            $gameUrl = $prefix."/tangkas/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=cmd&gs=flashtech">
                                <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/banner/desktop-v2/tangkas-web.webp" alt="tangkas" loading="lazy">
                                <div class="cta">Main Sekarang</div>
                            </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/tangkas.jpg" style="width: 100%; max-width: 1200px; margin: 0 auto; display: block;" alt="Banner">
            </div>
        </section>

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

                        @forelse($tangkas as $game)
                            @php
                                $gameUrl = $prefix."/tangkas/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/tangkas-web.webp" alt="tangkas" 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>Tangkas</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