<?php
session_start();
require_once(__DIR__ . "/../config/db.php");
include(__DIR__ . "/layouts/header.php");
?>

    <link href="/Content/Home/zelma-v2-beta-mobile-css" rel="stylesheet"/>
    <link href="/Content/slick.css" rel="stylesheet"/>
    <link href="/Content/Theme/zelma-v2-beta-mobile-<?= $config['theme']; ?>-css" rel="stylesheet"/>

    <style>
    	.lxp-icon {
    		margin-right: 10px
    	}
    
    	.lxp-icon img {
    		width: 25px;
    		height: 15px
    	}
    
    	#lxp {
    		visibility: hidden;
    		min-width: 330px;
    		background-color: #00000099;
    		backdrop-filter: blur(1px);
    		color: white;
    		text-align: center;
    		border-radius: 10px;
    		padding: 10px 10px 0 10px;
    		transform: translate(-50%, 0%);
    		text-shadow: 1px 1px 5px rgb(0, 0, 0);
    		position: fixed;
    		z-index: 1;
    		left: 50%;
    		top: 6%;
    		font-size: 14px;
    		z-index: 999;
    	}
    
    	#lxp.show {
    		visibility: visible;
    		-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    		animation: fadein 0.5s, fadeout 0.5s 2.5s;
    	}
    
    	@-webkit-keyframes fadein {
    		from {
    			top: 0;
    			opacity: 0;
    		}
    
    		to {
    			top: 6%;
    			opacity: 2;
    		}
    	}
    
    	@keyframes fadein {
    		from {
    			top: 0;
    			opacity: 0;
    		}
    
    		to {
    			top: 6%;
    			opacity: 2;
    		}
    	}
    
    	@-webkit-keyframes fadeout {
    		from {
    			top: 6%;
    			opacity: 2;
    		}
    
    		to {
    			top: 0;
    			opacity: 0;
    		}
    	}
    
    	@keyframes fadeout {
    		from {
    			top: 6%;
    			opacity: 2;
    		}
    
    		to {
    			top: 0;
    			opacity: 0;
    		}
    	}
    </style>
</head>

<body data-online-id=""
      data-route="home" 
      style="--expand-icon-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/expand.gif?v=20241125);
             --collapse-icon-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/collapse.gif?v=20241125);
             --play-icon-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/play.png?v=20241125);
             --desktop-icon-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/desktop-white.png?v=20241125);
             --jquery-ui-444444-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_444444_256x240.png?v=20241125);
             --jquery-ui-555555-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_555555_256x240.png?v=20241125);
             --jquery-ui-ffffff-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_ffffff_256x240.png?v=20241125);
             --jquery-ui-777620-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_777620_256x240.png?v=20241125);
             --jquery-ui-cc0000-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_cc0000_256x240.png?v=20241125);
             --jquery-ui-777777-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_777777_256x240.png?v=20241125);">

