@extends('layouts.app')
@section('content')
    <div class="container">
        <section class="poker">
            <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="app-link--exact-active app-link--active">
                            <img src="{{ $urlweb }}/assets/svg/menu/lotto.svg" class="brand-icon brand-icon--active 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">
                            <img src="{{ $urlweb }}/assets/svg/menu/arcade.svg" class="brand-icon 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>
            
           <nav class="page-nav">
			    <div class="page-nav__scroll-parent shadow-container shadow--dark shadow-end">
			        <ul>
			            <li data-pos="start" class="shadow-observer"></li>
			            <li>
			                <a href="/lotto/popular" class="btn btn--flex btn--light app-link--active">
			                    <span>Populer</span>
			                    <div class="page-nav__badge" style="display: none;"> () </div>
			                </a>
			            </li>
			            <li>
			                <a href="/lotto/lotto" class="btn btn--flex btn--light">
			                    <span>Lotto</span>
			                    <div class="page-nav__badge" style="display: none;"> () </div>
			                </a>
			            </li>
			            <li>
			                <a href="/lotto/e-lottery" class="btn btn--flex btn--light">
			                    <span>E-Lottery</span>
			                    <div class="page-nav__badge" style="display: none;"> () </div>
			                </a>
			            </li>
			            <li>
			                <a href="/lotto/lotteries" class="btn btn--flex btn--light">
			                    <span>Semua</span>
			                    <div class="page-nav__badge" style="display: none;"> () </div>
			                </a>
			            </li>
			            <li>
			                <a href="/lotto/results" class="btn btn--flex btn--light">
			                    <span>Histori</span>
			                    <div class="page-nav__badge" style="display: none;"> () </div>
			                </a>
			            </li>
			            <li data-pos="end" class="shadow-observer"></li>
			        </ul>
			    </div>
			</nav>
				<div data-v-e9fa5246="" class="lotto-content">
				<ul data-v-edcf16ec="" class="lotto-grid">
				
				    @foreach($lottoList as $item)
				
				        @php
				            // Mapping logo
				            $logoMap = [
				                'TOTOMACAU00' => 'https://cdn.globalcontentcloud.com/game-images/totomacau-pools/9500/game_logo.webp',
				                'KINGKONG17'  => 'https://cdn.globalcontentcloud.com/game-images/kingkong-pools/6947/game_logo.webp',
				            ];
				
				            $logoLotto = $logoMap[$item['shortname']] ?? 'https://via.placeholder.com/150';
				
				            $slug = strtolower($item['shortname']);
				        @endphp
				
				        <li data-v-6cbf285a="" data-v-edcf16ec="" class="lotto-widget">
				            <div data-v-6cbf285a="" class="lotto-widget__container">
				
				                {{-- IMAGE --}}
				                <button data-v-6cbf285a="" class="lotto-widget__img">
				                    <img src="{{ $logoLotto }}" alt="{{ $item['name'] }}" data-v-6cbf285a="">
				                </button>
				
				                <div data-v-6cbf285a="" class="lotto-widget__spacer"></div>
				
				                {{-- TITLE --}}
				                <div data-v-6cbf285a="" class="lotto-widget__title">
				                    <span>Live Results</span>
				                    <h2>{{ $item['name'] }}</h2>
				                </div>
				
				                {{-- RESULT --}}
				                <div data-v-6cbf285a="" class="lotto-widget__result">
				                    <span> Result: {{ $item['result_date'] }} </span>
				
				                    <ul>
				                        @forelse($item['result'] as $num)
				                            <li>
				                                <div>
				                                    <span>{{ $num }}</span>
				                                </div>
				                            </li>
				                        @empty
				                            <li><span>-</span></li>
				                        @endforelse
				                    </ul>
				                </div>
				
				                {{-- LINKS --}}
				                <div class="lotto-widget__links">
				                    <a href="/lotto/results/{{ $slug }}">
				                        <i class="icon-history-alt icon--lg"></i>
				                        <span>Results {{ strtoupper($item['name']) }}</span>
				                        <i class="icon-arrow-right icon--xs"></i>
				                    </a>
				
				                    <button>
				                        <i class="icon-play-circle icon--lg"></i>
				                        <span>Main Sekarang</span>
				                        <i class="icon-arrow-right icon--xs"></i>
				                    </button>
				                </div>
				
				                {{-- COUNTDOWN --}}
				                <div class="lotto-widget__countdown">
				                    {{ $item['countdown'] }}
				                </div>
				
				            </div>
				        </li>
				
				    @endforeach
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/4d-jakarta/9470/thumbnail.webp" alt="4D JAKARTA">
			                <span>Lotto - 4D JAKARTA</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>4D JAKARTA</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/singapore/5378/thumbnail.webp" alt="Singapore Pools">
			                <span>Lotto - Singapore Pools</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Singapore Pools</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/hongkong/5379/thumbnail.webp" alt="Hongkong Lotto">
			                <span>Lotto - Hongkong Lotto</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Hongkong Lotto</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/sydney/5380/thumbnail.webp" alt="Sydney Lotto">
			                <span>Lotto - Sydney Lotto</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Sydney Lotto</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/e-lottery/9486/thumbnail.webp" alt="Eagle Lottery">
			                <span>E-Lotteries - Eagle Lottery</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Eagle Lottery</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/e-lottery/9483/thumbnail.webp" alt="Temple Palace">
			                <span>E-Lotteries - Temple Palace</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Temple Palace</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/e-lottery/9490/thumbnail.webp" alt="Hawaii Bingo">
			                <span>E-Lotteries - Hawaii Bingo</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Hawaii Bingo</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/e-lottery/9484/thumbnail.webp" alt="Crazy Lotto">
			                <span>E-Lotteries - Crazy Lotto</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Crazy Lotto</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://object-d001-cloud.cloudstoragesharingservice.com/banner/image/games/slots/idnlottery/Winzo20.jpg" alt="Winzo Wheels 20">
			                <span>E-Lotteries - Winzo Wheels 20</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Winzo Wheels 20</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://object-d001-cloud.cloudstoragesharingservice.com/banner/image/assetgames/slots/idnlottery/sicbo6.webp" alt="SICBO 06">
			                <span>E-Lotteries - SICBO 06</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>SICBO 06</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/e-lottery/9488/thumbnail.webp" alt="Universe 6D">
			                <span>E-Lotteries - Universe 6D</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>Universe 6D</span>
			            </button>
			        </li>
			        <li class="">
			            <button>
			                <img src="https://cdn.globalcontentcloud.com/game-images/e-lottery/9485/thumbnail.webp" alt="DRAGON 5D">
			                <span>E-Lotteries - DRAGON 5D</span>
			            </button>
			            <button class="btn btn--flex btn--brand">
			                <span>DRAGON 5D</span>
			            </button>
			        </li>
			    </ul>
			</div>
        </section>
    </div>
<script>
window.addEventListener("load", function () {
    if (window.location.pathname === "/lotto") {

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

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

            container.scrollTo({
                left: scrollAmount,
                behavior: "smooth"
            });
        }
    }
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {

    const navLinks = document.querySelectorAll('.page-nav a[data-filter]');
    const games = document.querySelectorAll('.lotto-game');

    function applyFilter(filter) {

        games.forEach(game => {

            const types = game.dataset.type.split(' ');

            if (filter === 'allgames') {
                game.style.display = '';
            } 
            else if (types.includes(filter)) {
                game.style.display = '';
            } 
            else {
                game.style.display = 'none';
            }

        });
    }

    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {

            e.preventDefault();

            const filter = this.dataset.filter.toLowerCase();

            navLinks.forEach(l => l.classList.remove('app-link--active'));
            this.classList.add('app-link--active');

            applyFilter(filter);
        });
    });

    // Default tampil semua
    applyFilter('allgames');

});
</script>
@endsection