<?php
// ১. সেশন নোটিশ এড়ানোর জন্য চেক (db.php তে সেশন থাকলে এটি ডুপ্লিকেট হবে না)
if (session_status() === PHP_SESSION_NONE) { 
    session_start(); 
}

// এরর রিপোর্টিং ডেভেলপমেন্ট মোডে অন রাখা ভালো, তবে সেশন নোটিশ আসবে না
ini_set('display_errors', 0); 
error_reporting(E_ALL & ~E_NOTICE);

require 'config/db.php';

// ২. লগইন চেক
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}
$user_id = $_SESSION['user_id'];

// ৩. ডাটা ফেচ করা
try {
    $stmt = $pdo->query("SELECT * FROM settings WHERE id = 1");
    $settings = $stmt->fetch(PDO::FETCH_ASSOC);
    
    $site_name = $settings['site_name'] ?? 'Ludo Pro';
    $currency = $settings['currency'] ?? '৳';
    $min_deposit = $settings['min_deposit'] ?? 10;
    $support_number = $settings['support_number'] ?? 'Not Set';

    // পেমেন্ট মেথড ফেচ করা (আইকন ও QR সহ)
    $method_stmt = $pdo->query("SELECT * FROM payment_methods WHERE type IN ('Deposit', 'Both') ORDER BY id ASC");
    $all_methods = $method_stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // ইউজারের ইনফরমেশন
    $user_stmt = $pdo->prepare("SELECT username, balance, win_balance FROM users WHERE id = ?");
    $user_stmt->execute([$user_id]);
    $user = $user_stmt->fetch(PDO::FETCH_ASSOC);
    
} catch (PDOException $e) {
    die("Database Error: " . $e->getMessage());
}

$msg = "";
$msg_type = "";

// ৪. ডিপোজিট সাবমিশন লজিক
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit_deposit'])) {
    $method = $_POST['method'] ?? ''; 
    $amount = $_POST['amount'] ?? 0;
    $sender_number = $_POST['sender_number'] ?? '';
    $trx_id = $_POST['trx_id'] ?? '';
    $min_dep = $settings['min_deposit'] ?? 10;

    if ($amount < $min_dep) {
        $msg = "Minimum deposit amount is " . ($settings['currency'] ?? '৳') . $min_dep;
        $msg_type = "error";
    } elseif (empty($trx_id) || empty($sender_number) || empty($method)) {
        $msg = "All fields are required!";
        $msg_type = "error";
    } elseif (strlen($trx_id) < 5) {
        $msg = "Transaction ID is too short!";
        $msg_type = "error";
    } elseif (!preg_match('/^[0-9]+$/', $sender_number)) {
        $msg = "Sender number must contain only digits!";
        $msg_type = "error";
    } else {
        try {
            // ডুপ্লিকেট TrxID চেক
            $check = $pdo->prepare("SELECT id FROM deposits WHERE transaction_id = ?");
            $check->execute([$trx_id]);
            
            if ($check->rowCount() > 0) {
                $msg = "Transaction ID already used!";
                $msg_type = "error";
            } else {
                // ইনসার্ট করার চেষ্টা
                $stmt = $pdo->prepare("INSERT INTO deposits (user_id, method, amount, sender_number, transaction_id, status, created_at) VALUES (?, ?, ?, ?, ?, 'Pending', NOW())");
                if ($stmt->execute([$user_id, $method, $amount, $sender_number, $trx_id])) {
                    $msg = "Deposit submitted successfully! Wait for approval.";
                    $msg_type = "success";
                    
                    // ফর্ম রিসেট করার জন্য রিডাইরেক্ট (টাকা ডাবল সাবমিট রোধ)
                    header("Location: deposit.php?success=1");
                    exit();
                }
            }
        } catch (PDOException $e) {
            // যদি sender_number কলাম না থাকে তবে স্পষ্ট মেসেজ দিবে
            $msg = "Database Error: Please ensure 'sender_number' column exists in deposits table.";
            $msg_type = "error";
        }
    }
}

// সাকসেস মেসেজ দেখানোর জন্য
if (isset($_GET['success'])) {
    $msg = "Deposit submitted successfully! Wait for approval.";
    $msg_type = "success";
}
?>

