<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Member Center - CV111</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    body {
        background: linear-gradient(180deg, #a8d8ff 0%, #c9e7ff 25%, #e0f0ff 55%, #eef6ff 100%);
        min-height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: #1a2744;
        padding-bottom: 34px;
        position: relative;
        overflow-x: hidden;
    }
    /* Soft ambient glow blobs */
    body::before, body::after {
        content: ''; position: fixed; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none;
    }
    body::before { width: 260px; height: 260px; background: rgba(124,109,255,.35); top: -60px; right: -60px; }
    body::after { width: 220px; height: 220px; background: rgba(76,163,255,.35); bottom: 120px; left: -60px; }

    .glass {
        background: rgba(255,255,255,.55);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(255,255,255,.7);
        box-shadow: 0 8px 32px rgba(90,120,200,.18);
    }

    /* Header */
    #header { position: relative; z-index: 2; padding: 18px 16px 10px; display: flex; align-items: center; justify-content: space-between; }
    .avatar-wrap { position: relative; }
    .avatar-glow {
        width: 60px; height: 60px; border-radius: 50%;
        background: linear-gradient(135deg, #6a5cff, #4ea8ff);
        padding: 3px;
        box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 22px rgba(106,92,255,.55);
    }
    .avatar-glow img, .avatar-glow .avatar-fallback {
        width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
        background: #fff; display: flex; align-items: center; justify-content: center;
        font-size: 22px; color: #6a5cff;
    }
    .vip-chip {
        position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
        background: linear-gradient(135deg, #ffb84e, #ff8a3d);
        color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .3px;
        padding: 2px 9px; border-radius: 20px; box-shadow: 0 2px 8px rgba(255,138,61,.5);
        border: 1.5px solid #fff; white-space: nowrap;
    }
    .header-info { flex: 1; margin-left: 14px; }
    .header-name { font-size: 16.5px; font-weight: 800; color: #16233f; display: flex; align-items: center; gap: 6px; }
    .header-uid { font-size: 11px; color: #5c6f95; margin-top: 2px; font-weight: 600; }
    .header-icons { display: flex; gap: 10px; }
    .icon-btn {
        width: 38px; height: 38px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #4c5f8a; font-size: 15px; position: relative;
    }
    .icon-btn .dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ff4d6d; border: 1.5px solid #fff; }

    main { position: relative; z-index: 1; padding: 4px 16px 0; }

    /* Wallet Card */
    .wallet-card {
        border-radius: 22px; padding: 20px; margin: 10px 0 16px; position: relative; overflow: hidden;
        background: linear-gradient(135deg, #6a5cff 0%, #4ea8ff 55%, #6fd0ff 100%);
        box-shadow: 0 14px 34px rgba(78,90,220,.35);
    }
    .wallet-card::before {
        content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%;
        background: rgba(255,255,255,.15); top: -60px; right: -40px;
    }
    .wallet-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
    .wallet-label { color: rgba(255,255,255,.85); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
    .wallet-shield { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; }
    .wallet-amount { color: #fff; font-size: 30px; font-weight: 900; margin-top: 8px; letter-spacing: .5px; position: relative; z-index: 1; }
    .wallet-amount span { font-size: 17px; opacity: .85; margin-right: 3px; }
    .wallet-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; position: relative; z-index: 1; }
    .wallet-vip-text { color: rgba(255,255,255,.9); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
    .refresh-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.22); border: none; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; }
    .refresh-btn.spin i { animation: spin .6s linear; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Action Buttons */
    .actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
    .action-card {
        border-radius: 16px; padding: 14px 6px; text-align: center; text-decoration: none; color: #1a2744;
    }
    .action-icon {
        width: 40px; height: 40px; border-radius: 12px; margin: 0 auto 7px;
        display: flex; align-items: center; justify-content: center; font-size: 16px;
        background: linear-gradient(135deg, rgba(106,92,255,.15), rgba(78,168,255,.15));
        color: #6a5cff;
    }
    .action-card span { font-size: 11.5px; font-weight: 800; }

    /* Section title */
    .section-title { font-size: 13px; font-weight: 800; color: #33456b; margin: 4px 0 12px; padding-left: 2px; }

    /* Member Center Grid */
    .menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
    .menu-item {
        border-radius: 16px; padding: 14px 4px 12px; text-align: center; text-decoration: none; color: #1a2744;
        display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative;
        transition: transform .12s;
    }
    .menu-item:active { transform: scale(.94); }
    .menu-icon {
        width: 42px; height: 42px; border-radius: 13px;
        background: linear-gradient(135deg, rgba(106,92,255,.14), rgba(78,168,255,.14));
        display: flex; align-items: center; justify-content: center; font-size: 17px; color: #5b53ff;
    }
    .menu-item span { font-size: 9.8px; font-weight: 700; line-height: 1.25; color: #2c3a5c; }
    .menu-badge {
        position: absolute; top: 4px; right: 10px; background: #ff4d6d; color: #fff;
        font-size: 8.5px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 1.5px solid #fff;
    }

    .glass-round { border-radius: 16px; }
</style>
</head>
<body>

<!-- Header -->
<div id="header">
    <div style="display:flex; align-items:center; flex:1;">
        <div class="avatar-wrap">
            <div class="avatar-glow"><div class="avatar-fallback" id="avatarBox"><i class="fa-solid fa-user"></i></div></div>
            <div class="vip-chip" id="vipChip">VIP 1</div>
        </div>
        <div class="header-info">
            <div class="header-name" id="memberName">Member01</div>
            <div class="header-uid" id="memberUid">UID: 000000</div>
        </div>
    </div>
    <div class="header-icons">
        <a href="/newnotifications.php" class="icon-btn glass glass-round"><i class="fa-solid fa-bell"></i><span class="dot"></span></a>
        <a href="/chatbot_widget.html" class="icon-btn glass glass-round"><i class="fa-solid fa-headset"></i></a>
    </div>
</div>

<main>
    <!-- Wallet Card -->
    <div class="wallet-card">
        <div class="wallet-top">
            <div class="wallet-label">WALLET BALANCE</div>
            <div class="wallet-shield"><i class="fa-solid fa-shield-halved"></i></div>
        </div>
        <div class="wallet-amount"><span>৳</span><span id="walletAmount">281.27</span></div>
        <div class="wallet-bottom">
            <div class="wallet-vip-text"><i class="fa-solid fa-crown"></i> VIP Member</div>
            <button class="refresh-btn" id="refreshBtn" onclick="refreshWalletUI()"><i class="fa-solid fa-rotate"></i></button>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="actions-row">
        <a href="/newdeposit_panel.php" class="action-card glass glass-round">
            <div class="action-icon"><i class="fa-solid fa-arrow-down"></i></div>
            <span>Deposit</span>
        </a>
        <a href="/newdeposit_panel.php" class="action-card glass glass-round">
            <div class="action-icon"><i class="fa-solid fa-arrow-up"></i></div>
            <span>Withdraw</span>
        </a>
        <a href="/newwallet.php" class="action-card glass glass-round">
            <div class="action-icon"><i class="fa-solid fa-credit-card"></i></div>
            <span>My Card</span>
        </a>
    </div>

    <div class="section-title">Member Center</div>

    <!-- Menu Grid (16 items, populated via JS for easy PHP-binding later) -->
    <div class="menu-grid" id="menuGrid"></div>
</main>

<script>
// ✅ এই তালিকা পরে সহজেই PHP-Variable/API-Data দিয়ে বদলানো যাবে —
// এখন শুধু Frontend Structure, কোনো Backend Call নেই
const menuItems = [
    { icon: 'fa-gift', label: 'Reward Center', link: '/newpromotions.php', badge: 0 },
    { icon: 'fa-clipboard-list', label: 'Betting Records', link: '/newhistory.php', badge: 0 },
    { icon: 'fa-chart-line', label: 'Win/Loss Report', link: '/newhistory.php', badge: 0 },
    { icon: 'fa-arrow-down', label: 'Deposit Records', link: '/newhistory.php', badge: 0 },
    { icon: 'fa-arrow-up', label: 'Withdrawal Records', link: '/newhistory.php', badge: 0 },
    { icon: 'fa-receipt', label: 'Account Records', link: '/newhistory.php', badge: 0 },
    { icon: 'fa-id-card', label: 'My Account', link: '/neweditprofile.php', badge: 0 },
    { icon: 'fa-shield-halved', label: 'Security Center', link: '/newsecurity.php', badge: 0 },
    { icon: 'fa-user-group', label: 'Friends Invite', link: '/newreferral.php', badge: 0 },
    { icon: 'fa-bullseye', label: 'Mission Center', link: '/newsignin.php', badge: 0 },
    { icon: 'fa-percent', label: 'Rebate', link: '/newvip.php', badge: 0 },
    { icon: 'fa-envelope', label: 'Messages', link: '/newnotifications.php', badge: 0 },
    { icon: 'fa-fire', label: 'Promotion', link: '/newpromotions.php', badge: 0 },
    { icon: 'fa-download', label: 'App Download', link: '#', badge: 0 },
    { icon: 'fa-headset', label: 'Customer Service', link: '/chatbot_widget.html', badge: 0 },
    { icon: 'fa-circle-question', label: 'Help Center', link: '/newabout.php', badge: 0 },
];

const grid = document.getElementById('menuGrid');
menuItems.forEach(item => {
    const a = document.createElement('a');
    a.href = item.link;
    a.className = 'menu-item glass glass-round';
    a.innerHTML = `
        <div class="menu-icon"><i class="fa-solid ${item.icon}"></i></div>
        <span>${item.label}</span>
        ${item.badge > 0 ? `<span class="menu-badge">${item.badge}</span>` : ''}
    `;
    grid.appendChild(a);
});

// ✅ Placeholder UI-Only Refresh Animation (আসল Backend পরে যুক্ত হবে)
function refreshWalletUI() {
    const btn = document.getElementById('refreshBtn');
    btn.classList.add('spin');
    setTimeout(() => btn.classList.remove('spin'), 600);
}
</script>

</body>
</html>
