<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mission - CV111</title>
<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}
body{
    font-family:"Comic Sans MS","Trebuchet MS",sans-serif;
    background:#f5f4fa;
    color:#666;
    overflow-x:hidden;
}
.header{
    height:105px;
    background:#135d60;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.header-title{
    color:#f5c52b;
    font-size:30px;
    font-weight:500;
}
.back-btn{
    position:absolute;
    left:25px;
    top:30px;
    width:45px;
    height:45px;
    border:0;
    background:none;
    cursor:pointer;
    text-decoration:none;
    display:block;
}
.back-btn:before,
.back-btn:after{
    content:"";
    position:absolute;
    width:27px;
    height:4px;
    background:#f5c52b;
    left:5px;
    border-radius:5px;
}
.back-btn:before{
    transform:rotate(-48deg);
    top:14px;
}
.back-btn:after{
    transform:rotate(48deg);
    top:29px;
}
.profile-banner{
    height:272px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 10% 65%,
        rgba(0,255,255,.9) 0,
        rgba(0,255,255,.3) 20%,
        transparent 40%),
        radial-gradient(circle at 72% 20%,
        rgba(255,80,210,.8) 0,
        rgba(110,0,255,.5) 30%,
        transparent 55%),
        linear-gradient(125deg,#00dbe5,#1263d7,#6500b8,#ff009c);
}
.profile-banner:before{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    border:20px solid rgba(255,255,255,.15);
    border-radius:50%;
    left:-50px;
    top:-30px;
}
.profile-banner:after{
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    border:22px solid rgba(255,255,255,.15);
    border-radius:50%;
    right:-30px;
    top:55px;
}
.profile{
    position:absolute;
    left:52px;
    top:38px;
    display:flex;
    align-items:center;
    gap:25px;
    z-index:2;
}
.avatar{
    width:125px;
    height:125px;
    border-radius:50%;
    border:7px solid white;
    object-fit:cover;
    background:#ddd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    font-weight:800;
    color:#135d60;
}
.profile-info{
    color:#fff;
}
.phone{
    font-size:23px;
    margin-bottom:10px;
}
.balance{
    font-size:37px;
    font-weight:600;
}
.tabs-wrapper{
    position:relative;
    margin:-62px 27px 0;
    z-index:10;
}
.tabs{
    min-height:125px;
    background:rgba(255,255,255,.94);
    border-radius:17px;
    box-shadow:0 4px 15px rgba(0,0,0,.05);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    align-items:center;
}
.tab{
    height:72px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    font-size:20px;
    border-right:2px solid #ddd;
    cursor:pointer;
}
.tab:last-child{
    border-right:0;
}
.tab.active{
    color:#df3038;
}
.tab-icon{
    font-size:29px;
}
.content{
    padding:40px 27px 80px;
}
.mission-summary{
    background:linear-gradient(110deg,#dce8f5,#aebfd8);
    border-radius:17px;
    min-height:220px;
    padding:30px 30px;
    display:grid;
    grid-template-columns:130px 1fr;
    align-items:center;
    gap:20px;
}
.medal{
    width:115px;
    height:115px;
    border-radius:50%;
    background:
        radial-gradient(circle,#fff 0 20%,transparent 21%),
        linear-gradient(90deg,#1548d6 0 25%,#ffd11b 25% 50%,#1646d5 50% 75%,#ffd11b 75%);
    border:8px solid rgba(255,255,255,.4);
    position:relative;
}
.medal:after{
    content:"★";
    position:absolute;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#d99b4d;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:35px;
    left:17px;
    top:17px;
}
.summary-title{
    font-size:27px;
    color:#656565;
    margin-bottom:15px;
}
.summary-line{
    font-size:18px;
    margin:10px 0;
}
.progress-area{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:25px;
}
.progress-percent{
    font-size:24px;
}
.progress{
    height:22px;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    flex:1;
}
.progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#00a9ff,#6e6cff);
    border-radius:20px;
    transition:width .4s ease;
}
.section-title{
    margin:35px 0 30px;
    font-size:25px;
    color:#666;
    display:flex;
    align-items:center;
    gap:12px;
}
.fire{
    font-size:35px;
}
.mission-item{
    position:relative;
    margin-left:65px;
    margin-bottom:30px;
}
.mission-item:before{
    content:"";
    position:absolute;
    left:-60px;
    top:0;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#ffc457;
}
.mission-item.done:before{
    background:#7ed957;
}
.mission-item .emoji-icon{
    position:absolute;
    left:-48px;
    top:11px;
    font-size:25px;
}
.mission-card{
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 3px 14px rgba(0,0,0,.04);
}
.valid-bet{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:19px;
    padding-bottom:25px;
    border-bottom:2px solid #eee;
}
.valid-bet strong{
    color:#555;
}
.reward{
    margin-top:25px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.reward-item{
    width:max-content;
    min-width:220px;
    padding:9px 18px;
    border-radius:25px;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.reward-bonus{
    background:#d9efff;
    color:#4b91bd;
}
.reward-icon{
    margin-right:8px;
}
.claim-btn{
    padding:8px 20px;
    border-radius:20px;
    border:none;
    background:#df3038;
    color:#fff;
    font-family:inherit;
    font-size:14px;
    cursor:pointer;
}
.claim-btn:disabled{
    background:#bbb;
    cursor:not-allowed;
}
.claim-btn.claimed{
    background:#7ed957;
}
.empty-msg{
    text-align:center;
    padding:40px;
    color:#999;
    font-size:16px;
}
.info-box{
    background:#fff;
    border-radius:18px;
    padding:26px;
    margin-top:35px;
    font-size:15px;
    line-height:1.9;
    color:#777;
    box-shadow:0 3px 14px rgba(0,0,0,.04);
}
.info-box b{
    color:#444;
}
@media(max-width:700px){
    .header{ height:82px; }
    .header-title{ font-size:25px; }
    .profile-banner{ height:220px; }
    .profile{ left:28px; top:30px; gap:15px; }
    .avatar{ width:92px; height:92px; }
    .phone{ font-size:17px; }
    .balance{ font-size:28px; }
    .tabs-wrapper{ margin:-45px 18px 0; }
    .tabs{ min-height:100px; }
    .tab{ font-size:14px; gap:5px; height:60px; }
    .tab-icon{ font-size:21px; }
    .content{ padding:25px 18px 60px; }
    .mission-summary{ grid-template-columns:85px 1fr; padding:22px; gap:15px; }
    .medal{ width:75px; height:75px; }
    .medal:after{ width:43px; height:43px; left:8px; top:8px; font-size:23px; }
    .summary-title{ font-size:19px; }
    .summary-line{ font-size:14px; }
    .progress-area{ grid-column:1 / -1; }
    .progress-percent{ font-size:19px; }
    .section-title{ font-size:21px; }
    .mission-item{ margin-left:40px; }
    .mission-item:before{ left:-40px; width:38px; height:38px; }
    .mission-item .emoji-icon{ left:-32px; top:7px; font-size:19px; }
    .mission-card{ padding:22px 18px; }
    .valid-bet{ font-size:15px; }
    .reward-item{ min-width:180px; font-size:13px; }
    .info-box{ padding:20px; font-size:13px; }
}
</style>
</head>
<body>
<?php $pt = __DIR__ . '/page_transition.php'; if (file_exists($pt)) { include $pt; } ?>

<header class="header">
    <a class="back-btn" href="/newprofile.php"></a>
    <div class="header-title">
        Mission
    </div>
</header>
<section class="profile-banner">
    <div class="profile">
        <div class="avatar" id="avatarBox">?</div>
        <div class="profile-info">
            <div class="phone" id="userMobile">লোড হচ্ছে...</div>
            <div class="balance" id="userBalance">৳ 0.00</div>
        </div>
    </div>
</section>
<div class="tabs-wrapper">
    <div class="tabs">
        <div class="tab active" data-cat="daily" onclick="switchTab('daily')">
            <span class="tab-icon">📅</span>
            <span>Daily</span>
        </div>
        <div class="tab" data-cat="weekly" onclick="switchTab('weekly')">
            <span class="tab-icon">💎</span>
            <span>Weekly</span>
        </div>
    </div>
</div>
<main class="content">
    <section class="mission-summary">
        <div class="medal"></div>
        <div>
            <div class="summary-title" id="categoryTitle">
                Daily Mission
            </div>
            <div class="summary-line">
                Milestones সম্পূর্ণ: <span id="milestoneCount">0/0</span>
            </div>
        </div>
        <div class="progress-area">
            <div class="progress-percent" id="progressPercent">
                0%
            </div>
            <div class="progress">
                <div class="progress-fill" id="mainProgress"></div>
            </div>
        </div>
    </section>
    <h2 class="section-title">
        <span class="fire">🔥</span>
        Mission-তালিকা
    </h2>

    <div id="missionContainer"></div>

    <div class="info-box">
        <b>🎯 Mission কীভাবে কাজ করে?</b><br><br>
        প্রতিটা Mission-এর একটা "Target" আছে (যেমন ৳100 Deposit করা, ৫টা Game খেলা)।
        তুমি স্বাভাবিকভাবে Website ব্যবহার করলেই (Deposit করলে, Game খেললে),
        Progress-Bar নিজে থেকেই বাড়তে থাকবে।<br><br>
        <b>উদাহরণ:</b> "আজ ৳100 Deposit করো" Mission-এ, তুমি ৳150 Deposit করলে
        সাথে সাথে Progress পূর্ণ (100%) হয়ে যাবে, আর "Claim করো" Button
        এসে যাবে — সেটা চাপলেই Bonus তোমার Balance-এ যোগ হবে।<br><br>
        <b>Daily Mission</b> প্রতিদিন রাত ১২টায় আবার নতুন করে শুরু হয়।
        <b>Weekly Mission</b> প্রতি সোমবার থেকে নতুন করে শুরু হয়।
    </div>
</main>

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

let allMissions = [];
let currentTab = 'daily';

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);
}

try {
    const payload = JSON.parse(atob(token.split('.')[1]));
    const name = payload.codechorkamukala || ('User#' + payload.id);
    document.getElementById('avatarBox').textContent = name.charAt(0).toUpperCase();
} catch (e) {}

async function loadUserData() {
    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/GetBalance.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) {
            document.getElementById('userBalance').textContent = '৳ ' + Number(data.data.amount).toLocaleString('en-IN', {minimumFractionDigits: 2});
        }
    } catch (e) {}
}

