<div class="sidenav">

<?php if ($id_login == false) { ?>
<!-- ================= BELUM LOGIN ================= -->

<div class="sidenav dark-sidenav">

<div class="sidenav-header">
  <button class="sidenav-close">✕</button>
  <div class="sidenav-logo">
    <img data-src="../assets/img/<?php echo $logo ?>" alt="logo">
  </div>
</div>

<div class="sidenav-divider"></div>

<!-- BANNER -->
<div class="sidenav-banner">
<a href="?pesan=36" class="banner-item green">
  <div class="banner-left">
    <img data-src="../assets/img/img/Gold.svg" alt="VIP Icon">
  </div>
  <span class="banner-title">Turnamen</span>
  <small class="banner-amount">2.5M</small>
</a>

<a href="?page=roda" class="banner-item gold">
  <div class="banner-left">
    <img data-src="../assets/img/img/roulette-casino.svg" alt="VIP Icon">
  </div>
  <span class="banner-title">Roda Hadiah</span>
  <small class="banner-amount">1.5M</small>
</a>
</div>
  <!-- QUICK MENU -->
  <div class="sidenav-quick">
    <a href="#" class="quick-item active">
      <i class="fas fa-heart"></i>
      <span>Favorit</span>
    </a>
    <a href="#" class="quick-item">
      <i class="fas fa-clock"></i>
      <span>Terkini</span>
    </a>
  </div>

  <!-- MENU -->
  <ul class="sidenav-menu">

  <!-- BERANDA -->
  <li class="active">
    <a href="?page=home">
      <i class="fas fa-home"></i>
      <span>Beranda</span>
    </a>
  </li>
  
 <!-- ===== MAIN MENU (TERKUNCI) ===== -->
  <div class="locked-wrapper">

    <div class="locked-overlay">
      <i class="fas fa-lock"></i>
      <p>Silahkan login<br>untuk membuka menu</p>
    <button class="btn-login btn-login-modal">
      Login / Daftar
    </button>
    </div>

    <li class="menu-divider">MAIN MENU</li>

    <li>
      <a href="#">
        <i class="fas fa-user-circle"></i>
        <span>Akun</span>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-user-friends"></i>
        <span>Agensi</span>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-wallet"></i>
        <span>Transaksi</span>
      </a>
    </li>

  </div>
  <!-- ===== END MAIN MENU TERKUNCI ===== -->
  
  <!-- ===== GAME MENU ===== -->
  <li class="menu-divider">GAME MENU</li>

  <li>
    <a href="?page=arcade">
      <i class="fas fa-gamepad"></i>
      <span>E-Games</span>
    </a>
  </li>

  <li>
    <a href="?page=slot">
      <i class="fas fa-dice"></i>
      <span>Slots</span>
    </a>
  </li>

  <li>
    <a href="?page=casino">
      <i class="fas fa-chess"></i>
      <span>Live Kasino</span>
    </a>
  </li>

  <li>
    <a href="?page=fishing">
      <i class="fas fa-fish"></i>
      <span>Fishing</span>
    </a>
  </li>
            
  <li>
    <a href="?page=sportbok">
      <i class="fas fa-futbol"></i>
      <span>Sports</span>
    </a>
  </li>
    <!-- FOOTER -->
  <div class="sidenav-footer">
    <p>Hubungi Kami</p>
    <div class="footer-social">
      <a href="<?php echo $facebok ?>"><i class="fab fa-facebook-f"></i></a>
      <a href="<?php echo $telegram ?>"><i class="fab fa-telegram"></i></a>
      <a href="https://wa.me/<?php echo $whatsapp ?>"><i class="fab fa-whatsapp"></i></a>
    </div>
  </div>
</ul>
</div>

<?php } else { ?>

<div class="sidenav dark-sidenav">
  
<!-- ================= SUDAH LOGIN ================= -->
<div class="sidenav-header">
  <button class="sidenav-close">✕</button>
  <div class="sidenav-logo">
    <img data-src="../assets/img/<?php echo $logo ?>" alt="logo">
  </div>
</div>

<div class="sidenav-divider"></div>

<!-- BANNER -->
<div class="sidenav-banner">
<a href="?pesan=36" class="banner-item green">
  <div class="banner-left">
    <img data-src="../assets/img/img/Gold.svg" alt="VIP Icon">
  </div>
  <span class="banner-title">Turnamen</span>
  <small class="banner-amount">2.5M</small>
</a>

<a href="?page=roda" class="banner-item gold">
  <div class="banner-left">
    <img data-src="../assets/img/img/roulette-casino.svg" alt="VIP Icon">
  </div>
  <span class="banner-title">Roda Hadiah</span>
  <small class="banner-amount">1.5M</small>
</a>
</div>

  <!-- QUICK MENU -->
  <div class="sidenav-quick">
    <a href="#" class="quick-item active">
      <i class="fas fa-heart"></i>
      <span>Favorit</span>
    </a>
    <a href="#" class="quick-item">
      <i class="fas fa-clock"></i>
      <span>Terkini</span>
    </a>
  </div>

  <!-- MENU -->
  <ul class="sidenav-menu">

  <!-- BERANDA -->
  <li class="active">
    <a href="?page=home">
      <i class="fas fa-home"></i>
      <span>Beranda</span>
    </a>
  </li>

  <!-- ===== MENU AKUN ===== -->
  <li class="menu-divider">MAIN MENU</li>

  <li class="has-submenu">
    <a class="menu-label">
      <i class="fas fa-user-circle"></i>
      <span>Akun</span>
      <i class="fas fa-chevron-down arrow"></i>
    </a>
    <ul class="submenu">
      <li><a href="?page=profile">Akun Saya</a></li>
      <li><a href="?page=profile&modal=passwordModal">Ganti password</a></li>
      <li class="logout"><a href="function/logout.php">Keluar</a></li>
    </ul>
  </li>
  
    <li class="has-submenu">
    <a class="menu-label">
  <i class="fas fa-user-friends"></i>
      <span>Agensi</span>
      <i class="fas fa-chevron-down arrow"></i>
    </a>
    <ul class="submenu">
   <li><a href="?page=referral&tab=kyc">Daftar KYC</a></li>
    <li><a href="?page=referral">Referral</a></li>
    <li><a href="?page=bahan-iklan">Bahan</a></li>
    </ul>
  </li>

  <li class="has-submenu">
    <a class="menu-label">
      <i class="fas fa-wallet"></i>
      <span>Transaksi</span>
      <i class="fas fa-chevron-down arrow"></i>
    </a>
    <ul class="submenu">
      <li><a href="?page=deposit">Deposit</a></li>
      <li><a href="?page=withdraw">Withdraw</a></li>
      <li><a href="?page=riwayat&start_date=2025-01-01">Riwayat Transaksi</a></li>
    </ul>
  </li>
  
    <li class="has-submenu">
    <a class="menu-label">
      <i class="fas fa-gift"></i>
      <span>Bonus</span>
      <i class="fas fa-chevron-down arrow"></i>
    </a>
    <ul class="submenu">
      <li>
      <a href="#" class="btn-claimsc" onclick="openScaterModal(); return false;">
          Claim Scater</a></li>
      <li>
      <a href="?page=riwayat&tab=bonus&start_date=2025-01-01">Riwayat Bonus</a></li>
    </ul>
  </li>
  
  <!-- ===== GAME MENU ===== -->
  <li class="menu-divider">GAME MENU</li>
  
  <li>
    <a href="?page=arcade">
      <i class="fas fa-gamepad"></i>
      <span>E-Games</span>
    </a>
  </li>

  <li>
    <a href="?page=slot">
      <i class="fas fa-dice"></i>
      <span>Slots</span>
    </a>
  </li>

  <li>
    <a href="?page=casino">
      <i class="fas fa-chess"></i>
      <span>Live Kasino</span>
    </a>
  </li>

  <li>
    <a href="?page=fishing">
      <i class="fas fa-fish"></i>
      <span>Fishing</span>
    </a>
  </li>

  <li>
    <a href="?page=sportbok">
      <i class="fas fa-futbol"></i>
      <span>Sports</span>
    </a>
  </li>
      <!-- FOOTER -->
  <div class="sidenav-footer">
    <p>Hubungi Kami</p>
    <div class="footer-social">
      <a href="<?php echo $facebok ?>"><i class="fab fa-facebook-f"></i></a>
      <a href="<?php echo $telegram ?>"><i class="fab fa-telegram"></i></a>
      <a href="https://wa.me/<?php echo $whatsapp ?>"><i class="fab fa-whatsapp"></i></a>
    </div>
  </div>
  
</ul>

</div>
<?php } ?>
</div>
<!-- ===== JS ===== -->
<script>
function closeSidenav() {
  document.querySelector('.sidenav').style.display = 'none';
}

