<?php
require_once __DIR__ . '/config.php';
require_once PHP_DIR . '/session_manager.php';

function authenticateUser($username, $password) {
    $dbFile = JS_DIR . '/users_db.json';
    if (!file_exists($dbFile)) {
        return ['success' => false];
    }
    
    $data = json_decode(file_get_contents($dbFile), true);
    foreach ($data['users'] as $user) {
        if ($user['username'] === $username) {
            // Check updated password first (always hashed)
            if (!empty($user['updated_password'])) {
                if (password_verify($password, $user['updated_password'])) {
                    return ['success' => true, 'needs_password_update' => false];
                }
            }
            
            // If updated password fails or doesn't exist, try default password (plain text)
            if (!empty($user['default_password']) && $user['default_password'] === $password) {
                return ['success' => true, 'needs_password_update' => true];
            }
        }
    }
    return ['success' => false];
}

function updateUserPassword($username, $newPassword) {
    $dbFile = JS_DIR . '/users_db.json';
    if (!file_exists($dbFile)) {
        return false;
    }
    
    $data = json_decode(file_get_contents($dbFile), true);
    foreach ($data['users'] as &$user) {
        if ($user['username'] === $username) {
            // Use password hashing for all users
            $user['updated_password'] = password_hash($newPassword, PASSWORD_DEFAULT);
            file_put_contents($dbFile, json_encode($data, JSON_PRETTY_PRINT));
            return true;
        }
    }
    return false;
}

$loginError = '';
$needsPasswordUpdate = false;
$updateError = '';

// Get base path for redirects
$basePath = rtrim(dirname($_SERVER['PHP_SELF']), '/');

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login'])) {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    
    if (!empty($username) && !empty($password)) {
        $authResult = authenticateUser($username, $password);
        if ($authResult['success']) {
            if ($authResult['needs_password_update']) {
                session_start();
                $_SESSION['temp_username'] = $username;
                $needsPasswordUpdate = true;
            } else {
                if (startUserSession($username)) {
                    header('Location: ' . $basePath . '/');
                    exit;
                } else {
                    $loginError = 'Session initialization failed!';
                }
            }
        } else {
            $loginError = 'Invalid username or password!';
        }
    }
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_password'])) {
    $newPassword = $_POST['new_password'] ?? '';
    $confirmPassword = $_POST['confirm_password'] ?? '';
    
    // Ensure session is started to access temp_username
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }
    
    $username = $_SESSION['temp_username'] ?? '';
    
    if (!empty($newPassword) && !empty($confirmPassword) && !empty($username)) {
        if ($newPassword === $confirmPassword) {
            if (updateUserPassword($username, $newPassword)) {
                // Clear temp session data
                unset($_SESSION['temp_username']);
                
                // Destroy current session completely
                $_SESSION = array();
                if (ini_get("session.use_cookies")) {
                    $params = session_get_cookie_params();
                    setcookie(session_name(), '', time() - 42000,
                        $params["path"], $params["domain"],
                        $params["secure"], $params["httponly"]
                    );
                }
                session_destroy();
                
                // Start new user session
                if (startUserSession($username)) {
                    header('Location: ' . $basePath . '/');
                    exit;
                } else {
                    $updateError = 'Session initialization failed!';
                    $needsPasswordUpdate = true;
                }
            } else {
                $updateError = 'Failed to update password!';
                $needsPasswordUpdate = true;
            }
        } else {
            $updateError = 'Passwords don\'t match!';
            $needsPasswordUpdate = true;
        }
    } else {
        $updateError = 'Please fill in both password fields!';
        $needsPasswordUpdate = true;
    }
}

if (isset($_POST['logout'])) {
    // Detect and start the correct user session first
    detectAndStartUserSession();
    
    $sessionManager = SessionManager::getInstance();
    $sessionManager->destroyUserSession();
    
    // Redirect to clear any remaining session data
    header('Location: ' . $basePath . '/');
    exit;
}

// Detect and start the correct user session
$isLoggedIn = detectAndStartUserSession();

