@extends('layouts.master')
@section('title', getSetting('site_title'))
@section('canonical', getSetting('site_canonical'))
@section('content')
@php
    $maintenanceGame = getSetting('maintenance_game') == 1;
@endphp

<div class="main-content home">
    @if ($banners->count() > 0)
    <section class="home__slider">
        <div class="swiper-container main-slider">
            <div class="swiper-wrapper">
                @foreach ($banners as $index => $banner)
                    <div class="swiper-slide" style="max-height: 250px; width: 1120px;" data-swiper-slide-index="{{ $index }}" role="group" aria-label="{{ $index + 1 }} / {{ $banners->count() }}">
                        <a href="{{ $banner->link ?? '#' }}">
                            <img loading="lazy" src="{{ asset($banner->image) }}" width="1120" height="250" alt="slider-img">
                        </a>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>
    @endif
    <section class="home__jackpot">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="home__jackpot-cont">
              <div class="jackpot-amount">Rp <span id="amount"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="home__game">
        <div class="container">
          <div class="game-container">
            <div class="game-container__header">
              <div class="game-title">
                <div class="icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/popular.svg') }}" width="80" alt="popular.svg">
                </div>
                <h6>Game Terpopuler</h6>
              </div>
              <div class="game-action">
                <div class="action-button">
                  <button onclick="routeNav('/popular'); return false;" class="btn-custom-sm">Tampilkan Lainnya</button>
                </div>
                <div class="action-navigation">
                  <button class="btn-custom-sm navigation-prev--popular swiper-button-disabled" disabled="" tabindex="-1" aria-label="Previous slide" aria-controls="swiper-wrapper-10295e9e15c74e510a" aria-disabled="true">
                    <i class="fas fa-angle-left"></i>
                  </button>
                  <button class="btn-custom-sm navigation-next--popular" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-10295e9e15c74e510a" aria-disabled="false">
                    <i class="fas fa-angle-right"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="game-container__list">
              <div class="swiper-container home-popular-swiper swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                <div class="swiper-wrapper" id="swiper-wrapper-10295e9e15c74e510a" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
                 @foreach($popularGames as $index => $gameCategory)
@if($gameCategory->game)
<div class="games-holder swiper-slide" role="group">

    @auth
        @if($maintenanceGame)
            <a class="main sekarang main-sekarang-alert"
               href="javascript:void(0)"
               onclick="maintenanceAlert(); return false;">
        @else
            <a class="main sekarang main-sekarang-alert"
               href="{{ url('/gameIframe?data=' . encrypt_game_params(
                   $gameCategory->game->game_provider,
                   $gameCategory->game->game_code,
                   0
               )) }}"
               target="{{ $gameCategory->game->game_provider }}">
        @endif
    @else
        <a class="main sekarang main-sekarang-alert"
           href="#"
           onclick="gameAlert(); return false;">
    @endauth

        <div class="games-img">
            <img loading="lazy"
                 src="{{ $gameCategory->game->game_image }}"
                 alt="{{ $gameCategory->game->game_name }}">
        </div>

        <div class="hover-play">
            <i class="fas fa-play"></i>
        </div>

        <div class="games-name">
            {{ $gameCategory->game->game_name }}
        </div>

    </a>
