<div class="ads">
    <?= $settings['dashboard_top_ad'] ?>
</div>

<style>
:root{
    --acc-cyan:#22D3EE;
    --acc-cyan-dim:rgba(34,211,238,.14);
    --acc-indigo:#6366F1;
    --acc-indigo-dim:rgba(99,102,241,.14);
    --acc-emerald:#34D399;
    --acc-emerald-dim:rgba(52,211,153,.14);
    --acc-amber:#FBBF24;
    --acc-amber-dim:rgba(251,191,36,.14);
    --acc-rose:#FB7185;
    --acc-rose-dim:rgba(251,113,133,.14);
}

/* =========================================================
   SHELL
========================================================= */
.acct-shell{margin:20px 0 40px;}

/* =========================================================
   BANNER
========================================================= */
.acct-banner{
    position:relative;overflow:hidden;
    border:1px solid var(--line);border-radius:20px;
    background:
        linear-gradient(115deg, rgba(34,211,238,.10), transparent 40%),
        linear-gradient(245deg, rgba(99,102,241,.10), transparent 45%),
        var(--surface);
    padding:0;margin-bottom:16px;
}
.acct-banner-top{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
    padding:26px 28px 22px;
}
.acct-avatar-wrap{position:relative;flex-shrink:0;}
.acct-avatar-ring{
    width:88px;height:88px;border-radius:20px;padding:3px;
    background:conic-gradient(from 180deg, var(--acc-cyan), var(--acc-indigo), var(--acc-cyan));
}
.acct-avatar{
    width:100%;height:100%;border-radius:17px;object-fit:cover;display:block;
    background:var(--surface-3);
}
.acct-flag{
    position:absolute;bottom:-4px;right:-4px;width:26px;height:26px;border-radius:50%;
    border:3px solid var(--bg,#0b0d1a);object-fit:cover;background:#fff;
}
.acct-id{flex:1;min-width:200px;}
.acct-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.acct-name{font-family:var(--font-display);font-size:26px;letter-spacing:.02em;margin:0;line-height:1;color:var(--text);}
.acct-pill{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--acc-cyan-dim);color:var(--acc-cyan);
    font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:4px 10px;border-radius:7px;
}
.acct-sub{color:var(--text-dim);font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.acct-sub .sep{opacity:.4;}

.acct-balance-block{
    text-align:right;flex-shrink:0;padding-left:12px;
    border-left:1px solid var(--line);
}
.acct-balance-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:4px;}
.acct-balance-val{
    font-family:var(--font-mono);font-weight:700;font-size:28px;color:var(--acc-emerald);
    text-shadow:0 0 22px rgba(52,211,153,.35);line-height:1;
}

.acct-banner-actions{
    display:flex;gap:10px;flex-wrap:wrap;
    padding:16px 28px;border-top:1px solid var(--line);
    background:rgba(255,255,255,.015);
}
.acct-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;border-radius:10px;font-size:13.5px;font-weight:700;
    font-family:'Inter',sans-serif;border:1px solid var(--line);color:var(--text);
    background:var(--surface-3);transition:border-color .15s ease, transform .15s ease;
    text-decoration:none;
}
.acct-btn:hover{border-color:var(--acc-cyan);transform:translateY(-1px);color:var(--text);}
.acct-btn.solid{
    background:linear-gradient(120deg, var(--acc-cyan), var(--acc-indigo));
    border:none;color:#04101a;box-shadow:0 8px 20px -6px rgba(34,211,238,.4);
}
.acct-btn.solid:hover{filter:brightness(1.08);color:#04101a;}

/* =========================================================
   TABS
========================================================= */
.acct-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);}
.acct-tab{
    background:none;border:none;cursor:pointer;
    padding:12px 6px;margin-right:20px;
    font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--text-dim);
    border-bottom:2px solid transparent;transition:color .15s ease, border-color .15s ease;
    display:flex;align-items:center;gap:8px;
}
.acct-tab i{font-size:13px;}
.acct-tab:hover{color:var(--text);}
.acct-tab.active{color:var(--acc-cyan);border-color:var(--acc-cyan);}
.acct-panel{display:none;}
.acct-panel.active{display:block;}