document.querySelectorAll('.menu-label').forEach(label => {
  label.addEventListener('click', () => {
    const parent = label.parentElement;
    document.querySelectorAll('.has-submenu').forEach(item => {
      if (item !== parent) item.classList.remove('open');
    });
    parent.classList.toggle('open');
  });
});
</script>

<script>
function closeSidenav() {
  const sidenav = document.querySelector('.sidenav');
  if (sidenav) {
    sidenav.style.display = 'none';
  }
}

/* === LOGIN → TUTUP SIDENAV → BUKA MODAL === */
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.btn-custom').forEach(btn => {
    btn.addEventListener('click', function () {
      closeSidenav();

      // delay dikit biar animasi sidenav kelar
      setTimeout(() => {
        $('#KONTOL').modal('show');
      }, 200);
    });
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {

  document.querySelectorAll('.btn-login-modal').forEach(btn => {
    btn.addEventListener('click', function () {

      // tutup sidenav (animasi jalan)
      const sidenav = document.querySelector('.sidenav');
      if (sidenav) {
        sidenav.classList.remove('sidenav-open');
      }

      // tunggu animasi selesai baru buka modal
      setTimeout(() => {
        $('#loginModal').modal('show');
      }, 300); // samain sama transition sidenav
    });
  });

});
</script>

