<?php require 'session.php';

    if ($role == "admin") {
       echo "<script>window.location.href='../admin/index.php'</script>";
    }
    if (!isset($_SESSION['user_id'])) {
        echo "<script>window.location.href = 'logout.php'</script>";
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php echo $page_title ?> | <?php echo $website_name ?></title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../images/<?php echo $favicon ?>">
    <link rel="stylesheet" href="./asset_files/libs.min.css">
    <link rel="stylesheet" href="./asset_files/style.css">
    <!-- Option 1: Include in HTML -->
    <link rel="stylesheet" href="./asset_files/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <style>
        /* Add this CSS for sidebar toggle functionality */
        .sidebar {
            transition: transform 0.3s ease-in-out;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            z-index: 1000;
            transform: translateX(-100%); /* Hide sidebar by default on mobile */
        }
        .sidebar.active {
            transform: translateX(0); /* Show sidebar when active */
        }
        .sidebar-toggle {
            cursor: pointer;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1001;
        }
        @media (min-width: 768px) {
            .sidebar {
                transform: translateX(0); /* Always show sidebar on desktop */
            }
            .sidebar-toggle {
                display: none; /* Hide toggle button on desktop */
            }
        }

        /* Hamburger Menu Styles */
        .hamburger-menu {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 24px;
            height: 24px;
            cursor: pointer;
        }
        .hamburger-menu span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: #000; /* Black color for hamburger bars */
            transition: all 0.3s ease;
        }
        .hamburger-menu.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }
        .hamburger-menu.active span:nth-child(2) {
            opacity: 0;
        }
        .hamburger-menu.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }

        /* Back Arrow for Desktop */
        .back-arrow {
            display: none; /* Hide by default */
            cursor: pointer;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1001;
        }
        @media (min-width: 768px) {
            .back-arrow {
                display: block; /* Show on desktop */
            }
            .hamburger-menu {
                display: none; /* Hide hamburger menu on desktop */
            }
        }
    </style>
</head>

