@extends('layouts.app')
@section('content')
    <div class="container">
        <section class="slot">
            {{-- HEADER --}}
            <div class="search-header">
                <div class="search-header__label">
                    <img src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/slots.0bfdbc0.svg" class="brand-icon brand-icon--sm">
                    <span>Slots</span>
                </div>
                <div class="search-header__content">
                    <div class="slot-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" style="display:none;"><i data-v-0e010622="" class="icon-times-circle icon--md"></i></button>
                                </div>
                            </div>
                            <button type="submit" class="btn btn--brand">Cari</button>
                        </form>
                    </div>
                </div>
            </div>
            {{-- CAROUSEL --}}
            @include('mobile.partials.pages.slot-carousel')
            {{-- CONTENT --}}
            <div class="slot__container">
                <div class="slot-content">
                    <ul class="games-grid" id="game-container" data-search-container>
                        @foreach ($games as $g)
                            @php
                            $isLoggedIn = !auth()->check();
                                $providerKey = strtoupper($g->game_provider);
                                $providerIcon = $providerIconMap[$providerKey] ?? null;
                            @endphp
                            <li title="{{ $g->game_name }}" class="game-item__wrapper {{ $g->game_flag }} game-item--normal-view">
                                @auth
							    <a href="{{ route('launchgame', [
							        'game_code' => $g->game_code,
							        'game_type' => $g->game_type,
							        'game_provider' => $g->game_provider
							    ]) }}">
							@else
							    <a href="javascript:void(0)" data-modal="loginModal">
							@endauth
                                    <div class="game-item game-item--slot">
                                    	<div class="game-item__skeleton"></div>
                                        <img loading="lazy" src="{{ $g->game_image }}" alt="{{ $g->game_name }}" class="game-item__img"
                                            style="opacity:0;">
                                            <div class="game-item__placeholder">
                                            	<div class="game-item__skeleton"></div>
											    <img src="https://cdn-proxy.globalcontentcloud.com/456/logo/game-placeholder.png" alt="{{ $g->game_name }}">
											</div>
                                        @if($providerIcon)
                                        <div class="game-item__provider" style="opacity:1;">
                                            <div>
                                                <img src="{{ $providerIcon }}" alt="{{ $g->game_provider }}">
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <span class="game-item__name">
                                        {{ $g->game_name }}
                                    </span>
                                </a>
                            </li>
                        @endforeach
                    	<li class="loading-observer" id="loadingObserver">
                        <i class="spin icon-sync icon--lg"></i>
                    </li>
                    </ul>
                    <div class="no-results" id="noResults" style="display:none;">
                        Maaf, hasil pencarian tidak ditemukan.
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection