<?php
session_start();
require 'db_config.php';

$email = isset($_GET['email']) ? trim($_GET['email']) : ($_SESSION['email'] ?? '');
if (empty($email)) {
    echo "<h3 style='text-align:center;padding:40px;font-family:sans-serif;'>❌ No user email provided</h3>";
    exit;
}

$stmt = $conn->prepare("SELECT * FROM users WHERE email = ?");
$stmt->execute([$email]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$user) {
    echo "<h3 style='text-align:center;padding:40px;font-family:sans-serif;'>❌ User not found</h3>";
    exit;
}

$balance = (float)($user['balance'] ?? 0);

// ==================== Total Recharged ====================
$totalRecharged = 0;
try {
    $r = $conn->prepare("SELECT COALESCE(SUM(amount), 0) FROM recharge_history WHERE email = ? AND status = 'approved'");
    $r->execute([$email]);
    $totalRecharged = (float)$r->fetchColumn();
} catch (Exception $e) {}

// ==================== LOAD DEPOSIT METHOD FROM DB ====================
$method = null;
try {
    $mStmt = $conn->query("SELECT * FROM deposit_methods WHERE is_active = 1 AND method_key = 'binance' ORDER BY sort_order ASC LIMIT 1");
    $method = $mStmt->fetch(PDO::FETCH_ASSOC);
} catch (Exception $e) {}

// Fallback if table missing or empty
if (!$method) {
    $method = [
        'method_key'       => 'binance',
        'method_name'      => 'Binance Pay',
        'method_logo'      => 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Binance_logo.svg/2560px-Binance_logo.svg.png',
        'method_logo_type' => 'url',
        'binance_id'       => '123456789',
        'min_amount'       => 10,
        'max_amount'       => 100000,
        'instructions'     => 'Send USDT via Binance Pay to the ID above.'
    ];
}