/* =========================================================
   OVERVIEW PANEL — info rail
========================================================= */
.info-rail{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);}
.info-row{
    display:flex;align-items:center;gap:14px;padding:16px 20px;
    border-bottom:1px solid var(--line);
}
.info-row:last-child{border-bottom:none;}
.info-ico{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:14px;
}
.info-ico.cyan{background:var(--acc-cyan-dim);color:var(--acc-cyan);}
.info-ico.indigo{background:var(--acc-indigo-dim);color:var(--acc-indigo);}
.info-ico.emerald{background:var(--acc-emerald-dim);color:var(--acc-emerald);}
.info-ico.amber{background:var(--acc-amber-dim);color:var(--acc-amber);}
.info-ico.rose{background:var(--acc-rose-dim);color:var(--acc-rose);}
.info-main{flex:1;min-width:0;}
.info-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-weight:700;}
.info-val{font-size:14.5px;color:var(--text);font-family:var(--font-mono);margin-top:2px;word-break:break-all;}
.info-val img{width:15px;height:15px;border-radius:50%;object-fit:cover;vertical-align:-3px;margin-right:6px;}
.info-action{
    background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;
    padding:6px 8px;border-radius:8px;flex-shrink:0;transition:color .15s ease, background .15s ease;
}
.info-action:hover{color:var(--acc-cyan);background:var(--acc-cyan-dim);}
.info-action.copied{color:var(--acc-emerald);}
.info-status-pill{
    display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
    font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;
}
.info-status-pill.ok{background:var(--acc-emerald-dim);color:var(--acc-emerald);}
.info-status-pill.banned{background:var(--acc-rose-dim);color:var(--acc-rose);}
.info-status-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;}

/* small stat tiles under overview */
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;}
.mini-stat{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;
}
.mini-stat .mv{font-family:var(--font-mono);font-weight:700;font-size:19px;color:var(--text);}
.mini-stat .ml{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-top:4px;}
@media (max-width:640px){ .mini-stats{grid-template-columns:1fr;} }

/* =========================================================
   SECURITY PANEL
========================================================= */
.sec-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start;}
@media (max-width:900px){ .sec-grid{grid-template-columns:1fr;} }

