<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rebate Interface</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .mobile-container {
            width: 100%;
            max-width: 412px;
            background-color: #f7f7f9;
            border: 1px solid #ddd;
            position: relative;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        /* Top Header */
        .top-nav {
            background-color: #26272b;
            color: white;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
        }

        .url-bar {
            background-color: #1e1f23;
            border-radius: 15px;
            padding: 6px 12px;
            display: flex;
            align-items: center;
            flex-grow: 1;
            margin: 0 10px;
            color: #d1d1d1;
            font-size: 13px;
        }

        /* Page Header */
        .page-header {
            background-color: #ffffff;
            padding: 12px;
            text-align: center;
            color: #3bb2e6;
            font-size: 16px;
            font-weight: bold;
            position: relative;
            border-bottom: 1px solid #eee;
        }

        .back-btn {
            position: absolute;
            left: 15px;
            top: 12px;
            color: #b0b0b0;
            font-size: 16px;
            text-decoration: none;
        }

        /* Tabs */
        .tabs {
            display: flex;
            background-color: #ffffff;
            border-bottom: 1px solid #e0e0e0;
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 15px;
            color: #555;
            cursor: pointer;
        }

        .tab.active {
            color: #11a0dc;
            border-bottom: 2px solid #11a0dc;
            font-weight: bold;
        }

        /* Data List */
        .list-container {
            padding: 15px 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .list-row {
            display: flex;
            background: #ffffff;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            height: 42px;
            align-items: center;
        }

        .label-box {
            width: 100px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px 0 0 4px;
        }

        .value-box {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 15px;
            font-size: 16px;
            font-weight: 500;
        }

        .right-border {
            width: 5px;
            height: 100%;
        }

        /* Colors */
        .bg-pink { background-color: #ff6b81; }
        .text-orange { color: #f38b55; }
        .border-orange { background-color: #f38b55; }

        .bg-blue { background-color: #5c72ea; }
        .border-sky { background-color: #63c2de; }

        .bg-purple { background-color: #c77dff; }
        .border-purple { background-color: #c77dff; }

        .bg-teal { background-color: #1cc88a; }
        .border-teal { background-color: #1cc88a; }

        .bg-rose { background-color: #ff6584; }
        .border-pink { background-color: #e83e8c; }

        .bg-salmon { background-color: #ff6b6b; }

        .bg-indigo { background-color: #5865f2; }

        .text-light-orange { color: #f38b55; }

        /* Claim Button */
        .claim-btn {
            margin: 40px 12px 20px;
            background-color: #e0e0e0;
            color: #ffffff;
            text-align: center;
            padding: 12px;
            border-radius: 20px;
            font-size: 16px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }

        /* Footer Alert */
        .footer-alert {
            background-color: #ffebe9;
            color: #d9534f;
            padding: 8px 12px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-top: 1px solid #ffd6d6;
        }

        .alert-icon {
            background-color: #d9534f;
            color: white;
            border-radius: 50%;
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="mobile-container">
    <!-- Page Header -->
    <div class="page-header">
        <a href="/newprofile.php" class="back-btn">&lt;</a>
        রিবেট
    </div>

    <!-- Tabs -->
    <div class="tabs">
        <div class="tab active" id="tabManual" onclick="switchRebateTab('manual')">ম্যানুয়াল রিবেট</div>
        <div class="tab" id="tabHistory" onclick="switchRebateTab('history')">রিবেট ইতিহাস</div>
    </div>

    <!-- History Container (প্রথমে লুকানো) -->
    <div id="historyContainer" style="display:none; padding:15px 12px;"></div>

    <!-- List Items -->
    <div class="list-container manual-tab-content" id="manualContainer">
        <!-- Row 1 -->
        <div class="list-row">
            <div class="label-box bg-pink">তারিখ</div>
            <div class="value-box text-orange" id="todayDate">2026-08-08</div>
            <div class="right-border border-orange"></div>
        </div>

        <!-- Row 2 -->
        <div class="list-row">
            <div class="label-box bg-blue">স্লট</div>
            <div class="value-box text-light-orange" id="catSlot">0.00</div>
            <div class="right-border border-sky"></div>
        </div>

        <!-- Row 3 -->
        <div class="list-row">
            <div class="label-box bg-purple">মাছ</div>
            <div class="value-box text-light-orange" id="catFish">0.00</div>
            <div class="right-border border-purple"></div>
        </div>

        <!-- Row 4 -->
        <div class="list-row">
            <div class="label-box bg-teal">লাইভ</div>
            <div class="value-box text-light-orange" id="catLive">0.00</div>
            <div class="right-border border-teal"></div>
        </div>

        <!-- Row 5 -->
        <div class="list-row">
            <div class="label-box bg-rose">খেলাধুলা</div>
            <div class="value-box text-light-orange" id="catSport">0.00</div>
            <div class="right-border border-pink"></div>
        </div>

        <!-- Row 6 -->
        <div class="list-row">
            <div class="label-box bg-salmon">পোকার / অন্যান্য</div>
            <div class="value-box text-light-orange" id="catOther">0.00</div>
            <div class="right-border border-orange"></div>
        </div>

        <!-- Row 7 -->
        <div class="list-row">
            <div class="label-box bg-indigo">মোট (আজকের)</div>
            <div class="value-box text-light-orange" id="totalBetToday">0.00</div>
            <div class="right-border border-sky"></div>
        </div>
    </div>

    <!-- ✅ নতুন যোগ — Turnover-Rebate Summary -->
    <div class="manual-tab-content" style="background:#fff; border-radius:12px; margin:16px 12px; padding:16px; box-shadow:0 1px 5px rgba(0,0,0,0.06);">
        <div style="font-size:13px; color:#888; margin-bottom:6px;">সর্বমোট Turnover (সব সময়ের)</div>
        <div style="font-size:20px; font-weight:700; color:#333; margin-bottom:12px;" id="totalTurnover">৳0.00</div>
        <div style="font-size:13px; color:#888; margin-bottom:6px;">Rebate Rate: <b id="rebateRate" style="color:#11a0dc;">0.5%</b></div>
        <div style="font-size:13px; color:#888;">Claim করার মতো Rebate</div>
        <div style="font-size:24px; font-weight:800; color:#22a06b;" id="availableRebate">৳0.00</div>
    </div>

    <div id="rebateMsg" class="manual-tab-content" style="display:none; text-align:center; font-size:12px; padding:0 12px 10px;"></div>

    <!-- Claim Button -->
    <div class="claim-btn manual-tab-content" id="claimRebateBtn" onclick="claimRebate()" style="cursor:pointer;">
        দাবি
    </div>

    <!-- Footer Warning -->
    <div class="footer-alert">
        <span class="alert-icon">!</span>
        <span>অন্তর্বর্তীকরণ: উপরের ডেটা GMT + 8 ভিত্তিক</span>
    </div>
</div>


<script>
// ✅ নতুন যোগ — আজকের তারিখ, আর আজকের মোট Bet-Amount
// (Real Data, game_bet_logs থেকে) দেখানো
const token = localStorage.getItem('token');
if (!token) window.location.href = '/newlogin.php';

document.getElementById('todayDate').textContent = new Date().toISOString().split('T')[0];

async function loadTodayTotal() {
    try {
        const res = await fetch('/get_rebate_breakdown.php', {
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json();
        if (data.code !== 0) return;

        document.getElementById('catSlot').textContent = data.breakdown.slot.toFixed(2);
        document.getElementById('catFish').textContent = data.breakdown.fish.toFixed(2);
        document.getElementById('catLive').textContent = data.breakdown.live.toFixed(2);
        document.getElementById('catSport').textContent = data.breakdown.sport.toFixed(2);
        document.getElementById('catOther').textContent = data.breakdown.other.toFixed(2);
        document.getElementById('totalBetToday').textContent = data.total.toFixed(2);
    } catch (e) {}
}

loadTodayTotal();

// ✅ নতুন যোগ — Turnover-Rebate Summary Load করা
async function loadRebateSummary() {
    try {
        const res = await fetch('/rebate_turnover_api.php?action=summary', {
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json();
        if (data.code !== 0) return;

        document.getElementById('totalTurnover').textContent = '৳' + data.total_turnover.toLocaleString('en-IN', {minimumFractionDigits: 2});
        document.getElementById('rebateRate').textContent = data.rebate_rate + '%';
        document.getElementById('availableRebate').textContent = '৳' + data.available_to_claim.toLocaleString('en-IN', {minimumFractionDigits: 2});
    } catch (e) {}
}

async function claimRebate() {
    const btn = document.getElementById('claimRebateBtn');
    const msgBox = document.getElementById('rebateMsg');
    btn.textContent = 'Claim হচ্ছে...';

    try {
        const res = await fetch('/rebate_turnover_api.php?action=claim', {
            method: 'POST',
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json();

        msgBox.style.display = 'block';
        msgBox.style.color = data.code === 0 ? '#22a06b' : '#d9534f';
        msgBox.textContent = data.msg;

        if (data.code === 0) loadRebateSummary();
    } catch (e) {
        msgBox.style.display = 'block';
        msgBox.style.color = '#d9534f';
        msgBox.textContent = 'একটা সমস্যা হয়েছে: ' + e.message;
    }

    btn.textContent = 'দাবি';
}

loadRebateSummary();

// ✅ নতুন যোগ — "রিবেট ইতিহাস" Tab Functional করা
function switchRebateTab(tab) {
    const manualEls = document.querySelectorAll('.manual-tab-content');
    const historyEl = document.getElementById('historyContainer');

    if (tab === 'manual') {
        manualEls.forEach(el => el.style.display = '');
        historyEl.style.display = 'none';
        document.getElementById('tabManual').classList.add('active');
        document.getElementById('tabHistory').classList.remove('active');
    } else {
        manualEls.forEach(el => el.style.display = 'none');
        historyEl.style.display = 'block';
        document.getElementById('tabManual').classList.remove('active');
        document.getElementById('tabHistory').classList.add('active');
        loadRebateHistory();
    }
}

async function loadRebateHistory() {
    const container = document.getElementById('historyContainer');
    container.innerHTML = '<div style="text-align:center; color:#999; padding:20px;">লোড হচ্ছে...</div>';

    try {
        const res = await fetch('/rebate_history_api.php', {
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json();

        if (!data.history || data.history.length === 0) {
            container.innerHTML = '<div style="text-align:center; color:#999; padding:30px;">এখনো কোনো Rebate Claim করা হয়নি।</div>';
            return;
        }

        container.innerHTML = '';
        data.history.forEach(h => {
            const div = document.createElement('div');
            div.style.cssText = 'background:#fff; border-radius:10px; padding:14px; margin-bottom:10px; box-shadow:0 1px 5px rgba(0,0,0,0.06); display:flex; justify-content:space-between; align-items:center;';
            div.innerHTML = `
                <div>
                    <div style="font-size:13px; color:#333; font-weight:600;">Turnover: ৳${h.turnover_amount}</div>
                    <div style="font-size:11px; color:#999; margin-top:3px;">${h.claimed_at}</div>
                </div>
                <div style="font-size:16px; font-weight:800; color:#22a06b;">+৳${h.rebate_amount}</div>
            `;
            container.appendChild(div);
        });
    } catch (e) {
        container.innerHTML = `<div style="text-align:center; color:#d9534f; padding:20px;">সমস্যা হয়েছে: ${e.message}</div>`;
    }
}
</script>
</body>
</html>
