<?php
include('inc/session.php');

// 1. GET LAST DEPOSIT
$last_deposit_query = "SELECT amount FROM deposit WHERE email = '$email' ORDER BY id DESC LIMIT 1";
$last_deposit_result = mysqli_query($conn, $last_deposit_query);
$last_deposit_row = mysqli_fetch_assoc($last_deposit_result);
$last_deposit = isset($last_deposit_row['amount']) ? $last_deposit_row['amount'] : "0.00";

// 2. GET ACTIVE DEPOSITS
$active_deposits_query = "SELECT SUM(amount) as total FROM deposit WHERE email = '$email' AND status = 'Active'";
$active_deposits_result = mysqli_query($conn, $active_deposits_query);
$active_deposits_row = mysqli_fetch_assoc($active_deposits_result);
$active_deposits = isset($active_deposits_row['total']) ? $active_deposits_row['total'] : "0.00";

// 3. GET PENDING WITHDRAWALS
$pending_withdrawal_query = "SELECT SUM(amount) as total FROM withdrawal WHERE email = '$email' AND status = 'Pending'";
$pending_withdrawal_result = mysqli_query($conn, $pending_withdrawal_query);
$pending_withdrawal_row = mysqli_fetch_assoc($pending_withdrawal_result);
$pending_withdrawal = isset($pending_withdrawal_row['total']) ? $pending_withdrawal_row['total'] : "0.00";

