<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>My Account - CV111</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background-color: #1a1a1a;
      display: flex;
      justify-content: center;
      min-height: 100vh;
    }

    .app-container {
      width: 100%;
      max-width: 420px;
      background-color: #ffffff;
      min-height: 100vh;
      padding-bottom: 20px;
    }

    /* Top Bar */
    .header {
      background-color: #1e1e1e;
      color: #ffffff;
      display: flex;
      align-items: center;
      padding: 14px 16px;
      position: relative;
    }

    .back-btn {
      color: #ffffff;
      font-size: 18px;
      text-decoration: none;
      position: absolute;
      left: 16px;
    }

    .header-title {
      width: 100%;
      text-align: center;
      font-size: 18px;
      font-weight: 700;
    }

    /* Profile Card Area */
    .profile-card-wrapper {
      padding: 12px;
      background: linear-gradient(180deg, #1e1e1e 0%, #1e1e1e 30px, #f4f6f8 30px);
    }

    .profile-card {
      background: linear-gradient(135deg, #eef5fb 0%, #d8e5f2 100%);
      border-radius: 20px;
      padding: 16px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    /* Sign In Ribbon */
    .signin-ribbon {
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(90deg, #dc2626, #ef4444);
      color: #ffffff;
      padding: 6px 14px 6px 18px;
      border-bottom-left-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border: none;
    }

    .card-top {
      display: flex;
      gap: 14px;
      margin-top: 10px;
    }

    .avatar-container { position: relative; }

    .avatar {
      width: 75px;
      height: 75px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #ffffff;
      background: #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 26px;
      color: #4b5563;
    }

    .user-info { flex: 1; min-width: 0; }

    .vip-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background-color: #5a6578;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 12px;
      margin-bottom: 6px;
    }

    .user-id {
      font-size: 17px;
      font-weight: 800;
      color: #111827;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .copy-icon { font-size: 12px; color: #6b7280; cursor: pointer; }

    .meta-text {
      font-size: 11px;
      color: #6b7280;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .edit-icon { font-size: 11px; color: #6b7280; cursor: pointer; }

    /* Balance Section */
    .balance-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 14px 0;
    }

    .balance-amount { font-size: 22px; font-weight: 800; color: #111827; }

    .refresh-btn { color: #6b7280; font-size: 16px; cursor: pointer; background: none; border: none; }
    .refresh-btn.spin i { animation: spin .6s linear; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Action Buttons */
    .action-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .action-btn {
      background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
      border: 1px solid #d1d5db;
      border-radius: 20px;
      padding: 8px 0;
      font-size: 12px;
      font-weight: 700;
      color: #374151;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      text-decoration: none;
      display: block;
    }

    /* Member Center Badge */
    .member-center-tag {
      margin: 15px 16px 10px 16px;
      display: inline-block;
      background-color: #e5e7eb;
      color: #374151;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 12px;
    }

    /* Grid Menu */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px 8px;
      padding: 10px 12px;
    }

    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }

    .icon-box {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: #fef3c7;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 6px;
      position: relative;
    }

    .icon-box i { font-size: 20px; color: #d97706; }

    .badge {
      position: absolute;
      top: -2px;
      right: -2px;
      background-color: #ef4444;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #ffffff;
    }

    .menu-label {
      font-size: 11px;
      color: #4b5563;
      font-weight: 600;
      line-height: 1.2;
      max-width: 75px;
    }
  </style>
</head>
<body>
<?php $pt = __DIR__ . '/page_transition.php'; if (file_exists($pt)) { include $pt; } ?>

  <div class="app-container">
    <!-- Header -->
    <div class="header">
      <a href="/newhome.php" class="back-btn"><i class="fa-solid fa-chevron-left"></i></a>
      <div class="header-title">My Account</div>
    </div>

    <!-- Profile Section -->
    <div class="profile-card-wrapper">
      <div class="profile-card">
        <button class="signin-ribbon" onclick="window.location.href='/newpromotions.php'">
          <i class="fa-regular fa-square-check"></i>
          <span>Sign In</span>
          <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
        </button>

        <div class="card-top">
          <div class="avatar-container">
            <div class="avatar" id="avatarBox"><i class="fa-solid fa-user"></i></div>
          </div>
          <div class="user-info">
            <div class="vip-tag" id="vipTag">
              <i class="fa-solid fa-shield-halved"></i> VIP0
            </div>
            <div class="user-id">
              <span id="memberMobile">লোড হচ্ছে...</span>
              <i class="fa-regular fa-clone copy-icon" onclick="copyMobile()"></i>
            </div>
            <div class="meta-text">
              Nickname: <span id="memberNick">...</span> <i class="fa-solid fa-pen edit-icon" onclick="window.location.href='/neweditprofile.php'"></i>
            </div>
            <div class="meta-text">
              Joined: <span id="memberJoined">...</span>
            </div>
          </div>
        </div>

        <div class="balance-row">
          <div class="balance-amount"><span>৳</span> <span id="balanceAmount">0.00</span></div>
          <button class="refresh-btn" id="refreshBtn" onclick="refreshBalance()"><i class="fa-solid fa-rotate"></i></button>
        </div>

        <div class="action-buttons">
          <a href="/newdeposit_panel.php" class="action-btn">Deposit</a>
          <a href="/newwithdraw_premium.php" class="action-btn">Withdrawal</a>
          <a href="/newwallet.php" class="action-btn">Bank Account</a>
        </div>
      </div>
    </div>

    <!-- Member Center Badge -->
    <div class="member-center-tag">Member Center</div>

    <!-- Grid Services Menu -->
    <div class="menu-grid">
      <a href="/newrewardcenter.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-trophy"></i></div>
        <div class="menu-label">Reward Center</div>
      </a>

      <a href="/newhistory.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-chart-line"></i></div>
        <div class="menu-label">Betting Record</div>
      </a>

      <a href="/newhistory.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-file-invoice-dollar"></i></div>
        <div class="menu-label">Profit And Loss</div>
      </a>

      <a href="/newdeposit_history.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-clipboard-list"></i></div>
        <div class="menu-label">Deposit Record</div>
      </a>

      <a href="/newwithdraw_history.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-receipt"></i></div>
        <div class="menu-label">Withdrawal Record</div>
      </a>

      <a href="/newaccountrecord.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-folder-open"></i></div>
        <div class="menu-label">Account Record</div>
      </a>

      <a href="/neweditprofile.php" class="menu-item">
        <div class="icon-box"><i class="fa-regular fa-user"></i></div>
        <div class="menu-label">My Account</div>
      </a>

      <a href="/newsecurity.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-shield-cat"></i></div>
        <div class="menu-label">Security Center</div>
      </a>

      <a href="/newreferral.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-user-plus"></i></div>
        <div class="menu-label">Invite Friends</div>
      </a>

      <a href="/newmission.php" class="menu-item">
        <div class="icon-box">
          <i class="fa-solid fa-gift"></i>
          <span class="badge" id="missionBadge" style="display:none;">1</span>
        </div>
        <div class="menu-label">Mission</div>
      </a>

      <a href="/newrebate.php" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-coins"></i></div>
        <div class="menu-label">Rebate</div>
      </a>

      <a href="/newnotifications.php" class="menu-item">
        <div class="icon-box">
          <i class="fa-solid fa-at"></i>
          <span class="badge" id="messageBadge" style="display:none;">1</span>
        </div>
        <div class="menu-label">Internal Message</div>
      </a>

      <a href="/chatbot_widget.html" class="menu-item">
        <div class="icon-box"><i class="fa-regular fa-comment-dots"></i></div>
        <div class="menu-label">Suggestion</div>
      </a>

      <a href="/downloads/CV111.apk" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-mobile-screen-button"></i></div>
        <div class="menu-label">Download APP</div>
      </a>

      <a href="/chatbot_widget.html" class="menu-item">
        <div class="icon-box"><i class="fa-solid fa-headset"></i></div>
        <div class="menu-label">Customer Service</div>
      </a>

      <button class="menu-item" onclick="doLogout()">
        <div class="icon-box"><i class="fa-solid fa-arrow-right-from-bracket"></i></div>
        <div class="menu-label">Logout</div>
      </button>
    </div>

  </div>

<script>
const token = localStorage.getItem('token');
if (!token) window.location.href = '/newlogin.php';

function md5(str) {
    function rotateLeft(n, s) { return (n << s) | (n >>> (32 - s)); }
    function toHex(n) { let s = '', v; for (let i = 0; i < 4; i++) { v = (n >>> (i * 8)) & 255; s += ('0' + v.toString(16)).slice(-2); } return s; }
    function utf8Encode(str) { return unescape(encodeURIComponent(str)); }
    str = utf8Encode(str);
    const msgLen = str.length;
    const numBlocks = (((msgLen + 8) >>> 6) + 1) * 16;
    const M = new Array(numBlocks).fill(0);
    for (let i = 0; i < msgLen; i++) M[i >> 2] |= str.charCodeAt(i) << ((i % 4) * 8);
    M[msgLen >> 2] |= 0x80 << ((msgLen % 4) * 8);
    M[numBlocks - 2] = msgLen * 8;
    let a = 1732584193, b = -271733879, c = -1732584194, d = 271733878;
    const S = [7,12,17,22,7,12,17,22,7,12,17,22,7,12,17,22,5,9,14,20,5,9,14,20,5,9,14,20,5,9,14,20,4,11,16,23,4,11,16,23,4,11,16,23,4,11,16,23,6,10,15,21,6,10,15,21,6,10,15,21,6,10,15,21];
    const K = [];
    for (let i = 0; i < 64; i++) K[i] = (Math.floor(Math.abs(Math.sin(i + 1)) * 4294967296)) | 0;
    for (let i = 0; i < numBlocks; i += 16) {
        let A = a, B = b, C = c, D = d;
        for (let j = 0; j < 64; j++) {
            let F, g;
            if (j < 16) { F = (B & C) | (~B & D); g = j; }
            else if (j < 32) { F = (D & B) | (~D & C); g = (5 * j + 1) % 16; }
            else if (j < 48) { F = B ^ C ^ D; g = (3 * j + 5) % 16; }
            else { F = C ^ (B | ~D); g = (7 * j) % 16; }
            F = (F + A + K[j] + (M[i + g] | 0)) | 0;
            A = D; D = C; C = B;
            B = (B + rotateLeft(F, S[j])) | 0;
        }
        a = (a + A) | 0; b = (b + B) | 0; c = (c + C) | 0; d = (d + D) | 0;
    }
    return toHex(a) + toHex(b) + toHex(c) + toHex(d);
}

let currentMobile = '';

async function loadUserInfo() {
    const random = Math.random().toString(36).substring(2, 15);
    const shonustr = `{"language":1,"random":"${random}"}`;
    const signature = md5(shonustr).toUpperCase();
    try {
        const res = await fetch('/deepanshu/api/webapi/GetUserInfo.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
            body: JSON.stringify({ language: 1, random, signature, timestamp: Date.now() })
        });
        const data = await res.json();
        if (data.code === 0 && data.data) {
            const d = data.data;
            const mobile = String(d.userName || '').replace(/^91/, '');
            currentMobile = mobile;
            document.getElementById('memberMobile').textContent = mobile || ('User#' + d.userId);
            document.getElementById('memberNick').textContent = d.nickName || mobile;
            document.getElementById('avatarBox').textContent = (d.nickName || mobile || 'U').charAt(0).toUpperCase();
            if (d.createdate) {
                document.getElementById('memberJoined').textContent = String(d.createdate).slice(0, 10);
            }
            if (d.amount != null) {
                document.getElementById('balanceAmount').textContent = Number(d.amount).toLocaleString('en-IN', {minimumFractionDigits: 2});
            }
            if (d.unRead && d.unRead > 0) {
                const badge = document.getElementById('messageBadge');
                badge.style.display = 'flex';
                badge.textContent = d.unRead > 9 ? '9+' : d.unRead;
            }
        }
    } catch (e) {
        document.getElementById('memberMobile').textContent = 'Error';
    }
}

async function loadVip() {
    const random = Math.random().toString(36).substring(2, 15);
    const shonustr = `{"language":1,"random":"${random}"}`;
    const signature = md5(shonustr).toUpperCase();
    try {
        const res = await fetch('/deepanshu/api/webapi/GetVipUserLevelDetail.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
            body: JSON.stringify({ language: 1, random, signature, timestamp: Date.now() })
        });
        const data = await res.json();
        if (data.code === 0 && data.data) {
            const current = data.data.find(v => v.upgradeStatus === 1) || data.data[0];
            document.getElementById('vipTag').innerHTML = '<i class="fa-solid fa-shield-halved"></i> VIP' + (current.id || 0);
        }
    } catch (e) {}
}

async function loadPhoto() {
    try {
        const res = await fetch('/get_user_photo.php', { headers: { 'Authorization': 'Bearer ' + token } });
        const data = await res.json();
        if (data.code === 0 && data.photo) {
            document.getElementById('avatarBox').innerHTML = `<img src="${data.photo}" style="width:100%; height:100%; border-radius:50%; object-fit:cover;">`;
        }
    } catch (e) {}
}

function refreshBalance() {
    const btn = document.getElementById('refreshBtn');
    btn.classList.add('spin');
    loadUserInfo().finally(() => setTimeout(() => btn.classList.remove('spin'), 600));
}

function copyMobile() {
    if (!currentMobile) return;
    navigator.clipboard.writeText(currentMobile);
    alert('✅ Copy হয়েছে!');
}

function doLogout() {
    if (confirm('সত্যিই Logout করতে চাও?')) {
        localStorage.removeItem('token');
        window.location.href = '/newlogin.php';
    }
}

loadUserInfo();
loadVip();
loadPhoto();
setInterval(loadUserInfo, 10000);
</script>

</body>
</html>
