<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>My Account & Profile | <%= settings.siteTitle %></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <style>
    .profile-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 20px;
      margin-bottom: 20px;
    }
    .profile-header {
      display: flex;
      align-items: center;
      gap: 15px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 15px;
      margin-bottom: 15px;
    }
    .profile-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-gold), var(--accent-yellow));
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.8rem;
      font-weight: 800;
    }
    .wallet-box {
      background: linear-gradient(135deg, #1e1e1e 0%, #2b2b00 100%);
      border: 1px solid var(--accent-gold);
      border-radius: 12px;
      padding: 18px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .wallet-amount {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--accent-gold);
    }
    .action-row {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    .btn-deposit {
      flex: 1;
      background-color: var(--accent-green);
      color: #000;
      padding: 12px;
      border-radius: 8px;
      font-weight: 800;
      text-decoration: none;
      text-align: center;
      font-size: 0.95rem;
    }
    .btn-withdraw {
      flex: 1;
      background-color: var(--accent-red);
      color: #fff;
      padding: 12px;
      border-radius: 8px;
      font-weight: 800;
      text-decoration: none;
      text-align: center;
      font-size: 0.95rem;
    }
    .info-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.9rem;
    }
    .info-list-item:last-child {
      border-bottom: none;
    }
    body {
      padding-bottom: 70px;
    }
  </style>
</head>
<body>

  <!-- Sticky Header -->
  <header class="site-header">
    <div class="header-container">
      <a href="/" class="logo-area" onclick="event.preventDefault(); openDrawer();" style="cursor: pointer;">
        <i class="fas fa-bars" style="font-size: 1.3rem; color: var(--accent-gold); margin-right: 8px;"></i>
        <div class="logo-icon">VELKE</div>
        <div class="logo-text">
          <h1><%= settings.logoText %></h1>
          <span>MY ACCOUNT & PROFILE</span>
        </div>
      </a>
      <div class="header-actions">
        <a href="/" class="btn-admin"><i class="fas fa-home"></i> Home</a>
        <a href="/login" class="btn-admin" style="border-color: var(--accent-red); color: var(--accent-red);"><i class="fas fa-sign-out-alt"></i> Logout</a>
      </div>
    </div>
  </header>

  <!-- Side Drawer Backdrop -->
  <div class="drawer-backdrop" id="drawerBackdrop"></div>

  <!-- Slide-Out Side Menu Drawer -->
  <aside class="side-drawer" id="sideDrawer">
    <div class="drawer-header">
      <h3>Velke Navigation</h3>
      <button class="drawer-close-btn" onclick="closeDrawer()">&times;</button>
    </div>
    
    <div class="drawer-content">
      <a href="/" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-home"></i></div>
        <span>Home</span>
      </a>

      <div class="drawer-section-title">Games</div>

      <a href="/sports/cricket" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-baseball-ball"></i></div>
        <span>Sports</span>
      </a>

      <a href="/sports/casino" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-layer-group"></i></div>
        <span>Casino</span>
      </a>

      <a href="/sports/slots" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-dice-three"></i></div>
        <span>Slot</span>
      </a>

      <a href="/sports/table" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-table-tennis"></i></div>
        <span>Table</span>
      </a>

      <a href="/sports/crash" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-rocket"></i></div>
        <span>Crash</span>
      </a>

      <a href="/sports/fishing" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-fish"></i></div>
        <span>Fishing</span>
      </a>

      <a href="/sports/lottery" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-bowling-ball"></i></div>
        <span>Lottery</span>
      </a>

      <div class="drawer-section-title">Others</div>

      <a href="<%= settings.supportTelegram || '#' %>" target="_blank" class="drawer-item">
        <div class="green-icon-badge"><i class="fab fa-facebook-f"></i></div>
        <span>Facebook</span>
      </a>

      <a href="https://wa.me/<%= (settings.supportWhatsapp || '').replace(/[^0-9]/g, '') %>?text=Monthly%20Lottery%20Details" target="_blank" class="drawer-item">
        <div class="green-icon-badge"><i class="fas fa-comment-dots"></i></div>
        <span>Monthly Lottery</span>
      </a>
    </div>

    <div class="drawer-footer">
      <p>© 2026 Velke 365 Official Portal</p>
    </div>
  </aside>

  <main class="main-container">

    <!-- Profile Header Card -->
    <div class="profile-card">
      <div class="profile-header">
        <div class="profile-avatar">
          <i class="fas fa-user"></i>
        </div>
        <div>
          <h2 style="color: #fff; font-size: 1.3rem;"><%= user.username %></h2>
          <p style="color: var(--text-muted); font-size: 0.85rem;"><i class="fab fa-whatsapp" style="color: #25d366;"></i> <%= user.phone || 'N/A' %></p>
          <span style="display: inline-block; margin-top: 4px; background: rgba(46, 196, 182, 0.2); color: var(--accent-green); padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700;">
            Status: <%= user.status %>
          </span>
        </div>
      </div>

      <!-- Wallet Balance Box -->
      <div class="wallet-box">
        <div>
          <div style="font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase;">Available Main Balance</div>
          <div class="wallet-amount">৳ <%= parseFloat(user.balance).toFixed(2) %></div>
        </div>
        <div style="text-align: right;">
          <div style="font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase;">Exposure (In-Play)</div>
          <div style="font-size: 1.2rem; font-weight: 700; color: #888;">৳ 0.00</div>
        </div>
      </div>

      <!-- Deposit & Withdraw Actions -->
      <div class="action-row">
        <a href="https://wa.me/<%= (masterAgent.whatsapp || settings.supportWhatsapp || '').replace(/[^0-9]/g, '') %>?text=I%20want%20to%20Deposit%20money%20for%20Username:%20<%= encodeURIComponent(user.username) %>" target="_blank" class="btn-deposit">
          <i class="fas fa-arrow-down"></i> DEPOSIT
        </a>
        <a href="https://wa.me/<%= (masterAgent.whatsapp || settings.supportWhatsapp || '').replace(/[^0-9]/g, '') %>?text=I%20want%20to%20Withdraw%20money%20for%20Username:%20<%= encodeURIComponent(user.username) %>" target="_blank" class="btn-withdraw">
          <i class="fas fa-arrow-up"></i> WITHDRAW
        </a>
      </div>

      <!-- Account Info List -->
      <div class="info-list-item">
        <span style="color: var(--text-muted);"><i class="fas fa-user-shield"></i> Assigned Master Agent</span>
        <span style="color: var(--accent-gold); font-weight: 700;"><%= masterAgent.name %></span>
      </div>
      <div class="info-list-item">
        <span style="color: var(--text-muted);"><i class="fab fa-whatsapp"></i> Agent WhatsApp</span>
        <a href="https://wa.me/<%= (masterAgent.whatsapp || settings.supportWhatsapp || '').replace(/[^0-9]/g, '') %>" target="_blank" style="color: #25d366; text-decoration: none; font-weight: 700;">
          <%= masterAgent.whatsapp %> <i class="fas fa-external-link-alt"></i>
        </a>
      </div>
      <div class="info-list-item">
        <span style="color: var(--text-muted);"><i class="fas fa-calendar-alt"></i> Joined Date</span>
        <span style="color: #fff;"><%= user.createdAt || 'Recent' %></span>
      </div>
    </div>

    <!-- Wallet Transaction Statement -->
    <div class="profile-card">
      <h3 style="color: var(--accent-gold); margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;">
        <i class="fas fa-list-alt"></i> Account Statement & History
      </h3>

      <% if (transactions && transactions.length > 0) { %>
        <% transactions.forEach(t => { %>
          <div class="info-list-item">
            <div>
              <div style="font-weight: 700; color: #fff;"><%= t.notes %></div>
              <div style="font-size: 0.75rem; color: #888;"><%= t.date %></div>
            </div>
            <div style="text-align: right;">
              <div style="font-weight: 800; color: <%= t.type === 'CREDIT' ? 'var(--accent-green)' : 'var(--accent-red)' %>;">
                <%= t.type === 'CREDIT' ? '+' : '-' %> ৳ <%= parseFloat(t.amount).toFixed(2) %>
              </div>
              <div style="font-size: 0.75rem; color: var(--accent-gold);">Bal: ৳ <%= parseFloat(t.balanceAfter).toFixed(2) %></div>
            </div>
          </div>
        <% }); %>
      <% } else { %>
        <p style="text-align: center; color: var(--text-muted); padding: 20px 0;">No wallet transactions recorded yet.</p>
      <% } %>
    </div>

  </main>

  <!-- Fixed Mobile Bottom Navigation Bar -->
  <div class="bottom-nav">
    <a href="/sports/cricket" class="bottom-nav-item">
      <i class="fas fa-trophy"></i>
      <span>Sports</span>
    </a>
    <a href="/inplay" class="bottom-nav-item">
      <i class="fas fa-satellite-dish"></i>
      <span>In-Play</span>
    </a>
    <a href="/" class="bottom-nav-item home-circle-btn">
      <i class="fas fa-home"></i>
    </a>
    <a href="/#agents" class="bottom-nav-item">
      <i class="fas fa-users"></i>
      <span>Agent List</span>
    </a>
    <a href="/profile" class="bottom-nav-item active">
      <i class="fas fa-user"></i>
      <span>Account</span>
    </a>
  </div>

  <script src="/js/main.js"></script>
</body>
</html>