<body class=" ">
    <!-- loader Start -->
    <div id="loading">
        <div class="loader simple-loader animate__animated animate__fadeOut d-none">
            <div class="loader-body"></div>
        </div>
    </div>
    <!-- loader END -->
    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
        <div class="tradingview-widget-container__widget"></div>
        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
        {
            "symbols": [{
                    "proName": "FOREXCOM:SPXUSD",
                    "title": "S&P 500"
                },
                {
                    "proName": "FOREXCOM:NSXUSD",
                    "title": "US 100"
                },
                {
                    "proName": "FX_IDC:EURUSD",
                    "title": "EUR to USD"
                },
                {
                    "proName": "BITSTAMP:BTCUSD",
                    "title": "Bitcoin"
                },
                {
                    "proName": "BITSTAMP:ETHUSD",
                    "title": "Ethereum"
                }
            ],
            "showSymbolLogo": true,
            "colorTheme": "dark",
            "isTransparent": true,
            "displayMode": "adaptive",
            "locale": "en"
        }
        </script>
    </div>
    <!-- TradingView Widget END -->

    <aside class="sidebar sidebar-default navs-rounded" id="sidebar">
        <div class="sidebar-header d-flex align-items-center justify-content-start">
            <a href="<?php echo $website_url ?>" class="navbar-brand dis-none align-items-center justify-content-center">
                <img height="100%" width="100%" src="../images/<?php echo $logo_img ?>"><?php echo $website_name ?>
            </a>
            <div class="sidebar-toggle" id="sidebarToggle">
                <div class="hamburger-menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="back-arrow" id="backArrow">
                <!--<i class="fas fa-arrow-left"></i> <!-- Back arrow icon -->
            </div>
        </div>
        <div class="sidebar-body p-0 data-scrollbar" data-scrollbar="true" tabindex="-1" style="overflow: hidden; outline: none;">
            <div class="scroll-content">
                <div class="collapse navbar-collapse pe-3" id="sidebar">
                    <ul class="navbar-nav iq-main-menu">
                        <!-- Sidebar menu items here -->
                        <!-- Add your sidebar menu items here -->
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="main.php">
                                <i class="icon">
                                    <svg width="22" viewBox="0 0 30 30" fill="none" xmlns="https://www.w3.org/2000/svg">
                                        <path d="M9.15722 20.7714V17.7047C9.1572 16.9246 9.79312 16.2908 10.581 16.2856H13.4671C14.2587 16.2856 14.9005 16.9209 14.9005 17.7047V17.7047V20.7809C14.9003 21.4432 15.4343 21.9845 16.103 22H18.0271C19.9451 22 21.5 20.4607 21.5 18.5618V18.5618V9.83784C21.4898 9.09083 21.1355 8.38935 20.538 7.93303L13.9577 2.6853C12.8049 1.77157 11.1662 1.77157 10.0134 2.6853L3.46203 7.94256C2.86226 8.39702 2.50739 9.09967 2.5 9.84736V18.5618C2.5 20.4607 4.05488 22 5.97291 22H7.89696C8.58235 22 9.13797 21.4499 9.13797 20.7714V20.7714" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </i>
                                <span class="item-name">Dashboard</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="deposit.php">
                                <i class="icon">
                                    <svg width="22" viewBox="0 0 30 30" fill="none" xmlns="https://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9849 15.3462C8.11731 15.3462 4.81445 15.931 4.81445 18.2729C4.81445 20.6148 8.09636 21.2205 11.9849 21.2205C15.8525 21.2205 19.1545 20.6348 19.1545 18.2938C19.1545 15.9529 15.8735 15.3462 11.9849 15.3462Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9849 12.0059C14.523 12.0059 16.5801 9.94779 16.5801 7.40969C16.5801 4.8716 14.523 2.81445 11.9849 2.81445C9.44679 2.81445 7.3887 4.8716 7.3887 7.40969C7.38013 9.93922 9.42394 11.9973 11.9525 12.0059H11.9849Z" stroke="currentColor" stroke-width="1.42857" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </i>
                                <span class="item-name">Deposit now</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="withdrawal.php">
                                <i class="icon">
                                    <svg width="22" viewBox="0 0 24 24" fill="none" xmlns="https://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 10.5005C14.5 9.11924 13.3808 8 12.0005 8C10.6192 8 9.5 9.11924 9.5 10.5005C9.5 11.8808 10.6192 13 12.0005 13C13.3808 13 14.5 11.8808 14.5 10.5005Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 21C10.801 21 4.5 15.8984 4.5 10.5633C4.5 6.38664 7.8571 3 11.9995 3C16.1419 3 19.5 6.38664 19.5 10.5633C19.5 15.8984 13.198 21 11.9995 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </i>
                                <span class="item-name">Withdraw funds</span>
                            </a>
                        </li>
                        <!-- Add more sidebar items here -->
                        <li class="nav-item">
                        <a class="nav-link" href="depoHistory.php">
                            <i class="icon">
                                <svg width="22" viewBox="0 0 24 24" fill="none" xmlns="https://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.739 6.15368C19.739 3.40281 17.8583 2.30005 15.1506 2.30005H8.79167C6.16711 2.30005 4.2002 3.32762 4.2002 5.97022V20.694C4.2002 21.4198 4.98115 21.877 5.61373 21.5221L11.9957 17.9422L18.3225 21.5161C18.9561 21.873 19.739 21.4158 19.739 20.689V6.15368Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M8.27148 9.02811H15.5898" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </i>
                            <span class="item-name">Deposit History</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="history.php">
                            <i class="icon">
                                <svg width="22" viewBox="0 0 24 24" fill="none" xmlns="https://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.739 6.15368C19.739 3.40281 17.8583 2.30005 15.1506 2.30005H8.79167C6.16711 2.30005 4.2002 3.32762 4.2002 5.97022V20.694C4.2002 21.4198 4.98115 21.877 5.61373 21.5221L11.9957 17.9422L18.3225 21.5161C18.9561 21.873 19.739 21.4158 19.739 20.689V6.15368Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M8.27148 9.02811H15.5898" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </i>
                            <span class="item-name">Transaction History</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="upgrade.php">
                            <i class="icon">
                                <svg width="22" viewBox="0 0 30 30" fill="none" xmlns="https://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9849 15.3462C8.11731 15.3462 4.81445 15.931 4.81445 18.2729C4.81445 20.6148 8.09636 21.2205 11.9849 21.2205C15.8525 21.2205 19.1545 20.6348 19.1545 18.2938C19.1545 15.9529 15.8735 15.3462 11.9849 15.3462Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9849 12.0059C14.523 12.0059 16.5801 9.94779 16.5801 7.40969C16.5801 4.8716 14.523 2.81445 11.9849 2.81445C9.44679 2.81445 7.3887 4.8716 7.3887 7.40969C7.38013 9.93922 9.42394 11.9973 11.9525 12.0059H11.9849Z" stroke="currentColor" stroke-width="1.42857" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </i>
                            <span class="item-name">Upgrade Account</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="withdrawal_pin.php">
                            <i class="icon">
                                <svg width="22" viewBox="0 0 30 30" fill="none" xmlns="https://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9849 15.3462C8.11731 15.3462 4.81445 15.931 4.81445 18.2729C4.81445 20.6148 8.09636 21.2205 11.9849 21.2205C15.8525 21.2205 19.1545 20.6348 19.1545 18.2938C19.1545 15.9529 15.8735 15.3462 11.9849 15.3462Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9849 12.0059C14.523 12.0059 16.5801 9.94779 16.5801 7.40969C16.5801 4.8716 14.523 2.81445 11.9849 2.81445C9.44679 2.81445 7.3887 4.8716 7.3887 7.40969C7.38013 9.93922 9.42394 11.9973 11.9525 12.0059H11.9849Z" stroke="currentColor" stroke-width="1.42857" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </i>
                            <span class="item-name">Withdrawal pin</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="profile.php">
                            <i class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
  <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"></path>
  <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"></path>
