@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="home-slider owl-carousel owl-theme">
        @foreach ($banner as $banners)
            <div class="item">
                <img src="{{ env('AWS_URL') }}{{ $banners->gambar }}" alt="">
            </div>
        @endforeach
    </div>
    <script>
        $(document).ready(function() {
            var owl = $('.home-slider');
            owl.owlCarousel({
                items: 1,
                nav: true,
                loop: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 8000,
                autoHeight: true
            });
        })
    </script>
    <div class="index-card">
        @auth
            <div class="btn-account black2">
                <ul>
                    <li><a class="icon-btn" href="/bank/deposit">Deposit</a></li>
                    <li><a class="icon-btn" href="/bank/withdraw">Withdraw</a></li>
                    <li><a class="icon-btn" href="/bank/history">History</a></li>
                </ul>
            </div>
        @endauth
        @guest
            <div class="btn-account ">
                <a class="btn btn-secondary-primary " href="{{ route('login.form') }}">Masuk</a>
                <a class="btn btn-join" href="{{ route('login.register') }}">Daftar</a>
            </div>
        @endguest

        <div class="game-front-menu">
            <div class="game-front-wrapper">
                <div class="game-group-front owl-carousel owl-theme">
                    <div class="item">
                        <a href="#Sports" class="nav-link">
                            <i class="sports"></i>
                            <span class="">Sports</span>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#Casino" class="nav-link">
                            <i class="casino"></i>
                            <span class="">Casino</span>
                        </a>
                    </div>
                    <div class="item open-game" data-href="/play?gamecode=18">
                                	<span class="label-new blink">Promo</span>
                                    <a href="#icon_scatter" class="nav-link">
                                        <i class="icon_scatter"></i>
                                        <span class="nav-name d-flex justify-content-center align-items-end">
                                            Mahjong Wins 3
                                    </span>
                                    </a>
									<script>
										if( $('.icon_scatter').length == 1 ) {
											$('.icon_scatter').css({
											    'background-position': 'center 5px',
											    'background-image': 'url(https://cdn.robotaset.com/assets/images/provider/pgr-mahjong-wins-3.webp)',
											    'background-repeat': 'no-repeat'
											});

											// For !important, you need to use plain JavaScript since jQuery's .css() doesn't support !important
											$('.icon_scatter').each(function() {
											    this.style.setProperty('background-image', 'url(https://cdn.robotaset.com/assets/images/provider/pgr-mahjong-wins-3.webp)', 'important');
											});
										}
									</script>
                                </div>
                    <div class="item">
                        <a href="#Slot" class="nav-link">
                            <i class="slot"></i>
                            <span class="">Slot</span>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#Togel" class="nav-link">
                            <i class="lottery"></i>
                            <span class="blink">Togel</span>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#SabungAyam" class="nav-link">
                            <i class="cock_fighting"></i>
                            <span class="">Sabung Ayam</span>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#Games" class="nav-link">
                            <i class="games"></i>
                            <span class="">Games</span>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#TembakIkan" class="nav-link">
                            <i class="tembak_ikan"></i>
                            <span class="">Tembak Ikan</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="provider-group tab-content clearfix">
                <div role="tabpanel" class="tab-pane fade" id="Sports">
                    <ul class="provider-item-list sports">
                        @foreach (navbar('sportsbook') as $item)
                            <li class="col-4 col-sm-2 {{ $item->slug }}">
                                @if ($item->status != 1)
                                    <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;"
                                        class="game-front-type">
                                    @else
                                        @auth
                                            <a data-id="{{ $item->GameCode }}"
                                                data-href="/play?gamecode={{ $item->GameCode }}"
                                                class="open-game game-front-type">
                                            @endauth
                                            @guest
                                                <a onclick="alert('Silahkan login terlebih dahulu!');" href="javascript:;"
                                                    class="game-front-type">
                                                @endguest
                                @endif
                                <i class="game-front-icon"></i>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Casino">
                    <ul class="provider-item-list casino">
                        @foreach (navbar('casino') as $item)
                        <li class="col-4 col-sm-2 {{ $item->slug }}">
                            @if ($item->status != 1)
                            <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;" class="game-front-type">
                                @else
                                @if($item->GameCode != null)
                                <a data-id="{{ $item->GameCode }}"
                                    data-href="/play?gamecode={{ $item->GameCode }}"
                                    class="open-game game-front-type">
                                    @else
                                    <a href="/game/{{ $item->slug }}/2" class="game-front-type">
                                        @endif
                                        @endif
                                        <i class="game-front-icon"></i>
                                    </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Slot">
                    <ul class="provider-item-list slot">
                        @foreach (navbar('slot') as $item)
                            <li class="col-4 col-sm-2 {{ $item->slug }}">
                                @if ($item->status != 1)
                                    <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;"
                                        class="game-front-type">
                                    @else
                                        <a href="/game/{{ $item->slug }}/3" class="game-front-type">
                                @endif
                                <i class="game-front-icon"></i>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Togel">
                    <ul class="provider-item-list lottery">
                        <li class="col-4 col-sm-2 ifd ">
                            <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;"
                                class="game-front-type">
                                <i class="game-front-icon"></i>
                            </a>
                        </li>
                        <li class="col-4 col-sm-2 pgr ">
                            <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;"
                                class="game-front-type">
                                <i class="game-front-icon"></i>
                            </a>
                        </li>
                        <li class="col-4 col-sm-2 ddo ">
                            <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;"
                                class="game-front-type">
                                <i class="game-front-icon"></i>
                            </a>
                        </li>
                    </ul>
                </div>

                <div role="tabpanel" class="tab-pane fade" id="SabungAyam">
                    <ul class="provider-item-list cock_fighting">
                        @foreach (navbar('cockfighting') as $item)
                        <li class="col-4 col-sm-2 {{ $item->slug }}">
                            @if ($item->status != 1)
                            <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;" class="game-front-type">
                                @else
                                @if($item->GameCode != null)
                                <a data-id="{{ $item->GameCode }}"
                                    data-href="/play?gamecode={{ $item->GameCode }}"
                                    class="open-game game-front-type">
                                    @else
                                    <a href="/game/{{ $item->slug }}/2" class="game-front-type">
                                        @endif
                                        @endif
                                        <i class="game-front-icon"></i>
                                    </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Games">
                    <ul class="provider-item-list games">
                        @foreach (navbar('arcade') as $item)
                        <li class="col-4 col-sm-2 {{ $item->slug }}">
                            @if ($item->status != 1)
                            <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;" class="game-front-type">
                                @else
                                @if($item->GameCode != null)
                                <a data-id="{{ $item->GameCode }}"
                                    data-href="/play?gamecode={{ $item->GameCode }}"
                                    class="open-game game-front-type">
                                    @else
                                    <a href="/game/{{ $item->slug }}/8" class="game-front-type">
                                        @endif
                                        @endif
                                        <i class="game-front-icon"></i>
                                    </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="TembakIkan">
                    <ul class="provider-item-list tembak_ikan">
                        @foreach (navbar('fishing') as $item)
                        <li class="col-4 col-sm-2 {{ $item->slug }}">
                            @if ($item->status != 1)
                            <a onclick="alert('Hubungi admin untuk membuka akses!');" href="javascript:;" class="game-front-type">
                                @else
                                @if($item->GameCode != null)
                                <a data-id="{{ $item->GameCode }}"
                                    data-href="/game/{{ $item->slug }}/4"
                                    class="open-game game-front-type">
                                    @else
                                    <a href="/game/{{ $item->slug }}/4" class="game-front-type">
                                        @endif
                                        @endif
                                        <i class="game-front-icon"></i>
                                    </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.open-game').forEach(function(el) {
        el.addEventListener('click', function(e) {
            e.preventDefault(); // Cegah aksi default (jika ada)
            const gameUrl = el.getAttribute('data-href');
            if (gameUrl) {
                window.location.href = gameUrl; // Buka di tab yang sama
            }
        });
    });
});
</script>
            <script>
                $(document).ready(function() {
                    var parent = $('.game-front-menu');
                    var gmfr = $('.game-group-front');
                    gmfr.owlCarousel({
                        loop: true,
                        dots: false,
                        responsiveClass: true,
                        responsive: {
                            300: {
                                items: 3,
                                nav: true
                            },
                            400: {
                                items: 4,
                                nav: true
                            },
                            600: {
                                items: 6,
                                nav: true
                            }
                        }
                    });

                    gmfr.find("a").on("click", function(e) {
                        e.preventDefault();

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

                        // Remove active show
                        $(".game-group-front a.active").removeClass("active");
                        // Add active show
                        _this.addClass("active");

                        $(".provider-group .tab-pane.active.show").removeClass("active show");
                        $(target).addClass("active show");
                    });
                })
            </script>
        </div>

        <section id="poolnumberresult" class="py-xxl-4 pool-result-wrapper">
            <div class="container">
                <div class="pool-list-results owl-carousel owl-theme" id="latestPool"></div>
            </div>

            <div class="modal fade" id="poolHistoryModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Hasil Keluaran</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <section class="bg-dark-transparent">
                                <div class="container">
                                    <div class="rounded py-1">
                                        <div>
                                            <span class="text-warning text-uppercase" id="mdlPoolCode"></span>
                                        </div>
                                        <table class="table table-dark" id="mdlPoolHistory">
                                            <thead>
                                                <tr>
                                                    <th scope="col" style="text-transform: capitalize;">hari
                                                    </th>
                                                    <th scope="col">Tanggal</th>
                                                    <th scope="col">Periode</th>
                                                    <th scope="col">Hasil</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                var POOL_DATA = [];

                function poolLatestNumber(data) {
                    $.each(data, function(i, row) {
                        var $latestPool = $(document).find("#latestPool");
                        var poolName = row.label === "sg" ? "Singapore" : row.label;
                        $latestPool.append(
                            '<div class="item"><div class="px-xxl-1">' +
                            '<a class="box-pull" href="#" data-toggle="modal" data-target="#poolHistoryModal" data-poolcd="' +
                            row.label +
                            '">' +
                            '<div class="text-center">' +
                            '<div class="pull-head pt-1 text-uppercase">' +
                            "<span>" +
                            poolName +
                            "</span>" +
                            "</div>" +
                            '<div class="pull-body d-flex align-items-center justify-content-center"><span class="blink">' +
                            row.number +
                            "</span></div>" +
                            '<div class="pull-foot text-dark px-1">' +
                            row.day +
                            ", " +
                            row.humanDate +
                            "</div>" +
                            "</div>" +
                            "</a>" +
                            "</div></div>"
                        );
                    });
                }

                function poolHistoryNumber(data) {
                    var $tbody = $(document).find("#mdlPoolHistory tbody");
                    $.each(data, function(i, row) {
                        $tbody.append("<tr>" + "<td>" + row.day + "</td>" + "<td>" + row.humanDate + "</td>" + "<td>" + row
                            .shift + "</td>" + "<td>" + row.number + "</td>" + "</tr>");
                    });
                }

                $(function() {
                    var lang = "id";
                    var poolApi = "https://p4.robotaset.com/";
                    var agentCode = "AMPZqvmh8D9MN5HHced3mA==";

                    $.ajax({
                        async: true,
                        url: poolApi + "/pool/latest?lang=" + lang + "&code=" + agentCode,
                        type: "GET",
                        contentType: "json",
                    }).then(function(data) {
                        POOL_DATA = data;
                        poolLatestNumber(data);
                        renderCarousel();
                        //$('.pool-list-results').find('.owl-nav').removeClass('disabled');
                    });

                    // modal
                    $("#poolHistoryModal").on("show.bs.modal", function(event) {
                        var button = $(event.relatedTarget);
                        var poolCode = button.data("poolcd");
                        var poolText = poolCode == 'sg' ? 'Singapore' : poolCode;
                        var modal = $(this);
                        modal.find("#mdlPoolCode").text(poolText);
                        var $tbody = $(document).find("#mdlPoolHistory tbody");
                        $tbody.empty();

                        $.ajax({
                            async: true,
                            url: poolApi + "/pool/history?pool=" + poolCode + "&lang=" + lang,
                        }).then(function(data) {
                            poolHistoryNumber(data);
                        });


                        var customModalCss = {
                            "min-height": "10%",
                            "top": "50%",
                            "left": "50%",
                            "right": "50%",
                            "width": "100%",
                            "max-width": "600px",
                            "transform": "translate(-50%, -50%)",
                            "z-index": "61"
                        };
                        modal.css(customModalCss);

                    })


                    $("#poolHistoryModal").on("hidden.bs.modal", function(event) {
                        var modal = $(this);
                        modal.css({
                            "min-height": "",
                            "top": "",
                            "left": "",
                            "right": "",
                            "width": "",
                            "max-width": "",
                            "transform": "",
                            "z-index": ""
                        });
                    });


                    // carousel
                    function renderCarousel() {
                        var poolRes = $(".pool-list-results");
                        var activeItem = $('#poolnumberresult').find('.owl-item.active').length;
                        var responsiveConfig = {
                            200: {
                                items: 2,
                                loop: POOL_DATA.length > 2 ? true : false
                            },
                            300: {
                                items: 2,
                                loop: POOL_DATA.length > 2 ? true : false
                            },
                            400: {
                                items: 3,
                                loop: POOL_DATA.length > 3 ? true : false
                            },
                            500: {
                                items: 3,
                                loop: POOL_DATA.length > 3 ? true : false
                            },
                            600: {
                                items: 4,
                                loop: POOL_DATA.length > 4 ? true : false
                            },
                            700: {
                                items: 5,
                                loop: POOL_DATA.length > 5 ? true : false
                            },
                            800: {
                                items: 6,
                                loop: POOL_DATA.length > 6 ? true : false
                            },
                            900: {
                                items: 7,
                                loop: POOL_DATA.length > 7 ? true : false
                            },
                            1000: {
                                items: 7,
                                loop: POOL_DATA.length > 7 ? true : false
                            }
                        };
                        poolRes.owlCarousel({
                            nav: false,
                            dots: true,
                            margin: 8,
                            items: 7,
                            autoplay: true,
                            autoplayTimeout: 10000,
                            responsiveClass: true,
                            responsive: responsiveConfig
                        });
                    }
                });
            </script>
            </section><section class="widgets">
		    <div class="widget-tab text-center">
		<ul id="game-widgets-tab" class="nav nav-tabs justify-content-center" role="tablist"></ul>
		<div id="game-widgets-content" class="tab-content text-left"></div>

		<script>
			$(document).ready(function () {
				var isMobile = true;
				var agentIdHash = "HunmmGLHcEoGOeod3AZEJg==";
				var poolApi = "https://p4.robotaset.com";
				var crConfig = {
					0: { items: 2 },
					400: { items: 3 },
					500: { items: 3 },
					600: { items: isMobile ? 4 : 3 }
				}
				
				console.log(crConfig);

				// Initialize Owl Carousel with responsive settings
				function initializeOwlCarousel(selector) {
					$(selector).owlCarousel({
						items: 3,
						margin: 10,
						loop: isMobile ? true : false,
						autoplay: true,
						autoplayTimeout: 5000,
						autoHeight: true,
						startPosition: 0,
						autoplayHoverPause: true,
						responsive: crConfig
					});
				}

				// Fetch the game data using AJAX
				$.ajax({
					url: poolApi + '/homepage-games?code=' + agentIdHash,
					method: 'GET',
					dataType: 'json',
					success: function (data) {
						if (data != null || data != undefined || data != "") {
							var tabs = '';
							var tabContent = '';
							var isActive = 'active';

							// Sort the games by ordering
							$.each(data, function (category, games) {
								games.sort(function (a, b) {
									return a.ordering - b.ordering;
								});
							});

							$.each(data, function (category, games) {
								if (games.length > 0) {
									var categoryTabId = category + '-games';
	//							 var categoryContentId = category;
									var categoryGameSlider = categoryTabId + '-slider';
									var isActive = category != 'hot' ? '' : 'active';
									var isShow = isActive == '' ? 'in' : 'show';

									// Generate tabs
									tabs += '<li role="presentation" class="' + isActive + '">' +
										'<a class="' + isActive + ' ' + isShow + '" href="#' + categoryTabId + '" aria-controls="' + categoryTabId + '" role="tab" data-toggle="tab" aria-selected="true">' + category.toUpperCase() + '</a>' +
										'</li>';

									// Generate tab content
									tabContent += '<div role="tabpanel" class="tab-pane ' + isActive + ' ' + isShow + '" id="' + categoryTabId + '">' +
										'<div id="' + categoryGameSlider + '" class="widget-carousel owl-carousel owl-theme"></div>' +
										'</div>';
								}
							});

							// Append generated tabs and content to the DOM
							$('#game-widgets-tab').append(tabs);
							$('#game-widgets-content').append(tabContent);

							// Populate the sliders with games data and initialize Owl Carousel
							$.each(data, function (category, games) {
								if (games.length > 0) {
									var categorySlider = $('#' + category + '-games-slider');
									games.forEach(function (game) {
										var favorited = game.isFavorite ? 'favorited' : '';
	//								 var badge = '';
	//								 if (category.toLowerCase() === 'event') {
	//									 badge = '<span class="badge event blink">Event</span>';
	//								 } else if (category.toLowerCase() === 'hot') {
	//									 badge = '<span class="badge hot"><img src="https://cdn.robotaset.com/assets/images/provider/hot-tag.gif" alt="Hot"></span>';
	//								 } else if (category.toLowerCase() === 'new') {
	//									 badge = '<span class="badge new blink">New</span>';
	//								 }

										if (isMobile) {
											var gameItem = '<div class="card h-100">' +
												'<div class="open-game" data-id="' + game.apiMobile + '" data-href="/plays?gamecode=' + game.apiMobile + '">' +
												'<div class="card-body">' +
												'<div class="myback-img" style="background-image:url(' + game.icon + ')">' +
												'</div>' +
												'<div class="game-overlay"></div>' +
												'<div class="game-img">' +
												'<div class="borders avatar-provider">' +
												'<div class="icon ' + game.provider.toLowerCase() + '"></div>' +
												'</div>' +
												'</div>' +
												'<div class="game-title">' +
												'<div class="figure-text">' +
												'<p>' + game.gameName + '</p>' +
												'</div>' +
												'</div>' +
												'</div>' +
												'</div>' +
												'</div>';
											categorySlider.append(gameItem);
										} else {
											var gameItem = '<div class="card h-100">' +
												'<div class="btn-game" data-id="' + game.api + '" data-url="/play?gamecode=' + game.provider.toLowerCase() + '/' + game.api + '">' +
												'<div class="card-body">' +
												'<div class="myback-img" style="background-image:url(' + game.icon + ')">' +
												'</div>' +
												'<div class="game-overlay"></div>' +
												'<div class="game-img">' +
												'<div class="borders avatar-provider">' +
												'<div class="icon ' + game.provider.toLowerCase() + '"></div>' +
												'</div>' +
												'</div>' +
												'<div class="game-title">' +
												'<div class="figure-text">' +
												'<p>' + game.gameName + '</p>' +
												'</div>' +
												'</div>' +
												'</div>' +
												'</div>' +
												'</div>';
											categorySlider.append(gameItem);
										}
									});
									initializeOwlCarousel('#' + category + '-games-slider');
								}
							});
						}
					},
					error: function (error) {
						console.log('Error fetching data', error);
					}
				});
			});
		</script>