.sec-card{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;
}
.sec-card-title{
    font-family:var(--font-display);letter-spacing:.03em;font-size:17px;color:var(--text);
    display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.sec-card-title .ic{
    width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font-size:13px;background:var(--acc-indigo-dim);color:var(--acc-indigo);
}

.acct-field{margin-bottom:15px;}
.acct-field label{font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:6px;display:block;}
.acct-input-wrap{position:relative;}
.acct-input{
    width:100%;background:var(--surface-3) !important;border:1px solid var(--line) !important;
    border-radius:11px !important;color:var(--text) !important;padding:11px 42px 11px 14px !important;
    font-size:14px;transition:border-color .15s ease, box-shadow .15s ease;
}
.acct-input:focus{border-color:var(--acc-cyan) !important;box-shadow:0 0 0 3px var(--acc-cyan-dim) !important;outline:none;}
.acct-input::placeholder{color:var(--text-dim);}
.acct-eye{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13.5px;padding:4px;
}
.acct-eye:hover{color:var(--text);}

.acct-strength{height:4px;border-radius:999px;background:var(--surface-3);margin-top:8px;overflow:hidden;}
.acct-strength-bar{height:100%;width:0%;border-radius:999px;transition:width .25s ease, background-color .25s ease;background:var(--acc-rose);}
.acct-strength-lbl{font-size:11px;color:var(--text-dim);margin-top:5px;display:block;}

.acct-submit{
    background:linear-gradient(120deg, var(--acc-cyan), var(--acc-indigo)) !important;
    border:none !important;border-radius:11px !important;
    color:#04101a !important;font-weight:700;padding:11px 22px !important;
    box-shadow:0 8px 20px -6px rgba(34,211,238,.4);transition:filter .15s ease, transform .15s ease;
}
.acct-submit:hover{filter:brightness(1.08);transform:translateY(-1px);}

.tip-list{display:flex;flex-direction:column;gap:14px;}
.tip-row{display:flex;align-items:flex-start;gap:12px;}
.tip-num{
    width:24px;height:24px;border-radius:7px;flex-shrink:0;
    background:var(--acc-cyan-dim);color:var(--acc-cyan);
    display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;
    font-family:var(--font-mono);margin-top:1px;
}
.tip-txt{font-size:13.5px;color:var(--text-dim);line-height:1.55;}
.tip-txt b{color:var(--text);}
</style>

<div class="acct-shell">

    <div class="acct-banner">
        <div class="acct-banner-top">
            <div class="acct-avatar-wrap">
                <div class="acct-avatar-ring"><img src="/assets/images/users/user.png" class="acct-avatar" alt=""></div>
                <?php if ($user['isocode'] != 'N/A') { ?>
                    <img src="<?= base_url() ?>assets/images/flags/<?= $user['isocode'] ?>.png" class="acct-flag" title="<?= $user['country'] ?>" alt="">
                <?php } ?>
            </div>

            <div class="acct-id">
                <div class="acct-name-row">
                    <h2 class="acct-name"><?= $user['username'] ?></h2>
                    <span class="acct-pill"><i class="fas fa-bolt"></i> Active Player</span>
                </div>
                <div class="acct-sub">
                    <span><i class="far fa-envelope"></i> <?= $user['email'] ?></span>
                    <?php if ($user['isocode'] != 'N/A') { ?>
                        <span class="sep">·</span>
                        <span><?= $user['country'] ?></span>
                    <?php } ?>
                </div>
            </div>

            <div class="acct-balance-block">
                <div class="acct-balance-lbl">Total Earned</div>
                <div class="acct-balance-val"><?= currency($user["balance"], $settings['currency_rate']) ?></div>
            </div>
        </div>

        <div class="acct-banner-actions">
            <a href="<?= site_url('withdraw') ?>" class="acct-btn solid"><i class="fas fa-sack-dollar"></i> Withdraw</a>
            <a href="<?= site_url('referrals') ?>" class="acct-btn"><i class="fas fa-user-plus"></i> Refer a Friend</a>
        </div>
    </div>

    <div class="acct-tabs">
        <button type="button" class="acct-tab active" data-tab="overview"><i class="far fa-id-card"></i> Overview</button>
        <button type="button" class="acct-tab" data-tab="security"><i class="fas fa-lock"></i> Security</button>
    </div>

    <div class="acct-panel active" data-panel="overview">
        <div class="info-rail">
            <div class="info-row">
                <span class="info-ico cyan"><i class="far fa-envelope"></i></span>
                <div class="info-main">
                    <div class="info-lbl">Email Address</div>
                    <div class="info-val"><?= $user['email'] ?></div>
                </div>
                <button type="button" class="info-action" data-copy="<?= $user['email'] ?>" title="Copy email"><i class="far fa-copy"></i></button>
            </div>

            <div class="info-row">
                <?php
                $status = $user['status'];
                $isBanned = ($status == 'banned');
                ?>
                <span class="info-ico <?= $isBanned ? 'rose' : 'emerald' ?>"><i class="fas fa-shield-halved"></i></span>
                <div class="info-main">
                    <div class="info-lbl">Account Status</div>
                    <div class="info-val" style="font-family:'Inter',sans-serif;">
                        <span class="info-status-pill <?= $isBanned ? 'banned' : 'ok' ?>">
                            <span class="dot"></span>
                            <?= $isBanned ? 'Banned' : 'Good, keep working ðŸ‘Œ' ?>
                        </span>
                    </div>
                </div>
            </div>

            <div class="info-row">
                <span class="info-ico indigo"><i class="fas fa-globe"></i></span>
                <div class="info-main">
                    <div class="info-lbl">Country</div>
                    <div class="info-val" style="font-family:'Inter',sans-serif;">
                        <?php if ($user['isocode'] != 'N/A') { ?>
                            <img src="<?= base_url() ?>assets/images/flags/<?= $user['isocode'] ?>.png" alt="">
                            <?= $user['country'] ?>
                        <?php } else { ?>
                            Not set
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>

        <div class="mini-stats">
            <div class="mini-stat"><div class="mv"><?= currency($user["balance"], $settings['currency_rate']) ?></div><div class="ml">Balance</div></div>
            <div class="mini-stat"><div class="mv"><?= $isBanned ? 'Banned' : 'Active' ?></div><div class="ml">Status</div></div>
            <div class="mini-stat"><div class="mv"><?= $user['isocode'] != 'N/A' ? $user['isocode'] : '—' ?></div><div class="ml">Region</div></div>
        </div>
    </div>

    <div class="acct-panel" data-panel="security">
        <div class="sec-grid">
            <div class="sec-card">
                <h4 class="sec-card-title"><span class="ic"><i class="fas fa-key"></i></span> Change Password</h4>

                <?php
                if (isset($_SESSION['message'])) {
                    echo $_SESSION['message'];
                }
                ?>

                <form action="<?= site_url('account/update_password') ?>" method="POST" id="acct-password-form">
                    <input type="hidden" name="<?= $csrf_name ?>" id="token" value="<?= $csrf_hash ?>">

                    <div class="acct-field">
                        <label>Current password</label>
                        <div class="acct-input-wrap">
                            <input type="password" class="acct-input" id="old-password" name="old_password" required>
                            <button type="button" class="acct-eye" data-target="old-password"><i class="far fa-eye"></i></button>
                        </div>
                    </div>

                    <div class="acct-field">
                        <label>New password</label>
                        <div class="acct-input-wrap">
                            <input type="password" class="acct-input" id="new-password" name="password" required>
                            <button type="button" class="acct-eye" data-target="new-password"><i class="far fa-eye"></i></button>
                        </div>
                        <div class="acct-strength"><div class="acct-strength-bar" id="acct-strength-bar"></div></div>
                        <span class="acct-strength-lbl" id="acct-strength-lbl">Enter a new password</span>
                    </div>

                    <div class="acct-field">
                        <label>Confirm new password</label>
                        <div class="acct-input-wrap">
                            <input type="password" class="acct-input" id="confirm-new-password" name="confirm_password" required>
                            <button type="button" class="acct-eye" data-target="confirm-new-password"><i class="far fa-eye"></i></button>
                        </div>
                    </div>

                    <button type="submit" class="btn acct-submit"><i class="fas fa-key" style="margin-right:6px;"></i> Update Password</button>
                </form>
            </div>

            <div class="sec-card">
                <h4 class="sec-card-title"><span class="ic"><i class="fas fa-list-check"></i></span> Security Checklist</h4>
                <div class="tip-list">
                    <div class="tip-row">
                        <span class="tip-num">1</span>
                        <span class="tip-txt"><b>Use a unique password</b> — don't reuse one from another site or account.</span>
                    </div>
                    <div class="tip-row">
                        <span class="tip-num">2</span>
                        <span class="tip-txt"><b>Never share your login</b> — our staff will never ask for your password.</span>
                    </div>
                    <div class="tip-row">
                        <span class="tip-num">3</span>
                        <span class="tip-txt"><b>Double-check the URL</b> before entering your credentials to avoid phishing pages.</span>
                    </div>
                    <div class="tip-row">
                        <span class="tip-num">4</span>
                        <span class="tip-txt"><b>Log out on shared devices</b> — especially on public or borrowed computers.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
(function(){
    /* tab switching */
    var tabs = document.querySelectorAll('.acct-tab');
    var panels = document.querySelectorAll('.acct-panel');
    tabs.forEach(function(tab){
        tab.addEventListener('click', function(){
            tabs.forEach(function(t){ t.classList.remove('active'); });
            panels.forEach(function(p){ p.classList.remove('active'); });
            tab.classList.add('active');
            var target = document.querySelector('.acct-panel[data-panel="' + tab.getAttribute('data-tab') + '"]');
            if(target) target.classList.add('active');
        });
    });

    /* copy-to-clipboard buttons */
    document.querySelectorAll('.info-action[data-copy]').forEach(function(btn){
        btn.addEventListener('click', function(){
            var val = btn.getAttribute('data-copy');
            if(!val) return;
            navigator.clipboard.writeText(val).then(function(){
                var icon = btn.querySelector('i');
                btn.classList.add('copied');
                icon.className = 'fas fa-check';
                setTimeout(function(){
                    btn.classList.remove('copied');
                    icon.className = 'far fa-copy';
                }, 1500);
            });
        });
    });

    /* password show/hide toggles */
    document.querySelectorAll('.acct-eye').forEach(function(btn){
        btn.addEventListener('click', function(){
            var target = document.getElementById(btn.getAttribute('data-target'));
            if(!target) return;
            var icon = btn.querySelector('i');
            if(target.type === 'password'){
                target.type = 'text';
                icon.className = 'far fa-eye-slash';
            } else {
                target.type = 'password';
                icon.className = 'far fa-eye';
            }
        });
    });

    /* password strength meter */
    var newPass = document.getElementById('new-password');
    var bar = document.getElementById('acct-strength-bar');
    var lbl = document.getElementById('acct-strength-lbl');
    if(newPass && bar && lbl){
        newPass.addEventListener('input', function(){
            var v = newPass.value;
            var score = 0;
            if(v.length >= 6) score++;
            if(v.length >= 10) score++;
            if(/[A-Z]/.test(v) && /[a-z]/.test(v)) score++;
            if(/[0-9]/.test(v)) score++;
            if(/[^A-Za-z0-9]/.test(v)) score++;

            var pct = (score / 5) * 100;
            var color = '#FB7185';
            var label = 'Enter a new password';

            if(v.length === 0){
                pct = 0; label = 'Enter a new password';
            } else if(score <= 1){
                color = '#FB7185'; label = 'Weak password';
            } else if(score <= 3){
                color = '#FBBF24'; label = 'Okay — could be stronger';
            } else {
                color = '#34D399'; label = 'Strong password';
            }

            bar.style.width = pct + '%';
            bar.style.background = color;
            lbl.textContent = label;
            lbl.style.color = v.length === 0 ? 'var(--text-dim)' : color;
        });
    }
})();
</script>