<!doctype html>
<html lang="en" oncontextmenu="return false;">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#000000">
  <title>Smartlab - Dashboard</title>
  <link rel="icon" type="image/png" href="/assets/images/logoIcon/favicon.png" sizes="32x32">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
  <style>
    * {
      font-family: "Poppins", sans-serif;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    /* Theme Preview Box */
    .theme-preview {
      background: var(--theme-bg);
      color: var(--theme-text);
      transition: background 0.5s ease, color 0.5s ease;
    }
    /* Theme Buttons */
    .theme-button {
      width: 25px;
      height: 25px;
      border: 1px solid #ddd;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
    }
    .theme-button:hover {
      transform: scale(1.1);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }
    /* Theme Colors */
    .roki-1 {
      --theme-bg: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
      --theme-text: white;
      --theme-font-text: #9b10cf;
    }
    .roki-2 {
      --theme-bg: linear-gradient(90deg, rgba(79,48,142,1) 46%, rgba(114,88,164,1) 93%);
      --theme-text: white;
      --theme-font-text: #533490;
    }
    .roki-3 {
      --theme-bg: linear-gradient(90deg, #00c6ff, #0072ff);
      --theme-text: white;
      --theme-font-text: #005ecb;
    }
    .roki-4 {
      --theme-bg: linear-gradient(90deg, #6a11cb, #2575fc);
      --theme-text: white;
      --theme-font-text: #4b0082;
    }
    .roki-5 {
      --theme-bg: linear-gradient(90deg, #f12711, #f5af19);
      --theme-text: white;
      --theme-font-text: #d76d00;
    }
    .roki-6 {
      --theme-bg: linear-gradient(90deg, #11998e, #38ef7d);
      --theme-text: white;
      --theme-font-text: #0d8a60;
    }
    /* NProgress Styles */
    #nprogress { pointer-events: none; }
    #nprogress .bar {
      background: #B72B41;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
    }
    #nprogress .peg {
      display: block;
      position: absolute;
      right: 0;
      width: 100px;
      height: 100%;
      box-shadow: 0 0 10px #B72B41, 0 0 5px #B72B41;
      opacity: 1;
      transform: rotate(3deg) translate(0, -4px);
    }
    #nprogress .spinner {
      display: block;
      position: fixed;
      z-index: 1031;
      top: 15px;
      right: 15px;
    }
    #nprogress .spinner-icon {
      width: 18px;
      height: 18px;
      box-sizing: border-box;
      border: solid 2px transparent;
      border-top-color: #B72B41;
      border-left-color: #B72B41;
      border-radius: 50%;
      animation: nprogress-spinner 400ms linear infinite;
    }
    .nprogress-custom-parent {
      overflow: hidden;
      position: relative;
    }
    .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar {
      position: absolute;
    }
    @-webkit-keyframes nprogress-spinner {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes nprogress-spinner {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <main class="flex min-h-screen mb-10 min-w-screen flex-col justify-start items-baseline" style="background: #f2f2f2;">
    <!-- Header with gradient background (using theme colors) -->
    <div class="w-full p-2 flex items-center gap-3" style="background: var(--theme-bg);">
      <div>
        <img src="/assets/roki/people.png" alt="avatar" class="inline-block object-cover object-center rounded-full w-12 h-12 border-2 border-white">
      </div>
      <div>
        <h2 class="text-white text-xl mb-1">{{ auth()->user()->username }}</h2>
        <span id="toggleSpan" class="bg-[#ffedfa] text-sm px-1 py-1 text-[#7614ff] rounded-full cursor-pointer flex items-center">
          <img src="/assets/roki/tap.jpg" alt="" class="h-6 rounded-full w-6">
          <span id="textContent">Tap for Balance</span>
        </span>
      </div>
    </div>
    <!-- Logout Button -->
    <a href="/user/logout" class="rounded-full bg-[#ffedfa] absolute top-3 right-3 p-2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6 text-danger">
        <path fill-rule="evenodd" d="M7.5 3.75A1.5 1.5 0 006 5.25v13.5a1.5 1.5 0 001.5 1.5h6a1.5 1.5 0 001.5-1.5V15a.75.75 0 011.5 0v3.75a3 3 0 01-3 3h-6a3 3 0 01-3-3V5.25a3 3 0 013-3h6a3 3 0 013 3V9A.75.75 0 0115 9V5.25a1.5 1.5 0 00-1.5-1.5h-6zm10.72 4.72a.75.75 0 011.06 0l3 3a.75.75 0 010 1.06l-3 3a.75.75 0 11-1.06-1.06l1.72-1.72H9a.75.75 0 010-1.5h10.94l-1.72-1.72a.75.75 0 010-1.06z" clip-rule="evenodd"></path>
      </svg>
    </a>
    <!-- Theme Buttons -->
    <div class="p-2 pt-1 w-full">
      <div class="text-center mb-1">
        <div class="flex justify-center space-x-2">
          <button class="theme-button" data-theme="roki-1" style="background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);"></button>
          <button class="theme-button" data-theme="roki-2" style="background: linear-gradient(90deg, rgba(79,48,142,1) 46%, rgba(114,88,164,1) 93%);"></button>
          <button class="theme-button" data-theme="roki-3" style="background: linear-gradient(90deg, #00c6ff, #0072ff);"></button>
          <button class="theme-button" data-theme="roki-4" style="background: linear-gradient(90deg, #6a11cb, #2575fc);"></button>
          <button class="theme-button" data-theme="roki-5" style="background: linear-gradient(90deg, #f12711, #f5af19);"></button>
          <button class="theme-button" data-theme="roki-6" style="background: linear-gradient(90deg, #11998e, #38ef7d);"></button>
        </div>
      </div>
      <!-- Banner Slides -->
      <div class="mySlides mb-1">
        <img alt="banner1" style="border: 2px solid #ddd; border-radius: 15px;" class="w-full lg:h-[80vh] rounded" src="/assets/ban1.png">
      </div>
      <div class="mySlides mb-1">
        <img alt="banner2" style="border: 2px solid #ddd; border-radius: 15px;" class="w-full lg:h-[80vh] rounded" src="/assets/ban2.png">
      </div>
      <div class="mySlides mb-1">
        <img alt="banner5" style="border: 2px solid #ddd; border-radius: 15px;" class="w-full lg:h-[80vh] rounded" src="/assets/ban5.png">
      </div>
      <!-- Marquee Notice -->
      <div style="background: var(--theme-bg); color: var(--theme-text); border-radius: 5px; margin-bottom:5px;">
        <marquee class="mt-1">Welcome To Smartlab. Minimum Deposit 500 BDT. First Time Deposit 5000 BDT to get 2000 BDT Extra Bonus. Payment auto system.</marquee>
      </div>
      <!-- Dashboard Grid Links -->
      <div class="grid grid-cols-4 gap-2 rounded-lg my-2">
        <a href="/user/deposit">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bx-alarm-add bx-tada" style="font-size: 30px; background: var(--theme-bg); color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Deposit</h2>
          </div>
        </a>
        <a href="/user/withdraw">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bx-shield-minus bx-tada" style="font-size: 30px; background: var(--theme-bg); color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Withdraw</h2>
          </div>
        </a>
        <a href="/plans">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bx-cart-download bx-tada" style="font-size: 30px; background: var(--theme-bg); color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Plan</h2>
          </div>
        </a>
        <a href="/user/ptc">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bx-briefcase bx-tada" style="font-size: 30px; background: var(--theme-bg); color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Task</h2>
          </div>
        </a>
        <a href="{{ route('user.profile.setting') }}">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bx-user-circle bx-tada" style="font-size: 30px; background: var(--theme-bg); color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Profile</h2>
          </div>
        </a>
        <a href="{{ route('user.transactions') }}">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bx-spreadsheet bx-tada" style="font-size: 30px; background: var(--theme-bg); color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Trx</h2>
          </div>
        </a>
        <a href="{{ route('user.referred') }}">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bx-share-alt bx-tada" style="font-size: 30px; background: var(--theme-bg); color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Refer</h2>
          </div>
        </a>
        <a href="/user/deposit/history">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bx-dna bx-tada" style="font-size: 30px; background: var(--theme-bg); color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">History</h2>
          </div>
        </a>
        <a href="https://king24.site">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bxl-whatsapp bx-tada" style="font-size: 30px; background: #0bc042; color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Whatsapp</h2>
          </div>
        </a>
        <a href="https://king24.site">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bxl-telegram bx-tada" style="font-size: 30px; background: #33aae2; color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Telegram</h2>
          </div>
        </a>
        <a href="https://king24.site">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bxl-tiktok bx-tada" style="font-size: 30px; background: #281014; color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">TikTok</h2>
          </div>
        </a>
        <a href="https://king24.site">
          <div class="cursor-pointer flex flex-col items-center">
            <i class="bx bxl-youtube bx-tada" style="font-size: 30px; background: #ff0033; color: #fff; padding: 10px; border: 2px solid #a7b49e; border-radius: 50%;"></i>
            <h2 class="mt-2 text-center" style="color: #23486a;">Youtube</h2>
          </div>
        </a>
      </div>
    </div>
    <!-- Dashboard Main Image -->
    <a class="px-1 py-0" href="/user/dashboard">
      <div class="cursor-pointer flex flex-col items-center">
        <img alt="dashboard" width="500" height="5000" class="w-full lg:h-[80vh] rounded" src="/assets/roki/dev_roki.png" style="border-radius:10px;">
      </div>
    </a>
  </main>
  
  <script src="{{ asset('assets/front/js/jquery.min.js') }}"></script>
  <script src="{{ asset('assets/front/js/popper.min.js') }}"></script>
  <script src="{{ asset('assets/front/js/iziToast.min.js') }}"></script>
  <link rel="stylesheet" href="{{ asset('assets/front/css/iziToast.min.css') }}">
  <script>
    document.addEventListener("contextmenu", (event) => event.preventDefault());
    document.addEventListener("keydown", (event) => {
      if (event.ctrlKey || event.key === "F12" || event.key === "Escape") {
        event.preventDefault();
        location.reload();
      }
    });
    document.addEventListener("contextmenu", function (event) {
      if (!navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) {
        event.preventDefault();
      }
    });
    document.addEventListener("keydown", function(event) {
      if ((event.ctrlKey && (event.key === "C" || event.key === "X" || event.key === "S" || event.key === "A"))) {
        event.preventDefault();
        location.reload();
      }
    });
    document.addEventListener("dragstart", function(event) {
      event.preventDefault();
      location.reload();
    });
    document.addEventListener("selectstart", function(event) {
      event.preventDefault();
    });
    function blockHTTrack() {
      if (navigator.userAgent.includes("HTTrack") || navigator.userAgent.includes("wget") || navigator.userAgent.includes("curl")) {
        document.write("<h1>Access Denied</h1>");
      }
    }
  </script>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const savedTheme = localStorage.getItem("selectedTheme") || "roki-1";
      document.body.classList.add(savedTheme);
      document.querySelectorAll(".theme-button").forEach(button => {
        button.addEventListener("click", () => {
          document.body.classList.remove("roki-1", "roki-2", "roki-3", "roki-4", "roki-5", "roki-6");
          document.body.classList.add(button.dataset.theme);
          localStorage.setItem("selectedTheme", button.dataset.theme);
        });
      });
    });
  </script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var spanElement = document.getElementById("toggleSpan");
      var textContentSpan = document.getElementById("textContent");
      spanElement.addEventListener("click", function() {
        if (textContentSpan.textContent.trim() === "Tap for Balance") {
          textContentSpan.textContent = {{ auth()->user()->balance }};
          setTimeout(function() {
            textContentSpan.textContent = "Tap for Balance";
          }, 5000);
        } else {
          textContentSpan.textContent = "Tap for Balance";
        }
      });
    });
  </script>
  <script>
    let slideIndex = 0;
    showSlides();
    function showSlides() {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > slides.length) { slideIndex = 1; }
      slides[slideIndex-1].style.display = "block";
      setTimeout(showSlides, 2000);
    }
  </script>
</body>
</html>