<link rel="stylesheet" id="templateStyle" type="text/css" href="luxury-them/custom/css/sidenav.css?v=2.6.0.0">


<style>
/* ===========================================
   DARK SIDENAV STYLES
   =========================================== */

/* General Sidenav Container */
.dark-sidenav {
  height: 100dvh;        /* FIX mobile chrome */
  max-height: 100dvh;
  background: #151515;
  color: #ddd;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

/* ===========================================
   HEADER SECTION
   =========================================== */

.sidenav-header {
  padding: 8px 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===========================================
   DIVIDER
   =========================================== */

.sidenav-divider {
  height: 1px;
  margin: 10px 15px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, .12),
    transparent
  );
}

/* ===========================================
   BANNER SECTION
   =========================================== */

.sidenav-banner {
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.banner-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 2px;
  border-radius: 12px;
  margin-bottom: 1px;
  color: #fff;
  font-weight: 600;
  position: relative;
}

.banner-item small {
  background: rgba(0, 0, 0, .3);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.banner-left {
  position: absolute;
  left: 5px;
  top: 1px;
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  flex-shrink: 0;

  /* BACKGROUND */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.12)
  );

  /* BORDER */
  border: 1px solid rgba(255, 255, 255, 0.35);

  /* DEPTH */
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);

  backdrop-filter: blur(4px);
}

.banner-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  color: #f5c26b;
  
  /* FONT */
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  letter-spacing: 0.5px;
  
  /* SHADOW DEPTH */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(245, 194, 107, 0.35);
}