async function loadMobile() {
    try {
        const res = await fetch('/get_user_photo.php', { headers: { 'Authorization': 'Bearer ' + token } });
        const data = await res.json();
        if (data.mobile) document.getElementById('userMobile').textContent = data.mobile;
    } catch (e) {}
}

function switchTab(cat) {
    currentTab = cat;
    document.querySelectorAll('.tab').forEach(t => {
        t.classList.toggle('active', t.dataset.cat === cat);
    });
    document.getElementById('categoryTitle').textContent = cat === 'daily' ? 'Daily Mission' : 'Weekly Mission';
    renderMissions();
}

function renderMissions() {
    const container = document.getElementById('missionContainer');
    const filtered = allMissions.filter(m => m.category === currentTab);

    if (filtered.length === 0) {
        container.innerHTML = '<div class="empty-msg">এই Category-তে এখন কোনো Mission নেই।</div>';
        document.getElementById('milestoneCount').textContent = '0/0';
        document.getElementById('progressPercent').textContent = '0%';
        document.getElementById('mainProgress').style.width = '0%';
        return;
    }

    let completedCount = 0;
    container.innerHTML = '';

    filtered.forEach(m => {
        if (m.already_claimed) completedCount++;

        let btnHtml = '';
        if (m.already_claimed) {
            btnHtml = '<button class="claim-btn claimed" disabled>✓ নেওয়া হয়েছে</button>';
        } else if (m.can_claim) {
            btnHtml = `<button class="claim-btn" onclick="claimMission(${m.id})">Claim করো</button>`;
        } else {
            btnHtml = '<button class="claim-btn" disabled>লক করা</button>';
        }

        const div = document.createElement('div');
        div.className = 'mission-item' + (m.is_complete ? ' done' : '');
        div.innerHTML = `
            <span class="emoji-icon">${m.icon}</span>
            <div class="mission-card">
                <div class="valid-bet">
                    <span>${m.title}:</span>
                    <strong>${m.progress} / ${m.target}</strong>
                </div>
                <div class="reward">
                    <div class="reward-item reward-bonus">
                        <span><span class="reward-icon">💵</span>Bonus : ৳ ${m.reward}</span>
                        ${btnHtml}
                    </div>
                </div>
            </div>
        `;
        container.appendChild(div);
    });

    const pct = filtered.length > 0 ? Math.round((completedCount / filtered.length) * 100) : 0;
    document.getElementById('milestoneCount').textContent = `${completedCount}/${filtered.length}`;
    document.getElementById('progressPercent').textContent = pct + '%';
    document.getElementById('mainProgress').style.width = pct + '%';
}

async function loadMissions() {
    try {
        const res = await fetch('/mission_api.php?action=list', {
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json();

        if (data.code !== 0) {
            document.getElementById('missionContainer').innerHTML = `<div class="empty-msg">${data.msg}</div>`;
            return;
        }

        allMissions = data.missions;
        renderMissions();
    } catch (e) {
        document.getElementById('missionContainer').innerHTML = `<div class="empty-msg">সমস্যা হয়েছে: ${e.message}</div>`;
    }
}

async function claimMission(missionId) {
    try {
        const res = await fetch('/mission_api.php?action=claim', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
            body: JSON.stringify({ mission_id: missionId })
        });
        const data = await res.json();

        if (data.code === 0) {
            alert(data.msg);
            loadMissions();
            loadUserData();
        } else {
            alert(data.msg);
        }
    } catch (e) {
        alert('সমস্যা হয়েছে: ' + e.message);
    }
}

loadUserData();
loadMobile();
loadMissions();
</script>
</body>
</html>