</div>
@endif
@endforeach


                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
              </div>
            </div>
          </div>
        </div>
     </section>
    <section class="home__game">
      <div class="container">
        <div class="game-container">
          <div class="game-container__header">
            <div class="game-title">
              <div class="icon">
                <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/slot.svg') }}" width="80" alt="category-icon">
              </div>
              <h6>Slot</h6>
            </div>
            <div class="game-action">
              <div class="action-button">
                <a href="javascript:;" onclick="routeNav('/slot');" class="btn-custom-sm">Tampilkan Lainnya</a>
              </div>
              <div class="action-navigation">
                <button class="btn-custom-sm navigation-prev--slot swiper-button-disabled" disabled="" tabindex="-1" aria-label="Previous slide" aria-controls="swiper-wrapper-bc31a579e2997aed" aria-disabled="true">
                  <i class="fas fa-angle-left"></i>
                </button>
                <button class="btn-custom-sm navigation-next--slot" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-bc31a579e2997aed" aria-disabled="false">
                  <i class="fas fa-angle-right"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="game-container__category-list">
            <div class="swiper-container slot-swiper swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
              <div class="swiper-wrapper" id="swiper-wrapper-bc31a579e2997aed" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
                @foreach($Slots as $index => $slot)
                @if($slot->providerGame)
                <div class="swiper-slide swiper-slide-active" role="group" aria-label="{{ $index + 1 }} / {{ count($Slots) }}" style="width: 206px; margin-right: 20px;">
                  <div class="slide-border">
                    <div class="slide-item">
                      <a onclick="routeNav('/slot/{{ $slot->providerGame->provider_slug }}');" href="javascript:;">
                        <div class="slide-img">
                          <img loading="lazy"
     title="{{ $slot->providerGame->provider_name }}"
     alt="{{ $slot->providerGame->provider_name }}"
     src="{{ $slot->providerGame->provider_image }}">

                          <div class="hover-play">
                            <h6>{{ $slot->providerGame->provider_name }}</h6>
                            <i class="fas fa-play"></i>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
                @endif
                @endforeach
              </div>
              <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="home__game">
      <div class="container">
        <div class="game-container">
          <div class="game-container__header">
            <div class="game-title">
              <div class="icon">
                <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/casino.svg') }}" width="80" alt="category-icon">
              </div>
              <h6>Casino</h6>
            </div>
            <div class="game-action">
              <div class="action-button">
                <a href="javascript:;" onclick="routeNav('/casino');" class="btn-custom-sm">Tampilkan Lainnya</a>
              </div>
              <div class="action-navigation">
                <button class="btn-custom-sm navigation-prev--casino swiper-button-disabled" disabled="" tabindex="-1" aria-label="Previous slide" aria-controls="swiper-wrapper-a3108523f12ac8412" aria-disabled="true">
                  <i class="fas fa-angle-left"></i>
                </button>
                <button class="btn-custom-sm navigation-next--casino" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-a3108523f12ac8412" aria-disabled="false">
                  <i class="fas fa-angle-right"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="game-container__category-list">
            <div class="swiper-container casino-swiper swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
              <div class="swiper-wrapper" id="swiper-wrapper-a3108523f12ac8412" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
                @foreach($Casinos as $index => $casino)
@if($casino->providerGame)

                <div class="swiper-slide swiper-slide-active" role="group" aria-label="{{ $index + 1 }} / {{ count($Casinos) }}" style="width: 206px; margin-right: 20px;">
                  <div class="slide-border">
                    <div class="slide-item">
                        @auth
                        <a onclick="routeNav('/casino/{{ $casino->providerGame->provider_slug }}');"
   href="javascript:;">

                        @else
                            <a class="main sekarang main-sekarang-alert" href="#" onclick="gameAlert(); return false">
                        @endauth
                        <div class="slide-img">
                          <img loading="lazy"
     src="{{ $casino->providerGame->provider_image }}"
     alt="{{ $casino->providerGame->provider_name }}">

<div class="hover-play">
  <h6>{{ $casino->providerGame->provider_name }}</h6>
  <i class="fas fa-play"></i>