.banner-amount {
  position: absolute;
  right: 16px;
  top: 10px;
  
  font-size: 12px;
  font-weight: 600;
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  letter-spacing: 0.3px;
  
  padding: 4px 10px;
  border-radius: 999px;
  
  color: #1a1a1a;
  background: linear-gradient(180deg, #ffd98a, #f5c26b);
  
  border: 1px solid rgba(0, 0, 0, 0.45);
  
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  
  opacity: 0.95;
  white-space: nowrap;
}


.banner-left img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.banner-text {
  margin: 0 auto;
  text-align: center;
}

.banner-text span,
.banner-text small {
  display: block;
}

.banner-text span {
  font-weight: 600;
  font-size: 15px;
}

.banner-text small {
  font-size: 12px;
  opacity: 0.9;
}

.banner-item.green {
  background: linear-gradient(90deg, #155c34, #1f7a4a);
}

.banner-item.gold {
  background: linear-gradient(90deg, #8c6a1f, #c9a54d);
}

.banner-item:hover {
  filter: brightness(1.05);
}

/* ===========================================
   QUICK SECTION
   =========================================== */

.sidenav-quick {
  display: flex;
  padding: 10px 5px;
  gap: 10px;
}

.quick-item {
  flex: 1;
  background: #1e1e1e;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  color: #aaa;
}

/* ===========================================
   MENU SECTION
   =========================================== */
   
   .sidenav__header { padding: 12px; }
.sidenav-top { display:flex; justify-content:space-between; align-items:center; }
.sidenav-close {
  background:none;
  border:none;
  font-size:20px;
  color:#fff;
  cursor:pointer;
}

.sidenav-logo {
  display: flex;
  justify-content: center;
}
.sidenav-logo img {
  max-width: 250px;   /* ideal untuk sidenav 250 */
  width: 100%;
  height: 47px;
}

/* TAB */
.sidenav-tabs {
  display:flex;
  margin: 1px 10px;
  background:#222;
  border-radius:8px;
}
.tab {
  flex:1;
  text-align:center;
  padding:10px;
  font-size:14px;
  color:#aaa;
}
.tab.active {
  background:#333;
  color:#fff;
  border-radius:10px;
}

.sidenav {
  background: #151515;
  width: 250px;
  height: 100dvh;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  /* START POSISI SEMBUNYI */
  transform: translateX(-100%);
  
  /* HANYA TRANSFORM */
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
  
  /* GPU HINT */
  will-change: transform;
}

.sidenav-open {
  transform: translateX(0);
}
/* ===============================
   FIX ACCORDION SIDENAV + TEXT SIZE
   =============================== */
   

.sidenav-menu {
  list-style: none;
  padding: 0;
  margin: 10px 0;

  flex: 1;                 /* ambil sisa tinggi */
  overflow-y: auto;        /* scroll hanya di sini */
  overflow-x: hidden;

  scrollbar-width: thin;   /* Firefox */
  scrollbar-color: #333 transparent;
}

.sidenav-menu::-webkit-scrollbar {
  width: 4px;
}

.sidenav-menu::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
}

.sidenav-menu::-webkit-scrollbar-track {
  background: transparent;
}

.sidenav-menu li {
  margin-bottom: 2px;
}

.sidenav-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #bbb;
}

.sidenav-menu li.active a {
  background: #1f1f1f;
  color: #f5c26b;
}

.sidenav-menu li.vip a {
  color: #f5c26b;
}

/* ===========================================
   FOOTER SECTION
   =========================================== */

.sidenav-footer {
  padding: 15px;
  text-align: center;
  border-top: 1px solid #222;
  flex-shrink: 0; /* jangan ketekan */
}

.footer-social a {
  margin: 0 10px;
  color: #ccc;
  font-size: 18px;
}

/* ===========================================
   SUBMENU SECTION
   =========================================== */

.has-submenu > a {
  cursor: pointer;
}

.has-submenu .arrow {
  margin-left: auto;
  font-size: 12px;
  transition: transform .3s ease;
}

.has-submenu.open .arrow {
  transform: rotate(180deg);
}

.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #101010;
  box-shadow: inset 0 0 0 1px #1f1f1f;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.has-submenu.open .submenu {
  max-height: 500px;
}

.submenu li a {
  padding-left: 56px;
  font-size: 13.5px;
  padding: 12px 20px 12px 52px;
  display: block;
  color: #aaa;
  border-left: 2px solid transparent;
}

.submenu li a:hover {
  background: #1f1f1f;
  color: #f5c26b;
  border-left-color: #f5c26b;
}

.submenu li.logout a {
  color: #ff6b6b;
}

.has-submenu.open > .menu-label {
  background: linear-gradient(90deg, rgba(245, 194, 107, .12), transparent);
  color: #f5c26b;
}

.menu-divider {
  padding: 10px 20px 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #666;
  text-transform: uppercase;
}

/* ===========================================
   CLOSE BUTTON
   =========================================== */

.sidenav-close {
  position: absolute;
  right: 15px;
  top: 15px;
  background: #222;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

/* ===========================================
   TITLE AND SOCIAL (SEEMINGLY EXTERNAL)
   =========================================== */

/* TITLE */
.ft-title {
  color: #fff;
  font-size: 15px;
  margin: 22px 0 10px;
  font-weight: 600;
}

/* SOSIAL */
.ft-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}

.ft-social a {
  width: 40px;
  height: 40px;
  background: #1e1e1e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}



/* ===== MAIN MENU TERKUNCI ===== */
.locked-wrapper {
  position: relative;
}

.locked-wrapper > li {
  filter: blur(3px);
  pointer-events: none;
  opacity: 1.9;
}

/* Overlay */
.locked-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: linear-gradient(
    180deg,
    rgba(15,15,15,.75),
    rgba(15,15,15,.9)
  );

  text-align: center;
  padding: 20px;
}

.locked-overlay i {
  font-size: 28px;
  color: #f5c26b;
  margin-bottom: 8px;
}

.locked-overlay p {
  font-size: 13px;
  color: #ddd;
  margin-bottom: 12px;
}

.btn-login {
  background: linear-gradient(180deg, #ffd98a, #f5c26b);
  color: #111;
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
</style>