@extends('layouts.app')
@section('content')
    <div class="container">
        <section class="casino">
        	 <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--active 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="app-link--exact-active app-link--active">
                            <img src="{{ $urlweb }}/assets/svg/menu/casino.svg" class="brand-icon brand-icon--active 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">
                            <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">
                            <img src="{{ $urlweb }}/assets/svg/menu/lotto.svg" class="brand-icon 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>
            <div class="casino__search full-width">
                <div class="game-search">
                    <form>
                        <div class="input--search input__container">
                            <div class="input__root">
                                <input type="text" placeholder="Cari permainan" class="input" data-skip-validation>
                                <i class="input__icon input__icon--search icon-search icon--md"></i>
                                <button type="button" class="input-search--clear btn btn--flex btn--sm-round">
                                    <i class="icon-times-circle icon--md"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <button><i class="icon-filter icon--md"></i></button>
            </div>
            <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="#" class="btn btn--flex btn--light app-link--active" data-filter="lobby">
                                <span>Lobby</span>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="btn btn--flex btn--light" data-filter="gameshow">
                                <span>Game Shows</span>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="btn btn--flex btn--light" data-filter="roulette">
                                <span>Roulette</span>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="btn btn--flex btn--light" data-filter="baccarat">
                                <span>Baccarat</span>
                            </a>
                        </li>

                        <li data-pos="end" class="shadow-observer"></li>
                    </ul>
                </div>
            </nav>
            <button class="casino__banner">
                <picture>
                    <source srcset="{{ $banner->mobile_image_url }}" media="(min-width: 640px)">
                    <img src="{{ $banner->mobile_image_url }}">
                </picture>
            </button>
		<div class="casino-content">
			    <ul class="games-grid">
			        @foreach ($games as $g)
			            @php
						    $isLoggedIn = auth()->check();
						    $flagClass = $g->games_flag ? 'casino-game--'.$g->games_flag : '';
						    $isMaintenance = $g->status == 0;
						
						    if ($isLoggedIn && !$isMaintenance) {
						        $href = route('launchgame', [
						            'game_code' => $g->launch_code,
						            'game_type' => 'LC',
						            'game_provider' => $g->provider_code
						        ]);
						        $extra = 'target="_blank"';
						    } else {
						        $href = 'javascript:void(0)';
						        $extra = $isMaintenance ? '' : 'data-modal="loginModal"';
						    }
						@endphp
						<li data-type="{{ strtolower($g->games_type) }}" 
						    data-flag="{{ $g->games_flag }}" 
						    data-provider="{{ strtolower($g->provider_code) }}" 
						    class="casino-game {{ strtolower($flagClass) }} casino-game--light casino-game--normal-view {{ $isMaintenance ? 'casino-game--maintenance' : '' }}">
						    
						    <a href="{{ $href }}" {!! $extra !!}>
						        <div class="casino-game__container">
						
						            <span class="casino-game__name">
						                {{ $g->games_name }}
						            </span>
						
						            <div class="game-item__skeleton"></div>
						
						            <img 
						                src="{{ secureUrl($g->games_image) }}" 
						                alt="{{ $g->games_name }}" 
						                class="game-item__img"
						                style="opacity:0;"
						            >
						
						            {{-- MAINTENANCE --}}
						            @if($isMaintenance)
						                <div class="casino-game__placeholder">
						                    <img src="https://cdn-proxy.globalcontentcloud.com/456/logo/game-placeholder.png">
						                </div>
						
						                <div class="casino-game__maintenance">
						                    <i class="icon-maintenance icon--2x"></i>
						                    <span>Under maintenance</span>
						                </div>
						            @endif
						
						        </div>
						
						        <span class="casino-game__provider">
						            {{ $g->provider_code }}
						        </span>
						    </a>
						</li>
			        @endforeach
			    </ul>
			</div>
        </section>
    </div>
    @push('scripts')
<script>
window.addEventListener("load", function () {
    if (window.location.pathname === "/casino") {

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

        if (container) {
            const scrollAmount = container.scrollWidth * 0.3; // 40% geser

            container.scrollTo({
                left: scrollAmount,
                behavior: "smooth"
            });
        }
    }
});
</script>
<script>
	document.addEventListener('DOMContentLoaded', () => {
    const navLinks   = document.querySelectorAll('.page-nav a[data-filter]');
    const games      = document.querySelectorAll('.casino-game');
    const searchInput = document.querySelector('.casino__search input');
    const clearBtn   = document.querySelector('.input-search--clear');
    const icon       = clearBtn?.querySelector('i');

    let activeFilter = 'lobby';
    let typingTimer;
    const applyFilter = (filter) => {
        activeFilter = filter;

        games.forEach(game => {
            const type = game.dataset.type?.toLowerCase();
            game.style.display = (type === filter) ? '' : 'none';
        });
    };

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

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

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

            applyFilter(filter);
        });
    });
    const defaultLink = document.querySelector('.page-nav a[data-filter="Lobby"]')
        || document.querySelector('.page-nav a[data-filter="lobby"]');

    if (defaultLink) defaultLink.click();
    if (searchInput) {
        searchInput.addEventListener('input', function () {

            const keyword = this.value.toLowerCase().trim();

            if (keyword !== '') {

                games.forEach(game => {
                    const name = game.querySelector('.casino-game__name')
                        ?.innerText.toLowerCase() || '';

                    game.style.display = name.includes(keyword) ? '' : 'none';
                });

            } else {
                applyFilter(activeFilter);
            }
        });
    }
    if (searchInput && clearBtn && icon) {

        clearBtn.style.display = 'none';

        searchInput.addEventListener('input', function () {

            const value = this.value.trim();

            if (value === '') {
                clearBtn.style.display = 'none';
                return;
            }

            clearBtn.style.display = 'flex';
            icon.className = 'icon-sync icon--md spin';

            clearTimeout(typingTimer);

            typingTimer = setTimeout(() => {
                icon.className = 'icon-times-circle icon--md';
            }, 200);
        });

        clearBtn.addEventListener('click', () => {
            searchInput.value = '';
            clearBtn.style.display = 'none';

            icon.className = 'icon-times-circle icon--md';

            searchInput.focus();
            searchInput.dispatchEvent(new Event('input'));
        });
    }
    const filterBtn = document.querySelector('.icon-filter')?.closest('button');
    const providers = document.querySelector('.casino__providers');
    const backdrop  = providers?.querySelector('.backdrop');

    if (filterBtn && providers) {
        filterBtn.addEventListener('click', () => {
            providers.classList.add('open');
            if (backdrop) backdrop.style.display = 'block';
        });
        backdrop?.addEventListener('click', () => {
            providers.classList.remove('open');
            backdrop.style.display = 'none';
        });
    }

});
</script>
@endpush
@endsection