@extends('frontend.layouts.main')
@section('content')
    <div class="newsInfo" id="newsInfo">
        <i class="icon-speaker"></i>
        <marquee class="marquee"> SELAMAT DATANG !!! DI {{ general()->title }} SITUS GAME SLOT ONLINE TERLENGKAP DAN
            TERPERCAYA
            SEJAGAD RAYA INDONESIA</marquee>
        <i class="icon-navigate-next"></i>
    </div>

    <div class="main-header-title">
        <i class="provider-logo-type pragmatic-logo"></i>
        <div class="search-wrapper">
            <input class="search" type="search" placeholder='Silahkan ketik nama permainan' id="gameName">
            <a href="#{{ $provider->provider }}"><i class="icon-search" id="gameSearch"></i></a>
        </div>
    </div>

    <ul class="game-item-tabs" id="GameCategory">
        <li>
            <a href="#{{ $provider->provider }}" class="active">{{ $provider->provider }}</a>
        </li>
    </ul>
    <div class="game-item-list">
        <div id="gameUl" class="tab-content clearfix">
            <ul role="tabpanel" class="tab-pane fade show active" id="{{ $provider->provider }}">
                @foreach ($games as $item)
                    <li data-area="game_slot" data="{{ $item->game_code }}" class="">
                        <div class="game-wrapper">
                            <div class="game-list-core">
                                <div class="game-list-content">
                                    <a data-id="{{ $item->game_code }}"
                                        data-href="/play?gameType={{ $item->game_type }}&providerCode={{ $item->provider_code }}&gameCode={{ $item->game_code }}"
                                        class="open-game">
                                            <img data-alt="{{ $item->game_name }}"
                                                title="{{ $item->game_name }}" alt="{{ $item->game_name }}"
                                                src="{{ $item->game_image }}" class="img-fluid img-thumbnail" onerror="this.src='{{ asset('assets/images/d6fb4a76.png') }}';"
                                                onerror="this.onerror=null;" width="100%" height="100%" loading="lazy">
                                    </a>
                                </div>
                            </div>
                            <div class="figure-text">
                                <p>{{ $item->game_name }}</p>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
    <div class="data-game-list" data-type="pt games" style="visibility:hidden;height:0;"></div>

    <script>
        $(document).ready(function() {
            var a = [];
            var b = $("#gameUl ul")
            var c = b.find("p");
            for (var i = 0; i < c.length; i++) {
                a.push($(c[i]).text().toLowerCase());
            }
            init_game_list();

            // Keyup event
            $(document).on("keyup", "#gameName", function(e) {
                if (e.key == "Escape") {
                    $(this).val("");
                    b.find("li").show();
                } else {
                    search_game($(this).val());
                }
            });
            $(document).on("change", "#gameName", function(e) {
                search_game($(this).val());
            });
            $(document).on("search", "#gameName", function(e) {
                var text = $(this).val();
                if (text == "") {
                    b.show();
                }
            });

            function init_game_list() {
                $(document).on("click", ".game-item-tabs a", function(e) {
                    e.preventDefault();

                    var _this = $(this);
                    var target = _this.attr("href");

                    // set active
                    $(document).find(".game-item-tabs a.active").removeClass("active");
                    _this.addClass("active");

                    // show game list based on selected menu
                    $(document).find(".game-item-list .tab-pane.show.active").removeClass("show active");
                    $(target).addClass("show active");
                });
            }

            function search_game(val) {
                if (val !== "") {
                    val = val.toLowerCase();
                    var $figureText = $(document).find("#gameUl").find("p");
                    $figureText.each(function() {
                        var glText = $(this).text().toLowerCase();
                        if (glText.indexOf(val) === -1) {
                            $(this).closest("li").hide();
                        } else {
                            $(this).closest("li").show();
                        }
                    });
                } else {
                    $(document).find("#gameUl").find("li").show();
                }
            }

            if (gamesublist.length === 0) {
                if (pvCode.toLocaleLowerCase() === "ifd") {
                    loadIfdGames();
                } else {
                    loadGames();
                }
            }
        });
    </script>
@endsection


@section('desktop')
    <div class="middle">
        <div class="container">
            <p class="h4 title">{{ $provider->provider }}</p>

            <div class="input-group mb-3">
                <input type="search" class="form-control search-game-name" id="gameName"
                    placeholder='Silahkan ketik nama permainan'>
            </div>

            <div id="GamePanel">
                <ul id="GameCategory" class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a href="#{{ $provider->provider }}" data-toggle="tab"
                            class="nav-link active">{{ $provider->provider }}</a>
                    </li>
                </ul>

                <div id="GameSubCategory" class="tab-content clearfix">
                    <div role="tabpanel" class="tab-pane fade show active" id="{{ $provider->provider }}">
                        @foreach ($games as $item)
                            <div class="col-2 game-list ">
                                <div class="game_group">
                                    <div class="game-list-content">
                                        <span class="game-favorite " data-id="{{ $item->game_code }}"><i
                                                class="fas fa-star"></i></span>
                                            <img data-alt="{{ $item->game_name }}"
                                                title="{{ $item->game_name }}" alt="{{ $item->game_name }}"
                                                src="{{ $item->game_image }}" class="img-fluid img-thumbnail" onerror="this.src='{{ asset('assets/images/d6fb4a76.png') }}';"
                                                onerror="this.onerror=null;" width="100%" height="100%" loading="lazy">
                                        <button class="btn-game" data-id="{{ $item->game_code }}"
                                            data-sub="{{ $item->id }}"
                                            data-url="/play?gameType={{ $item->game_type }}&providerCode={{ $item->provider_code }}&gameCode={{ $item->game_code }}">Main
                                            Sekarang</button>
                                    </div>
                                    <div class="figure-text">
                                        <p>{{ $item->game_name }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <script>
                    $(document).ready(function() {
                        // Search game
                        var b = $("#GameSubCategory .game-list");
                        var c = b.find("p");
                        for (var i = 0; i < c.length; i++) {
                            a.push($(c[i]).text().trim().toLowerCase());
                        }

                        // Keyup event
                        $(document).on("keyup", "#gameName", function(e) {
                            if (e.key == "Escape") {
                                $(this).val("");
                                b.show();
                            } else {
                                search_game($(this).val());
                            }
                        });
                        $(document).on("change", "#gameName", function(e) {
                            search_game($(this).val());
                        });
                        $(document).on("search", "#gameName", function(e) {
                            var text = $(this).val();
                            if (text == "") {
                                $(document).find("#GameSubCategory").find(".game-list").show();
                            }
                        });

                        function search_game(val) {
                            if (val !== "") {
                                val = val.toLowerCase();
                                var $figureText = $(document).find("#GameSubCategory").find("p");
                                $figureText.each(function() {
                                    var glText = $(this).text().toLowerCase();
                                    if (glText.indexOf(val) === -1) {
                                        $(this).closest(".game-list").hide();
                                    } else {
                                        $(this).closest(".game-list").show();
                                    }
                                });
                            } else {
                                $(document).find("#GameSubCategory").find(".game-list").show();
                            }
                        }

                        if (gamesublist.length === 0) {
                            if (pvCode.toLocaleLowerCase() === "ifd") {
                                loadIfdGames();
                            } else {
                                loadGames();
                            }
                        }
                    });
                </script>
            </div>
        </div>
    </div>
@endsection