@extends('layouts.app')
@section('content')
@php
$placeholderImage = 'https://cdn-proxy.globalcontentcloud.com/456/logo/game-placeholder.png';

$safeImageUrl = function ($url) use ($placeholderImage) {
$url = trim((string) $url);

if ($url === '') {
return $placeholderImage;
}
if (preg_match('/^(https?:\/\/|\/)/i', $url)) {
return $url;
}
return $placeholderImage;
};
@endphp
<div class="container">
    <div data-v-39197670="" class="search">
        <header data-v-39197670="">
            <div data-v-1058f0f2="" data-v-39197670="" class="select-dropdown input__container">
                <div data-v-1058f0f2="" class="input__root">
                    <button data-v-1058f0f2="" type="button" class="input"> Slots </button>
                    <ul data-v-1058f0f2="" class="select-dropdown__options">
                        <li data-v-1058f0f2="">
                            <button data-v-1058f0f2="" type="button" class="selected">
                                <img data-v-1058f0f2="" alt="" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/slots.0bfdbc0.svg" class="brand-icon input__icon brand-icon--xs">
                                <span data-v-1058f0f2="">Slots</span>
                            </button>
                        </li>
                    </ul>
                    <img data-v-1058f0f2="" alt="" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/slots.0bfdbc0.svg" class="brand-icon input__icon brand-icon--mini">
                    <i data-v-0e010622="" data-v-1058f0f2="" class="select__arrow icon-arrow-down icon--xs"></i>
                </div>
            </div>

            <div data-v-39197670="" class="input--search input__container">
                <div class="input__root">
                    <input type="text" id="searchInput" value="{{ $keyword }}" placeholder="Cari permainan" class="input" autocomplete="off" maxlength="80" spellcheck="false" data-skip-validation>
                    <button type="button" id="searchButton" style="border:0;background:transparent;padding:0;">
                        <i class="input__icon input__icon--search icon-search icon--md"></i>
                    </button>
                </div>
            </div>

            <button data-v-39197670="" type="button" class="">
                <i data-v-0e010622="" data-v-39197670="" class="icon-filter icon--md"></i>
            </button>
        </header>

        <div data-v-39197670="" action="emit" class="search__guest" style="{{ $keyword !== '' ? 'display:none;' : '' }}">
            <h4 data-v-39197670="">Ketik sesuatu. <br>Kolom pencariannya butuh perhatian. </h4>
        </div>

        <nav data-v-567cf2c6="" data-v-39197670="" class="page-nav">
            <div data-v-567cf2c6="" class="page-nav__scroll-parent shadow-container shadow--dark shadow-end">
                <ul data-v-567cf2c6="">
                    <li data-v-567cf2c6="" data-pos="start" class="shadow-observer"></li>
                    <li data-v-567cf2c6="">
                        <button data-v-567cf2c6="" type="button" class="btn btn--flex btn--light app-link--active">
                            <span data-v-567cf2c6="">Hot</span>
                            <div data-v-567cf2c6="" class="page-nav__badge" style="display: none;"> () </div>
                        </button>
                    </li>
                    <li data-v-567cf2c6="">
                        <button data-v-567cf2c6="" type="button" class="btn btn--flex btn--light">
                            <span data-v-567cf2c6="">Exclusive</span>
                            <div data-v-567cf2c6="" class="page-nav__badge" style="display: none;"> () </div>
                        </button>
                    </li>
                    <li data-v-567cf2c6="">
                        <button data-v-567cf2c6="" type="button" class="btn btn--flex btn--light">
                            <span data-v-567cf2c6="">New</span>
                            <div data-v-567cf2c6="" class="page-nav__badge" style="display: none;"> () </div>
                        </button>
                    </li>
                    <li data-v-567cf2c6="">
                        <button data-v-567cf2c6="" type="button" class="btn btn--flex btn--light">
                            <span data-v-567cf2c6="">Buy Bonus</span>
                            <div data-v-567cf2c6="" class="page-nav__badge" style="display: none;"> () </div>
                        </button>
                    </li>
                    <li data-v-567cf2c6="">
                        <button data-v-567cf2c6="" type="button" class="btn btn--flex btn--light">
                            <span data-v-567cf2c6="">Table</span>
                            <div data-v-567cf2c6="" class="page-nav__badge" style="display: none;"> () </div>
                        </button>
                    </li>
                    <li data-v-567cf2c6="">
                        <button data-v-567cf2c6="" type="button" class="btn btn--flex btn--light">
                            <span data-v-567cf2c6="">Megaways</span>
                            <div data-v-567cf2c6="" class="page-nav__badge" style="display: none;"> () </div>
                        </button>
                    </li>
                    <li data-v-567cf2c6="" data-pos="end" class="shadow-observer"></li>
                </ul>
            </div>
        </nav>

        <div data-v-39197670="" class="search__content">
            <ul class="games-grid" id="game-container" data-search-container>
                @foreach ($games as $g)
                @php
                $providerKey = strtoupper((string) $g->game_provider);
                $providerIcon = $providerIconMap[$providerKey] ?? null;
                $gameFlagClass = preg_replace('/[^A-Za-z0-9_-]/', '', (string) $g->game_flag);
                $gameImage = $safeImageUrl($g->game_image);
                $providerIcon = $safeImageUrl($providerIcon);
                @endphp

                <li title="{{ $g->game_name }}" class="game-item__wrapper {{ $gameFlagClass }} 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="{{ $gameImage }}" alt="{{ $g->game_name }}" class="game-item__img" style="opacity:0;">
                                <div class="game-item__placeholder">
                                    <div class="game-item__skeleton"></div>
                                    <img src="{{ $placeholderImage }}" 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>
    </div>
</div>

<script>
    (function() {
        'use strict';

        let searchTimer = null;

        const searchInput = document.getElementById('searchInput');
        const searchButton = document.getElementById('searchButton');

        function triggerSearch(instant) {
            clearTimeout(searchTimer);

            const delay = instant ? 0 : 600;

            searchTimer = setTimeout(function() {
                if (!searchInput) {
                    return;
                }

                const keyword = searchInput.value.trim().slice(0, 80);
                const url = new URL(window.location.href);

                if (keyword !== '') {
                    url.searchParams.set('q', keyword);
                } else {
                    url.searchParams.delete('q');
                }

                url.searchParams.delete('page');

                window.location.href = url.toString();
            }, delay);
        }

        if (searchInput) {
            searchInput.addEventListener('keyup', function(event) {
                if (event.key === 'Enter') {
                    triggerSearch(true);
                    return;
                }

                triggerSearch(false);
            });
        }

        if (searchButton) {
            searchButton.addEventListener('click', function() {
                triggerSearch(true);
            });
        }
    })();
</script>
@endsection