@extends('layouts.master')
@section('title', config('app.name') . ' : List Game Arcade ' . ucfirst($slug ?? ''))
@section('content')
<div class="main-content slot-game">
    <div class="container">
      <nav class="breadcrumb-container">
        <ul class="breadcrumb-list">
          <li class="breadcrumb-item" text="{{ getSetting('site_name') }}">
            <a href="{{ config('app.url') }}" class="breadcrumb-link" target="_self">{{ getSetting('site_name') }}</a>
          </li>
          <li class="breadcrumb-item" text="Arcade" url="{{ url('/') }}/slot">
            <a href="{{ url('/') }}/slot" class="breadcrumb-link" target="_self">Arcade</a>
          </li>
          <li class="breadcrumb-item" text="{{ ucfirst($slug) }}" url="{{ url('/') }}/pragmaticplay">
            <a href="{{ url('/') }}/arcade" class="breadcrumb-link" target="_self">{{ ucfirst($slug) }}</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="container">
      <div class="slot-game__container">
        <div class="slot-game-header">
            <h3>{{ $providerRecord->provider_name }}</h3>
          <div class="slot-game__search-cont">
            <div class="game-search">
              <input class="form-control-sm" type="text" onkeyup="searchGames(this)" placeholder="Cari ...">
              <a href="#" class="search-btn">
                <i class="fas fa-search"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="component-pills-tab" id="game-filter">
            <div class="filter-tab" onclick="filterGameSelection('all')">All Games</div>
            <div class="filter-tab" onclick="filterGameSelection('arcade')"> Arcade </div>
        </div>
        <div class="slot-game-list">
            @foreach ($games as $game)
            <div class="slot-game-item slot-tg arcade show">
                @auth
                <a class="main sekarang main-sekarang-alert" name="playGames"
                   href="{{ url('/gameIframe?data=' . encrypt_game_params($game->game_provider, $game->game_code)) }}"
                   target="{{ $game->game_provider }}">
                 @else
                 <a class="main sekarang main-sekarang-alert" href="#" onclick="gameAlert(); return false;">
                 @endauth
                    <div class="slot-game-img">
                        <img loading="lazy" name="igmg" src="{{ $game->game_image }}" onerror="this.src ='{{ asset('themes/default/img/404.svg') }}';" alt="slot-img">
                    </div>
                    <div class="hover-play">
                        <i class="fas fa-play"></i>
                    </div>
                    <div class="progress baradjust">
                        @php
                        $rtp = rand(50, 95);
                        $color = $rtp >= 60 ? 'bg-success' : ($rtp >= 50 ? 'bg-warning' : 'bg-info');
                        @endphp
                        <div class="progress-bar progress-bar-striped progress-bar-animated {{ $color }}"
                            id="progress-rtp" role="progressbar"
                            style="width: {{ $rtp }}%;"
                            aria-valuenow="{{ $rtp }}" aria-valuemin="0" aria-valuemax="100">
                            RTP {{ $rtp }}%
                        </div>
                    </div>
                    <div class="slot-game-name">
                        <div class="name">{{ $game->game_name }}</div>
                    </div>
                </a>
            </div>
            @endforeach
          </div>
        </div>
        <div class="game mt-5">
            <div class="game__seo">
              <div hidden="" id="title-seo">{{ getSetting('site_name') }}: {{ strtoupper($slug) }}</div>
              <div class="seo-content showFooter">
                <h1>{{ getSetting('site_name') }}: {{ strtoupper($slug) }}</h1>
                <p>{{ strtoupper($slug) }}</p>
              </div>
            </div>
          </div>
        </div>
       </div>
      <script type="text/javascript">
        function searchGames(_this) {
            let value = $(_this).val().toLowerCase();
            $(".slot-game-list .slot-game-item").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1).toggleClass('show');
            });
        }
    </script>
@endsection