@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 swiper-container-initialized swiper-container-horizontal swiper-container-ios">
        <div class="swiper-wrapper" id="swiper-wrapper-18dd61031d7cec4ac" aria-live="off" style="transition-duration: 0ms; transform: translate3d(-1850px, 0px, 0px);">
            @foreach ($banners as $index => $banner)
            <div class="swiper-slide swiper" data-swiper-slide-index="{{ $index }}" role="group" aria-label="{{ $index + 1 }} / {{ $banners->count() }}" style="width: 380px;">
                <a href="{{ $banner->url ?: '#' }}" title="{{ $banner->title }}">
                    <img loading="lazy" src="{{ $banner->image_url }}" alt="{{ $banner->title }}" width="423" height="94">
                </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="mobile__category">
        <div class="container">
          <div class="category-container">
            <a href="#" onclick="routeNav('/popular'); return false;">
              <div class="category-item">
                <div class="item-icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/popular.svg') }}" alt="">
                </div>
                <div class="item-name">Popular</div>
              </div>
            </a>
            <a href="#" onclick="routeNav('/slot'); return false;">
              <div class="category-item">
                <div class="item-icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/slot.svg') }}" alt="">
                </div>
                <div class="item-name">SLOT</div>
              </div>
            </a>
            <a href="#" onclick="routeNav('/livegames'); return false;">
              <div class="category-item">
                <div class="item-icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/livegames.svg') }}" alt="">
                </div>
                <div class="item-name">LIVEGAMES</div>
              </div>
            </a>
            <a href="#" onclick="routeNav('/judi-bola'); return false;">
              <div class="category-item">
                <div class="item-icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/sport.svg') }}" alt="">
                </div>
                <div class="item-name">SPORT</div>
              </div>
            </a>
            <a href="#" onclick="routeNav('/kasino'); return false;">
              <div class="category-item">
                <div class="item-icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/casino.svg') }}" alt="">
                </div>
                <div class="item-name">CASINO</div>
              </div>
            </a>
            <a href="#" onclick="routeNav('/lottery'); return false;">
              <div class="category-item">
                <div class="item-icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/lottery.svg') }}" alt="">
                </div>
                <div class="item-name">LOTTERY</div>
              </div>
            </a>
            <a href="#" onclick="routeNav('/poker'); return false;">
              <div class="category-item">
                <div class="item-icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/poker.svg') }}" alt="">
                </div>
                <div class="item-name">POKER</div>
              </div>
            </a>
            <a href="#" onclick="routeNav('/arcade'); return false;">
              <div class="category-item">
                <div class="item-icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/arcade.svg') }}" alt="">
                </div>
                <div class="item-name">ARCADE</div>
              </div>
            </a>
          </div>
        </div>
      </section>
      <!-- Start of Mobile Popular Game -->
      <section class="mobile__games mobile__games--popular">
        <div class="container">
          <div class="games-container">
            <div class="games-container__header">
              <div class="games-title">
                <div class="icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/popular.svg') }}" width="15" height="14" alt="">
                </div>
                <h6>Game Terpopuler</h6>
              </div>
              <div class="games-action">
                <div class="action-button">
                  <a href="#" onclick="routeNav('/popular'); return false;" class="btn-custom-sm">Tampilkan Lainnya</a>
                </div>
              </div>
            </div>
            <div class="mobile-games-list">
            @foreach($popularGames as $gameCategory)
@if($gameCategory->game)
<div class="games-holder">

    @auth
        @if($maintenanceGame)
            <a class="main"
               href="javascript:void(0)"
               onclick="maintenanceAlert(); return false;">
        @else
            <a class="main"
               href="{{ route('run.game', [
                  'data' => Crypt::encryptString(json_encode([
                      'gamecode' => $gameCategory->game->game_code
                  ]))
               ]) }}"
               target="_blank">
        @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 }}"
                 width="110"
                 height="80"
                 alt="{{ $gameCategory->game->game_name }}">
        </div>

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

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


            </div>
          </div>
        </div>
      </section>
      <!-- End of Mobile Popular Game -->
      <!-- Start of Category List -->
      <section class="mobile__games mobile__games--slot">
        <div class="container">
          <div class="games-container">
            <div class="games-container__header">
              <div class="games-title">
                <div class="icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/slot.svg') }}" width="15" height="14" alt="">
                </div>
                <h6>Slot</h6>
              </div>
              <div class="games-action">
                <div class="action-button">
                  <a href="javascript:;" onclick="routeNav('/slot');" class="btn-custom-sm">Tampilkan Lainnya</a>
                </div>
              </div>
            </div>
            <div class="mobile-provider-list">
                @foreach($Slots as $slot)
@if($slot->providerGame)
<div class="item-holder">
  <a onclick="routeNav('/slot/{{ $slot->providerGame->provider_slug }}');"
     href="javascript:;">
    <div class="item-img">
      <img loading="lazy"
           title="{{ $slot->providerGame->provider_name }}"
           alt="{{ $slot->providerGame->provider_name }}"
           src="{{ $slot->providerGame->provider_image }}"
           height="103" width="103">
    </div>
    <div class="item-title">
      {{ $slot->providerGame->provider_name }}
    </div>
  </a>
</div>
@endif
@endforeach

            </div>
          </div>
        </div>
      </section>
      <section class="mobile__games mobile__games--slot">
        <div class="container">
          <div class="games-container">
            <div class="games-container__header">
              <div class="games-title">
                <div class="icon">
                  <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/casino.svg') }}" width="15" height="14" alt="">
                </div>
                <h6>Casino</h6>
              </div>
              <div class="games-action">
                <div class="action-button">
                  <a href="javascript:;" onclick="routeNav('/kasino');" class="btn-custom-sm">Tampilkan Lainnya</a>
                </div>
              </div>
            </div>
            <div class="mobile-provider-list">
                @foreach($Casinos as $casino)
@if($casino->providerGame)
<div class="item-holder">
  <a onclick="routeNav('/casino/{{ $casino->providerGame->provider_slug }}');"
     href="javascript:;">
    <div class="item-img">
      <img loading="lazy"
           title="{{ $casino->providerGame->provider_name }}"
           alt="{{ $casino->providerGame->provider_name }}"
           src="{{ $casino->providerGame->provider_image }}"
           height="103" width="103">
    </div>
    <div class="item-title">
      {{ $casino->providerGame->provider_name }}
    </div>
  </a>
</div>
@endif
@endforeach

            </div>
          </div>
        </div>
      </section>
      <!-- End of Category List -->
      <section class="mobile__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-mobile showFooter">
              <div class="seo-mob-content"></div>
            </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