// Check if user needs password update (only if not logged in)
if (!$isLoggedIn && isset($_SESSION['temp_username'])) {
    $needsPasswordUpdate = true;
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live Trading | Quotex</title>
  <link rel="icon" type="image/png" href="img/favicon.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/app.css">

  <?php if (!$isLoggedIn): ?>
  <style>
    .login-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #151A28;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .login-container {
        background: linear-gradient(45deg, #2B99FF, #026FD3, #0FA054, #2B99FF);
        padding: 2px;
        border-radius: 22px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        width: 400px;
        position: relative;
    }

    .login-container::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        background: #2D3347;
        border-radius: 20px;
        z-index: 0;
    }

    .login-container > * {
        position: relative;
        z-index: 1;
        padding: 0 38px;
    }

    .login-container > h1:first-child {
        padding-top: 38px;
    }

    .login-container > .form-container:last-child {
        padding-bottom: 38px;
    }

    .login-title {
        text-align: center;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 30px;
        text-shadow: 0 0 20px rgba(43, 153, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .login-title i {
        font-size: 32px;
        color: #FFD93D;
        filter: drop-shadow(0 0 15px rgba(255, 217, 61, 0.6));
    }

    .form-group {
        margin-bottom: 25px;
        position: relative;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .form-icon {
        width: 45px;
        height: 45px;
        background: linear-gradient(135deg, #3B4A6B, #4A5A7D);
        border: 1px solid rgba(43, 153, 255, 0.3);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5EC8FF;
        font-size: 18px;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .form-group:focus-within .form-icon {
        background: linear-gradient(135deg, #2B99FF, #026FD3);
        border-color: #2B99FF;
        color: #fff;
        box-shadow: 0 0 20px rgba(43, 153, 255, 0.5);
        transform: scale(1.05);
    }

    .form-input {
        flex: 1;
        padding: 15px 20px;
        background: #3B4A6B;
        border: 2px solid #4A5A7D;
        border-radius: 12px;
        color: #fff;
        font-size: 16px;
        transition: all 0.3s ease;
        outline: none;
        box-sizing: border-box;
    }

    .form-input:focus {
        border-color: #2B99FF;
        box-shadow: 0 0 20px rgba(43, 153, 255, 0.4);
        background: #4A5A7D;
    }

    .form-input::placeholder {
        color: #8B9AB8;
    }

    .login-btn {
        width: 100%;
        padding: 15px;
        background: linear-gradient(135deg, #2B99FF, #026FD3);
        border: none;
        border-radius: 12px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .login-btn i {
        font-size: 18px;
    }

    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(43, 153, 255, 0.4);
    }

    .error-message {
        color: #ff4757;
        text-align: center;
        margin-top: 15px;
        font-size: 14px;
    }
    
    .login-form {
        transition: all 0.5s ease;
    }
    
    .login-form.slide-out {
        transform: translateX(-100%);
        opacity: 0;
    }
    
    .password-update-form {
        transition: all 0.5s ease;
        width: 100%;
    }
    
    .form-container {
        position: relative;
        min-height: 200px;
    }
  </style>
  <?php endif; ?>
</head>

<body>
<?php if (!$isLoggedIn): ?>
  <div class="login-overlay">
    <div class="login-container">
      <h1 class="login-title" id="loginTitle">
        <?php if (!$needsPasswordUpdate): ?>
          <i class="fas fa-exclamation-triangle"></i>
        <?php endif; ?>
        <?php echo $needsPasswordUpdate ? 'Password Update' : 'Access Restricted'; ?>
      </h1>
      <div class="form-container">
        <form method="POST" action="" class="login-form" id="loginForm" <?php echo $needsPasswordUpdate ? 'style="display: none;"' : ''; ?>>
          <div class="form-group">
            <div class="form-icon">
              <i class="fas fa-user"></i>
            </div>
            <input type="text" name="username" class="form-input" placeholder="Username" required>
          </div>
          <div class="form-group">
            <div class="form-icon">
              <i class="fas fa-lock"></i>
            </div>
            <input type="password" name="password" class="form-input" placeholder="Password" required>
          </div>
          <button type="submit" name="login" class="login-btn">
            <i class="fas fa-sign-in-alt"></i>
            Login
          </button>
          <?php if ($loginError): ?>
            <div class="error-message"><?php echo htmlspecialchars($loginError); ?></div>
          <?php endif; ?>
        </form>
        
        <?php if ($needsPasswordUpdate): ?>
        <form method="POST" action="" class="password-update-form" id="passwordUpdateForm">
          <div class="form-group">
            <div class="form-icon">
              <i class="fas fa-key"></i>
            </div>
            <input type="password" name="new_password" class="form-input" placeholder="Enter your password" required>
          </div>
          <div class="form-group">
            <div class="form-icon">
              <i class="fas fa-key"></i>
            </div>
            <input type="password" name="confirm_password" class="form-input" placeholder="Re-enter your password" required>
          </div>
          <button type="submit" name="update_password" class="login-btn">
            <i class="fas fa-check-circle"></i>
            Update
          </button>
          <?php if ($updateError): ?>
            <div class="error-message"><?php echo htmlspecialchars($updateError); ?></div>
          <?php endif; ?>
        </form>
        <?php endif; ?>
      </div>
    </div>
  </div>
<?php else: ?>
  <!-- Skeleton Loading Screen -->
  <div id="skeleton-loader" class="skeleton-loader">
    <div class="skeleton-header">
      <div class="skeleton-menu-icon"></div>
      <div class="skeleton-logo-placeholder"></div>
    </div>
    <div class="skeleton-body">
      <div class="skeleton-left-sidebar">

        <div class="skeleton-nav-section">
          <div class="skeleton-nav-item">
            <div class="skeleton-nav-circle"></div>
            <div class="skeleton-nav-line"></div>
          </div>
          <div class="skeleton-nav-item">
            <div class="skeleton-nav-circle"></div>
            <div class="skeleton-nav-line"></div>
          </div>
          <div class="skeleton-nav-item">
            <div class="skeleton-nav-circle"></div>
            <div class="skeleton-nav-line"></div>
          </div>
          <div class="skeleton-nav-item">
            <div class="skeleton-nav-circle"></div>
            <div class="skeleton-nav-line"></div>
          </div>
          <div class="skeleton-nav-item">
            <div class="skeleton-nav-circle"></div>
            <div class="skeleton-nav-line"></div>
          </div>
          <div class="skeleton-nav-item">
            <div class="skeleton-nav-circle"></div>
            <div class="skeleton-nav-line"></div>
          </div>
        </div>

        <div class="skeleton-settings-section">
          <div class="skeleton-settings-group">
            <div class="skeleton-settings-icon"></div>
            <div class="skeleton-settings-icon"></div>
          </div>
          <div class="skeleton-settings-group">
            <div class="skeleton-settings-icon"></div>
            <div class="skeleton-settings-icon"></div>
          </div>
          <div class="skeleton-bottom-boxes">
            <div class="skeleton-bottom-box"></div>
            <div class="skeleton-bottom-box"></div>
          </div>
        </div>
      </div>
      <div class="skeleton-main"></div>
    </div>
    <div class="skeleton-sentiment-section">
      <div class="skeleton-plus-icon"></div>
      <div class="skeleton-sentiment-bar"></div>
    </div>
    <div class="skeleton-right-sidebar">
      <div class="skeleton-asset-section">
        <div class="skeleton-asset-header">
          <div class="skeleton-asset-flags"></div>
          <div class="skeleton-asset-name"></div>
          <div class="skeleton-asset-return"></div>
        </div>
        <div class="skeleton-time-investment-section"></div>
        <div class="skeleton-trade-buttons">
          <div class="skeleton-trade-btn"></div>
          <div class="skeleton-payout-info"></div>
          <div class="skeleton-trade-btn"></div>
        </div>
      </div>
      <div class="skeleton-tabs-section">
        <div class="skeleton-tabs-header">
          <div class="skeleton-tab"></div>
          <div class="skeleton-tab"></div>
        </div>
        <div class="skeleton-tab-content">
          <div class="skeleton-trade-item">
            <div class="skeleton-trade-header">
              <div class="skeleton-trade-asset-info">
                <div class="skeleton-flag-pair">
                  <div class="skeleton-flag"></div>
                  <div class="skeleton-flag"></div>
                </div>
                <div class="skeleton-asset-name"></div>
              </div>
              <div class="skeleton-trade-time"></div>
            </div>
            <div class="skeleton-trade-details">
              <div class="skeleton-trade-direction">
                <div class="skeleton-direction-icon"></div>
                <div class="skeleton-trade-amount"></div>
              </div>
              <div class="skeleton-trade-result"></div>
            </div>
          </div>
          <div class="skeleton-trade-item">
            <div class="skeleton-trade-header">
              <div class="skeleton-trade-asset-info">
                <div class="skeleton-flag-pair">
                  <div class="skeleton-flag"></div>
                  <div class="skeleton-flag"></div>
                </div>
                <div class="skeleton-asset-name"></div>
              </div>
              <div class="skeleton-trade-time"></div>
            </div>
            <div class="skeleton-trade-details">
              <div class="skeleton-trade-direction">
                <div class="skeleton-direction-icon"></div>
                <div class="skeleton-trade-amount"></div>
              </div>
              <div class="skeleton-trade-result"></div>
            </div>
          </div>
          <div class="skeleton-trade-item">
            <div class="skeleton-trade-header">
              <div class="skeleton-trade-asset-info">
                <div class="skeleton-flag-pair">
                  <div class="skeleton-flag"></div>
                  <div class="skeleton-flag"></div>
                </div>
                <div class="skeleton-asset-name"></div>
              </div>
              <div class="skeleton-trade-time"></div>
            </div>
            <div class="skeleton-trade-details">
              <div class="skeleton-trade-direction">
                <div class="skeleton-direction-icon"></div>
                <div class="skeleton-trade-amount"></div>
              </div>
              <div class="skeleton-trade-result"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Skeleton Header Right Overlay -->
  <div class="skeleton-header-right-overlay">
    <div class="skeleton-notification-section"></div>
    <div class="skeleton-account-section"></div>
    <div class="skeleton-deposit-btn"></div>
    <div class="skeleton-withdraw-btn"></div>
  </div>

  <div class="app-container">
    <!-- Navigation Sidebar -->
    <nav class="left-sidebar" role="navigation" aria-label="Main navigation">
      <div class="menu-icon">
        <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" y="2" width="20" height="1.5" fill="white" rx="0.75" />
          <rect x="0" y="9.25" width="15" height="1.5" fill="white" rx="0.75" />
          <rect x="0" y="16.5" width="20" height="1.5" fill="white" rx="0.75" />
        </svg>
      </div>

      <ul class="nav-menu">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page">
            <svg class="icon-trade-sidebar">
              <use xlink:href="./svg/spritemap.svg#icon-trade-sidebar"></use>
            </svg>
            <span>Trade</span>
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" id="support-link">
            <svg class="icon-help">
              <use xlink:href="./svg/spritemap.svg#icon-help"></use>
            </svg>
            <span>Support</span>
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link">
            <svg class="icon-profile">
              <use xlink:href="./svg/spritemap.svg#icon-profile"></use>
            </svg>
            <span>Account</span>
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link">
            <svg class="icon-tournaments">
              <use xlink:href="./svg/spritemap.svg#icon-tournaments"></use>
            </svg>
            <span>Tourna-<br>ments</span>
            <div class="tournament-badge">5</div>
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link">
            <svg class="icon-market">
              <use xlink:href="./svg/spritemap.svg#icon-market"></use>
            </svg>
            <span>Market</span>
            <div class="market-badge">5</div>
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" id="more-link">
            <svg class="icon-more-sidebar">
              <use xlink:href="./svg/spritemap.svg#icon-more-sidebar"></use>
            </svg>
            <span>More</span>
          </a>
        </li>
      </ul>

      <!-- <a class="new-tournament">
        <picture>
          <img src="img/nav-img/trader-year-2025.png">
        </picture>
      </a> -->

      <div class="sidebar-footer">
        <div class="settings-block">
          <button class="settings-button">
            <svg class="icon-settings-full-screen">
              <use xlink:href="./svg/spritemap.svg#icon-settings-full-screen"></use>
            </svg>
          </button>
          <button class="settings-button">
            <svg class="icon-left-sidebar">
              <use xlink:href="./svg/spritemap.svg#icon-left-sidebar"></use>
            </svg>
          </button>
        </div>
        <div class="settings-block">
          <button class="settings-button" id="settings-link">
            <svg class="icon-settings">
              <use xlink:href="./svg/spritemap.svg#icon-settings"></use>
            </svg>
          </button>
          <button class="settings-button">
            <svg class="icon-settings-sound">
              <use xlink:href="./svg/spritemap.svg#icon-settings-sound"></use>
            </svg>
          </button>
        </div>
        <button class="social-media">
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M15.1667 8.37424C15.1667 7.19296 16.1244 6.23535 17.3056 6.23535H25.8612C27.0425 6.23535 28.0001 7.19296 28.0001 8.37424V16.9298C28.0001 18.1111 27.0425 19.0687 25.8612 19.0687H17.3056C16.1244 19.0687 15.1667 18.1111 15.1667 16.9298V8.37424Z"
              fill="white"></path>
            <path
              d="M21.5833 17.9991C24.5365 17.9991 26.9305 15.6051 26.9305 12.6519C26.9305 9.69872 24.5365 7.30469 21.5833 7.30469C18.6301 7.30469 16.2361 9.69872 16.2361 12.6519C16.2361 15.6051 18.6301 17.9991 21.5833 17.9991Z"
              fill="#026FD3"></path>
            <path
              d="M24.252 10.4402C24.2978 10.1326 24.0163 9.88973 23.753 10.0098L18.5091 12.4019C18.3203 12.488 18.3341 12.7852 18.5299 12.8499L19.6113 13.2077C19.8178 13.276 20.0412 13.2407 20.2215 13.1113L22.6596 11.3613C22.7331 11.3085 22.8133 11.4171 22.7505 11.4844L20.9954 13.3643C20.8252 13.5467 20.859 13.8557 21.0638 13.9891L23.0287 15.2693C23.2491 15.4129 23.5326 15.2687 23.5738 14.992L24.252 10.4402Z"
              fill="white"></path>
            <path
              d="M11.0834 2.73535H2.91675C1.95025 2.73535 1.16675 3.51885 1.16675 4.48535V12.652C1.16675 13.6185 1.95025 14.402 2.91675 14.402H11.0834C12.0499 14.402 12.8334 13.6185 12.8334 12.652V4.48535C12.8334 3.51885 12.0499 2.73535 11.0834 2.73535Z"
              fill="#026FD3"></path>
            <path
              d="M9.26953 10.255L9.5293 8.56885H7.91146V7.4751C7.91146 7.01481 8.13704 6.56364 8.86165 6.56364H9.59766V5.12809C9.59766 5.12809 8.93001 5.01416 8.29199 5.01416C6.95898 5.01416 6.08854 5.8208 6.08854 7.28369V8.56885H4.60742V10.255H6.08854V14.4022H7.91146V10.255H9.26953Z"
              fill="white"></path>
            <path
              d="M7 15.0688C7 13.412 8.34315 12.0688 10 12.0688H18C19.6569 12.0688 21 13.412 21 15.0688V23.0688C21 24.7257 19.6569 26.0688 18 26.0688H10C8.34315 26.0688 7 24.7257 7 23.0688V15.0688Z"
              fill="#F14D5B"></path>
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M12 14.0688H16C17.6569 14.0688 19 15.412 19 17.0688V21.0688C19 22.7257 17.6569 24.0688 16 24.0688H12C10.3431 24.0688 9 22.7257 9 21.0688V17.0688C9 15.412 10.3431 14.0688 12 14.0688ZM12 15.0688C10.8954 15.0688 10 15.9643 10 17.0688V21.0688C10 22.1734 10.8954 23.0688 12 23.0688H16C17.1046 23.0688 18 22.1734 18 21.0688V17.0688C18 15.9643 17.1046 15.0688 16 15.0688H12ZM14 21.5688C12.6193 21.5688 11.5 20.4496 11.5 19.0688C11.5 17.6881 12.6193 16.5688 14 16.5688C15.3807 16.5688 16.5 17.6881 16.5 19.0688C16.5 20.4496 15.3807 21.5688 14 21.5688ZM14 20.5688C14.8284 20.5688 15.5 19.8973 15.5 19.0688C15.5 18.2404 14.8284 17.5688 14 17.5688C13.1716 17.5688 12.5 18.2404 12.5 19.0688C12.5 19.8973 13.1716 20.5688 14 20.5688ZM16.5 17.0688C16.2239 17.0688 16 16.845 16 16.5688C16 16.2927 16.2239 16.0688 16.5 16.0688C16.7761 16.0688 17 16.2927 17 16.5688C17 16.845 16.7761 17.0688 16.5 17.0688Z"
              fill="white"></path>
          </svg>
          <span class="join-text">JOIN US</span>
        </button>
        <div class="livechat">
          <a class="livechat-status" href="#">Help</a>
        </div>
      </div>
    </nav>

    <!-- Support Side Panel -->
    <div class="side-panel" id="support-panel">
      <div class="help">
        <div class="help__header">
          <h2>Help</h2>
          <button class="close-panel" id="close-support">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="help__content help__content--support">
          <div class="help__items">
            <div class="help__item">
              <svg class="icon-faq help__item-icon">
                <use xlink:href="./svg/spritemap.svg#icon-faq"></use>
              </svg>
              <div class="help__item-name">FAQ</div>
              <div class="help__item-text">
                <div>Open the database</div>
              </div>
              <div class="help__item-divider"></div>
            </div>

            <div class="help__item">
              <svg class="icon-onboarding help__item-icon">
                <use xlink:href="./svg/spritemap.svg#icon-onboarding"></use>
              </svg>
              <div class="help__item-name">Tutorials</div>
              <div class="help__item-text">
                <div>Use the hints</div>
              </div>
              <div class="help__item-divider"></div>
            </div>

            <a class="help__item" href="#">
              <svg class="icon-support help__item-icon">
                <use xlink:href="./svg/spritemap.svg#icon-support"></use>
              </svg>
              <div class="help__item-name">Support</div>
              <div class="help__item-text">
                <div>Submit a ticket</div>
              </div>
              <div class="help__item-divider"></div>
            </a>
          </div>
          <div class="help__support"><svg class="icon-help-support-light help__support-icon">
              <use xlink:href="./svg/spritemap.svg#icon-help-support-light"></use>
            </svg>
            <div>Didn't find an answer to your question?</div><a class="help__support-text" href="#">Contact support</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Settings Panel -->
    <div class="setting-panel" id="settings-panel">
      <div class="setting-header">
        <h2>Settings</h2>
        <button class="close-setting" id="close-settings">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="setting-content">
        <div class="upload-alert" id="upload-alert" style="display: none;">
          <i class="fas fa-check-circle" id="alert-icon"></i>
          <span id="alert-message"></span>
        </div>
        <div class="image-upload-section">
          <h3>Chart Image Upload</h3>
          <div class="upload-area" id="upload-area">
            <div class="upload-icon">
              <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="upload-text">
              <p>Drag & drop your image here or <span class="browse-link">browse</span></p>
              <small>Supports JPG, PNG files</small>
            </div>
            <input type="file" id="image-upload" accept=".jpg,.jpeg,.png" hidden>
          </div>
          <div class="upload-preview" id="upload-preview" style="display: none;">
            <img id="preview-image" src="" alt="Preview">
            <div class="preview-info">
              <span id="file-name"></span>
              <button class="remove-btn" id="remove-image">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
          <button class="upload-btn" id="upload-btn" disabled>
            <i class="fas fa-upload"></i>
            Upload Image
          </button>
          <div id="opacity-control" style="display: none;">
            <div class="opacity-group">
              <label class="opacity-label">Opacity</label>
              <input type="range" id="opacity-slider" min="0" max="100">
              <span id="opacity-value">0%</span>
            </div>
            <button id="remove-bg-btn">
              <i class="fas fa-times"></i>
              Remove Background
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- More Side Panel -->
    <div class="side-panel" id="more-panel">
      <div class="panel-header">
        <h2>More</h2>
        <button class="close-panel" id="close-more">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="panel-content">
        <div class="menu-more main-menu">
          <div class="menu-more__item" id="analytics-link">
            <div class="menu-more__item-top">
              <svg class="icon-analytics menu-more__item-icon">
                <use xlink:href="./svg/spritemap.svg#icon-analytics"></use>
              </svg>
              Analytics
            </div>
            <i class="fas fa-chevron-right menu-more__item-caret"></i>
          </div>

          <div class="menu-more__item">
            <div class="menu-more__item-top">
              <svg class="icon-top menu-more__item-icon">
                <use xlink:href="./svg/spritemap.svg#icon-top"></use>
              </svg>
              TOP
            </div>
            <i class="fas fa-chevron-right menu-more__item-caret"></i>
          </div>

          <div class="menu-more__item" id="signals-link">
            <div class="menu-more__item-top">
              <svg class="icon-trading-signals menu-more__item-icon">
                <use xlink:href="./svg/spritemap.svg#icon-trading-signals"></use>
              </svg>
              Signals
            </div>
            <i class="fas fa-chevron-right menu-more__item-caret"></i>
          </div>
        </div>

        <div class="verification-menu">
          <div class="verification-content">
            <div class="target-icon" id="target-icon">
              <i class="fas fa-fingerprint"></i>
            </div>
            <p class="verification-text">Verification Needed</p>

            <div class="otp-section" id="otp-section">
              <div class="otp-inputs">
                <input type="text" class="otp-input" maxlength="1" id="otp1">
                <input type="text" class="otp-input" maxlength="1" id="otp2">
                <input type="text" class="otp-input" maxlength="1" id="otp3">
                <input type="text" class="otp-input" maxlength="1" id="otp4">
                <input type="text" class="otp-input" maxlength="1" id="otp5">
                <input type="text" class="otp-input" maxlength="1" id="otp6">
              </div>
              <div class="timer" id="timer">00:30</div>
            </div>
          </div>
        </div>

        <div class="signals-menu">
          <div class="signals-content">
            <div class="accordion-container">
              <div class="accordion-item">
                <div class="accordion-header active" data-target="data-upload">
                  <i class="fas fa-upload"></i>
                  <span>Data File Upload</span>
                  <i class="fas fa-chevron-down accordion-arrow"></i>
                </div>
                <div class="accordion-content active" id="data-upload">
                  <div class="upload-section">
                    <div class="alert alert-success" id="upload-status-alert" style="display: none;">
                      <i class="fas fa-check-circle alert-icon" id="status-icon"></i>
                      <span class="alert-message" id="status-message">Processing...</span>
                    </div>
                    <!-- Asset Type Dropdown -->
                    <div class="activate-charts-section">
                      <label class="file-upload-label">Asset Type</label>
                      <div class="activate-charts-dropdown">
                        <div class="activate-dropdown-header" id="upload-asset-type-dropdown-header">
                          <span>Select asset type</span>
                          <i class="fas fa-chevron-down dropdown-arrow"></i>
                        </div>
                        <div class="activate-dropdown-list" id="upload-asset-type-dropdown-list" style="display: none;">
                          <!-- Asset types will be populated dynamically -->
                        </div>
                      </div>
                    </div>

                    <!-- Asset Selection Dropdown -->
                    <div class="activate-charts-section">
                      <label class="file-upload-label">Assets</label>
                      <div class="activate-charts-dropdown">
                        <div class="activate-dropdown-header" id="upload-asset-dropdown-header">
                          <span>Select asset</span>
                          <i class="fas fa-chevron-down dropdown-arrow"></i>
                        </div>
                        <div class="activate-dropdown-list" id="upload-asset-dropdown-list" style="display: none;">
                          <!-- Assets will be populated dynamically -->
                        </div>
                      </div>
                    </div>

                    <!-- Hidden input to store selected asset for form submission -->
                    <input type="hidden" id="selected-upload-asset" name="selected_asset" value="">




                    <div class="file-upload-group">
                      <label class="file-upload-label">Candle Data (.json)</label>
                      <input type="file" class="file-upload-input" id="market-data-upload" accept=".json">
                      <label for="market-data-upload" class="file-upload-button">
                        <i class="fas fa-upload"></i>
                        Choose File
                      </label>
                      <span class="file-upload-name" id="market-file-name">No file selected</span>
                    </div>

                    <div class="file-upload-group">
                      <label class="file-upload-label">Sentiment Data (.json)</label>
                      <input type="file" class="file-upload-input" id="sentiment-data-upload" accept=".json">
                      <label for="sentiment-data-upload" class="file-upload-button">
                        <i class="fas fa-upload"></i>
                        Choose File
                      </label>
                      <span class="file-upload-name" id="sentiment-file-name">No file selected</span>
                    </div>

                    <button class="upload-data-btn" id="upload-data-btn">Upload Data</button>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <div class="accordion-header" data-target="chart-controls">
                  <i class="fas fa-chart-line"></i>
                  <span>Critical Controls</span>
                  <i class="fas fa-chevron-down accordion-arrow"></i>
                </div>
                <div class="accordion-content" id="chart-controls">
                  <div class="controls-section">
                    <div class="asset-selection-container">
                      <h3>Asset Selection</h3>
                      <div class="activate-charts-section">
                        <label class="file-upload-label">Asset Type</label>
                        <div class="activate-charts-dropdown">
                          <div class="activate-dropdown-header" id="asset-type-dropdown-header">
                            <span>Select asset type</span>
                            <i class="fas fa-chevron-down dropdown-arrow"></i>
                          </div>
                          <div class="activate-dropdown-list" id="asset-type-dropdown-list" style="display: none;">
                            <!-- Asset types will be populated dynamically -->
                          </div>
                        </div>
                      </div>

                      <div class="activate-charts-section">
                        <label class="file-upload-label">Assets</label>
                        <div class="activate-charts-dropdown">
                          <div class="activate-dropdown-header" id="activate-dropdown-header">
                            <span>Select asset</span>
                            <i class="fas fa-chevron-down dropdown-arrow"></i>
                          </div>
                          <div class="activate-dropdown-list" id="activate-dropdown-list" style="display: none;">
                            <!-- Assets will be populated from the asset select -->
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- <hr style="border: none; height: 2px; background: #3D4354; margin: 20px 0 5px 0;">
                    <hr style="border: none; height: 2px; background: #3D4354; margin: 5px 0;">
                    <hr style="border: none; height: 2px; background: #3D4354; margin: 5px 0 20px 0; "> -->

                    <div class="controls-container">
                      <h3>Controls</h3>
                      <div class="chart-management-section">
                        <div class="activate-charts-section">
                          <label class="file-upload-label">Asset Cards</label>
                          <div class="activate-charts-dropdown">
                            <div class="activate-dropdown-header" id="control-dropdown-header">
                              <span>Select Asset Card</span>
                              <i class="fas fa-chevron-down dropdown-arrow"></i>
                            </div>
                            <div class="activate-dropdown-list" id="control-dropdown-list" style="display: none;">
                              <!-- Active charts will be populated here -->
                            </div>
                          </div>
                        </div>

                        <div class="activate-charts-section">
                          <label class="file-upload-label">Data Source</label>
                          <div class="activate-charts-dropdown">
                            <div class="activate-dropdown-header" id="select-data-dropdown-header">
                              <span>Choose dataset</span>
                              <i class="fas fa-chevron-down dropdown-arrow"></i>
                            </div>
                            <div class="activate-dropdown-list" id="select-data-dropdown-list" style="display: none;">
                              <!-- Data sources will be populated here -->
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="chart-control-buttons">
                        <div class="button-row">
                          <div>
                            <button class="control-btn play-btn" id="chart-play-btn">
                              <i class="fas fa-play"></i>
                            </button>
                            <span class="button-label">Play</span>
                          </div>
                          <div>
                            <button class="control-btn pause-btn" id="chart-pause-btn">
                              <i class="fas fa-pause"></i>
                            </button>
                            <span class="button-label">Pause</span>
                          </div>
                          <div>
                            <button class="control-btn reset-btn" id="chart-reset-btn">
                              <i class="fas fa-redo"></i>
                            </button>
                            <span class="button-label">Reset</span>
                          </div>
                        </div>
                        <div class="button-row">
                          <div>
                            <button class="control-btn build-all-btn" id="chart-build-all-btn">
                              <i class="fas fa-forward"></i>
                            </button>
                            <span class="button-label">Build All</span>
                          </div>
                          <div>
                            <button class="control-btn data-reset-btn" id="data-reset-btn">
                              <i class="fas fa-trash"></i>
                            </button>
                            <span class="button-label">Delete Data</span>
                          </div>
                          <div>
                            <button class="control-btn clear-storage-btn" id="clear-storage-btn" onclick="clearAllStorage()">
                              <i class="fa-solid fa-brush"></i>
                            </button>
                            <span class="button-label">Clear Storage</span>
                          </div>
                        </div>
                      </div>

                      <div class="alert alert-success" id="data-reset-alert" style="display: none; margin-top: 10px;">
                        <i class="fas fa-check-circle alert-icon" id="reset-status-icon"></i>
                        <span class="alert-message" id="reset-status-message">Data folder deleted successfully!</span>
                      </div>
                    </div>

                    
                    <!-- Time Jump Controller Section -->
                    <div class="time-jump-section">
                      <div class="time-jump-header">
                        <!-- <i class="fas fa-clock"></i> -->
                        <h3>Time Jump</h3>
                      </div>

                      <div class="time-input-group">
                        <label class="time-input-label">Jump to Time (HH:MM)</label>
                        <input type="text" class="time-input-field" id="time-jump-input" placeholder="20:45"
                          maxlength="5">
                        <div class="time-range-display" id="time-range-display">Available: --:-- to --:--</div>
                      </div>

                      <button class="time-jump-button" id="time-jump-button" disabled>
                        <i class="fas fa-fast-forward"></i>
                        <span>Jump to Time</span>
                      </button>

                      <div class="time-jump-status" id="time-jump-status"></div>
                    </div>

                    <!-- Payout Controls Section -->
                    <div class="payout-controller-section">
                      <div class="payout-controller-header">
                        <h3>Payout Controls</h3>
                      </div>

                      <div class="payout-mode-group">
                        <label class="payout-radio-label">
                          <input type="radio" name="payout-mode" value="randomize" id="payout-randomize" checked>
                          <span>Randomize</span>
                        </label>
                        <label class="payout-radio-label">
                          <input type="radio" name="payout-mode" value="custom" id="payout-custom">
                          <span>Manual</span>
                        </label>
                      </div>

                      <button class="payout-update-button" id="payout-mode-update-button">
                        <i class="fas fa-sync-alt"></i>
                        <span>Update</span>
                      </button>

                      <div class="payout-custom-section" id="payout-custom-section" style="display: none;">
                        <div class="payout-input-group">
                          <label class="payout-input-label">Select Asset</label>
                          <div class="payout-dropdown">
                            <div class="payout-dropdown-header" id="payout-asset-dropdown-header">
                              <span>Choose asset</span>
                              <i class="fas fa-chevron-down dropdown-arrow"></i>
                            </div>
                            <div class="payout-dropdown-list" id="payout-asset-dropdown-list" style="display: none;">
                              <!-- Assets will be populated here -->
                            </div>
                          </div>
                        </div>

                        <div class="payout-input-group" id="payout-percentage-group" style="display: none;">
                          <label class="payout-input-label">Payout Percentage (20-93%)</label>
                          <input type="number" class="payout-input-field" id="payout-percentage-input" placeholder="80" min="20" max="93">
                          <div class="payout-error-message" id="payout-error-message" style="display: none;"></div>
                        </div>

                        <button class="payout-save-button" id="payout-save-button" style="display: none;">
                          <i class="fas fa-save"></i>
                          <span>Update Percentage</span>
                        </button>
                      </div>

                      <div class="payout-status" id="payout-status"></div>
                    </div>

                    <!-- Badge Controller Section -->
                    <div class="badge-controller-section">
                      <div class="badge-controller-header">
                        <h3>Badge Controls</h3>
                      </div>

                      <div class="badge-input-group">
                        <label class="badge-input-label">Notification Badge</label>
                        <input type="number" class="badge-input-field" id="notification-badge-input" placeholder="2" min="0" max="99">
                      </div>

                      <div class="badge-input-group">
                        <label class="badge-input-label">Tournament Badge</label>
                        <input type="number" class="badge-input-field" id="tournament-badge-input" placeholder="5" min="0" max="99">
                      </div>
                      
                      <div class="badge-input-group">
                        <label class="badge-input-label">Market Badge</label>
                        <input type="number" class="badge-input-field" id="market-badge-input" placeholder="5" min="0" max="99">
                      </div>

                      <button class="badge-update-button" id="badge-update-button">
                        <i class="fas fa-save"></i>
                        <span>Update Badge</span>
                      </button>

                      <div class="badge-status" id="badge-status"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="signals-footer">
              <div class="session-timer" id="session-timer">
                <span class="timer-label">Remaining Session Time</span>
                <span class="timer-value" id="session-timer-value">30:00</span>
              </div>
              <button class="logout-btn" id="signals-logout">
                <i class="fas fa-sign-out-alt"></i>
                Logout
              </button>
            </div>
          </div>
        </div>
      </div>


    </div>





    <!-- Main Header -->
    <div class="page-header">
      <div class="logo-section">
        <a class="logo" href="#">
          <svg class="icon-logo-dark">
            <use xlink:href="./svg/spritemap.svg#icon-logo-dark"></use>
          </svg>
        </a>
        <div class="logo-divider"></div>
        <div class="slogan">WEB TRADING PLATFORM</div>
      </div>

      <div class="header-right">
        <div class="notification-section" id="notification-btn">
          <img src="./svg/file1.svg" class="header-notification-bell" alt="Notification">
          <div class="notification-badge">2</div>
          <div class="notification-modal" id="notification-modal">
            <div class="notification-header">
              <div class="notification-title">Notification</div>
              <div class="mark-all-read">Mark all as read</div>
            </div>
            <div class="notification-body">
              No more notifications
            </div>
          </div>
        </div>

        <div class="account-section" id="account-btn">
          <svg class="account-level-icon" id="account-level-icon">
            <use xlink:href="./svg/spritemap.svg#icon-profile-level-pro"></use>
          </svg>
          <div class="account-info">
            <div class="account-type">LIVE ACCOUNT</div>
            <div class="account-balance" id="account-balance">$10,000.00</div>
          </div>
          <svg class="account-arrow">
            <use xlink:href="./svg/spritemap.svg#icon-caret"></use>
          </svg>

          <!-- Account Dropdown Menu -->
          <div class="account-dropdown" id="account-dropdown">
            <div class="dropdown-container">
              <!-- Left Section -->
              <div class="dropdown-left">
                <ul class="account-select">
                  <li class="account-select-item">
                    <div class="level-info">
                      <div class="level">
                        <div class="level-icon">
                          <svg class="icon-profile-level-standart">
                            <use xlink:href="./svg/spritemap.svg#icon-profile-level-pro"></use>
                          </svg>
                        </div>
                        <div class="level-block">
                          <div class="level-name">STANDARD:</div>
                          <div class="level-profit">+0% profit</div>
                        </div>
                      </div>
                      <div class="eye">
                        <svg class="icon-eye">
                          <use xlink:href="./svg/spritemap.svg#icon-eye"></use>
                        </svg>
                      </div>
                    </div>
                    <div class="block">
                      <div class="block-info">
                        <!-- <div class="email">demo68c1ea34f04f44@qxbroker.com</div> -->
                        <div class="username-display" style="background: linear-gradient(135deg, #2B99FF, #026FD3); padding: 8px 12px; border-radius: 8px; margin-bottom: 5px; display: flex; align-items: center; gap: 8px;">
                          <i class="fas fa-user" style="color: white; font-size: 14px;"></i>
                          <span style="color: white; font-weight: 600; font-size: 14px;"><?php echo htmlspecialchars($_SESSION['username']); ?></span>
                        </div>
                        <span class="number">ID: 67508195</span>
                      </div>
                    </div>
                    <div class="currency">
                      <div class="currency-text">Currency:</div>
                      <div class="currency-code">USD</div>
                      <div class="currency-button">Change</div>
                    </div>
                  </li>

                  <div class="accounts">
                    <li class="account-select-item account-select-item-radio">
                      <input type="radio" name="account-type" id="live-account" class="account-radio">
                      <div class="account-content">
                        <a class="select-name" href="#">Live Account</a>
                        <b class="select-balance">$0.00</b>
                        <div class="select-limit-text">The daily limit is not set</div>
                        <div class="select-limit-text">set limit</div>
                      </div>
                    </li>

                    <li class="account-select-item account-select-item-radio active">
                      <input type="radio" name="account-type" id="demo-account" class="account-radio" checked>
                      <div class="account-content">
                        <a class="select-name" href="#">Demo Account</a>
                        <div class="select-balance-block">
                          <b class="select-balance">$10,000.00</b>
                          <div class="select-refresh">
                            <svg class="icon-refresh">
                              <use xlink:href="./svg/spritemap.svg#icon-refresh"></use>
                            </svg>
                          </div>
                          <div class="select-pencil">
                            <div class="select-balance-edit">
                              <svg class="icon-pencil-account">
                                <use xlink:href="./svg/spritemap.svg#icon-pencil"></use>
                              </svg>
                              <div class="select-balance-edit-tooltip">Edit</div>
                            </div>
                          </div>
                        </div>
                        <div class="select-balance-edit-input">
                          <label class="input-control input-control--text input-control__border">
                            <!-- <span class="input-control__label">New value</span> -->
                            <input type="number" class="input-control__input" placeholder="Enter the amount" step="any"
                              value="10000">
                          </label>
                          <button class="button button--primary select-balance-edit-button">
                            Confirm
                            <svg class="icon-arrow-right-circle">
                              <use xlink:href="./svg/spritemap.svg#icon-arrow-right"></use>
                            </svg>
                          </button>
                        </div>
                      </div>
                    </li>
                  </div>
                </ul>
              </div>

              <!-- Right Section -->
              <div class="dropdown-right">
                <ul class="menu">
                  <li class="menu-item">
                    <a class="menu-link" href="#">Deposit</a>
                  </li>
                  <li class="menu-item">
                    <a class="menu-link" href="#">Withdrawal</a>
                  </li>
                  <li class="menu-item">
                    <a class="menu-link" href="#">Transactions</a>
                  </li>
                  <li class="menu-item">
                    <a class="menu-link" href="#">Trades</a>
                  </li>
                  <li class="menu-item">
                    <a class="menu-link" href="#">Account</a>
                  </li>
                  <li class="menu-logout">
                    <!-- Future use - commented out for now
                    <a class="menu-button menu-button-green" href="#">
                      <svg class="icon-sign-up">
                        <use xlink:href="./svg/spritemap.svg#icon-sign-up"></use>
                      </svg>
                      <span>Sign up</span>
                    </a>
                    <a class="menu-button menu-button-primary" href="#">
                      <svg class="icon-sign-in">
                        <use xlink:href="./svg/spritemap.svg#icon-sign-in"></use>
                      </svg>
                      <span>Sign in</span>
                    </a>
                    -->
                    <form method="POST" style="margin: 0;">
                      <button type="submit" name="logout" class="menu-button menu-button-primary" style="background: #ff4757; border: none; padding: 8px 16px; border-radius: 5px; color: white; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px;">
                        <i class="fas fa-sign-out-alt" style="font-size: 12px;"></i>
                        <span>Logout</span>
                      </button>
                    </form>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          </li>
          </ul>
        </div>

        <button class="header-btn deposit-btn">
          <i class="fas fa-plus"></i>
          <span>Deposit</span>
        </button>
        <button class="header-btn withdraw-btn">Withdrawal</button>
      </div>
    </div>
  </div>



  <!-- Main Content with Chart -->
  <div class="main-content">
    <div class="trading-chart__top">
      <div class="trading-chart__assets">
        <!-- <div class="asset-select">
          <button class="asset-select__button">
            <svg class="icon-plus">
              <use xlink:href="./svg/spritemap.svg#icon-plus"></use>
            </svg>
          </button>
          <div></div>
        </div> -->
        <div class="asset-card-tabs">
          <div class="asset-card-items">
          </div>
        </div>
      </div>
    </div>
    <div class="left-price-section">
      <!-- Buyer/Seller Indicator -->
      <div class="buyer-seller-indicator">
        <!-- Plus Icon -->
        <div class="indicator-icon">
          <svg class="icon-plus">
            <use xlink:href="./svg/spritemap.svg#icon-plus"></use>
          </svg>
        </div>
        <div class="indicator-percentage top">67%</div>
        <div class="seller-section"></div>
        <div class="buyer-section"></div>
        <div class="indicator-percentage bottom">33%</div>
      </div>
    </div>

    <div class="trading-chart__server-time">
      <div class="server-time online">03:06:59 <span>UTC+6</span></div>
    </div>

    <div class="pair-information"><svg class="icon-pair-information">
        <use xlink:href="./svg/spritemap.svg#icon-pair-information"></use>
      </svg>
      <div class="pair-information__text">Pair Information</div>
    </div>

    <div id="chartContainer">
      <div id="chart-hover-overlay" class="chart-hover-overlay"></div>
      <canvas id="chartCanvas"></canvas>

      <!-- Not Available Content Section -->
      <!-- <div class="not-available" id="notAvailableContent">
        <div class="not-available__content">
          <svg class="icon-not-available not-available__icons">
            <use xlink:href="./svg/spritemap.svg#icon-not-available"></use>
          </svg>
          <div class="not-available__title">
            <div><span class="not-available__color-red" id="assetNamePlaceholder">EUR/CHF</span> chart is not available at the moment.</div>
          </div>
          <div class="not-available__subtitle">
            For technical reasons, we cannot show the chart of this pair, please choose another trading pair.
          </div>
        </div>
      </div> -->

      <div class="trading-chart-settings" style="bottom: 30px;">
        <div class="trading-chart-settings__toggle">
        </div>
        <div class="trading-chart-settings__item">
          <svg class="icon-pencil trading-chart-settings__item-icon">
            <use xlink:href="./svg/spritemap.svg#icon-pencil"></use>
          </svg>
        </div>
        <div class="trading-chart-settings__item timeframe-button" data-timeframe="1m">
          1m
          <div class="popover-select__settings popover-select__settings-timeframe">
            <div class="timeframe-row">
              <div class="timeframe-item" data-value="5s">5s</div>
              <div class="timeframe-item" data-value="10s">10s</div>
              <div class="timeframe-item" data-value="15s">15s</div>
              <div class="timeframe-item" data-value="30s">30s</div>
            </div>
            <div class="timeframe-row">
              <div class="timeframe-item active" data-value="1m">1m</div>
              <div class="timeframe-item" data-value="2m">2m</div>
              <div class="timeframe-item" data-value="3m">3m</div>
              <div class="timeframe-item" data-value="5m">5m</div>
            </div>
            <div class="timeframe-row">
              <div class="timeframe-item" data-value="10m">10m</div>
              <div class="timeframe-item" data-value="15m">15m</div>
              <div class="timeframe-item" data-value="30m">30m</div>
              <div class="timeframe-item" data-value="1h">1h</div>
            </div>
            <div class="timeframe-row">
              <div class="timeframe-item" data-value="4h">4h</div>
              <div class="timeframe-item" data-value="1d">1d</div>
            </div>
          </div>
        </div>
        <div class="trading-chart-settings__item chart-type-button arrow">
          <svg class="icon-chart-type-candle trading-chart-settings__item-icon">
            <use xlink:href="./svg/spritemap.svg#icon-chart-type-candle"></use>
          </svg>
          <div class="popover-select__settings popover-select__settings-type chart-type-popover">
            <div class="popover-select__settings-type-item" data-value="area">
              <svg class="icon-chart-type-area popover-select__settings-type-item__icon">
                <use xlink:href="./svg/spritemap.svg#icon-chart-type-area"></use>
              </svg>Area
            </div>
            <div class="popover-select__settings-type-item active" data-value="candles">
              <svg class="icon-chart-type-candle popover-select__settings-type-item__icon">
                <use xlink:href="./svg/spritemap.svg#icon-chart-type-candle"></use>
              </svg>Candles
            </div>
            <div class="popover-select__settings-type-item" data-value="bars">
              <svg class="icon-chart-type-bar popover-select__settings-type-item__icon">
                <use xlink:href="./svg/spritemap.svg#icon-chart-type-bar"></use>
              </svg>Bars
            </div>
            <div class="popover-select__settings-type-item" data-value="heiken-ashi">
              <svg class="icon-chart-type-ha popover-select__settings-type-item__icon">
                <use xlink:href="./svg/spritemap.svg#icon-chart-type-ha"></use>
              </svg>Heiken Ashi
            </div>
          </div>
        </div>
        <div class="trading-chart-settings__item">
          <svg class="icon-chart-ruler trading-chart-settings__item-icon">
            <use xlink:href="./svg/spritemap.svg#icon-chart-ruler"></use>
          </svg>
        </div>
      </div>

      <div class="chart-candle-info" id="candleInfo">
        <div><span class="label">Open:</span> <span class="value" id="candleOpen">0.000</span></div>
        <div><span class="label">Close:</span> <span class="value" id="candleClose">0.000</span></div>
        <div><span class="label">High:</span> <span class="value" id="candleHigh">0.000</span></div>
        <div><span class="label">Low:</span> <span class="value" id="candleLow">0.000</span></div>
      </div>

    </div>
  </div>

  <!-- Right Sidebar -->
  <div class="right-sidebar">
    <div class="right-section asset-section">
      <div class="asset-content-container">
        <div class="asset-header">
          <div class="flag-container">
            <svg class="flag flag-usd">
              <use xlink:href="./svg/flags.svg#flag-usd"></use>
            </svg>
            <svg class="flag flag-bdt">
              <use xlink:href="./svg/flags.svg#flag-bdt"></use>
            </svg>
          </div>
          <div class="asset-name">USD/BDT (OTC)</div>
          <div class="asset-return-wrapper">
            <div class="asset-return">80%</div>
          </div>
        </div>

        <div class="pending-orders">
          <div class="pending-title">
            <svg class="icon-time-setting section-deal__pending-time">
              <use xlink:href="./svg/spritemap.svg#icon-time-setting"></use>
            </svg>
            PENDING TRADE
          </div>
          <label class="toggle-switch">
            <input type="checkbox">
            <span class="toggle-slider"></span>
          </label>
        </div>

        <div class="time-section" id="time-section">
          <span class="time-legend" id="time-legend">Time</span>
          <div class="time-display">
            <span class="time-control minus">-</span>
            <span class="time-value">00:00</span>
            <span class="time-control plus">+</span>
          </div>
          <div class="time-switch" id="time-switch">SWITCH TIME</div>
          <div class="time-dropdown" id="time-dropdown">
            <div class="time-dropdown-row">
              <div class="time-dropdown-item" data-minutes="1">1M</div>
              <div class="time-dropdown-item" data-minutes="2">2M</div>
              <div class="time-dropdown-item" data-minutes="3">3M</div>
            </div>
            <div class="time-dropdown-row">
              <div class="time-dropdown-item" data-minutes="4">4M</div>
              <div class="time-dropdown-item" data-minutes="5">5M</div>
              <div class="time-dropdown-item" data-minutes="10">10M</div>
            </div>
            <div class="time-dropdown-row">
              <div class="time-dropdown-item" data-minutes="15">15M</div>
              <div class="time-dropdown-item" data-minutes="30">30M</div>
              <div class="time-dropdown-item" data-minutes="45">45M</div>
            </div>
            <div class="time-dropdown-row">
              <div class="time-dropdown-item" data-minutes="60">1H</div>
              <div class="time-dropdown-item" data-minutes="120">2H</div>
              <div class="time-dropdown-item" data-minutes="180">3H</div>
            </div>
            <div class="time-dropdown-row">
              <div class="time-dropdown-item" data-minutes="240">4H</div>
            </div>
          </div>
        </div>

        <div class="timer-section" id="timer-section" style="display: none;">
          <span class="timer-legend">Timer</span>
          <div class="timer-display">
            <span class="time-control minus" id="timer-minus">-</span>
            <span class="timer-value">00:01:00</span>
            <span class="time-control plus" id="timer-plus">+</span>
          </div>
          <div class="timer-switch" id="timer-switch">SWITCH TIME</div>
          <div class="timer-dropdown" id="timer-dropdown">
            <div class="timer-dropdown-row">
              <div class="timer-dropdown-item" data-seconds="5">00:05</div>
              <div class="timer-dropdown-item" data-seconds="10">00:10</div>
              <div class="timer-dropdown-item" data-seconds="15">00:15</div>
            </div>
            <div class="timer-dropdown-row">
              <div class="timer-dropdown-item" data-seconds="30">00:30</div>
              <div class="timer-dropdown-item active" data-seconds="60">01:00</div>
              <div class="timer-dropdown-item" data-seconds="120">02:00</div>
            </div>
            <div class="timer-dropdown-row">
              <div class="timer-dropdown-item" data-seconds="300">05:00</div>
              <div class="timer-dropdown-item" data-seconds="600">10:00</div>
              <div class="timer-dropdown-item" data-seconds="900">15:00</div>
            </div>
            <div class="timer-dropdown-row">
              <div class="timer-dropdown-item" data-seconds="1800">30:00</div>
              <div class="timer-dropdown-item" data-seconds="3600">01:00:00</div>
            </div>
            <div class="timer-dropdown-row">
              <div class="timer-dropdown-item" data-seconds="7200">02:00:00</div>
              <div class="timer-dropdown-item" data-seconds="14400">04:00:00</div>
            </div>
          </div>
        </div>

        <div class="investment-section">
          <span class="investment-legend">Investment</span>
          <div class="investment-display">
            <span class="investment-control minus">-</span>
            <input type="text" class="investment-value" value="$1">
            <span class="investment-control plus">+</span>
          </div>
          <div class="investment-switch">SWITCH</div>
        </div>

        <div class="trade-buttons">
          <div class="payout-info amount-payout-info">
            <span class="info-label">Payout</span>
            <span class="info-dots">• • •</span>
            <span class="info-percentage"><b>80%</b></span>
            <span class="info-dots">• • •</span>
            <span class="info-value"><b> 1.80 $</b></span>
          </div>
          <div class="investment-info" id="investment-info" style="display: none;">
            <span class="info-label">Investment:</span>
            <div class="info-dots"></div>
            <span class="info-value"><b>100 $</b></span>
          </div>
          <div class="payout-info percentage-payout-info" style="display: none;">
            <span class="info-label">Payout:</span>
            <div class="info-dots"></div>
            <span class="info-value"><b> 84 $</b></span>
          </div>

          <button class="trade-btn upside-btn">
            Up
            <div class="arrow-circle">
              <svg class="icon-arrow-up-circle">
                <use xlink:href="./svg/spritemap.svg#icon-arrow-up-circle"></use>
              </svg>
            </div>
          </button>

          <button class="trade-btn downside-btn">
            Down
            <div class="arrow-circle">
              <svg class="icon-arrow-down-circle">
                <use xlink:href="./svg/spritemap.svg#icon-arrow-down-circle"></use>
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>

    <div class="right-section tabs-container">
      <div class="tabs-header">
        <div class="tab active" data-tab="trades">
          <span>Trades</span>
          <span class="trade-count">0</span>
        </div>
        <div class="tab" data-tab="orders">
          <svg class="icon-time-setting section-deal__pending-time">
            <use xlink:href="./svg/spritemap.svg#icon-time-setting"></use>
          </svg>
          <span class="order-count">0</span>
        </div>
      </div>

      <div class="tab-content active" id="trades-tab">
        <div class="empty-state-icon">
          <svg class="icon-trades-empty" style="width: 50px; height: 50px; fill: white; color: white;">
            <use xlink:href="./svg/spritemap.svg#icon-trades-empty"></use>
          </svg>
        </div>
        <p>You don't have any trade history yet. You can open a trade using the form above.</p>
      </div>

      <div class="tab-content" id="orders-tab">
        <div class="empty-state-icon">
          <svg class="icon-trades-empty" style="width: 50px; height: 50px; fill: white; color: white;">
            <use xlink:href="./svg/spritemap.svg#icon-trades-empty"></use>
          </svg>
        </div>
        <p>Order list is empty.<br>Create a pending trade using the form above.</p>
      </div>

      <div class="shutter-control" id="shutter-control">
        <svg class="icon-arrow-triangle-small-up shutter-icon" id="shutter-icon">
          <use xlink:href="./svg/spritemap.svg#icon-arrow-triangle-small-up"></use>
        </svg>
      </div>
    </div>
  </div>
  </div>

  <script src="js/price-interval.js"></script>
  <script src="js/multi-chart-manager.js"></script>
  <script src="js/time-jump-controller.js"></script>
  <script src="js/chart-persistence-manager.js"></script>
  <script src="js/time-display-controller.js"></script>
  <script src="js/opacity-controller.js"></script>
  <script src="js/image-uploader.js"></script>
  <script src="js/background-image-detector.js"></script>
  <script src="js/transparency-controller.js"></script>
  <script src="js/badge-controller.js"></script>
  
  <script src="js/asset-type-dropdown.js"></script>
  <script src="js/upload-asset-dropdown.js"></script>
  <script src="js/reverse-lookup.js"></script>
  <script src="js/flag-detection-algorithm.js"></script>
  <script src="js/asset-card-database.js"></script>
  <script src="js/payout-controller.js"></script>
  <script src="js/trade-payout-storage.js"></script>
  <script src="js/countdown-positioning.js"></script>
  <script src="js/app.js"></script>
  <script src="js/visible-zone.js"></script>
  <script src="js/Y-axis-zoom.js"></script>
  <script src="js/reversal-detection.js"></script>
  <script src="js/circle-icon.js"></script>
  <script src="js/clear-cache.js"></script>

<?php endif; ?>
</body>

</html>