<?php
session_start();
if (!isset($_SESSION['user_id'])) { header("Location: login.php"); exit; }
?>
<!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>Deposit - 91Club Original</title>
    
    <script src="https://unpkg.com/vue@3/dist/vue.global.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;
        }

        :root {
            --van-gray-1: #f7f8fa;
            --van-gray-3: #ebedf0;
            --van-red: #f3595b;
            --text-dark: #333333;
            --text-muted: #999999;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent;}
        body { background: var(--van-gray-1); color: var(--text-dark); max-width: 480px; margin: 0 auto; padding-top: 46px; padding-bottom: 80px; }
        .bahnschrift { font-family: 'Bahnschrift', sans-serif !important; }
        [v-cloak] { display: none; }

        /* HEADER */
        .header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 46px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; z-index: 99;}
        .back-icon { font-size: 20px; color: #666; cursor: pointer; }
        .title { font-size: 16px; font-weight: 500; }
        .history-link { font-size: 13px; color: var(--text-muted); cursor: pointer; }

        /* BALANCE CARD */
        .card-wrap { padding: 15px; }
        .balance-card { background: linear-gradient(90deg, #ff7b7b, #f3595b); border-radius: 12px; padding: 20px 15px; color: #fff; position: relative; }
        .bc-title { font-size: 13px; display: flex; align-items: center; gap: 5px; opacity: 0.9; margin-bottom: 8px; }
        .bc-amt { font-size: 32px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
        .refresh-icon { width: 18px; height: 18px; fill: #fff; cursor: pointer; }
        .spin { animation: spin 0.6s linear; }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        .card-bg-icon { position: absolute; right: 10px; bottom: 10px; font-size: 20px; opacity: 0.3; letter-spacing: 2px;}

        /* METHODS GRID */
        .methods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 15px 15px; }
        .method-item { background: #fff; border-radius: 8px; padding: 12px 5px; text-align: center; cursor: pointer; border: 1px solid transparent; transition: 0.2s; position: relative; }
        .method-item.active { background: linear-gradient(180deg, #ff7b7b, #f3595b); color: #fff; box-shadow: 0 4px 8px rgba(243, 89, 91, 0.3); }
        .method-icon { width: 36px; height: 36px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; }
        .method-name { font-size: 12px; font-weight: 500; color: inherit; }
        .bonus-tag { position: absolute; top: -5px; right: -5px; background: #ff976a; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px 10px 10px 0; font-weight: bold; border: 1px solid #fff;}

        /* SELECT CHANNEL */
        .section-title { font-size: 15px; font-weight: 600; padding: 10px 15px; display: flex; align-items: center; gap: 5px; }
        .section-title svg { width: 18px; height: 18px; fill: var(--van-red); }
        .channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 15px 15px; }
        .channel-item { background: #fff; border-radius: 8px; padding: 15px 10px; text-align: left; cursor: pointer; border: 1px solid transparent; transition: 0.2s; }
        .channel-item.active { background: #fff1f1; border-color: var(--van-red); }
        .channel-name { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px;}
        .channel-item.active .channel-name { color: var(--van-red); }
        .channel-limit { font-size: 11px; color: var(--text-muted); }

        /* DEPOSIT AMOUNT */
        .amt-wrap { padding: 0 15px 20px; }
        .input-box { background: #fff; border-radius: 8px; display: flex; align-items: center; padding: 10px 15px; margin-bottom: 15px; }
        .input-box span { font-size: 20px; color: var(--van-red); font-weight: 500; margin-right: 10px; }
        .input-box input { border: none; outline: none; width: 100%; font-size: 20px; color: var(--text-dark); }
        .input-box input::placeholder { color: #ccc; font-size: 15px; font-family: -apple-system, sans-serif; }
        
        .amt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .amt-btn { background: #fff; border: 1px solid var(--van-gray-3); border-radius: 4px; padding: 10px 0; text-align: center; font-size: 15px; font-weight: 500; cursor: pointer; color: var(--text-dark); transition: 0.2s; }
        .amt-btn.active { background: var(--van-red); color: #fff; border-color: var(--van-red); }

        /* BOTTOM BAR */
        .bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: #fff; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100;}
        .bb-info { display: flex; flex-direction: column; gap: 2px; }
        .bb-lbl { font-size: 11px; color: var(--text-muted); }
        .bb-val { font-size: 14px; font-weight: 600; color: var(--text-dark); }
        .btn-submit { background: var(--van-gray-3); color: #999; border: none; padding: 12px 30px; border-radius: 20px; font-size: 15px; font-weight: 600; cursor: not-allowed; transition: 0.3s; }
        .btn-submit.active { background: linear-gradient(90deg, #ff7b7b, #f3595b); color: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(243, 89, 91, 0.3); }

        /* Generic Icons */
        .ic-upi { fill: currentColor; }
    </style>
</head>
<body>

    <div id="app" v-cloak>
        <div class="header">
            <div class="back-icon" @click="goBack()">❮</div>
            <div class="title">Deposit</div>
            <a href="deposit_history.php" class="history-link">Deposit history</a>
        </div>

        <div class="card-wrap">
            <div class="balance-card">
                <div class="bc-title">
                    <svg width="16" height="16" viewBox="0 0 24 24"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.11.89-2 2-2h14c1.1 0 2 .89 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" fill="#f1c40f"/></svg>
                    Balance
                </div>
                <div class="bc-amt">
                    ₹<span class="bahnschrift">{{ balance }}</span>
                    <svg class="refresh-icon" :class="{'spin': refreshing}" @click="fetchData()" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
                </div>
                <div class="card-bg-icon bahnschrift">**** ****</div>
            </div>
        </div>

        <div class="methods-grid">
            <div class="method-item" v-for="method in methods" :key="method.id" :class="{'active': selectedMethodId === method.id}" @click="selectMethod(method)">
                <div class="bonus-tag" v-if="method.bonus">{{ method.bonus }}</div>
                <div class="method-icon">
                    <svg v-if="method.type === 'usdt'" width="28" height="28" viewBox="0 0 40 40"><circle cx="20" cy="20" r="14" :fill="selectedMethodId === method.id ? '#fff' : '#26a17b'"/><path d="M20 12c-3.3 0-6 1-6 2.2s2.7 2.2 6 2.2 6-1 6-2.2-2.7-2.2-6-2.2zm2.2 5.2v6h-4.4v-6H14v-1.5h12v1.5h-3.8z" :fill="selectedMethodId === method.id ? '#26a17b' : '#fff'"/></svg>
                    <svg v-else width="28" height="28" viewBox="0 0 40 40"><rect x="4" y="8" width="32" height="24" rx="4" fill="none" :stroke="selectedMethodId === method.id ? '#fff' : '#ccc'" stroke-width="2"/><text x="20" y="24" font-size="10" :fill="selectedMethodId === method.id ? '#fff' : '#666'" text-anchor="middle" font-weight="bold">UPI</text></svg>
                </div>
                <div class="method-name">{{ method.name }}</div>
            </div>
        </div>

        <div v-if="activeChannels.length > 0">
            <div class="section-title">
                <svg viewBox="0 0 24 24"><path d="M3 5v14h18V5H3zm16 12H5V7h14v10zm-6-8h-2v4H9v-4H7v6h8V9z"/></svg>
                Select channel
            </div>
            <div class="channel-grid">
                <div class="channel-item" v-for="channel in activeChannels" :key="channel.id" :class="{'active': selectedChannelId === channel.id}" @click="selectedChannelId = channel.id">
                    <div class="channel-name">{{ channel.name }}</div>
                    <div class="channel-limit bahnschrift">Balance: {{ formatAmount(channel.min) }} - {{ formatAmount(channel.max) }}</div>
                </div>
            </div>
        </div>

        <div v-if="activeChannels.length > 0">
            <div class="section-title">
                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/></svg>
                Deposit amount
            </div>
            <div class="amt-wrap">
                <div class="input-box">
                    <span>{{ currencySymbol }}</span>
                    <input type="number" class="bahnschrift" v-model="amount" placeholder="Please enter the amount">
                    <div style="color:var(--van-red); font-size: 20px; font-weight:bold; cursor:pointer;" @click="amount=''">×</div>
                </div>

                <div class="amt-grid">
                    <div class="amt-btn" v-for="amt in quickAmounts" :key="amt" :class="{'active': amount == amt}" @click="amount = amt">
                        <span class="bahnschrift">{{ currencySymbol }} {{ formatK(amt) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom-bar">
            <div class="bb-info">
                <div class="bb-lbl">Recharge Method:</div>
                <div class="bb-val">{{ currentChannelName }}</div>
            </div>
            <button class="btn-submit" :class="{'active': isSubmitValid}" :disabled="!isSubmitValid" @click="submitDeposit">Deposit</button>
        </div>

    </div>

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

        createApp({
            setup() {
                const balance = ref("0.00");
                const methods = ref([]);
                const selectedMethodId = ref(null);
                const selectedChannelId = ref(null);
                const amount = ref('');
                const quickAmounts = ref([100, 200, 300, 400, 1000, 1100, 2000, 3000, 5000]);
                const refreshing = ref(false);

                // Fetch Data from API
                const fetchData = async () => {
                    refreshing.value = true;
                    try {
                        const res = await fetch('getdeposit.php');
                        const data = await res.json();
                        if(data.success) {
                            balance.value = data.balance;
                            methods.value = data.methods;
                            
                            // Auto select first method and its first channel
                            if(methods.value.length > 0) {
                                selectMethod(methods.value[0]);
                            }
                        }
                    } catch (e) {
                        console.error("API Error");
                    }
                    setTimeout(() => refreshing.value = false, 500);
                };

                onMounted(() => fetchData());

                const selectMethod = (method) => {
                    selectedMethodId.value = method.id;
                    if(method.channels.length > 0) {
                        selectedChannelId.value = method.channels[0].id;
                    }
                    amount.value = ''; // Reset amount on change
                };

                // Computed Properties
                const activeMethod = computed(() => methods.value.find(m => m.id === selectedMethodId.value));
                const activeChannels = computed(() => activeMethod.value ? activeMethod.value.channels : []);
                const activeChannel = computed(() => activeChannels.value.find(c => c.id === selectedChannelId.value));
                
                const currencySymbol = computed(() => activeMethod.value && activeMethod.value.type === 'usdt' ? '₮' : '₹');
                const currentChannelName = computed(() => activeChannel.value ? activeChannel.value.name : '--');

                // Validation
                const isSubmitValid = computed(() => {
                    if (!activeChannel.value || !amount.value) return false;
                    const val = parseFloat(amount.value);
                    return val >= activeChannel.value.min && val <= activeChannel.value.max;
                });

                // Formatters
                const formatAmount = (num) => {
                    if(num >= 1000) return (num/1000) + 'K';
                    return num;
                };
                const formatK = (num) => {
                    if(num >= 1000) return (num/1000) + 'K';
                    return num;
                };

                const goBack = () => window.location.href = 'profile.php';  // (Ya agar aapko kisi aur page par bhejna hai toh 'wallet.php' likh dijiye)

                // Submit Form (Redirects to your payment processing page)
                const submitDeposit = () => {
                    if(isSubmitValid.value) {
                        // Create a form dynamically and post to payment gateway
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = 'process_deposit.php'; // AAPKA PAYMENT GATEWAY PAGE

                        const amtInput = document.createElement('input');
                        amtInput.type = 'hidden';
                        amtInput.name = 'amount';
                        amtInput.value = amount.value;
                        form.appendChild(amtInput);

                        const channelInput = document.createElement('input');
                        channelInput.type = 'hidden';
                        channelInput.name = 'channel_id';
                        channelInput.value = selectedChannelId.value;
                        form.appendChild(channelInput);

                        document.body.appendChild(form);
                        form.submit();
                    }
                };

                return { 
                    balance, methods, selectedMethodId, selectedChannelId, amount, quickAmounts, refreshing,
                    activeChannels, currencySymbol, currentChannelName, isSubmitValid,
                    fetchData, selectMethod, formatAmount, formatK, goBack, submitDeposit
                };
            }
        }).mount('#app');
    </script>
</body>
</html>