<?php include(__DIR__ . "/layouts/navbar.php");
?>

    <div id="lxp">
        <p id="withdraw"></p>
    </div>

    <div class="announcement-container">
      <div data-section="date">
        <i data-icon="news" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/home/news.svg?v=20241125);"></i>
      </div>
      <div data-section="announcements">
        <ul class="announcement-list" id="announcement_list">
          <li>Pemeliharaan Terjadwal: Spinix pada 2024-10-01 dari 11:00 AM sampai 2025-12-31 11:59 PM (GMT + 7). Selama waktu ini, Spinix permainan tidak akan tersedia. Kami memohon maaf atas ketidaknyamanan yang mungkin ditimbulkan.</li>
          <li>Pemeliharaan Terjadwal: Fairbet pada 2025-01-14 dari 12:00 PM sampai 2025-04-15 12:30 AM (GMT + 7). Selama waktu ini, Fairbet permainan tidak akan tersedia. Kami memohon maaf atas ketidaknyamanan yang mungkin ditimbulkan.</li>
        </ul>
      </div>
    </div>

    <?php if (isset($_SESSION['user_id'])): ?>
      <div class="loyalty-info-container" id="loyalty_info_container">
        <div class="loyalty-info">
          <div class="loyalty-info-wrapper">
            <div class="loyalty-username-section">
              <span class="username"><?= $user['username']; ?></span>
            </div>
            <div class="user-info">
              <div class="balance-container" id="intro_wallet_balance">
                <div class="balance">
                  <a href="#" data-toggle="dropdown">
                    IDR
                    <span class="total_balance">
                      <?= htmlspecialchars(number_format($total_saldo, 0, ',', '.')); ?>
                    </span>
                  </a>
                  <div class="dropdown-menu vendor-balances-container">
                    <div class="vendor-balances-header">
                      <div>SALDO KREDIT</div>
                      <div><?= htmlspecialchars(number_format($total_saldo, 0, ',', '.')); ?></div>
                    </div>
                    <div class="vendor-balances-content">
                      <div>
                        <strong>Slots</strong>
                        <div class="vendor-balance-item">
                        <?php
                            $getProvider = "SELECT * FROM provider";
                            $stmt = $db->prepare($getProvider);
                            $stmt->execute();
                            $providers = $stmt->fetchAll(PDO::FETCH_ASSOC);
                                foreach ($providers as $provider):
                        ?>
                          <div>
                            <div>
                              <span data-vendor-name="Active"><?= $provider['provider_name']; ?></span>
                            </div>
                            <div data-vendor-game-code="7">
                              0.00
                            </div>
                          </div>
                        <?php endforeach; ?>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="refresh-container">
                <button title="Refresh" class="refresh_balance">
                  <img alt="Refresh Balance" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/layout/refresh-v2.svg?v=20241125" />
                </button>
              </div>
            </div>
            <div class="locked-balance-wrapper" id="wallet_container" data-locked-balance="false">
              <div class="locked-balance">
                <span class="locked-balance-label">
                  Lock Balance
                </span>
                <div class="locked-balance-value">
                  <img alt="Locked Balance" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/icons/wallet/lock-balance.svg?v=20241125" />
                  IDR
                  <span class="total_locked_balance">
                    0.00
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="loyalty-experience" id="loyalty_experience">
            <div class="experience-point-section" id="intro_loyalty_section">
              <a href="/mobile/loyalty/benefits" class="loyalty-experience-link">
                <div class="loyalty-point-badge">
                  <img class="loyalty_level" data-image-path="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/loyalty/badge/" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/loyalty/badge/bronze.svg?v=20241125" />
                  <span class="loyalty-level">bronze</span>
                </div>
                <div class="loyalty-experience-wrapper" id="intro_loyalty_experience">
                  <div class="xp-label">EXP</div>
                  <div class="loyalty-experience-progress">
                    <span id="loyalty_experience_percentage">0%</span>
                    <div class="progress loyalty_experience_progress" style="width: 0%"></div>
                  </div>
                  <div class="loyalty-pointer-right"></div>
                </div>
              </a>
            </div>
            <div class="loyalty-point-section" id="intro_loyalty_point">
              <a href="/mobile/loyalty/rewards" class="loyalty-experience-link">
                <div class="loyalty-point-title">
                  <img alt="Loyalty Point Icon" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/loyalty/loyalty-point-icon.svg?v=20241125" />
                  <span>Loyalty Point</span>
                </div>
                <div class="loyalty-point-info" id="loyalty_point_info">
                  <div class="loyalty-point-info-lp">
                    <div class="lp-label">LP</div>
                    <div class="loyalty-point loyalty_point">0</div>
                  </div>
                  <div class="loyalty-pointer-right"></div>
                </div>
              </a>
            </div>
            <div class="chest-section">
              <div class="daily-reward daily_reward_button" data-platform="Mobile" data-daily-reward-available="true" style="--chest-claimed-background: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/loyalty/chest-claimed.webp?v=20241125); --chest-available-background: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/loyalty/chest-available.webp?v=20241125);">
                <a class="btn daily-reward-button" href="#"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    <?php endif; ?>

    <div class="banner">
        <div id="banner_carousel" class="banner-carousel">
            <?php foreach ($banner as $banner): ?>
                <div class="">
                    <a href="#" target="_self">
                        <img alt="<?= $banner['title']; ?>" height="600" loading="lazy" src="/<?= $banner['image']; ?>" title="<?= $banner['title']; ?>" width="1920" />
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

    <div data-section="jackpot">
      <a href="/mobile/slots/pragmatic?PromotionCategory=Jackpot+Play+Games">
        <div class="home-progressive-jackpot">
          <div class="jackpot-play-section">
            <div>
              <picture>
                <source srcset="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/jackpot/jackpot-play-logo-v2.webp?v=20241125" type="image/webp" />
                <source srcset="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/jackpot/jackpot-play-logo-v2.png?v=20241125" type="image/png" />
                <img alt="Jackpot Play" height="56" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/jackpot/jackpot-play-logo-v2.png?v=20241125" width="250" />
              </picture>
              <div class="jackpot-play-text">Jackpot <label>Play</label></div>
            </div>
          </div>
          <div class="jackpot-container">
            <div class="jackpot-inner-container">
              <div class="jackpot-border-container">
                <span class="jackpot-currency">IDR</span>
                <span id="progressive_jackpot" data-progressive-jackpot-url="https://jp-api2.namesvr.dev"></span>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>

    <div class="main-menu-outer-container" id="main_menu_outer_container">
      <i class="glyphicon glyphicon-chevron-left left_trigger"></i>
      <main>
        <a href="/mobile/hot-games" data-active="false">
          <img alt="Hot Games" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/hot-games.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/hot-games-active.svg?v=20241125);" width="25" />
          Hot Games
        </a>
        <a href="/mobile/slots" data-active="false">
          <img alt="Slots" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/slots.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/slots-active.svg?v=20241125);" width="25" />
          Slots
        </a>
        <a href="/mobile/casino" data-active="false">
          <img alt="Live Casino" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/casino.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/casino-active.svg?v=20241125);" width="25" />
          Live Casino
        </a>
        <a href="/mobile/others" data-active="false">
          <img alt="Togel" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/others.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/others-active.svg?v=20241125);" width="25" />
          Togel
        </a>
        <a href="/mobile/sport" data-active="false">
          <img alt="Olahraga" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/sports.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/sports-active.svg?v=20241125);" width="25" />
          Olahraga
        </a>
        <a href="/mobile/crash-game" data-active="false">
          <img alt="Crash Game" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/crash-game.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/crash-game-active.svg?v=20241125);" width="25" />
          Crash Game
        </a>
        <a href="/mobile/arcade" data-active="false">
          <img alt="Arcade" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/arcade.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/arcade-active.svg?v=20241125);" width="25" />
          Arcade
        </a>
        <a href="/mobile/poker" data-active="false">
          <img alt="Poker" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/poker.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/poker-active.svg?v=20241125);" width="25" />
          Poker
        </a>
        <a href="/mobile/e-sports" data-active="false">
          <img alt="E-Sports" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/e-sports.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/e-sports-active.svg?v=20241125);" width="25" />
          E-Sports
        </a>
        <a href="/mobile/cockfight" data-active="false">
          <img alt="Sabung Ayam" height="25" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/cockfight.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/menu/cockfight-active.svg?v=20241125);" width="25" />
          Sabung Ayam
        </a>
      </main>
      <i class="glyphicon glyphicon-chevron-right right_trigger"></i>
    </div>

    <div id="menu_preview_container" class="menu-preview-container">
      <div class="game-list-container" data-game-category="Unknown">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="Slots">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="Casino">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="Others">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="Sports">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="CrashGame">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="Arcade">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="Poker">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="ESports">
        <div class="game-list"></div>
      </div>
      <div class="game-list-container" data-game-category="Cockfight">
        <div class="game-list"></div>
      </div>
    </div>

    <div class="popular-game-title-container">
      <div class="title">
        <i data-icon="popular-games" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/layout/popular-games.png?v=20241125);"></i>
        Game Populer
      </div>
    </div>

    <div class="scrollable-game-list" id="popular_game_container">
      <i class="left-chevron left_trigger" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/chevron-down.svg?v=20241125);"></i>
      <main class="game_list game-list">
            <?php
              $provider_code = "PRAGMATIC";
              
              $data_provider = "SELECT * FROM provider WHERE provider_code = :provider_code AND status = 1";
              $stmt = $db->prepare($data_provider);
              $stmt->bindParam(':provider_code', $provider_code, PDO::PARAM_STR);
              $stmt->execute();
              $provider = $stmt->fetch(PDO::FETCH_ASSOC);
              
              if ($provider) {
                $provider_id = $provider['provider_id'];
              
                $daftar_game = "SELECT * FROM game_pragmatic WHERE status = 1 AND game_provider = :provider_id AND top = 1 ORDER BY id ASC";
                $stmt = $db->prepare($daftar_game);
                $stmt->bindParam(':provider_id', $provider_id, PDO::PARAM_INT);
                $stmt->execute();
                $gamelist = $stmt->fetchAll(PDO::FETCH_ASSOC);
              }
              
              if ($provider) {
                if (!empty($gamelist)) {
                  foreach ($gamelist as $game) {
                    $game_code = $game['game_code'];
              
                    if (isset($_SESSION['user_id'])) {
                      $extplayer = $user['extplayer'];
                      $playUrl = "/open-game?user_code=$extplayer&provider_code=$provider_code&game_code=$game_code";
                    } else {
                      $playUrl = "/mobile/login";
                    }
                ?>

        <div class="games-group">

          <div class="game-item game_item" data-game="<?= $game['game_name']; ?>">
            <label class="inner-game-item">
              <input type="radio" name="game-list-radio-button">
              <span class="wrapper-container">
                <picture>
                  <img alt="<?= $game['game_name']; ?>" height="100" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/providers/PP/<?= $game['game_code']; ?>.jpg?v=20241125" width="100" />
                </picture>
                <span class="link-container">
                  <a href="<?= $playUrl; ?>" class="play-now" data-game="<?= $game['game_name']; ?>">MAIN</a>
                </span>
              </span>
              <span class="game-name"><?= $game['game_name']; ?></span>
            </label>
          </div>
        </div>
              <?php
                }
              }
            }
            ?>

      </main>
      <i class="right-chevron right_trigger" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/chevron-down.svg?v=20241125);"></i>
    </div>

    <div class="scrollable-game-list" id="popular_game_container">
      <i class="left-chevron left_trigger" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/chevron-down.svg?v=20241125);"></i>
      <main class="game_list game-list">
            <?php
              $provider_code = "PGSOFT";
              
              $data_provider = "SELECT * FROM provider WHERE provider_code = :provider_code AND status = 1";
              $stmt = $db->prepare($data_provider);
              $stmt->bindParam(':provider_code', $provider_code, PDO::PARAM_STR);
              $stmt->execute();
              $provider = $stmt->fetch(PDO::FETCH_ASSOC);
              
              if ($provider) {
                $provider_id = $provider['provider_id'];
              
                $daftar_game = "SELECT * FROM game_pgsoft WHERE status = 1 AND game_provider = :provider_id AND top = 1 ORDER BY id ASC";
                $stmt = $db->prepare($daftar_game);
                $stmt->bindParam(':provider_id', $provider_id, PDO::PARAM_INT);
                $stmt->execute();
                $gamelist = $stmt->fetchAll(PDO::FETCH_ASSOC);
              }
              
              if ($provider) {
                if (!empty($gamelist)) {
                  foreach ($gamelist as $game) {
                    $game_code = $game['game_code'];
              
                    if (isset($_SESSION['user_id'])) {
                      $extplayer = $user['extplayer'];
                      $playUrl = "/open-game?user_code=$extplayer&provider_code=$provider_code&game_code=$game_code";
                    } else {
                      $playUrl = "/mobile/login";
                    }
                ?>

        <div class="games-group">

          <div class="game-item game_item" data-game="<?= $game['game_name']; ?>">
            <label class="inner-game-item">
              <input type="radio" name="game-list-radio-button">
              <span class="wrapper-container">
                <picture>
                  <img alt="<?= $game['game_name']; ?>" height="100" loading="lazy" src="//cdn.databerjalan.com/assets/images/games/pg/<?= $game['game_code']; ?>.png?v=20241125" width="100" />
                </picture>
                <span class="link-container">
                  <a href="<?= $playUrl; ?>" class="play-now" data-game="<?= $game['game_name']; ?>">MAIN</a>
                </span>
              </span>
              <span class="game-name"><?= $game['game_name']; ?></span>
            </label>
          </div>
        </div>
              <?php
                }
              }
            }
            ?>

      </main>
      <i class="right-chevron right_trigger" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/chevron-down.svg?v=20241125);"></i>
    </div>

    <div class="download-apk-container" id="download_apk" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/home/download-apk-background.webp?v=20241125);">
      <div>
        <div class="h2">
          <span>Unduh Gratis</span><br />
          <?= $config['title']; ?> App
        </div>
        <div class="h3">
          Tersedia dalam Android!
        </div>
        <div class="download-apk-info">
          <div class="download-apk-section">
            <a href="#">
              <picture>
                <source srcset="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/home/download-android-button.webp?v=20241125" type="image/webp" />
                <source srcset="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/home/download-android-button.png?v=20241125" type="image/png" />
                <img alt="Download APK" class="img-responsive" height="125" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/home/download-android-button.png?v=20241125" width="125" />
              </picture>
            </a>
          </div>
        </div>
        <div>
          <a class="download-apk-guide" href="#" data-toggle="modal" data-target="#apk_install_guide_modal">Panduan instalasi</a>
        </div>
      </div>
      <div>
        <picture>
          <source srcset="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/home/download-apk-phone.webp?v=20241125" type="image/webp" />
          <source srcset="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/home/download-apk-phone.png?v=20241125" type="image/png" />
          <img alt="Download APK" class="img-responsive" height="151" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/home/download-apk-phone.png?v=20241125" width="215" />
        </picture>
      </div>
    </div>

    <div id="apk_install_guide_modal" class="modal download-popup-modal" role="dialog" data-title="Panduan Instalasi" aria-hidden="false">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <div class="modal-title" id="apk_install_guide_modal_title">
              Panduan Instalasi
            </div>
          </div>
          <div class="modal-body" id="apk_install_guide_modal_body">
            <span><img alt="Android" height="20" loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/icons/android-logo.svg?v=20241125" width="20" /> Instalasi Android</span>
            <ol>
              <li>Pindai kode QR untuk Android</li>
              <li>Pilih buka situs web</li>
              <li>Pilih "UNDUH" untuk mengunduh <?= $config['title']; ?> App</li>
              <li>Pilih "PENGATURAN"</li>
              <li>Pilih "Mengizinkan" dari sumber kami</li>
              <li>Pilih "Terima"</li>
              <li>Pilih "INSTAL"</li>
            </ol>
          </div>
        </div>
      </div>
    </div>