// ==================== Min / Max from SQL ====================
$minAmount = (float)($method['min_amount'] ?? 10);
$maxAmount = (float)($method['max_amount'] ?? 100000);
$methodName = htmlspecialchars($method['method_name'] ?? 'Binance Pay');
?>
<!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, viewport-fit=cover">
<meta name="theme-color" content="#FFCF00">
<title>Recharge</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* { margin:0; padding:0; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; overflow-x:hidden; }
body { background:#F8FAF9; color:#1A1C29; padding-bottom:calc(90px + env(safe-area-inset-bottom)); min-height:100vh; }
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* HEADER */
.header-wrapper { background:#FFCF00; padding: calc(18px + var(--safe-top)) 16px 30px; border-bottom-left-radius:32px; border-bottom-right-radius:32px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.header-title { font-size:24px; font-weight:900; color:#000; letter-spacing:0.3px; }
.header-actions { display:flex; gap:10px; }
.icon-btn { width:42px; height:42px; background:rgba(255,255,255,0.55); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; border:none; cursor:pointer; color:#000; }

/* BALANCE */
.balance-card { background:#FFF; border:3px solid #000; border-radius:22px; margin:-18px calc(12px + var(--safe-right)) 16px calc(12px + var(--safe-left)); padding:16px 18px; box-shadow:5px 6px 0 #FFCF00; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:10; }
.balance-col { text-align:center; flex:1; }
.balance-col .lbl { font-size:10px; font-weight:800; color:#7A7A7A; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; }
.balance-col .val { font-size:18px; font-weight:900; color:#000; }

/* SECTION */
.section-card { background:#FFFDF0; border:2px solid #FFE885; border-radius:20px; margin:0 calc(12px + var(--safe-right)) 14px calc(12px + var(--safe-left)); padding:14px; }
.section-title { font-size:12px; font-weight:800; color:#8A4B00; margin-bottom:12px; text-transform:uppercase; display:flex; align-items:center; gap:8px; letter-spacing:0.3px; }

/* ==================== BINANCE CARD ==================== */
.binance-card {
    background:linear-gradient(135deg, #F0B90B 0%, #FCD535 100%);
    border:3px solid #000;
    border-radius:22px;
    padding:20px 18px;
    margin:0 calc(12px + var(--safe-right)) 16px calc(12px + var(--safe-left));
    box-shadow:5px 6px 0 #000;
    position:relative;
    overflow:hidden;
}
.binance-card::before {
    content:'';
    position:absolute;
    top:-30px; right:-30px;
    width:120px; height:120px;
    background:rgba(255,255,255,0.15);
    border-radius:50%;
}
.binance-header {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    position:relative;
    z-index:1;
}
.binance-logo-wrap {
    width:56px; height:56px;
    background:#FFF;
    border:2.5px solid #000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#F0B90B;
    flex-shrink:0;
    box-shadow:3px 4px 0 rgba(0,0,0,0.15);
    overflow:hidden;
    padding:6px;
}
.binance-logo-wrap img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.binance-logo-wrap i {
    font-size:28px;
    color:#F0B90B;
}
.binance-title { flex:1; min-width:0; }
.binance-title h3 {
    font-size:17px;
    font-weight:900;
    color:#000;
    margin-bottom:3px;
    letter-spacing:0.3px;
}
.binance-title p {
    font-size:11px;
    font-weight:800;
    color:#4A3200;
    letter-spacing:0.2px;
}

.binance-id-box {
    background:rgba(255,255,255,0.95);
    border:2px dashed #000;
    border-radius:14px;
    padding:12px 14px;
    margin-bottom:12px;
    position:relative;
    z-index:1;
}
.binance-id-lbl {
    font-size:9.5px;
    font-weight:900;
    color:#8A4B00;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:5px;
    display:flex;
    align-items:center;
    gap:5px;
}
.binance-id-val {
    font-size:20px;
    font-weight:900;
    color:#000;
    font-family:'Courier New', monospace;
    letter-spacing:2px;
    word-break:break-all;
    text-align:center;
    padding:6px 0;
}

.btn-copy-binance {
    background:#000;
    color:#F0B90B;
    border:2px solid #000;
    border-radius:12px;
    padding:12px 16px;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    letter-spacing:0.5px;
    text-transform:uppercase;
    transition:transform 0.1s;
    position:relative;
    z-index:1;
}
.btn-copy-binance:active { transform:translate(2px,2px); }

/* ==================== LIMIT INFO BOX (NEW) ==================== */
.limit-info-box {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:14px;
}
.limit-item {
    background:#FFF;
    border:2px solid #000;
    border-radius:12px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:3px 4px 0 #FFCF00;
}
.limit-icon {
    width:32px; height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    flex-shrink:0;
    border:1.5px solid #000;
}
.limit-icon.green  { background:#D1FAE5; color:#059669; }
.limit-icon.orange { background:#FEF3C7; color:#D97706; }
.limit-info { min-width:0; }
.limit-info .lbl {
    font-size:9px;
    font-weight:900;
    color:#6B7280;
    text-transform:uppercase;
    letter-spacing:0.3px;
    margin-bottom:2px;
}
.limit-info .val {
    font-size:14px;
    font-weight:900;
    color:#000;
    line-height:1.1;
}

/* ==================== AMOUNT INPUT ==================== */
.custom-amount-wrap {
    background:#FFF;
    border:2.5px solid #000;
    border-radius:14px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    box-shadow:3px 4px 0 #FFCF00;
}
.custom-amount-wrap .currency {
    font-size:22px;
    font-weight:900;
    color:#10B981;
}
.custom-amount-wrap input {
    flex:1;
    border:none;
    outline:none;
    font-size:20px;
    font-weight:900;
    color:#000;
    background:transparent;
    min-width:0;
}
.custom-amount-wrap input::placeholder { 
    color:#D1D5DB; 
    font-weight:700;
    font-size:15px;
}

/* Input hint */
.input-hint {
    font-size:10.5px;
    font-weight:800;
    color:#8A4B00;
    text-align:center;
    padding:6px 10px;
    background:#FFF;
    border:1.5px dashed #FFCF00;
    border-radius:10px;
    margin-bottom:12px;
    line-height:1.4;
}
.input-hint i { color:#D97706; }
.input-hint .range-badge {
    display:inline-block;
    background:#FFCF00;
    color:#000;
    padding:2px 8px;
    border-radius:6px;
    font-weight:900;
    margin:0 2px;
    border:1.5px solid #000;
}

/* SUBMIT BUTTON */
.btn-submit {
    width:100%;
    padding:16px;
    background:#F0B90B;
    color:#000;
    border:2.5px solid #000;
    border-radius:14px;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    box-shadow:3px 4px 0 #000;
    transition:transform 0.1s;
    text-transform:uppercase;
    letter-spacing:0.5px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:6px;
}
.btn-submit:active { transform:translate(2px,2px); box-shadow:1px 2px 0 #000; }
.btn-submit:disabled { background:#E5E7EB; color:#9CA3AF; cursor:not-allowed; box-shadow:3px 4px 0 #999; }

/* NOTE BOX */
.note-box { background:#FFF; border:1.5px solid #FFE885; border-radius:12px; padding:11px 13px; display:flex; align-items:flex-start; gap:8px; font-size:10.5px; font-weight:700; color:#8A4B00; line-height:1.5; margin-top:10px; }
.note-box i { color:#F5A623; font-size:13px; margin-top:1px; flex-shrink:0; }

/* BOTTOM NAV */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#FFF; display:flex; border-top:1px solid #E5E7EB; z-index:100; padding:6px 4px calc(6px + var(--safe-bottom)); min-height:64px; }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#9CA3AF; cursor:pointer; padding:6px 2px; gap:2px; }
.nav-item.active { color:#F5A623; }
.nav-item.active .nav-icon { background:#FFF6D6; transform:translateY(-2px); box-shadow:0 3px 0 #FFCF00; }
.nav-icon { font-size:17px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.nav-label { font-size:9.5px; font-weight:800; margin-top:1px; }

/* ==================== VERIFICATION POPUP ==================== */
.verify-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    backdrop-filter:blur(8px);
}
.verify-overlay.show { display:flex; }
.verify-box {
    background:#FFF;
    border:3px solid #000;
    border-radius:26px;
    padding:28px 22px 24px;
    max-width:400px;
    width:100%;
    text-align:center;
    box-shadow:8px 10px 0 #FFCF00;
    animation:verifyPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position:relative;
    max-height:calc(100vh - 60px);
    overflow-y:auto;
}
@keyframes verifyPopIn {
    0%   { transform:scale(0.7) translateY(20px); opacity:0; }
    60%  { transform:scale(1.05) translateY(-5px); opacity:1; }
    100% { transform:scale(1) translateY(0); opacity:1; }
}
.verify-icon-wrap {
    width:96px;
    height:96px;
    margin:0 auto 16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    border:4px solid #000;
    position:relative;
}
.verify-icon-wrap.checking {
    background:linear-gradient(135deg, #FFCF00, #F5A623);
    animation:spinPulse 1.5s ease infinite;
}
@keyframes spinPulse {
    0%,100% { transform:scale(1) rotate(0deg); box-shadow:0 0 0 0 rgba(255,207,0,0.6); }
    50%     { transform:scale(1.08) rotate(180deg); box-shadow:0 0 0 15px rgba(255,207,0,0); }
}
.verify-icon-wrap.success {
    background:linear-gradient(135deg, #10B981, #059669);
    animation:successBounce 0.6s ease;
}
@keyframes successBounce {
    0%   { transform:scale(0); }
    50%  { transform:scale(1.15); }
    100% { transform:scale(1); }
}
.verify-icon-wrap.error {
    background:linear-gradient(135deg, #F43F5E, #DC2626);
    animation:errorShake 0.5s ease;
}
@keyframes errorShake {
    0%,100% { transform:translateX(0); }
    20%,60% { transform:translateX(-8px); }
    40%,80% { transform:translateX(8px); }
}
.verify-icon-wrap i { color:#FFF; }

.verify-title {
    font-size:20px;
    font-weight:900;
    color:#000;
    margin-bottom:10px;
    letter-spacing:0.3px;
}
.verify-sub {
    font-size:13px;
    font-weight:700;
    color:#6B7280;
    line-height:1.6;
    margin-bottom:16px;
    padding:0 4px;
}
.verify-details {
    background:#FEF9E7;
    border:1.5px dashed #FFCF00;
    border-radius:14px;
    padding:14px;
    margin-bottom:16px;
    text-align:left;
}
.verify-detail-row {
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:12px;
    border-bottom:1px dashed #FFE885;
}
.verify-detail-row:last-child { border-bottom:none; }
.verify-detail-row .l { color:#8A4B00; font-weight:800; }
.verify-detail-row .r { color:#1A1C29; font-weight:900; }
.verify-detail-row .r.green { color:#10B981; }
.verify-detail-row .r.orange { color:#D97706; }

.verify-loader {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:16px 0;
}
.verify-loader span {
    width:10px;
    height:10px;
    background:#F5A623;
    border-radius:50%;
    animation:dotPulse 1.4s ease infinite;
}
.verify-loader span:nth-child(2) { animation-delay:0.2s; background:#FFCF00; }
.verify-loader span:nth-child(3) { animation-delay:0.4s; background:#F0B90B; }
@keyframes dotPulse {
    0%,100% { transform:scale(0.7); opacity:0.4; }
    50%     { transform:scale(1.3); opacity:1; }
}
.verify-status-text {
    font-size:12.5px;
    font-weight:900;
    color:#D97706;
    text-align:center;
    letter-spacing:0.3px;
    min-height:18px;
    animation:blink 1.2s ease infinite;
}
@keyframes blink {
    0%,100% { opacity:1; }
    50%     { opacity:0.5; }
}
.verify-balance-preview {
    background:linear-gradient(135deg, #10B981 0%, #059669 100%);
    border:2.5px solid #000;
    border-radius:14px;
    padding:14px;
    margin:16px 0;
    color:#FFF;
    box-shadow:3px 4px 0 #000;
}
.verify-balance-preview .lbl {
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.5px;
    opacity:0.9;
    margin-bottom:5px;
}
.verify-balance-preview .old-val {
    font-size:13px;
    font-weight:700;
    opacity:0.7;
    text-decoration:line-through;
}
.verify-balance-preview .new-val {
    font-size:22px;
    font-weight:900;
    margin-top:4px;
    text-shadow:1px 2px 0 rgba(0,0,0,0.2);
}
.verify-btn {
    display:block;
    width:100%;
    padding:14px;
    border-radius:12px;
    font-size:14px;
    font-weight:900;
    border:2.5px solid #000;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:0.5px;
    transition:transform 0.1s;
    margin-top:10px;
}
.verify-btn:active { transform:translate(2px,2px); box-shadow:1px 2px 0 #000; }
.verify-btn-primary { background:#FFCF00; color:#000; box-shadow:3px 4px 0 #000; }
.verify-btn-danger  { background:#F43F5E; color:#FFF; box-shadow:3px 4px 0 #000; }

/* Toast */
.toast-popup {
    position:fixed;
    bottom:100px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:#000;
    color:#FFCF00;
    padding:12px 20px;
    border-radius:12px;
    font-weight:900;
    font-size:13px;
    z-index:99999;
    box-shadow:0 6px 16px rgba(0,0,0,0.3);
    border:2px solid #FFCF00;
    opacity:0;
    transition:all 0.3s ease;
    pointer-events:none;
}
.toast-popup.show {
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

@media (max-width: 360px) {
    .header-title { font-size:21px; }
    .balance-col .val { font-size:16px; }
    .binance-id-val { font-size:17px; }
    .verify-icon-wrap { width:80px; height:80px; font-size:38px; }
    .verify-title { font-size:17px; }
    .nav-icon { width:32px; height:32px; font-size:15px; }
    .nav-label { font-size:9px; }
    .limit-info .val { font-size:13px; }
    .custom-amount-wrap input { font-size:17px; }
}
@media (min-width: 600px) {
    .section-card, .balance-card, .binance-card { max-width:520px; margin-left:auto; margin-right:auto; }
    .bottom-nav { max-width:600px; margin:0 auto; border-radius:20px 20px 0 0; }
}
button, a, .nav-item, .icon-btn { touch-action:manipulation; }
</style>
</head>
<body>

<!-- HEADER -->
<div class="header-wrapper">
    <div class="header">
        <div class="header-title">RECHARGE</div>
        <div class="header-actions">
            <button class="icon-btn" onclick="goTo('notification')">
                <i class="fa-solid fa-bell"></i>
            </button>
            <button class="icon-btn" onclick="openMenu()"><i class="fa-solid fa-bars"></i></button>
        </div>
    </div>
</div>

<!-- BALANCE -->
<div class="balance-card">
    <div class="balance-col">
        <div class="lbl">Available</div>
        <div class="val" style="color:#10B981;">$<?= number_format($balance, 2) ?></div>
    </div>
    <div class="balance-col" style="border-left:1px solid #E5E7EB;">
        <div class="lbl">Total Recharged</div>
        <div class="val" style="color:#D97706;">$<?= number_format($totalRecharged, 2) ?></div>
    </div>
</div>

<!-- BINANCE CARD -->
<div class="binance-card">
    <div class="binance-header">
        <div class="binance-logo-wrap">
            <?php if (!empty($method['method_logo'])): ?>
                <?php if ($method['method_logo_type'] === 'icon'): ?>
                    <i class="fa-solid <?= htmlspecialchars($method['method_logo']) ?>"></i>
                <?php else: ?>
                    <img src="<?= htmlspecialchars($method['method_logo']) ?>" 
                         alt="<?= $methodName ?>"
                         onerror="this.style.display='none';this.parentNode.innerHTML='<i class=\'fa-solid fa-bitcoin-sign\'></i>';">
                <?php endif; ?>
            <?php else: ?>
                <i class="fa-solid fa-bitcoin-sign"></i>
            <?php endif; ?>
        </div>
        <div class="binance-title">
            <h3><?= $methodName ?></h3>
            <p>Only <?= $methodName ?> accepted</p>
        </div>
    </div>

    <div class="binance-id-box">
        <div class="binance-id-lbl">
            <i class="fa-solid fa-id-card"></i> Binance ID / Pay ID
        </div>
        <div class="binance-id-val" id="binanceIdVal"><?= htmlspecialchars($method['binance_id']) ?></div>
    </div>

    <button class="btn-copy-binance" onclick="copyBinanceId()">
        <i class="fa-solid fa-copy"></i> Copy Binance ID
    </button>
</div>

<!-- AMOUNT -->
<div class="section-card">
    <div class="section-title">
        <i class="fa-solid fa-dollar-sign" style="color:#F5A623;"></i> Enter Amount Sent
    </div>

    <!-- LIMIT INFO -->
    <div class="limit-info-box">
        <div class="limit-item">
            <div class="limit-icon green"><i class="fa-solid fa-arrow-down"></i></div>
            <div class="limit-info">
                <div class="lbl">Minimum</div>
                <div class="val">$<?= number_format($minAmount, 2) ?></div>
            </div>
        </div>
        <div class="limit-item">
            <div class="limit-icon orange"><i class="fa-solid fa-arrow-up"></i></div>
            <div class="limit-info">
                <div class="lbl">Maximum</div>
                <div class="val">$<?= number_format($maxAmount, 0) ?></div>
            </div>
        </div>
    </div>

    <!-- INPUT -->
    <div class="custom-amount-wrap">
        <span class="currency">$</span>
        <input type="number" 
               id="amountInput" 
               placeholder="Enter amount (min $<?= number_format($minAmount, 0) ?>)" 
               step="0.01" 
               min="<?= $minAmount ?>" 
               max="<?= $maxAmount ?>">
    </div>

    <div class="input-hint">
        <i class="fa-solid fa-circle-info"></i>
        Enter amount between 
        <span class="range-badge">$<?= number_format($minAmount, 0) ?></span>
        and 
        <span class="range-badge">$<?= number_format($maxAmount, 0) ?></span>
    </div>

    <button class="btn-submit" id="submitBtn" onclick="submitPayment()">
        <i class="fa-solid fa-paper-plane"></i> Submit Payment
    </button>

    <div class="note-box">
        <i class="fa-solid fa-circle-info"></i>
        <span><?= htmlspecialchars($method['instructions'] ?? 'Send exact amount to the Binance ID above. After sending, enter the amount and submit.') ?></span>
    </div>
</div>

<!-- BOTTOM NAV -->
<div class="bottom-nav">
    <a class="nav-item" onclick="goTo('p2p')">
        <div class="nav-icon"><i class="fa-solid fa-arrows-rotate"></i></div>
        <div class="nav-label">P2P</div>
    </a>
    <a class="nav-item" onclick="goTo('market')">
        <div class="nav-icon"><i class="fa-solid fa-store"></i></div>
        <div class="nav-label">Market</div>
    </a>
    <a class="nav-item" onclick="goTo('vault')">
        <div class="nav-icon"><i class="fa-solid fa-shield-halved"></i></div>
        <div class="nav-label">Vault</div>
    </a>
    <a class="nav-item" onclick="goTo('team')">
        <div class="nav-icon"><i class="fa-solid fa-user-group"></i></div>
        <div class="nav-label">Team</div>
    </a>
    <a class="nav-item" onclick="goTo('mine')">
        <div class="nav-icon"><i class="fa-solid fa-circle-user"></i></div>
        <div class="nav-label">Mine</div>
    </a>
</div>

<!-- VERIFICATION POPUP -->
<div class="verify-overlay" id="verifyOverlay">
    <div class="verify-box" id="verifyBox">
        <div class="verify-icon-wrap checking" id="verifyIconWrap">
            <i class="fa-solid fa-magnifying-glass" id="verifyIcon"></i>
        </div>

        <div class="verify-title" id="verifyTitle">Verifying Payment...</div>
        <div class="verify-sub" id="verifySub">
            Please wait while we check your transaction on Binance
        </div>

        <div class="verify-details" id="verifyDetails">
            <div class="verify-detail-row">
                <span class="l">Method</span>
                <span class="r"><?= $methodName ?></span>
            </div>
            <div class="verify-detail-row">
                <span class="l">Amount</span>
                <span class="r green" id="vdAmount">$0.00</span>
            </div>
            <div class="verify-detail-row">
                <span class="l">Status</span>
                <span class="r orange" id="vdStatus">Checking...</span>
            </div>
        </div>

        <div class="verify-loader" id="verifyLoader">
            <span></span><span></span><span></span>
        </div>
        <div class="verify-status-text" id="verifyStatusText">Connecting to Binance...</div>

        <div class="verify-balance-preview" id="verifyBalancePreview" style="display:none;">
            <div class="lbl">New Balance</div>
            <div class="old-val" id="oldBalance">$0.00</div>
            <div class="new-val" id="newBalance">$0.00</div>
        </div>

        <button class="verify-btn verify-btn-primary" id="verifyActionBtn" style="display:none;" onclick="closeVerifyModal()">
            <i class="fa-solid fa-check"></i> Continue
        </button>
    </div>
</div>

<script>
var EMAIL      = <?= json_encode($email) ?>;
var API_URL    = 'https://mjob.shakiltechnology.com/coinflux_api/recharge_api.php';
var MIN_AMOUNT = <?= (float)$minAmount ?>;
var MAX_AMOUNT = <?= (float)$maxAmount ?>;

var isSubmitting = false;

// ==================== COPY BINANCE ID ====================
function copyBinanceId() {
    var id = document.getElementById('binanceIdVal').textContent.trim();
    if (window.Android && window.Android.copyToClipboard) {
        window.Android.copyToClipboard(id);
        showToast('Binance ID copied!');
    } else {
        navigator.clipboard.writeText(id).then(function() {
            showToast('Binance ID copied!');
        }).catch(function() {
            alert('Copied: ' + id);
        });
    }
}

// ==================== SUBMIT PAYMENT ====================
function submitPayment() {
    if (isSubmitting) return;

    var amount = parseFloat(document.getElementById('amountInput').value) || 0;

    if (amount <= 0) {
        showToast('Please enter an amount');
        return;
    }

    if (amount < MIN_AMOUNT) {
        showToast('Minimum amount is $' + MIN_AMOUNT.toFixed(2));
        return;
    }

    if (amount > MAX_AMOUNT) {
        showToast('Maximum amount is $' + MAX_AMOUNT.toLocaleString());
        return;
    }

    isSubmitting = true;
    var btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Sending...';

    showVerifyModal(amount);

    var fd = new FormData();
    fd.append('action', 'verify_binance_payment');
    fd.append('email', EMAIL);
    fd.append('amount', amount);

    fetch(API_URL, { method:'POST', body:fd })
        .then(function(r) {
            if (!r.ok) throw new Error('HTTP ' + r.status);
            return r.text();
        })
        .then(function(txt) {
            var res;
            try { res = JSON.parse(txt); }
            catch (e) {
                console.error('Bad JSON:', txt);
                throw new Error('Server response invalid');
            }
            if (res.success) {
                showVerifySuccess(amount, res.old_balance, res.new_balance, res.message);
            } else {
                showVerifyError(res.message || 'Payment not found');
            }
        })
        .catch(function(err) {
            console.error(err);
            showVerifyError('Network error: ' + err.message);
        })
        .finally(function() {
            isSubmitting = false;
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-paper-plane"></i> Submit Payment';
        });
}

// ==================== VERIFY MODAL ====================
function showVerifyModal(amount) {
    document.getElementById('verifyIconWrap').className = 'verify-icon-wrap checking';
    document.getElementById('verifyIcon').className = 'fa-solid fa-magnifying-glass';
    document.getElementById('verifyTitle').textContent = 'Verifying Payment...';
    document.getElementById('verifySub').textContent = 'Please wait while we check your transaction on Binance';
    document.getElementById('vdAmount').textContent = '$' + amount.toFixed(2);
    document.getElementById('vdStatus').textContent = 'Checking...';
    document.getElementById('vdStatus').style.color = '#D97706';
    document.getElementById('verifyLoader').style.display = 'flex';
    document.getElementById('verifyStatusText').style.display = 'block';
    document.getElementById('verifyBalancePreview').style.display = 'none';
    document.getElementById('verifyActionBtn').style.display = 'none';
    document.getElementById('verifyDetails').style.display = 'block';

    document.getElementById('verifyOverlay').classList.add('show');

    var statuses = [
        'Connecting to Binance...',
        'Searching transactions...',
        'Matching amount...',
        'Verifying payment...',
        'Almost done...'
    ];
    var i = 0;
    var statusEl = document.getElementById('verifyStatusText');
    statusEl.textContent = statuses[0];
    if (window.__verifyInterval) clearInterval(window.__verifyInterval);
    window.__verifyInterval = setInterval(function() {
        i++;
        if (i < statuses.length) statusEl.textContent = statuses[i];
    }, 900);
}

function showVerifySuccess(amount, oldBal, newBal, message) {
    if (window.__verifyInterval) clearInterval(window.__verifyInterval);
    document.getElementById('verifyIconWrap').className = 'verify-icon-wrap success';
    document.getElementById('verifyIcon').className = 'fa-solid fa-check';
    document.getElementById('verifyTitle').textContent = 'Payment Verified!';
    document.getElementById('verifySub').textContent = message || 'Your payment has been confirmed';
    document.getElementById('vdStatus').textContent = '✓ Verified';
    document.getElementById('vdStatus').style.color = '#10B981';
    document.getElementById('verifyLoader').style.display = 'none';
    document.getElementById('verifyStatusText').style.display = 'none';

    document.getElementById('oldBalance').textContent = '$' + parseFloat(oldBal).toFixed(2);
    document.getElementById('newBalance').textContent = '$' + parseFloat(newBal).toFixed(2);
    document.getElementById('verifyBalancePreview').style.display = 'block';

    document.getElementById('verifyActionBtn').style.display = 'block';
    document.getElementById('verifyActionBtn').className = 'verify-btn verify-btn-primary';
    document.getElementById('verifyActionBtn').innerHTML = '<i class="fa-solid fa-check"></i> Great! Continue';
}

function showVerifyError(message) {
    if (window.__verifyInterval) clearInterval(window.__verifyInterval);
    document.getElementById('verifyIconWrap').className = 'verify-icon-wrap error';
    document.getElementById('verifyIcon').className = 'fa-solid fa-xmark';
    document.getElementById('verifyTitle').textContent = 'Payment Not Found';
    document.getElementById('verifySub').textContent = message || 'We could not find your payment.';
    document.getElementById('vdStatus').textContent = '✗ Failed';
    document.getElementById('vdStatus').style.color = '#DC2626';
    document.getElementById('verifyLoader').style.display = 'none';
    document.getElementById('verifyStatusText').style.display = 'none';

    document.getElementById('verifyActionBtn').style.display = 'block';
    document.getElementById('verifyActionBtn').className = 'verify-btn verify-btn-danger';
    document.getElementById('verifyActionBtn').innerHTML = '<i class="fa-solid fa-xmark"></i> Try Again';
}

function closeVerifyModal() {
    if (window.__verifyInterval) clearInterval(window.__verifyInterval);
    document.getElementById('verifyOverlay').classList.remove('show');
    var isSuccess = document.getElementById('verifyIconWrap').classList.contains('success');
    if (isSuccess) setTimeout(function() { location.reload(); }, 200);
}

// ==================== TOAST ====================
function showToast(msg) {
    var old = document.querySelector('.toast-popup');
    if (old) old.remove();

    var t = document.createElement('div');
    t.className = 'toast-popup';
    t.textContent = msg;
    document.body.appendChild(t);

    setTimeout(function() { t.classList.add('show'); }, 10);
    setTimeout(function() {
        t.classList.remove('show');
        setTimeout(function() { t.remove(); }, 300);
    }, 2000);
}

// ==================== NAVIGATION ====================
function goTo(page) {
    if (page === 'mine')         { callAndroid('openDashboard'); return; }
    if (page === 'notification') { callAndroid('onNotify', 'recharge'); return; }
    if (page === 'menu')         { openMenu(); return; }
    callAndroid('openPage', page);
}
function openMenu() {
    if (window.Android && window.Android.openMenu) window.Android.openMenu();
    else alert('Menu');
}
function callAndroid(method, arg) {
    if (window.Android && window.Android[method]) {
        try { window.Android[method](arg); } catch(e) {}
    } else {
        alert(method + ': ' + arg);
    }
}
</script>
</body>
</html>