</div>


</section>
        </section>
        </script>
        <div class="middle middle-index">
	<section class="widgets">
			<div class="container">
				<div class="card card-leaderboard">
	<div class="card-header">
		<p class="h6 leaderboard-title">
			<i class="fas fa-trophy"></i>
			<span>Pemenang Jackpot</span>
		</p>
		<button id="seeMoreLeaderboard" class="btn btn-sm btn-info" disabled="disabled">Selengkapnya</button>
	</div>
	<div class="card-body">
		<table class="table table-bordered table-dark leader-board table-sm" id="leaderBoardTable">
			<thead>
			<tr>
				<th style="text-align: left">Username</th>
				<th style="text-align: right">Bet</th>
				<th style="text-align: right">Win/Lose</th>
			</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="3" class="leaderboard-empty-row">
						<i class="fas fa-sync-alt fa-spin h5"></i>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<script>
		$(function () {
			var isMobile = false;
			var code = "7jRXKj+01xWOS8b3XzAyKg==";
			var poolApi = "https://lb.robotaset.com";
			var $leaderBoardTable = $(document).find('#leaderBoardTable');
			var $leaderBoardTableOnModal = $(document).find('#leaderBoardTableOnModal');
			var TR_EMPTY_ROW = $(".leaderboard-empty-row");
			var LEADERBOARD_URL = poolApi + "/leader_board?code=" + code + "&limit=10";
			var LEADERBOARD_DATA = [];

			renderSorting('leaderBoardTable');
			renderSorting('leaderBoardTableOnModal');

			callLeaderboard();

			$(document).on('click', '#callLeaderboard', function() {
				const emptyRow = $leaderBoardTable.find('.leaderboard-empty-row');
				if (emptyRow.length) {
					emptyRow.html('<i class="fas fa-sync-alt fa-spin h5"></i>');
				}
				callLeaderboard();
			});

			$('#leaderboardModal').on("show.bs.modal", function (event) {
 				var modal = $(this);
 				fetch(poolApi + "/leader_board?code=" + code + "&limit=100").then(res => res.json()).then(data => {
 					var leaderboardList = data['leaderboardList'];
//					var leaderboardList = LEADERBOARD_DATA;
					$leaderBoardTableOnModal.find('tbody').empty();
					var number = 1;
					$.each(leaderboardList, function (index, row) {
						$leaderBoardTableOnModal.find('tbody').append('<tr>' +
							'<td>' + row['username'] + '</td>' +
							'<td class="text-right">' + fmtAmount(row['stake']*1000) + '</td>' +
							'<td class="text-right">' + fmtAmount(row['winlost']*1000) + '</td>' +
							'<td class="pvname">' + row['pvname'] + '</td>' +
							'<td class="text-right">' + formatDate(row['endTime']) + '</td>' +
							'</tr>');
						number++;
					});

					// Datatable init
					// if (!$.fn.DataTable.isDataTable('#leaderBoardTableOnModal')) {
					//	 $leaderBoardTableOnModal.DataTable({
					//		 pageLength: 25,
					//		 responsive: true
					//	 });
					// }


 				}).catch(error => {
 					console.error(error)
 				});
			});

			function formatDate(timestamp) {
				// Convert the endTime to milliseconds and adjust for GMT+7 (subtract 7 hours)
				const adjustedTime = (timestamp - (7 * 60 * 60)) * 1000; // Subtracting 7 hours in seconds and converting to milliseconds

				// Create a Date object
				const date = new Date(adjustedTime);

				// Extract date components (day, month, year, hours, minutes)
				const day = String(date.getDate()).padStart(2, '0');		 // Pad day to 2 digits
				const month = capitalize(date.toLocaleString('en-GB', { month: 'short' }));
				const year = date.getFullYear();
				const hours = String(date.getHours()).padStart(2, '0');	  // Pad hours to 2 digits
				const minutes = String(date.getMinutes()).padStart(2, '0');  // Pad minutes to 2 digits

				// Return the formatted string in "DD-MM-YYYY HH:MM" format
				return day + '-' + month + '-' + year + ' ' + hours + ':' + minutes;
			}

			function fmtAmount(amount) {
				return new Intl.NumberFormat('id-ID', {
					style: 'currency',
					currency: 'IDR',
					minimumFractionDigits: 0,
					maximumFractionDigits: 0
				}).format(amount);
			}

			function formatNumber(num) {
				return num.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
			}

			// Function to render sorting icons and handle sorting
			function renderSorting(divId) {
				const table = document.getElementById(divId);
				const headers = table.querySelectorAll('thead th');

				headers.forEach((th, index) => {
					// Add the sorting icon to the header
					th.innerHTML += '<span style="float: right;margin-left: 1rem"><i class="fas fa-sort"></i></span>';

					// Track current sort direction (Asc/Desc)
					let isAsc = true;

					// Add click event listener to each header
					th.addEventListener('click', function () {
						const rows = Array.from(table.querySelectorAll('tbody tr'));

						// Toggle sort direction on click
						isAsc = !isAsc;

						// Sort rows based on the clicked column index
						const sortedRows = rows.sort((rowA, rowB) => {
							const cellA = rowA.cells[index].innerText.toLowerCase();
							const cellB = rowB.cells[index].innerText.toLowerCase();

							if (cellA < cellB) return isAsc ? -1 : 1;
							if (cellA > cellB) return isAsc ? 1 : -1;
							return 0;
						});

						// Re-render the table with sorted rows
						const tbody = table.querySelector('tbody');
						tbody.innerHTML = ''; // Clear existing rows
						sortedRows.forEach(row => tbody.appendChild(row));

						// Update the sort icons
						headers.forEach(h => h.querySelector('i').className = 'fas fa-sort');  // Reset all icons
						this.querySelector('i').className = isAsc ? 'fas fa-sort-up' : 'fas fa-sort-down';  // Update current header icon
					});
				});
			}

			function callLeaderboard() {
				setTimeout(function() {
					fetch(LEADERBOARD_URL).then(res => res.json()).then(data => {
						if( data["leaderboardList"] ) {
							var leaderboardList = data['leaderboardList'];
							if( leaderboardList.length > 0 ) {
								LEADERBOARD_DATA = leaderboardList;
								$leaderBoardTable.find('tbody').empty();
								$.each(LEADERBOARD_DATA, function (index, row) {
									if( index < 10 ) {
										$leaderBoardTable.find('tbody').append('<tr>' +
											'<td>' + row['username'] + '</td>' +
											'<td style="text-align: right">' + fmtAmount(row['stake']*1000) + '</td>' +
											'<td style="text-align: right">' + fmtAmount(row['winlost']*1000) + '</td>' +
											'</tr>');
									}
								});
								$('#seeMoreLeaderboard').prop('disabled', false);
								$('#seeMoreLeaderboard').attr('data-toggle', 'modal');
								$('#seeMoreLeaderboard').attr('data-target', '#leaderboardModal');
							} else {
								$leaderBoardTable.find('tbody').html(
									'<tr>' +
									'<td colspan="3" class="leaderboard-empty-row">Data pemenang saat ini tidak tersedia.<br>Silahkan periksa secara berkala.</td>' +
									'</tr>'
								);
								$('#seeMoreLeaderboard').prop('disabled', true);
							}
						} else {
							console.error("There was an error while trying to process your request at " + LEADERBOARD_URL + ", caused by: " + data.error);
							errorLeaderboardHandling();
						}
					}).catch(error => {
						console.error("There was an error while trying to process your request at " + LEADERBOARD_URL + ", caused by: " + error);
						errorLeaderboardHandling();
					});
				}, 1000);
			}

			function errorLeaderboardHandling() {
				// Update the content of the leaderboard-empty-row
				const emptyRow = $leaderBoardTable.find('.leaderboard-empty-row');
				if (emptyRow.length) {
					emptyRow.html('<span>Saat ini, sistem kami mengalami gangguan. <br><span class="text-bold text-underline" id="callLeaderboard">Klik di sini</span> untuk mencoba kembali secara berkala.</span>');
				} else {
					// If the empty row does not exist, you might want to create it
					$leaderBoardTable.find('tbody').html(
						'<tr>' +
						'<td colspan="3" class="leaderboard-empty-row"><span>Saat ini, sistem kami mengalami gangguan. <br><span class="text-bold text-underline" id="callLeaderboard">Klik di sini</span> untuk mencoba kembali secara berkala.</span></td>' +
						'</tr>'
					);
				}
			}


		});
	</script>
