<?php
session_start();
require_once 'config.php';

// Check Login
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}
$cacheBust = time(); // Images ke cache hatane ke liye
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>VIP - Original 91Club</title>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <style>
        /* ORIGINAL BAHNSCHRIFT FONT */
        @font-face {
            font-family: 'Bahnschrift';
            src: url('https://91appt.com/assets/woff2/bahnschrift-610d57ac.woff2') format('woff2');
            font-display: swap;
        }

        /* EXACT CSS VARIABLES FROM YOUR DUMP */
        :root {
            --van-white: #fff;
            --van-gray-1: #f7f8fa;
            --van-gray-3: #ebedf0;
            --van-gray-6: #969799;
            --van-red: #ee0a24;
            --main-color: #f95959;
            --text_color_L1: #1E2637;
            --text_color_L2: #768096;
            --bg_color_L2: #FFF;
            --f13b4d11-currentFontFamily: 'Roboto', 'Inter', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--f13b4d11-currentFontFamily); -webkit-tap-highlight-color: transparent;}
        body { background: var(--van-gray-1); color: var(--text_color_L2); max-width: 480px; margin: 0 auto; padding-bottom: 30px; }
        .bahnschrift { font-family: 'Bahnschrift', sans-serif !important; }
        [v-cloak] { display: none; } /* Prevents Vue flickering */

        /* HEADER */
        .vip-header { background: linear-gradient(180deg, #FF6C6B 0%, #FF4A4A 100%); padding-bottom: 40px; border-radius: 0 0 24px 24px; color: #fff; }
        .navbar-fixed { height: 46px; display: flex; align-items: center; justify-content: center; position: relative; }
        .navbar__content-left { position: absolute; left: 15px; font-size: 20px; cursor: pointer; }
        .navbar__content-title { font-size: 16px; font-weight: 500; }
        
        .vip-header-wrapper { display: flex; align-items: center; padding: 15px 20px; gap: 15px; }
        .userAvatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
        .vip-header-wrapper-name h3 { font-size: 16px; font-weight: 600; color: #fff; }
        .vip-tag { display: inline-block; background: linear-gradient(90deg, #A8B9E0, #D2DEED); color: #1A3E7B; padding: 2px 8px; border-radius: 10px; font-weight: bold; font-style: italic; font-size: 11px; margin-bottom:4px;}

        /* CONTENT */
        .vip-content { margin-top: -25px; padding: 0 15px; position: relative; z-index: 2; }
        .vip-content-empirical { background: var(--bg_color_L2); border-radius: 12px; display: flex; justify-content: space-around; padding: 15px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.03); text-align: center; }
        .vip-content-empirical p { font-size: 12px; color: var(--text_color_L2); }
        .vip-content-empirical .red { color: var(--van-red); font-size: 16px; font-weight: bold; margin-bottom: 4px;}
        .vip-content-empirical .timeTop { color: var(--text_color_L1); font-size: 16px; font-weight: bold; margin-bottom: 4px;}
        .vip-content-tip { font-size: 11px; color: var(--van-gray-6); text-align: center; margin: 15px 0; }

        /* VIP CARD SWIPER */
        .vip-content-card { margin-bottom: 20px; }
        .itemInfo { border-radius: 16px; padding: 20px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 6px 15px rgba(0,0,0,0.1);}
        .level1 { background: linear-gradient(135deg, #9BAED8 0%, #7A90C2 100%); }
        .level2 { background: linear-gradient(135deg, #E6A265 0%, #D67D26 100%); }
        .level3 { background: linear-gradient(135deg, #F38585 0%, #F05C5C 100%); }
        .level4 { background: linear-gradient(135deg, #74C8ED 0%, #32B6E8 100%); }
        .level5 { background: linear-gradient(135deg, #EA96D4 0%, #EA6ACA 100%); }
        
        .itemInfo-head h1 { font-style: italic; font-size: 24px; font-weight: bold; margin-bottom: 5px; }
        .itemInfo-head .bgg { background: rgba(255,255,255,0.2); font-size: 10px; padding: 2px 8px; border-radius: 10px; margin-left: 10px; vertical-align: middle;}
        .itemInfo-head p { font-size: 12px; opacity: 0.9; }
        
        .van-progress { background: rgba(255,255,255,0.3); height: 8px; border-radius: 4px; margin: 10px 0; }
        .van-progress__portion { background: linear-gradient(90deg, #fffce7 0%, #ffc821 100%); height: 100%; display: block; border-radius: 4px; transition: width 0.5s ease;}
        .itemInfo-bottom { margin-top: 20px; }
        .itemInfo-bottom .first { display: flex; justify-content: space-between; font-size: 11px; opacity: 0.9; }

        /* BENEFITS SECTION */
        .vip-content-weal, .vip-content-myWelfare { background: var(--bg_color_L2); border-radius: 12px; padding: 15px; margin-bottom: 15px; }
        .vip-content-weal-head { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--van-gray-3); padding-bottom: 12px; margin-bottom: 15px; }
        .vip-content-weal-head h1 { font-size: 15px; color: var(--text_color_L1); font-weight: 600; }
        .svg-icon { width: 20px; height: 20px; }

        .vip-content-weal-con { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
        .vip-content-weal-con img { width: 45px; height: 45px; margin-right: 12px; object-fit: contain; }
        .vip-content-weal-con h2 { font-size: 14px; color: var(--text_color_L1); font-weight: 500; margin-bottom: 4px;}
        .vip-content-weal-con span { font-size: 11px; color: var(--text_color_L2); line-height: 1.2; }
        .weal-val { border: 1px solid var(--van-red); color: var(--van-red); padding: 3px 10px; border-radius: 15px; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 4px;}
        .weal-val img { width: 14px; height: 14px; margin-right: 0;}

        /* MY BENEFITS CARDS */
        .cards-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .card { border: 1px solid var(--van-gray-3); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;}
        .card-head { background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%); height: 75px; display: flex; align-items: center; justify-content: center; position: relative; }
        .card-head img { height: 50px; object-fit: contain; }
        .card-head.orange { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
        .card-head-mon { position: absolute; bottom: 5px; left: 10px; color: #fff; font-size: 12px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.3); display: flex; align-items: center; gap:2px;}
        .card-head-mon img { width: 12px; height: 12px; margin-right: 0;}
        .card-bottom { padding: 10px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
        .card-bottom h1 { font-size: 12px; color: var(--text_color_L1); margin-bottom: 2px;}
        .card-bottom span { font-size: 9px; color: var(--text_color_L2); display: block; margin-bottom: 10px;}
        .btn-received { background: var(--van-gray-3); color: var(--van-gray-6); width: 100%; border: none; padding: 6px; border-radius: 15px; font-size: 11px; font-weight: bold; }

        /* TABS & HISTORY */
        .vip-content-recordVsrule { background: var(--bg_color_L2); border-radius: 12px; overflow: hidden; }
        .vip-content-recordVsrule-head { display: flex; border-bottom: 1px solid var(--van-gray-3); }
        .vip-content-recordVsrule-head button { flex: 1; padding: 15px 0; background: none; border: none; font-size: 14px; color: var(--text_color_L2); cursor: pointer; transition: 0.3s;}
        .vip-content-recordVsrule-head button.active { color: var(--van-red); position: relative; font-weight: bold; }
        .vip-content-recordVsrule-head button.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30%; height: 3px; background: var(--van-red); border-radius: 3px 3px 0 0; }

        .item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid var(--van-gray-1); }
        .item-left span { display: block; }
        .item-left .title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
        .item-left .desc { font-size: 11px; color: var(--text_color_L2); line-height: 1.3;}
        .item-left .date { font-size: 10px; color: #ccc; margin-top: 4px;}
        
        .text-blue { color: #1989fa; }
        .text-green { color: #07c160; }
        .text-red { color: #ee0a24; }
        .text-yellow { color: #f39c12; }
    </style>
</head>
<body>

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="icon-diamond" viewBox="0 0 48 49" fill="none">
            <path d="M12 8.07227H36L44 18.1617L24 42.3762L4 18.1617L12 8.07227Z" fill="var(--main-color)" stroke="var(--main-color)" stroke-width="2" stroke-linejoin="round"/>
            <path d="M4 18.1602H44" stroke="white" stroke-width="2" stroke-linejoin="round"/>
            <path d="M24 42.3747L16 18.1602" stroke="white" stroke-width="2" stroke-linejoin="round"/>
            <path d="M24 42.3747L32 18.1602" stroke="white" stroke-width="2" stroke-linejoin="round"/>
            <path d="M8 13.1152L4 18.1599L24 42.3745L44 18.1599L40 13.1152" stroke="var(--main-color)" stroke-width="2" stroke-linejoin="round"/>
        </symbol>
        <symbol id="icon-crown" viewBox="0 0 48 49" fill="none">
            <path d="M33.54 40.38H14.46C13.62 40.38 12.86 39.84 12.58 39.06L4.26 15.76C3.6 13.9 5.72 12.32 7.3 13.46L15.3 19.18C16.36 19.94 17.88 19.48 18.34 18.26L22.12 8.18C22.76 6.44 25.22 6.44 25.86 8.18L29.64 18.26C29.74 18.55 29.92 18.81 30.14 19.02C30.36 19.23 30.63 19.39 30.93 19.48C31.22 19.56 31.53 19.58 31.84 19.53C32.14 19.48 32.43 19.36 32.68 19.18L40.68 13.46C42.28 12.32 44.38 13.92 43.72 15.76L35.4 39.06C35.14 39.84 34.38 40.38 33.54 40.38Z" fill="var(--main-color)"/>
            <path d="M29 31.92H19C18.18 31.92 17.5 31.24 17.5 30.42C17.5 29.6 18.18 28.92 19 28.92H29C29.82 28.92 30.5 29.6 30.5 30.42C30.5 31.24 29.82 31.92 29 31.92Z" fill="white"/>
        </symbol>
    </svg>

    <div id="app" class="vip" v-cloak>
        <div class="vip-header">
            <div class="navbar-fixed">
                <div class="navbar__content-left" onclick="window.history.back()">❮</div>
                <div class="navbar__content-title">VIP</div>
            </div>
            <div class="vip-header-wrapper">
                <img src="/assets/png/1-a6662edb.webp?v=<?= $cacheBust ?>" class="userAvatar" onerror="this.src='assets/images/face.png'">
                <div class="vip-header-wrapper-name">
                    <div class="vip-tag bahnschrift">VIP {{ user.vip_level }}</div>
                    <h3 class="bahnschrift">{{ user.username }}</h3>
                </div>
            </div>
        </div>

        <div class="vip-content">
            <div class="vip-content-empirical">
                <div>
                    <p class="red bahnschrift">{{ user.exp }} EXP</p>
                    <p>My experience</p>
                </div>
                <div>
                    <p class="timeTop bahnschrift">0 Days</p>
                    <p>Payout time</p>
                </div>
            </div>
            <div class="vip-content-tip">VIP level rewards are settled at 2:00 am on the 1st of every month</div>

            <div class="vip-content-card">
                <div class="swiper my-swipe">
                    <div class="swiper-wrapper">
                        
                        <div class="swiper-slide itemInfo" :class="'level'+(lvl.level > 5 ? 5 : lvl.level)" v-for="lvl in levels" :key="lvl.level">
                            <div class="itemInfo-head">
                                <h1 class="bahnschrift">VIP{{ lvl.level }} 
                                    <span class="bgg" v-if="lvl.is_achieved">Achieved</span>
                                </h1>
                                <p>Dear VIP{{ lvl.level }} customer</p>
                            </div>
                            <div class="itemInfo-bottom">
                                <div class="first">
                                    <span>Level maintenance</span>
                                    <span class="bahnschrift">{{ lvl.progress_percent }}% Completed</span>
                                </div>
                                <div class="van-progress">
                                    <span class="van-progress__portion" :style="{ width: lvl.progress_percent + '%' }"></span>
                                </div>
                                <div class="bahnschrift" style="font-size: 12px;">{{ user.exp }}/{{ lvl.required_exp }}</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="vip-content-weal">
                <div class="vip-content-weal-head">
                    <svg class="svg-icon"><use href="#icon-diamond"></use></svg>
                    <h1 class="bahnschrift">VIP{{ user.vip_level }} Benefits level</h1>
                </div>
                
                <div class="vip-content-weal-con ar-1px-b">
                    <img src="/assets/png/1-fd9896f4.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                    <div style="flex:1;">
                        <h2>Level up rewards</h2>
                        <span>Each account can only receive 1 time</span>
                    </div>
                    <div class="weal-val bahnschrift">
                        <img src="/assets/png/gold-4a60a059.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                        {{ benefits.level_up_bonus }}
                    </div>
                </div>

                <div class="vip-content-weal-con ar-1px-b">
                    <img src="/assets/png/2-0a41a908.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                    <div style="flex:1;">
                        <h2>Monthly reward</h2>
                        <span>Each account can only receive 1 time per month</span>
                    </div>
                    <div class="weal-val bahnschrift">
                        <img src="/assets/png/gold-4a60a059.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                        {{ benefits.monthly_bonus }}
                    </div>
                </div>

                <div class="vip-content-weal-con">
                    <img src="/assets/png/5-5e6a64b1.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                    <div style="flex:1;">
                        <h2>Rebate rate</h2>
                        <span>Increase income of rebate</span>
                    </div>
                    <div class="weal-val bahnschrift" style="background:#fffbe8; border:none; padding:4px 10px;">
                        {{ benefits.rebate_rate }}
                    </div>
                </div>
            </div>

            <div class="vip-content-myWelfare">
                <div class="vip-content-weal-head">
                    <svg class="svg-icon"><use href="#icon-crown"></use></svg>
                    <h1>My benefits</h1>
                </div>
                <div class="cards-wrapper">
                    <div class="card">
                        <div class="card-head">
                            <img src="/assets/png/welfare1-eee87ee1.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                            <div class="card-head-mon bahnschrift">
                                <img src="/assets/png/gold-4a60a059.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                                {{ benefits.level_up_bonus }}
                            </div>
                        </div>
                        <div class="card-bottom">
                            <h1>Level up rewards</h1>
                            <span>Each account can only receive 1 time</span>
                            <button class="btn-received">Received</button>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-head orange">
                            <img src="/assets/png/welfare2-cf757d28.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                            <div class="card-head-mon bahnschrift">
                                <img src="/assets/png/gold-4a60a059.webp?v=<?= $cacheBust ?>" onerror="this.style.display='none'">
                                {{ benefits.monthly_bonus }}
                            </div>
                        </div>
                        <div class="card-bottom">
                            <h1>Monthly reward</h1>
                            <span>Each account can only receive 1 time per month</span>
                            <button class="btn-received">Received</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="vip-content-recordVsrule">
                <div class="vip-content-recordVsrule-head">
                    <button :class="{'active': activeTab === 'history'}" @click="activeTab = 'history'">History</button>
                    <button :class="{'active': activeTab === 'rules'}" @click="activeTab = 'rules'">Rules</button>
                </div>
                
                <div class="vip-content-recordVsrule-con" v-show="activeTab === 'history'">
                    <div v-if="history.length === 0" style="text-align:center; padding:30px; color:#999; font-size:12px;">No Data</div>
                    
                    <div class="item" v-for="(hist, index) in history" :key="index">
                        <div class="item-left">
                            <span class="title" :class="getColorClass(hist.type)">{{ hist.title }}</span>
                            <span class="desc">{{ hist.description }}</span>
                            <span class="date bahnschrift">{{ hist.created_at }}</span>
                        </div>
                        <div class="item-right">
                            <span class="bahnschrift" :class="hist.exp_change > 0 ? 'text-green' : 'text-red'" style="font-size:14px; font-weight:bold;">
                                {{ hist.exp_change > 0 ? '+' : '' }}{{ hist.exp_change }} EXP
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="vip-content-recordVsrule-con" v-show="activeTab === 'rules'" style="padding: 15px; font-size: 12px; color: var(--text_color_L2); line-height: 1.8;">
                    <p>1. VIP level rewards are settled automatically.</p>
                    <p>2. Experience points (EXP) are generated by valid bets (₹1 = 1 EXP) or successful deposits.</p>
                    <p>3. If level maintenance is not completed, EXP will be deducted.</p>
                </div>
            </div>

        </div>
    </div>

    <script>
        const { createApp, ref, onMounted, nextTick } = Vue;

        createApp({
            setup() {
                const activeTab = ref('history');
                const user = ref({ username: 'Loading...', vip_level: 1, exp: 0 });
                // Note: The values here will instantly update from getvip.php
                const benefits = ref({ level_up_bonus: 0, monthly_bonus: 0, rebate_rate: '0.00%' });
                const progress = ref({ next_level_exp: 1000, percentage: 0 });
                const levels = ref([]);
                const history = ref([]);

                const fetchData = async () => {
                    try {
                        const res = await fetch('getvip.php');
                        const data = await res.json();
                        
                        if(data.success) {
                            user.value = data.user;
                            benefits.value = data.benefits;
                            progress.value = data.progress;
                            levels.value = data.levels_data;
                            history.value = data.history;

                            // Initialize Swiper ONLY AFTER Vue renders the v-for loop
                            nextTick(() => {
                                new Swiper('.my-swipe', {
                                    slidesPerView: 1.1,
                                    spaceBetween: 15,
                                    centeredSlides: false,
                                });
                            });
                        }
                    } catch(e) {
                        console.error('API Error');
                    }
                };

                const getColorClass = (type) => {
                    if(type === 'bonus') return 'text-blue';
                    if(type === 'received') return 'text-green';
                    if(type === 'downgrade') return 'text-yellow';
                    if(type === 'maintenance') return 'text-red';
                    return 'text-blue';
                };

                onMounted(() => {
                    fetchData();
                });

                return { activeTab, user, benefits, progress, levels, history, getColorClass };
            }
        }).mount('#app');
    </script>
</body>
</html>