</div>

                        </div>
                      </a>
                    </div>
                  </div>
                </div>
                @endif
                @endforeach
              </div>
              <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="home__lotto">
      <div class="container">
        <div class="swiper-container lotto-swiper swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
          <div class="swiper-wrapper" id="swiper-wrapper-d33ae7377e7e4bed" aria-live="off" style="transition-duration: 0ms; transform: translate3d(-1356px, 0px, 0px);">
            @foreach ($lotteryResults as $index => $result)
                <div class="swiper-slide lotto-slide" data-swiper-slide-index="{{ $index + 1 }}" role="group" aria-label="{{ $index + 1 }} / {{ count($lotteryResults) }}" style="width: 206px; margin-right: 20px;">
                    <div class="lotto-border">
                        <a href="javascript:;" onclick="routeNav('/lottery/4d')">
                            <div class="lotto-item">
                                <h4 class="lotto-country">{{ $result['game_name'] }}</h4>
                                <h6 class="lotto-date">{{ \Carbon\Carbon::parse($result['date'])->translatedFormat('l, Y-m-d') }}</h6>
                                <div class="lotto-number">{{ $result['number1'] }}</div>
                            </div>
                        </a>
                    </div>
                </div>
            @endforeach
          </div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
      </div>
    </section>
    <section class="home__payment">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-12">
            <div class="payment-border">
              <div class="payment-content">
                <div class="payment-header">
                  <img loading="lazy" src="https://cdn.mixlink.top/global/default/icon/servicemeter.svg" width="50" height="50" alt="servicemeter.svg">
                  <div class="payment-title">Layanan Member</div>
                </div>
                <div class="payment-service">
                  <div class="service-average">
                    <div class="service-title">DEPOSIT</div>
                    <div class="service-subtitle">Waktu</div>
                    <div class="progress">
                      <div id="depositTimeBar" class="progress-bar" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="15" title="depositTimeBar" style="width: 20%;"></div>
                    </div>
                  </div>
                  <div class="service-time">
                    <div class="time-number" id="depositTime">3</div>
                    <div class="time-title">Menit</div>
                  </div>
                </div>
                <div class="payment-service">
                  <div class="service-average">
                    <div class="service-title">WITHDRAW</div>
                    <div class="service-subtitle">Waktu</div>
                    <div class="progress">
                      <div id="withdrawTimeBar" title="withdrawTimeBar" class="progress-bar" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="15" style="width: 26.6667%;"></div>
                    </div>
                  </div>
                  <div class="service-time">
                    <div class="time-number" id="withdrawTime">4</div>
                    <div class="time-title">Menit</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-12">
            <div class="payment-border">
              <div class="payment-content">
                <div class="payment-header">
                  <img loading="lazy" src="https://cdn.mixlink.top/global/default/icon/payment.svg" width="50" height="50" alt="payment.svg">
                  <div class="payment-title">Sistem Pembayaran</div>
                </div>
                <div class="swiper-container pembarayan-swiper swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events swiper-container-multirow">
                    <div class="swiper-wrapper" id="swiper-wrapper-e5911910323a3cfd4" aria-live="off" style="width: 474px; transform: translate3d(-158px, 0px, 0px); transition-duration: 300ms;">
                       <div class="swiper-slide" role="group" aria-label="1 / 12" style="width: 69px; margin-right: 10px;">
                         <div class="bank-content">
                            <div class="bank-logo">
                            <img loading="lazy" src="https://statis-images.s3.ap-southeast-1.amazonaws.com/global/payment/V2/IDR/bank/other.webp" alt="bank-logo">
                            </div>
                            <div class="bank-status online">ONLINE</div>
                        </div>
                        </div>
                        @foreach($bankdata as $bank)
                            <div class="swiper-slide {{ $loop->first ? 'swiper-slide-active' : '' }}" role="group" aria-label="{{ $loop->iteration }} / {{ count($bankdata) }}" style="width: 69px; margin-right: 10px;">
                                <div class="bank-content">
                                    <div class="bank-logo">
                                        <img loading="lazy" src="{{ $bank->image }}" alt="bank-logo">
                                    </div>
                                    <div class="bank-status {{ $bank->status == 'offline' ? 'offline' : 'online' }}">
                                        {{ strtoupper($bank->status == 'offline' ? 'offline' : $bank->status) }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                        <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
                        <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
                        <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 3"></span>
                    </div>
                    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-12">
            <div class="payment-border">
              <div class="payment-content">
                <div class="payment-header">
                  <img loading="lazy" src="{{ asset('themes/default/img/header/download.svg') }}" alt="">
                  <div class="payment-title">Download Apk</div>
                </div>
                <div class="payment-download">
                  <div class="download-button">
                    <a href="{{ url('/') }}" target="_blank">
                      <div class="button-icon">
                        <img loading="lazy" src="{{ asset('themes/default/img/header/playstore.svg') }}" width="120" height="30" alt="playstore">
                      </div>
                    </a>
                  </div>
                  <div class="download-img">
                    <img loading="lazy" id="template-download" src="{{ asset('themes/default/img/header/gameapp.png') }}" width="150" height="150" alt="game app">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="home__seo">
      <div class="container">
        <div class="game__seo">
          <div hidden="" id="title-seo">{{ getSetting('site_name') }} Link Login &amp; Daftar Mpo Play Resmi 24 Jam Anti Nawala</div>
          <div class="seo-content showFooter"></div>
        </div>
      </div>
    </section>
  </div>
  
<div id="maintenanceModal" class="maintenance-modal">
    <div class="maintenance-content">
        <img src="{{ asset('assets/img/maintenance-game.jpg') }}" alt="Maintenance">
        <h4>Game Sedang Maintenance</h4>
        <p>Silakan coba lagi nanti.</p>
        <button onclick="closeMaintenance()">OK</button>
    </div>
</div>
<style>
.maintenance-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.maintenance-content {
    background: #1c1c2b;
    border-radius: 16px;
    padding: 26px;
    width: 90%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 15px 50px rgba(0,0,0,.6);
    animation: popScale .25s ease;
}

.maintenance-content img {
    max-width: 220px;
    margin-bottom: 15px;
}

.maintenance-content h4 {
    color: #fff;
    margin-bottom: 6px;
}

.maintenance-content p {
    color: #bbb;
    font-size: 14px;
    margin-bottom: 18px;
}

.maintenance-content button {
    background: #f5a623;
    color: #000;
    border: none;
    padding: 10px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

@keyframes popScale {
    from { transform: scale(.85); opacity: 0 }
    to   { transform: scale(1); opacity: 1 }
}
</style>
<script>
function maintenanceAlert() {
    document.getElementById('maintenanceModal').style.display = 'flex';
}

function closeMaintenance() {
    document.getElementById('maintenanceModal').style.display = 'none';
}
</script>
  
@endsection