</div>

<div class="modal fade" id="leaderboardModal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title leaderboard-title">
					<i class="fas fa-trophy"></i>
					<span>Pemenang Jackpot</span>
				</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"
						style="position: absolute; right: 1rem; top: 1rem; color: white;">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" style="overflow: auto">
				<table class="table table-bordered table-dark leader-board" id="leaderBoardTableOnModal">
					<colgroup>
						<col style="min-width: 10rem">
						<col style="min-width: 10rem">
						<col style="min-width: 10rem">
						<col style="min-width: 10rem">
						<col style="min-width: 10rem">
					</colgroup>
					<thead>
					<tr style="text-align: left; background-color: #232308">
						<th>Nama Pengguna</th>
						<th class="text-right">Nilai Taruhan</th>
						<th class="text-right">Win/Lose</th>
						<th>Provider</th>
						<th class="text-right">Waktu</th>
					</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
</div>
		</section>

        </div>

        <style>
            .game-wrapper {
                border-radius: 15px;
                position: relative
            }

            .game-list-content {
                border-radius: 12px
            }

            .game-wrapper {
                background-color: #221f24;
                box-shadow: 4px 3px 0 1px #ffeb00
            }

            .game-favorite {
                background-color: #373845;
                color: #ffce10;
            }

            .fa-bolt:before {
                animation: blinkStar 0.6s infinite alternate;
            }

            @keyframes blinkStar {
                0% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            .figure-text p {
                color: #ffffff;
                text-shadow: 0 0 5px #eaf900
            }

            .game-gacor {
                background: url(#00000);
                border-radius: 40px;
                box-shadow: inset 0 20px 20px 0 #03b77b1f
            }

            .baten-maen {
                background-color: #fbff00;
                display: block;
                color: #000000;
                border-radius: 15px;
                padding-bottom: 3px;
                margin: 4px;
                box-shadow: 0 0 5px #fbff00, inset 0 0 9px 3px #fbff00
            }

            .titel-game {
                text-shadow: 0 0 5px #ffbc00;
                font-size: 150%
            }

            .badge {
                position: absolute;
                top: 0;
                right: 0;
                padding: 5px 10px;
                background-color: #ff0000;
                color: #ffffff;
                animation: blinkBadge .6s infinite alternate;
                z-index: 2;
                border-radius: 0 18px 0 20px;
                font-size: 70%
            }

            @keyframes blinkBadge {
                0% {
                    opacity: 0
                }

                100% {
                    opacity: 1
                }
            }
        </style>
        <div class="container">
            <div class="progressive-jackpot">
                <h2>Progressive Jackpot</h2>
                <div class="jackpot-wrapper">
                    <img src="{{ general()->jackpot }}">
                    <span id="jackpot" data-value="17396611955.98">17.396.611.955,98</span>
                </div>
            </div>
        <div class="supported-bank">
  	<div class="col-12 col-sm-6 bank">
      <div class="qris"></div>
    </div>
    <div class="col-12 col-sm-6 bank">
        <div class="bca"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="mandiri"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="cimb"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="bni"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="bri"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="danamon"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="permata"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="ovo"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="gopay"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="simpati"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="dana"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="panin"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="linkaja"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="sakuku"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="bsi"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="jenius"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="neo"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="jago"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="sinarmas"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="allo"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="blu"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="seabank"><span class="indicator on"></span></div>
      </div>
    <div class="col-12 col-sm-6 bank">
        <div class="ocbc"><span class="indicator on"></span></div>
      </div>
    </div>
        <div class="seo-footer ">
            <div class="asf-logo"></div><!-- Artikel -->
        </div>
        
        

</body>
</html>


        <style>
            @import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

            :root {
                --accent-color: #ffffff;
                --base-color: #ffa500
            }

            .hamburg {
                position: absolute;
                width: 40px;
                height: auto;
                padding: .6rem;
                background-color: #8f0404;
                border-radius: 10px;
                z-index: 80;
                box-shadow: 0 0 12px 1px #000000
            }

            .ard-sosmed {
                display: block;
                cursor: pointer;
                position: fixed;
                bottom: 12%;
                left: 10px;
                font-family: "Times New Roman", sans-serif;
                z-index: 79
            }

            .ard-sosmed ul {
                margin: 0;
                padding: 0
            }

            .ard-sosmed ul li {
                position: absolute;
                text-decoration: none;
                list-style: none;
                transform: translate(0, 0) rotate(360deg);
                transition: all .5s ease;
                opacity: 0
            }

            .ard-sosmed.open ul li:nth-child(1) {
                transform: translateY(-65px);
                transition-delay: .20s;
                opacity: 1
            }

            .ard-sosmed.open ul li:nth-child(2) {
                transform: translate(0px, -130px);
                transition-delay: .16s;
                opacity: 1
            }

            .ard-sosmed.open ul li:nth-child(3) {
                transform: translate(0px, -195px);
                transition-delay: .12s;
                opacity: 1
            }

            .ard-sosmed ul li a img {
                width: 100%;
                height: auto
            }

            .ard-sosmed ul li a {
                display: flex;
                width: 55px;
                height: 55px;
                border: solid 2px #8f0404;
                border-radius: 10px;
                justify-content: center;
                align-items: center;
                background-color: #010101
            }

            .bar1,
            .bar2,
            .bar3 {
                width: 80%;
                height: 5px;
                background-color: #ffffff;
                margin: 6px auto;
                transition: .4s;
                position: relative;
                transform: translateY(-1px)
            }

            .open .bar1 {
                transform: translate(0, 10px) rotate(-225deg)
            }

            .open .bar2 {
                opacity: 0;
                transform: translate(0, -6px) rotate(-225deg)
            }

            .open .bar3 {
                transform: translate(0, -12px) rotate(-315deg)
            }

            .ard-sosmed ul li div {
                position: absolute;
                transition: all .3s ease;
                opacity: 0;
                scale: .1;
                font-family: "Times New Roman", sans-serif;
                font-size: large;
                background: #010101;
                color: #ffffff;
                text-align: center;
                text-wrap: nowrap;
                border: 1px solid var(--base-color);
                padding: 5px;
                border-radius: 10px
            }

            .ard-sosmed ul li:hover div {
                opacity: 1;
                scale: 1
            }

            .ard-sosmed ul li:nth-child(1) div {
                transform: translateY(-130px)
            }

            .ard-sosmed ul li:nth-child(1):hover div {
                transform: translate(70px, -40px)
            }

            .ard-sosmed ul li:nth-child(2) div {
                transform: translateY(-130px)
            }

            .ard-sosmed ul li:nth-child(2):hover div {
                transform: translate(70px, -40px)
            }

            .ard-sosmed ul li:nth-child(3) div {
                transform: translateY(-130px)
            }

            .ard-sosmed ul li:nth-child(3):hover div {
                transform: translate(70px, -40px)
            }

            .attention {
                position: relative;
                -webkit-clip-path: polygon(0% 0, 100% 0, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
                clip-path: polygon(0% 0, 100% 0, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
                width: 65px;
                text-wrap: nowrap;
                height: 30px;
                margin-bottom: 5px;
                left: 15px;
                background-color: var(--base-color);
                cursor: default;
                color: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-bottom: 5px;
                opacity: 0
            }

            .whore {
                animation: flicker .6s infinite;

                &:hover {
                    animation-duration: 10s
                }
            }

            @keyframes flicker {
                0% {
                    opacity: 1
                }

                50% {
                    opacity: 0
                }

                100% {
                    opacity: 1
                }
            }

            @media screen and (max-width:600px) {
                .ard-sosmed {
                    bottom: 130px;
                    left: 5px
                }
            }
        </style>
        <div class="outer" style=" z-index: 1;">
            <div class="ard-sosmed">
                <div class="attention whore">Tap Me!</div>
                <div class="hamburg" onclick="ardFunction()">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>
                <ul>
                    @foreach (floating() as $item)
                    <li>
                        <a href="{{ $item->url }}" target="_blank">
                            <img src="{{ env('AWS_URL') }}{{ $item->image }}">
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
            <script>
                const ard = document.querySelector('.ard-sosmed');
                const attention_whore = document.querySelector('.attention.whore');

                function ardFunction() {
                    ard.classList.toggle("open");
                    attention_whore.classList.remove("whore");
                }
            </script>
        </div>
    </div>
    </div>

<style>
  .snowflake-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.snowflake {
  position: absolute;
  top: -50px;
  width: 40px;
  height: 40px;
  background-image: url('//ampun-kak.click/img/ms/gem188/Home/icon-scatter.webp');
  background-size: cover;
  opacity: 1;
  animation: snowfall 4s linear infinite;
}

@keyframes snowfall {
  0% {
    transform: translateY(-50px);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}
  </style>
<div class="snowflake-container"></div>

<script>
    var jumlahIkon = 20;

for (var i = 0; i < jumlahIkon; i++) {
  var snowflake = document.createElement('div');
  snowflake.className = 'snowflake';
  snowflake.style.left = Math.random() * 100 + 'vw';
  snowflake.style.animationDelay = Math.random() * 8 + 's';
  document.querySelector('.snowflake-container').appendChild(snowflake);
}
  </script>
<style>.popup .popuptext{visibility:hidden;width:350px;background-color:#ffffff;color:black!important;text-align:center;border-radius:10px;padding:4px 0;position:fixed;z-index:999;top:10px;left:100px;margin-left:-80px;font-size:12px;font-weight:bold}.popup .popuptext::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:px;border-style:solid;border-color:#555 transparent transparent transparent}.popup .show{visibility:visible;-webkit-animation:fadeinout 4s cubic-bezier(0.18,0.89,0.32,1.28) forwards;animation:fadeinout 4s cubic-bezier(0.18,0.89,0.32,1.28) forwards;}#imageid{float:left;width:15%}@-webkit-keyframes fadeinout{0%,100%{opacity:0}50%{opacity:1}}@keyframes fadeinout{0%,100%{opacity:0}50%{opacity:1}}@media only screen and (min-width:769px){#mobilePopup{display:none}}</style><div class=popup><div class=popuptext id=myPopup><img id=imageid><div id=winner-title><img id=imageid><strong>SELAMAT KEPADA</strong></div><div id=winner-info></div></div></div><script>function getRandomInt(min,max){min=Math.ceil(min);max=Math.floor(max);return Math.floor(Math.random()*(max-min)+min);}
function buatistri(length){var result='';var characters='bcdfghjklmnpqrstvwxyz';var charactersLength=characters.length;for(var i=0;i<length;i++){result+=characters.charAt(Math.floor(Math.random()*charactersLength));}
return result;}
function buatanak(length){var result='';var characters='aeiou';var charactersLength=characters.length;for(var i=0;i<length;i++){result+=characters.charAt(Math.floor(Math.random()*charactersLength));}
return result;}
function buatjanda(length){var result='';var characters='bcdfghjklmnpqrstvwxyz1234567890';var charactersLength=characters.length;for(var i=0;i<length;i++){result+=characters.charAt(Math.floor(Math.random()*charactersLength));}
return result;}
function dibuat(length){var result='';var characters='****';var charactersLength=characters.length;for(var i=0;i<length;i++){result+=characters.charAt(Math.floor(Math.random()*charactersLength));}
return result;}
setInterval(function(){var y=["500.000","850.000","700.000","900.000","1.000.000","1.250.000","1.500.000","1.700.000","1.850.000","1.900.000","2.000.000","2.100.000","2.150.000","2.250.000","2.500.000","2.700.000","2.800.000","2.900.000","3.000.000","3.150.000","3.250.000","3.500.000","3.700.000","3.900.000","4.000.000","4.250.000","4.500.000","4.750.000","4.830.000","4.950.000","5.000.000","5.120.000","5.250.000","5.500.000","6.000.000","7.800.000","8.650.000","9.000.000","9.800.000","10.000.000","12.200.000","12.500.000","15.000.000","18.750.000","22.500.000","24.800.000","28.000.000","30.200.000"];var d=["https://sin1.contabostorage.com/23f0204cf1ac4f52b9083c4690f075a7:skyplay/ImageFile/bca.webp","https://sin1.contabostorage.com/23f0204cf1ac4f52b9083c4690f075a7:skyplay/ImageFile/mandiri_color.webp","https://sin1.contabostorage.com/23f0204cf1ac4f52b9083c4690f075a7:skyplay/ImageFile/bni.webp","https://sin1.contabostorage.com/23f0204cf1ac4f52b9083c4690f075a7:skyplay/ImageFile/bri.webp","https://sin1.contabostorage.com/23f0204cf1ac4f52b9083c4690f075a7:skyplay/ImageFile/dana.webp","https://sin1.contabostorage.com/23f0204cf1ac4f52b9083c4690f075a7:skyplay/ImageFile/bca.webp","https://sin1.contabostorage.com/23f0204cf1ac4f52b9083c4690f075a7:skyplay/ImageFile/linkaja.webp"];for(let i=1;i<=300;i++){var yy=getRandomInt(1,48);var dd=getRandomInt(1,7);var xx=y[yy];var ee=d[dd];var z=getRandomInt(3,6);var user=buatistri(1)+buatanak(1)+dibuat(z)+buatjanda(1);document.getElementById("winner-info").innerHTML=user+" Berhasil Withdraw Sebesar Rp "+xx;document.getElementById("imageid").src=ee;}
var popup=document.getElementById("myPopup");popup.classList.toggle("show");},5000)</script>

</style>
@endsection


@section('desktop')
    <div class="home-slider owl-carousel owl-theme">
        @foreach ($banner as $banners)
            <div class="item">
                <img src="{{ env('AWS_URL') }}{{ $banners->gambar }}" alt="Ajak Teman">
            </div>
        @endforeach
    </div>
    <script>
        $(document).ready(function() {
            var owl = $('.home-slider');
            owl.owlCarousel({
                items: 1,
                nav: true,
                loop: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 8000,
                autoHeight: true
            });
        })
    </script>
    <section id="poolnumberresult" class="py-xxl-4 pool-result-wrapper">
        <div class="container">
            <div class="pool-list-results owl-carousel owl-theme" id="latestPool"></div>
        </div>

        <div class="modal fade" id="poolHistoryModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Hasil Keluaran</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <section class="bg-dark-transparent">
                            <div class="container">
                                <div class="rounded py-1">
                                    <div>
                                        <span class="text-warning text-uppercase" id="mdlPoolCode"></span>
                                    </div>
                                    <table class="table table-dark" id="mdlPoolHistory">
                                        <thead>
                                            <tr>
                                                <th scope="col" style="text-transform: capitalize;">hari</th>
                                                <th scope="col">Tanggal</th>
                                                <th scope="col">Periode</th>
                                                <th scope="col">Hasil</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var POOL_DATA = [];

            function poolLatestNumber(data) {
                $.each(data, function(i, row) {
                    var $latestPool = $(document).find("#latestPool");
                    var poolName = row.label === "sg" ? "Singapore" : row.label;
                    $latestPool.append(
                        '<div class="item"><div class="px-xxl-1">' +
                        '<a class="box-pull" href="#" data-toggle="modal" data-target="#poolHistoryModal" data-poolcd="' +
                        row.label +
                        '">' +
                        '<div class="text-center">' +
                        '<div class="pull-head pt-1 text-uppercase">' +
                        "<span>" +
                        poolName +
                        "</span>" +
                        "</div>" +
                        '<div class="pull-body d-flex align-items-center justify-content-center"><span class="blink">' +
                        row.number +
                        "</span></div>" +
                        '<div class="pull-foot text-dark px-1">' +
                        row.day +
                        ", " +
                        row.humanDate +
                        "</div>" +
                        "</div>" +
                        "</a>" +
                        "</div></div>"
                    );
                });
            }

            function poolHistoryNumber(data) {
                var $tbody = $(document).find("#mdlPoolHistory tbody");
                $.each(data, function(i, row) {
                    $tbody.append("<tr>" + "<td>" + row.day + "</td>" + "<td>" + row.humanDate + "</td>" + "<td>" + row
                        .shift + "</td>" + "<td>" + row.number + "</td>" + "</tr>");
                });
            }

            $(function() {
                var lang = "id";
                var poolApi = "https://p4.robotaset.com/";
                var agentCode = "AMPZqvmh8D9MN5HHced3mA==";

                $.ajax({
                    async: true,
                    url: poolApi + "/pool/latest?lang=" + lang + "&code=" + agentCode,
                    type: "GET",
                    contentType: "json",
                }).then(function(data) {
                    POOL_DATA = data;
                    poolLatestNumber(data);
                    renderCarousel();
                    //$('.pool-list-results').find('.owl-nav').removeClass('disabled');
                });

                // modal
                $("#poolHistoryModal").on("show.bs.modal", function(event) {
                    var button = $(event.relatedTarget);
                    var poolCode = button.data("poolcd");
                    var poolText = poolCode == 'sg' ? 'Singapore' : poolCode;
                    var modal = $(this);
                    modal.find("#mdlPoolCode").text(poolText);
                    var $tbody = $(document).find("#mdlPoolHistory tbody");
                    $tbody.empty();

                    $.ajax({
                        async: true,
                        url: poolApi + "/pool/history?pool=" + poolCode + "&lang=" + lang,
                    }).then(function(data) {
                        poolHistoryNumber(data);
                    });


                })



                // carousel
                function renderCarousel() {
                    var poolRes = $(".pool-list-results");
                    var activeItem = $('#poolnumberresult').find('.owl-item.active').length;
                    var responsiveConfig = {
                        200: {
                            items: 2,
                            loop: POOL_DATA.length > 2 ? true : false
                        },
                        300: {
                            items: 2,
                            loop: POOL_DATA.length > 2 ? true : false
                        },
                        400: {
                            items: 3,
                            loop: POOL_DATA.length > 3 ? true : false
                        },
                        500: {
                            items: 3,
                            loop: POOL_DATA.length > 3 ? true : false
                        },
                        600: {
                            items: 4,
                            loop: POOL_DATA.length > 4 ? true : false
                        },
                        700: {
                            items: 5,
                            loop: POOL_DATA.length > 5 ? true : false
                        },
                        800: {
                            items: 6,
                            loop: POOL_DATA.length > 6 ? true : false
                        },
                        900: {
                            items: 7,
                            loop: POOL_DATA.length > 7 ? true : false
                        },
                        1000: {
                            items: 7,
                            loop: POOL_DATA.length > 7 ? true : false
                        }
                    };
                    poolRes.owlCarousel({
                        nav: false,
                        dots: true,
                        margin: 8,
                        items: 7,
                        autoplay: true,
                        autoplayTimeout: 10000,
                        responsiveClass: true,
                        responsive: responsiveConfig
                    });
                }
            });
        </script>
    </section>
    <div class="middle middle-index">
        <section class="widgets">
            <div class="container">
                <div class="widget-tab text-center">
                    <ul id="game-widgets-tab" class="nav nav-tabs justify-content-center" role="tablist"></ul>
                    <div id="game-widgets-content" class="tab-content text-left"></div>

                    <script>
                        $(document).ready(function() {
                            var isMobile = false;
                            var agentIdHash = "PrgTcLI70cExlyRFweXGXg==";
                            var poolApi = "https://p4.robotaset.com/";
                            var crConfig = {
                                0: {
                                    items: 2
                                },
                                400: {
                                    items: 3
                                },
                                500: {
                                    items: 3
                                },
                                600: {
                                    items: isMobile ? 4 : 3
                                }
                            }

                            crConfig[1000] = {
                                items: isMobile ? 5 : 6
                            };

                            console.log(crConfig);

                            // Initialize Owl Carousel with responsive settings
                            function initializeOwlCarousel(selector) {
                                $(selector).owlCarousel({
                                    items: 3,
                                    margin: 10,
                                    loop: isMobile ? true : false,
                                    autoplay: true,
                                    autoplayTimeout: 5000,
                                    autoHeight: true,
                                    startPosition: 0,
                                    autoplayHoverPause: true,
                                    responsive: crConfig
                                });
                            }
                        });
                    </script>
                </div><!-- /.widget-tab -->
            </div>
        </section>
        <div class="container">
            <div class="progressive-jackpot">
                <h2>Progressive Jackpot</h2>
                <div class="jackpot-wrapper">
                    <img src="{{ general()->jackpot }}">
                    <span id="jackpot" data-value="17396611955.98">17.396.611.955,98</span>
                </div>
            </div>

            <div class="mini-banner owl-carousel owl-theme">
                <div class="item box-middle">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDWVzjW4ae63L5pSApTm91G0QFQiJjyU2ISuQ2vMJ7N7yt3neLE7oCth8N5lrB_GAu7tcrB-Qki7ZkbM6Su9PJOyJl8tQFtUL7Z3i5iGzfK7nXR4ffkEa_0QMyDVdccQXvqurqu9QRmO5w5X8fjOZkKCr5Gp3TbkydPIWF9qEIdO1vdXykkIzaqY98Hoo/s600/sportbook_1.jpg"
                        alt="Sportbook-{{ general()->title }}">
                </div>
                <div class="item box-middle">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgswvmq9oaaZfQgsjCkYehT_EHEclsLFK0zaRk247cg0JTmiSp_4xpYKs3e14jyH5xex3kemXtP7AWY7mT33C775EYW1wkaVw9SU89eh-f5ZoOO54IjWrgjhK64rgU17g-9nAMshFta2hiFLJDer2N7xFv2xd3ONa8SrMU0AluqZXzCTGtuW2ug58vuSkY/s600/slot%20game_1.jpg"
                        alt="Slot-{{ general()->title }}">
                </div>
                <div class="item box-middle">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrFrhHcTREgd5kB-z6N5A2ewcEjpA4W_o7pTKdFZ8q0dpJ4UYApt4HQHJhE2dq49bjpIIfzaTu43P-fv94SUx6VApvqJ1BSRW6yBL2A3fbBniwY86pgM0_ALqMhDqPMHqlbrj9Jb6bw8oXm9cdxa7tUbnw9gYZQg0-lc2jl2HWFyW8lIVNxFR6bGSfgY/s600/live%20casino.jpg"
                        alt="Live-Casino-{{ general()->title }}">
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    var owl = $('.mini-banner');
                    owl.owlCarousel({
                        items: 3,
                        nav: false,
                        loop: false,
                        mouseDrag: false
                    });
                })


@endsection
@push('addon')
@if($popup)
<div class="reward_pop" style="display:none;" id="BannerPop">
    <div class="sub_color">
        <div class="logo_wrap">
            <img src="{{ env('AWS_URL') }}{{ general()->logo }}" alt="{{ general()->title }}">
        </div>
    </div>
    <a class="close_icon" href="#" id="CloseBannerPop" onclick="closePopupBanner(15);">Tutup</a>
    <div class="reward_content">
        <a href="#" class="banner-popup-link" onclick="closePopupBanner(15);"><img
                src="{{ env('AWS_URL') }}{{ $popup->gambar }}"></a>
    </div>
</div>
<script>
    popupBannerTimer();
</script>
@endif
@endpush
@push('addon-mobile')
@if($popup)
<div class="modal-outer">
    <div class="modal fade show" id="PopupBanner" tabindex="-1" role="dialog" aria-modal="true" style="display:none;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close close-modal" data-dismiss="modal" aria-label="Close"
                        onclick="closePopupMobileBanner(15);"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <div class="popup-image-wrapper">
                        <a href="#" class="banner-popup-link" onclick="closePopupMobileBanner(15);"><img
                                src="{{ env('AWS_URL') }}{{ $popup->gambar }}"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-backdrop fade show" style="display:none;"></div>
<script>
    popupBannerMobileTimer();
</script>
@endif

@endpush