// --- FORMATTING ---
$last_deposit = number_format($last_deposit, 2);
$active_deposits = number_format($active_deposits, 2);
$pending_withdrawal = number_format($pending_withdrawal, 2);
?>  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - Dashboard</title>
    <!-- IonIcons CDN -->
    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css"> 
    <link rel="shortcut icon" href="logo1.png" />
   <style>
    /* --- Basic Reset & Defaults --- */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; height: 100%; }
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #000; color: #333; line-height: 1.6;
        overflow-x: hidden; min-height: 100%; position: relative;
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    /* --- Sidebar Variables --- */
    :root {
        --primary-color: #3d85c6;
        --card-bg: linear-gradient(145deg, #1e2334, #161925);
        --card-shadow: 0 4px 15px rgba(0,0,0,0.3);
        --text-muted: #8e9aaf;
        --text-light: #ffffff;
        --accent-green: #00ff88;
        --accent-blue: #00d2ff;
        --accent-red: #ff6384;
        --accent-gold: #f1c40f; 
    }

    /* --- Layout & Sidebar CSS --- */
    .dashboard-container { display: flex; min-height: 100vh; position: relative; }
    
    .sidebar {
        width: 250px; background-color: #2c3e50; color: #ecf0f1;
        display: flex; flex-direction: column; transition: transform 0.3s ease;
        position: sticky; top: 0; height: 100vh; z-index: 1000; flex-shrink: 0;
    }
    
    .sidebar-header { 
        padding: 20px 10px; text-align: center; border-bottom: 1px solid #34495e; 
        flex-shrink: 0; position: relative; 
    }
    
    .brand-logo {
        width: 50px; height: 50px;
        background: linear-gradient(135deg, #f1c40f, #f39c12);
        color: #fff; font-size: 24px; line-height: 50px; text-align: center;
        border-radius: 50%; margin: 0 auto 10px auto;
        box-shadow: 0 0 15px rgba(241, 196, 15, 0.5); display: block;
    }

    .sidebar-header h2 { 
        font-size: 1.1em; font-weight: 600; white-space: nowrap; 
        overflow: hidden; opacity: 1; margin: 0; color: #ecf0f1;
    }
    
    .mobile-close-btn {
        display: none; position: absolute; right: 15px; top: 15px; font-size: 1.5em; cursor: pointer; color: #fff;
    }

    .sidebar-nav { flex-grow: 1; overflow-y: auto; overflow-x: hidden; }
    .sidebar-nav ul { padding-top: 20px; }
    .sidebar-nav li { margin-bottom: 5px; position: relative; }
    .sidebar-nav a { display: flex; align-items: center; padding: 12px 20px; color: #bdc3c7; transition: 0.3s; white-space: nowrap; overflow: hidden; position: relative; }
    .sidebar-nav a i:first-child { margin-right: 15px; font-size: 1.3em; width: 20px; text-align: center; flex-shrink: 0; }
    .sidebar-nav a:hover, .sidebar-nav a.active { background-color: #34495e; color: #ffffff; }
    
    /* --- DROPDOWN / SUBMENU CSS (FIX) --- */
    .has-submenu > a .submenu-indicator {
        margin-left: auto; /* Push to right */
        font-size: 0.8em;
        transition: transform 0.3s ease;
    }
    
    /* Hide submenu by default */
    .submenu {
        background-color: #233040; /* Darker background for contrast */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    
    .submenu a {
        padding-left: 55px; /* Indent child links */
        font-size: 0.9em;
    }
    
    /* Open State */
    .has-submenu.open > .submenu {
        max-height: 300px; /* Arbitrary height larger than content */
    }
    
    .has-submenu.open > a .submenu-indicator {
        transform: rotate(180deg);
    }

    /* --- Main Content --- */
    .main-content {
        flex-grow: 1; display: flex; flex-direction: column; position: relative;
        height: 100vh; overflow-y: auto; background-color: #02101c;
        width: 100%;
    }
    .main-header {
        background-color: #02101c; padding: 15px 30px; display: flex; justify-content: space-between;
        align-items: center; border-bottom: 1px solid #1f293a; position: sticky; top: 0; z-index: 900;
    }
    
    .menu-toggle { 
        color: #fff; font-size: 2em; display: none; cursor: pointer; 
        background: none; border: none; padding: 0; line-height: 1;
    }

    /* --- DASHBOARD DESIGN CSS --- */
    .page-content { padding: 20px; color: #fff; }

    .balance-card { text-align: center; margin-bottom: 30px; padding: 20px; position: relative; }
    .balance-title { color: var(--text-muted); font-size: 0.9em; margin-bottom: 5px; }
    .balance-amount { font-size: 2.5em; font-weight: 700; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.2); }

    .action-grid {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;
        background: var(--card-bg); border-radius: 20px; padding: 20px;
        box-shadow: var(--card-shadow); margin-bottom: 25px; border: 1px solid rgba(255,255,255,0.05);
    }
    .action-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-align: center; cursor: pointer; transition: transform 0.2s;
    }
    .action-item:hover { transform: translateY(-3px); }
    .icon-box {
        width: 45px; height: 45px; border-radius: 12px;
        background: rgba(61, 133, 198, 0.2); color: #3d85c6;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.4em; margin-bottom: 8px;
    }
    .action-item span { font-size: 0.8em; color: var(--text-muted); }

    .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px; }
    .stat-card {
        background: var(--card-bg); border-radius: 15px; padding: 20px;
        box-shadow: var(--card-shadow); border: 1px solid rgba(255,255,255,0.05);
        display: flex; flex-direction: column; justify-content: center; min-height: 100px;
    }
    .stat-label { font-size: 0.85em; color: var(--text-muted); margin-bottom: 8px; }
    .stat-value { font-size: 1.3em; font-weight: 600; color: #fff; }
    .text-green { color: var(--accent-green); text-shadow: 0 0 5px rgba(0, 255, 136, 0.3); }

    .table-container, .chart-card { 
        background: var(--card-bg); padding: 20px; border-radius: 15px; 
        overflow-x: auto; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 25px;
    }
    .chart-card { height: 500px; }
    table { width: 100%; border-collapse: collapse; color: #ccc; }
    th, td { padding: 12px; text-align: left; border-bottom: 1px solid #2c3e50; }
    th { color: #fff; font-size: 0.9em; }
    .status { padding: 4px 10px; border-radius: 10px; font-size: 0.75em; }
    .status.completed { background: rgba(0, 255, 136, 0.15); color: var(--accent-green); }
    .status.pending { background: rgba(255, 193, 7, 0.15); color: #ffc107; }

    .btn { padding: 8px 15px; border-radius: 5px; border: none; cursor: pointer; display: inline-block; }
    .btn-success { background-color: var(--accent-green); color: #000; font-weight: bold; }

    .btn-upgrade {
        margin-top: 15px;
        background: linear-gradient(45deg, #f6b605, #f39c12);
        color: #000;
        border: none;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(243, 156, 18, 0.4);
        transition: transform 0.2s, box-shadow 0.2s;
        text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.5px;
    }
    .btn-upgrade:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(243, 156, 18, 0.6); color: #000; }
    .btn-upgrade i { margin-right: 5px; }

    /* --- RESPONSIVE MOBILE MENU FIX --- */
    @media (max-width: 768px) {
        .sidebar {
            position: fixed; left: 0; top: 0; height: 100vh; width: 250px;
            transform: translateX(-100%); transition: transform 0.3s ease-in-out;
            box-shadow: 5px 0 15px rgba(0,0,0,0.5); z-index: 2000; 
        }
        .sidebar.active { transform: translateX(0); }
        .sidebar-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1500;
        }
        .sidebar-overlay.active { display: block; }
        .menu-toggle { display: block; }
        .header-right { display: none; } 
        .mobile-close-btn { display: block; } 
        .action-grid { gap: 10px; padding: 15px; }
        .icon-box { width: 35px; height: 35px; font-size: 1.2em; }
    }
   </style>
</head>
<body>
    <!-- Dark Overlay for Mobile -->
    <div class="sidebar-overlay" id="sidebar-overlay"></div>

    <div class="dashboard-container">
        <!-- Sidebar -->
      <?php 
include('inc/sidebar.php');
?> 

        <main class="main-content">
            <!-- Header -->
            <header class="main-header">
                <div class="header-left">
                    <button class="menu-toggle" id="menu-toggle">
                        <i class="ion-navicon"></i>
                    </button>
                </div>
                <div class="header-right">
                    <a href="deposit-request.php" class="btn btn-success">Deposit Now</a>
                </div>
            </header>

            <!-- Page Content -->
            <div class="page-content">

                <!-- 1. Total Balance Section -->
                <div class="balance-card">
                    <div class="balance-title">Total Balance</div>
                    <div class="balance-amount">$<?php echo number_format($avialable_balance, 2); ?></div>
                    
                    <a href="plans.php" class="btn btn-upgrade">
                        <i class="ion-ios-rocket"></i> Upgrade Plan
                    </a>
                </div>

                <!-- 2. Action Icons Grid -->
                <div class="action-grid">
                    <a href="deposit-request.php" class="action-item">
                        <div class="icon-box" style="background: rgba(144, 238, 144, 0.1); color: #90ee90;">
                            <i class="ion-card"></i>
                        </div>
                        <span>Deposit</span>
                    </a>
                    <a href="transactions.php" class="action-item">
                        <div class="icon-box" style="background: rgba(220, 180, 255, 0.1); color: #dcb4ff;">
                            <i class="ion-swap"></i>
                        </div>
                        <span>Transactions</span>
                    </a>
                    <a href="#" class="action-item">
                        <div class="icon-box" style="background: rgba(255, 200, 100, 0.1); color: #ffc864;">
                            <i class="ion-cash"></i>
                        </div>
                        <span>Earning</span>
                    </a>
                    <a href="withdraw-request.php" class="action-item">
                        <div class="icon-box" style="background: rgba(255, 99, 132, 0.1); color: #ff6384;">
                            <i class="ion-wallet"></i>
                        </div>
                        <span>Withdraw</span>
                    </a>
                </div>

                <!-- 3. Stats Grid -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-label">Earning</div>
                        <div class="stat-value text-green">$<?php echo $earnings; ?></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Pending Withdrawal</div>
                        <div class="stat-value">$<?php echo $pending_withdrawal; ?></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Active Deposits</div>
                        <div class="stat-value">$<?php echo $active_deposits; ?></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Last Deposit</div>
                        <div class="stat-value">$<?php echo $last_deposit; ?></div>
                    </div>
                </div>

                <!-- 4. Recent Transactions Table -->
                <div class="table-container">
                   <h3 style="color: #fff; margin-bottom: 15px; font-size: 1.1em;">Recent Transactions</h3>
                   <table>
                       <thead>
                           <tr>
                               <th>Date</th>
                               <th>Type</th>
                               <th>Amount</th>
                               <th>Status</th>
                           </tr>
                       </thead>
                       <tbody>
                       <?php
                          if(isset($conn)){
                              $result = mysqli_query($conn, "select * from transaction where email ='$email' order by id DESC LIMIT 5");
                              if($result){
                                  while ($row = mysqli_fetch_array($result) ){
                                    $date1 = $row['date'];
                                    $type = $row['type'];
                                    $amount1 = $row['amount'];
                                    $status1 = $row['status'];
                                    $statusClass = strtolower($status1) == 'completed' || strtolower($status1) == 'success' ? 'completed' : 'pending';
                                    
                                    echo "
                                    <tr>
                                        <td>$date1</td>
                                        <td>$type</td>
                                        <td>F$amount1</td>
                                        <td><span class=\"status $statusClass\">$status1</span></td>
                                    </tr>";
                                  }
                              }
                          } else {
                              echo "<tr><td colspan='4'>No database connection found.</td></tr>";
                          }
                        ?>
                       </tbody>
                   </table>
               </div>

               <!-- 5. Live Market Chart -->
               <div class="chart-card">
                    <h3 style="color: #fff; margin-bottom: 15px; font-size: 1.1em;">Live Market</h3>
                    <div class="tradingview-widget-container" style="height:100%;width:100%">
                        <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
                        <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
                        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
                        {
                        "autosize": true,
                        "symbol": "FX:EURUSD",
                        "interval": "120",
                        "timezone": "Etc/UTC",
                        "theme": "dark",
                        "style": "1",
                        "locale": "en",
                        "withdateranges": true,
                        "hide_side_toolbar": false,
                        "allow_symbol_change": true,
                        "details": true,
                        "hotlist": true,
                        "studies": [
                            "STD;Hull%1MA",
                            "STD;Mass%1Index"
                        ],
                        "support_host": "https://www.tradingview.com"
                        }
                        </script>
                    </div>
               </div>
               <br>
            </div> 
        </main>
    </div>

    <!-- JavaScript for Mobile Menu & Dropdowns -->
    <script>
        // --- 1. Submenu Toggle Function ---
        function toggleSubmenu(linkElement) {
            // Find the parent list item (li)
            const parentLi = linkElement.parentElement;
            
            // Toggle the 'open' class
            parentLi.classList.toggle('open');
            
            // Note: CSS handles the transition of max-height
        }

        document.addEventListener('DOMContentLoaded', () => {
            // --- 2. Mobile Menu Logic ---
            const menuToggle = document.getElementById('menu-toggle');
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            const closeBtn = document.getElementById('mobile-close-btn');
            
            function openMenu() {
                sidebar.classList.add('active');
                overlay.classList.add('active');
            }

            function closeMenu() {
                sidebar.classList.remove('active');
                overlay.classList.remove('active');
            }

            if(menuToggle) menuToggle.addEventListener('click', (e) => { e.stopPropagation(); openMenu(); });
            if(overlay) overlay.addEventListener('click', closeMenu);
            if(closeBtn) closeBtn.addEventListener('click', closeMenu);

            // Close mobile menu when clicking a normal link (not the dropdown toggle)
            const navLinks = document.querySelectorAll('.sidebar-nav a:not([onclick])');
            navLinks.forEach(link => {
                link.addEventListener('click', closeMenu);
            });
        });
    </script>
    
</body>
</html>