<!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 Money - <?= htmlspecialchars($site_name) ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        * {
            font-family: 'Inter', sans-serif;
        }
        
        body { 
            background: #020617; 
            color: #f1f5f9; 
            background-image: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #020617 70%);
            min-height: 100vh;
        }
        
        .glass-card { 
            background: rgba(30, 41, 59, 0.4); 
            backdrop-filter: blur(12px); 
            border: 1px solid rgba(255,255,255,0.05); 
        }
        
        .glass-card-strong { 
            background: rgba(15, 23, 42, 0.8); 
            backdrop-filter: blur(12px); 
            border: 1px solid rgba(255,255,255,0.05); 
        }
        
        .method-radio:checked + div { 
            border-color: #3b82f6; 
            background: rgba(59, 130, 246, 0.2); 
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
            transform: scale(1.02);
        }
        
        input, select, textarea { 
            background: rgba(15, 23, 42, 0.8) !important; 
            border: 1px solid rgba(255,255,255,0.1) !important; 
            color: white !important; 
            outline: none; 
            transition: all 0.2s ease;
        }
        
        input:focus, select:focus, textarea:focus { 
            border-color: #3b82f6 !important; 
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
        }
        
        input::placeholder {
            color: #64748b !important;
            font-size: 0.8rem;
        }
        
        .animate-pulse-slow {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* ইউজার ব্যালেন্স স্টাইল */
        .balance-badge {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            padding: 2px 8px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 700;
            color: white;
        }
        
        /* লোডিং স্পিনার */
        .spinner {
            border: 2px solid rgba(255,255,255,0.1);
            border-top-color: #3b82f6;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            animation: spin 0.8s linear infinite;
            display: inline-block;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="pb-10 antialiased">

    <!-- হেডার সেকশন -->
    <header class="p-5 flex justify-between items-center sticky top-0 z-40 bg-[#020617]/90 backdrop-blur-md border-b border-white/5">
        <a href="wallet.php" class="w-10 h-10 rounded-xl glass-card-strong flex items-center justify-center text-slate-300 hover:text-white transition active:scale-95">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="text-center">
            <h2 class="text-xl font-black tracking-wide text-white">Add Money</h2>
            <p class="text-[10px] text-slate-500">Deposit to your wallet</p>
        </div>
        <div class="w-10 h-10 rounded-xl glass-card-strong flex items-center justify-center">
            <i class="fas fa-wallet text-blue-400"></i>
        </div>
    </header>

    <div class="max-w-md mx-auto px-5 mt-4 space-y-5">
        <!-- এলার্ট মেসেজ (SweetAlert) -->
        <?php if($msg): ?>
        <script>
            Swal.fire({
                icon: '<?= $msg_type ?>',
                title: '<?= $msg_type == "success" ? "Success!" : "Error!" ?>',
                text: '<?= $msg ?>',
                background: '#1e293b', 
                color: '#fff', 
                confirmButtonColor: '#3b82f6',
                timer: <?= $msg_type == "success" ? 3000 : '' ?>,
                showConfirmButton: <?= $msg_type == "success" ? 'false' : 'true' ?>
            });
        </script>
        <?php endif; ?>

        <!-- ইউজার ইনফো কার্ড -->
        <div class="glass-card-strong rounded-2xl p-4 flex items-center justify-between border border-blue-500/20">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-black text-lg">
                    <?= strtoupper(substr($user['username'] ?? 'U', 0, 1)) ?>
                </div>
                <div>
                    <p class="text-xs text-slate-400">Welcome back,</p>
                    <p class="text-sm font-bold text-white"><?= htmlspecialchars($user['username'] ?? 'User') ?></p>
                </div>
            </div>
            <div class="text-right">
                <p class="text-[10px] text-slate-400">Balance</p>
                <p class="text-lg font-black text-emerald-400"><?= htmlspecialchars($currency) ?><?= number_format(($user['balance'] ?? 0) + ($user['win_balance'] ?? 0), 2) ?></p>
            </div>
        </div>

        <!-- ইন্সট্রাকশন কার্ড -->
        <div class="glass-card rounded-2xl p-5 border-l-4 border-yellow-500 bg-yellow-500/5">
            <h3 class="text-xs font-bold text-yellow-500 uppercase mb-3 flex items-center gap-2">
                <i class="fas fa-info-circle"></i> Deposit Instructions
            </h3>
            <ul class="text-xs text-slate-300 space-y-2 ml-1">
                <li class="flex items-start gap-2">
                    <span class="text-yellow-500 text-sm">•</span>
                    <span>Select payment method from below options.</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="text-yellow-500 text-sm">•</span>
                    <span>Send money using <span class="text-white font-bold">"Send Money"</span> option.</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="text-yellow-500 text-sm">•</span>
                    <span>Minimum deposit: <span class="text-white font-bold"><?= htmlspecialchars($currency) ?><?= $min_deposit ?></span></span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="text-yellow-500 text-sm">•</span>
                    <span>Maximum deposit: <span class="text-white font-bold">Unlimited</span></span>
                </li>
            </ul>
        </div>

        <form method="POST" class="space-y-6" id="depositForm">
            <!-- পেমেন্ট মেথড সিলেক্ট -->
            <div>
                <label class="text-xs font-bold text-slate-500 uppercase tracking-widest px-1 mb-3 flex items-center gap-1">
                    <i class="fas fa-credit-card text-blue-400"></i> Select Method
                </label>
                
                <?php if(empty($all_methods)): ?>
                <div class="glass-card-strong p-6 rounded-2xl text-center">
                    <i class="fas fa-exclamation-triangle text-yellow-500 text-2xl mb-2"></i>
                    <p class="text-sm text-slate-400">No payment methods available</p>
                    <p class="text-xs text-slate-500 mt-1">Please contact support</p>
                </div>
                <?php else: ?>
                <div class="grid grid-cols-3 gap-3">
                    <?php 
                    $isFirst = true;
                    foreach($all_methods as $m): 
                        $icon = $m['icon'] ?? '';
                        $icon_path = "../assets/img/payment_icons/" . $icon;
                    ?>
                    <label class="cursor-pointer group">
                        <input type="radio" name="method" value="<?= htmlspecialchars($m['name']) ?>" 
                               data-number="<?= htmlspecialchars($m['number']) ?>" 
                               data-name="<?= htmlspecialchars($m['name']) ?>"
                               data-qr="<?= htmlspecialchars($m['qr_code'] ?? '') ?>"
                               class="hidden method-radio" <?= $isFirst ? 'checked' : '' ?>>
                        <div class="glass-card-strong p-3 rounded-xl flex flex-col items-center gap-2 transition-all hover:bg-blue-500/10 h-full justify-center border border-transparent">
                            <?php if($icon && file_exists($icon_path)): ?>
                                <img src="<?= $icon_path ?>" class="h-8 w-8 object-contain" alt="<?= htmlspecialchars($m['name']) ?>">
                            <?php else: ?>
                                <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-600/30 to-purple-600/30 flex items-center justify-center">
                                    <i class="fas fa-university text-blue-400 text-sm"></i>
                                </div>
                            <?php endif; ?>
                            <span class="text-[9px] font-bold text-slate-300 group-hover:text-white"><?= htmlspecialchars($m['name']) ?></span>
                            <span class="text-[7px] text-slate-500"><?= substr($m['number'], -4) ?></span>
                        </div>
                    </label>
                    <?php $isFirst = false; endforeach; ?>
                </div>
                <?php endif; ?>
            </div>

            <!-- রিসিভার ইনফো কার্ড (ডায়নামিক) -->
            <?php if(!empty($all_methods)): ?>
            <div class="glass-card-strong rounded-2xl p-5 relative overflow-hidden group" id="receiverCard">
                <div class="absolute -top-10 -right-10 w-20 h-20 bg-blue-500/5 rounded-full group-hover:scale-150 transition-transform"></div>
                <div class="relative z-10 flex justify-between items-center">
                    <div>
                        <p class="text-[9px] text-slate-400 uppercase font-bold tracking-wider mb-1 flex items-center gap-1">
                            <i class="fas fa-arrow-right text-emerald-400"></i> 
                            Send Money To (<span id="methodName" class="text-blue-400 font-black"><?= $all_methods[0]['name'] ?? 'N/A' ?></span>)
                        </p>
                        <p class="text-xl font-black text-white tracking-widest font-mono" id="adminNumber"><?= $all_methods[0]['number'] ?? '0XXXXXXXXXX' ?></p>
                        <p class="text-[8px] text-slate-500 mt-1">Use "Send Money" option</p>
                    </div>
                    <div class="flex gap-2">
                        <?php if(!empty($all_methods[0]['qr_code'])): ?>
                        <button type="button" onclick="viewQR('<?= $all_methods[0]['qr_code'] ?>', '<?= $all_methods[0]['name'] ?>')" class="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-500 hover:bg-purple-500 transition active:scale-90">
                            <i class="fas fa-qrcode"></i>
                        </button>
                        <?php endif; ?>
                        <button type="button" onclick="copyNumber()" class="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-500 hover:bg-blue-500 transition active:scale-90">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <!-- ফর্ম ফিল্ডস -->
            <div class="space-y-4">
                <div>
                    <label class="text-xs font-bold text-slate-500 uppercase tracking-widest px-1 ml-1 flex items-center gap-1">
                        <i class="fas fa-coins text-yellow-500"></i> Amount (<?= htmlspecialchars($currency) ?>)
                    </label>
                    <div class="relative mt-1">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 font-bold"><?= htmlspecialchars($currency) ?></span>
                        <input type="number" name="amount" id="amount" class="w-full py-4 pl-10 pr-4 rounded-xl text-sm font-bold" 
                               placeholder="Min <?= $min_deposit ?>" required min="<?= $min_deposit ?>" step="0.01">
                    </div>
                    <p class="text-[9px] text-slate-500 mt-1 ml-2">Min: <?= htmlspecialchars($currency) ?><?= $min_deposit ?></p>
                </div>

                <div>
                    <label class="text-xs font-bold text-slate-500 uppercase tracking-widest px-1 ml-1 flex items-center gap-1">
                        <i class="fas fa-mobile-alt text-green-500"></i> Your Number
                    </label>
                    <div class="relative mt-1">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500"><i class="fas fa-phone-alt text-xs"></i></span>
                        <input type="tel" name="sender_number" id="sender_number" class="w-full py-4 pl-10 pr-4 rounded-xl text-sm font-bold" 
                               placeholder="017XXXXXXXX" required pattern="[0-9]+" title="Only numbers allowed" maxlength="11">
                    </div>
                </div>

                <div>
                    <label class="text-xs font-bold text-slate-500 uppercase tracking-widest px-1 ml-1 flex items-center gap-1">
                        <i class="fas fa-hashtag text-blue-400"></i> Transaction ID
                    </label>
                    <div class="relative mt-1">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500"><i class="fas fa-receipt text-xs"></i></span>
                        <input type="text" name="trx_id" id="trx_id" class="w-full py-4 pl-10 pr-4 rounded-xl text-sm font-bold uppercase" 
                               placeholder="Enter TrxID" required minlength="5">
                    </div>
                    <p class="text-[9px] text-slate-500 mt-1 ml-2">Check your SMS for transaction ID</p>
                </div>
            </div>

            <!-- সাবমিট বাটন -->
            <button type="submit" name="submit_deposit" id="submitBtn" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 py-4 rounded-xl font-black uppercase tracking-widest text-sm text-white shadow-lg active:scale-95 transition transform flex items-center justify-center gap-2">
                <span>Verify & Add Money</span>
                <i class="fas fa-arrow-right"></i>
            </button>
            
            <!-- সাপোর্ট টেক্সট -->
            <p class="text-center text-[10px] text-slate-500">
                Need help? Contact support: <span class="text-blue-400 font-bold"><?= htmlspecialchars($support_number) ?></span>
            </p>
        </form>
    </div>

    <!-- QR কোড ভিউ মোডাল -->
    <div id="qrModal" class="hidden fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50 p-4">
        <div class="glass-card-strong rounded-2xl w-full max-w-sm border border-slate-700">
            <div class="p-5 border-b border-slate-700 flex justify-between items-center">
                <h2 class="text-lg font-bold text-white flex items-center gap-2">
                    <i class="fas fa-qrcode text-blue-500"></i>
                    <span id="qrMethodName">QR Code</span>
                </h2>
                <button onclick="closeQRModal()" class="w-8 h-8 bg-slate-700 rounded-lg hover:bg-slate-600 transition flex items-center justify-center">
                    <i class="fas fa-times text-slate-400"></i>
                </button>
            </div>
            
            <div class="p-6 text-center">
                <img id="qrImage" src="" class="max-w-full h-auto mx-auto rounded-xl border-2 border-slate-700" alt="QR Code">
                <p class="text-xs text-slate-400 mt-4">Scan this QR code to make payment</p>
                <p class="text-xs text-slate-500 mt-2">Account: <span id="qrAccountNumber" class="text-blue-400 font-mono"></span></p>
            </div>
            
            <div class="p-5 border-t border-slate-700">
                <button onclick="closeQRModal()" class="w-full py-3 bg-slate-700 hover:bg-slate-600 rounded-xl font-bold text-white transition">
                    Close
                </button>
            </div>
        </div>
    </div>

    <!-- লোডিং ওভারলে (সাবমিটের সময়) -->
    <div id="loadingOverlay" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center">
        <div class="text-center">
            <div class="spinner w-12 h-12 border-4 mx-auto"></div>
            <p class="text-sm text-white mt-4">Processing your deposit...</p>
        </div>
    </div>

    <script>
        // মেথড সিলেক্ট চেঞ্জ হলে নম্বর আপডেট
        document.querySelectorAll('input[name="method"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const number = this.dataset.number;
                const name = this.dataset.name;
                const qr = this.dataset.qr;
                
                document.getElementById('adminNumber').innerText = number;
                document.getElementById('methodName').innerText = name;
                
                // QR বাটন আপডেট
                const qrBtn = document.querySelector('#receiverCard .flex.gap-2 button:first-child');
                if(qr) {
                    if(!qrBtn) {
                        // QR বাটন না থাকলে তৈরি
                        const container = document.querySelector('#receiverCard .flex.gap-2');
                        const newBtn = document.createElement('button');
                        newBtn.type = 'button';
                        newBtn.onclick = function() { viewQR(qr, name); };
                        newBtn.className = 'w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-500 hover:bg-purple-500 transition active:scale-90';
                        newBtn.innerHTML = '<i class="fas fa-qrcode"></i>';
                        container.insertBefore(newBtn, container.firstChild);
                    } else {
                        qrBtn.onclick = function() { viewQR(qr, name); };
                        qrBtn.classList.remove('hidden');
                    }
                } else {
                    if(qrBtn) qrBtn.classList.add('hidden');
                }
            });
        });

        // নম্বর কপি
        function copyNumber() {
            const num = document.getElementById('adminNumber').innerText;
            if(num === '0XXXXXXXXXX' || !num) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No number available to copy!',
                    background: '#1e293b',
                    color: '#fff'
                });
                return;
            }
            
            navigator.clipboard.writeText(num).then(() => {
                Swal.fire({
                    toast: true, 
                    position: 'top-end', 
                    showConfirmButton: false, 
                    timer: 2000,
                    icon: 'success', 
                    title: 'Number Copied!', 
                    background: '#1e293b', 
                    color: '#fff'
                });
            }).catch(err => {
                // ফallback পদ্ধতি
                const textarea = document.createElement('textarea');
                textarea.value = num;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                
                Swal.fire({
                    toast: true, 
                    position: 'top-end', 
                    showConfirmButton: false, 
                    timer: 2000,
                    icon: 'success', 
                    title: 'Number Copied!', 
                    background: '#1e293b', 
                    color: '#fff'
                });
            });
        }

        // QR কোড ভিউ
        function viewQR(qrFile, methodName) {
            const accountNumber = document.getElementById('adminNumber').innerText;
            document.getElementById('qrMethodName').innerText = methodName + ' QR';
            document.getElementById('qrImage').src = '../assets/img/payment_qr/' + qrFile;
            document.getElementById('qrAccountNumber').innerText = accountNumber;
            document.getElementById('qrModal').classList.remove('hidden');
        }
        
        function closeQRModal() {
            document.getElementById('qrModal').classList.add('hidden');
        }

        // ফর্ম ভ্যালিডেশন
        document.getElementById('depositForm')?.addEventListener('submit', function(e) {
            const amount = document.getElementById('amount').value;
            const minAmount = <?= $min_deposit ?>;
            const senderNumber = document.getElementById('sender_number').value;
            const trxId = document.getElementById('trx_id').value;
            
            if(amount < minAmount) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Amount',
                    text: 'Minimum deposit amount is <?= htmlspecialchars($currency) ?>' + minAmount,
                    background: '#1e293b',
                    color: '#fff'
                });
                return;
            }
            
            if(!/^[0-9]+$/.test(senderNumber)) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Number',
                    text: 'Sender number must contain only digits',
                    background: '#1e293b',
                    color: '#fff'
                });
                return;
            }
            
            if(trxId.length < 5) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Transaction ID',
                    text: 'Transaction ID must be at least 5 characters',
                    background: '#1e293b',
                    color: '#fff'
                });
                return;
            }
            
            // লোডিং দেখান
            document.getElementById('loadingOverlay').classList.remove('hidden');
            document.getElementById('submitBtn').disabled = true;
        });

        // মোডাল বন্ধ করতে Escape কী প্রেস
        document.addEventListener('keydown', function(e) {
            if(e.key === 'Escape') {
                closeQRModal();
            }
        });

        // মোডালের বাইরে ক্লিক করলে বন্ধ
        window.onclick = function(event) {
            const modal = document.getElementById('qrModal');
            if(event.target == modal) {
                closeQRModal();
            }
        }
        
        // ইনপুট ফিল্ডে শুধু নাম্বার অনুমোদন (sender_number)
        document.getElementById('sender_number')?.addEventListener('input', function(e) {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
        
        // TrxID uppercase করুন
        document.getElementById('trx_id')?.addEventListener('input', function(e) {
            this.value = this.value.toUpperCase();
        });
    </script>
</body>
</html>