</svg>
                            </i>
                            <span class="item-name">Profile Settings</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="kyc.php">
                            <i class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-check-fill" viewBox="0 0 16 16">
                                  <path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z"></path>
                                </svg>
                            </i>
                            <span class="item-name">Verify Account</span></a>
                    </li>
                    </ul>
                </div>
                <div id="sidebar-footer" class="position-relative sidebar-footer">
                    <div class="card mx-4">
                        <div class="card-body">
                            <div class="sidebarbottom-content">
                                <div class="image">
                                    <img src="./asset_files/13.png" alt="User-Profile" class="img-fluid">
                                </div>
                                <p class="mb-0">Be more secure with Pro Feature</p>
                                <button type="button" class="btn btn-primary mt-3" onclick="window.location.href='upgrade.php'">
                                    Upgrade Now
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>
    <main class="main-content">
        <div class="position-relative">
            <!--Nav Start-->
            <nav class="nav navbar navbar-expand-lg navbar-light iq-navbar border-bottom">
                <div class="container-fluid navbar-inner">
                    <a href="main.php" class="navbar-brand"> </a>
                    <div class="sidebar-toggle" id="sidebarToggleMobile">
                        <div class="hamburger-menu">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <h6 class="title">Dashboard</h6>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto navbar-list mb-2 mb-lg-0 align-items-center">
                            <li class="nav-item dropdown">
                                <a class="nav-link py-0 d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <img src="../images/<?php echo $image ?>" alt="User-Profile" class="img-fluid avatar avatar-50 avatar-rounded">
                                    <div class="caption ms-3">
                                        <h6 class="mb-0 caption-title"><?php echo $full_name ?></h6>
                                        <button class="badge rounded-pill bg-danger"></button>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <li class="border-0">
                                        <a class="dropdown-item" href="#">
                                            <i class="fa fa-user"></i>
                                            <span style="padding-left: 5px;"><?php echo $email ?></span>
                                        </a>
                                    </li>
                                    <li class="border-0">
                                        <a class="dropdown-item" href="profile.php"><i class="fa fa-gear"></i><span style="padding-left: 5px;">Profile settings</span></a>
                                    </li>
                                    <li class="border-0">
                                        <hr class="m-0 dropdown-divider">
                                    </li>
                                    <li class="border-0">
                                        <a class="dropdown-item" href="logout.php"><i class="fa-solid fa-right-from-bracket"></i><span style="padding-left: 5px;">Logout</span></a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!--Nav End-->
        </div>
        <!-- Overlay Container -->
    </main>

    <!-- JavaScript for Toggle Sidebar -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sidebarToggle = document.getElementById('sidebarToggle');
            const sidebarToggleMobile = document.getElementById('sidebarToggleMobile');
            const backArrow = document.getElementById('backArrow');
            const sidebar = document.getElementById('sidebar');
            const hamburgerMenus = document.querySelectorAll('.hamburger-menu');

            // Function to toggle sidebar and hamburger menu
            function toggleSidebar() {
                sidebar.classList.toggle('active');
                hamburgerMenus.forEach(menu => menu.classList.toggle('active'));
            }

            // Toggle sidebar on mobile
            sidebarToggle.addEventListener('click', toggleSidebar);
            sidebarToggleMobile.addEventListener('click', toggleSidebar);

            // Toggle sidebar on desktop using back arrow
            backArrow.addEventListener('click', toggleSidebar);
        });
    </script>