<?php
include(__DIR__.'/layouts/footer.php');
include(__DIR__ . '/layouts/popup_notify.php');
include(__DIR__.'/layouts/sidebar.php');
?>

<div id="popup_modal" class="modal popup-modal" role="dialog" data-title="" aria-label="Popup Modal">
    <div class="modal-dialog">
        <div class="modal-content" style="--desktop-popup-alert-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/desktop/layout/popup/alert.png?v=20241125); 
                                              --desktop-popup-notification-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/desktop/layout/popup/notification.png?v=20241125);
                                              --mobile-popup-alert-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/layout/popup/alert.png?v=20241125); 
                                              --mobile-popup-notification-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/layout/popup/notification.png?v=20241125); 
                                              --event-giveaway-popper-src: url(//d33egg70nrp50s.cloudfront.net/Images/giveaway/popper.png?v=20241125);">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="popup_modal_title">
                </h4>
            </div>
            <div class="modal-body" id="popup_modal_body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="popup_modal_dismiss_button">
                    OK
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="popup_modal_cancel_button" style="display: none">
                    Tidak
                </button>
                <button type="button" class="btn btn-primary" id="popup_modal_confirm_button" style="display: none">
                    Ya
                </button>
            </div>
        </div>
    </div>
</div>

<script src='/bundles/Home/zelma-v2-beta-mobile-js' defer></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $(".refresh_balance").click(function() {
    $(".total_balance").text("Memperbarui...");

    setTimeout(function() {
      $.ajax({
        url: "/Wallet/Balance.php",
        type: "GET",
        dataType: "json",
        success: function(response) {
          if (response.saldo !== undefined) {
            $(".total_balance").text(response.saldo.toLocaleString("id-ID"));

            alert("Saldo berhasil diperbarui!");

            location.reload();
          } else {
            console.error("Error:", response.error);
          }
        },
        error: function(xhr, status, error) {
          console.error("Gagal memperbarui saldo:", error);
        }
      });
    }, 3000);
  });
});
</script>

<script type="text/javascript">
  navigator.serviceWorker.getRegistrations().then(registrations => {
    for (const registration of registrations) {
      registration.unregister();
    }
  });
</script>

<script>
  function loadlink() {
    var n = Math.floor((Math.random() * (20001 * Math.random() - 100 * Math.random()) + 100 * Math.random()) + 300);
    var a = ((function (n) {
      for (var a = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",], r = n, t = new Array(), e = 0; e <= r - 1; e++) (t[e] = a[parseInt(Math.random() * a.length)]), (t = t), (randomtextnumber = t.join(""));
    })(8), randomtextnumber), r = a.substring(6), t = a.substring(0, 2);
      var e = ((n) => new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", }).format(n))(n + "000");
      var o = document.getElementById("lxp");
        
      o.className = "show";
      setTimeout(function () { o.className = o.className.replace("show", ""); }, 3000);
      document.getElementById("withdraw").innerHTML = t + "****" + r + " Berhasil Withdraw " + e + "<br/>" + " Di <?= $config['title']; ?>";
  }
  setInterval(function () { loadlink(); }, 7000);
</script>     

<div class="search-popup-container" id="search_popup_container"></div>
<script src='/bundles/reserve-js' defer></script>

</body>
</html>
