<?php
$amount = isset($_POST['amount']) ? htmlspecialchars($_POST['amount']) : '0.00';
$currency = isset($_POST['currency']) ? htmlspecialchars($_POST['currency']) : 'USD';
$usdEquivalentRaw = isset($_POST['usdEquivalent']) ? $_POST['usdEquivalent'] : '0.00';
$usdEquivalentNumeric = (float) str_replace(',', '', $usdEquivalentRaw);
$cryptoChargeNumeric = $usdEquivalentNumeric * (0.5 / 100);
$usdtEquivalentNumeric = $usdEquivalentNumeric + $cryptoChargeNumeric;

$usdEquivalent = number_format($usdEquivalentNumeric, 2, '.', '');
$cryptoCharge = number_format($cryptoChargeNumeric, 2, '.', '');
$usdtEquivalent  = number_format($usdtEquivalentNumeric, 2, '.', '');
$network = isset($_POST['network']) ? htmlspecialchars($_POST['network']) : 'ETH';
$networkDisplay = $network == 'ETH' ? 'ETH (ERC-20)' : ($network == 'TRX' ? 'TRX (Tron)' : ($network == 'BEP-20' ? 'BEP-20 (BSC)' : 'ETH (ERC-20)'));
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Payment</title>
    <style>
        body {
            margin: 0;
            font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #f2f4f7;
            color: #111827;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .page {
            width: 100%;
            max-width: 800px;
            padding: 24px;
        }

        .card {
            background: #fff;
            border-radius: 28px;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
            overflow: hidden;
            border: 1px solid rgba(15, 23, 42, 0.08);
        }

        .card-header {
            padding: 22px 24px;
            display: flex;
            align-items: center;
            gap: 14px;
            border-bottom: 1px solid #e5e7eb;
        }

        .brand-icon {
            width: 40px;
            height: 40px;
            background: #111827;
            border-radius: 10px;
            display: grid;
            place-items: center;
            color: #fff;
            font-weight: 700;
        }

        .brand-title {
            display: grid;
            gap: 4px;
        }

        .brand-title h1 {
            margin: 0;
            font-size: 16px;
            letter-spacing: -0.02em;
        }

        .brand-title p {
            margin: 0;
            color: #6b7280;
            font-size: 13px;
        }

        .content {
            padding: 24px;
        }

        .amount {
            font-size: 44px;
            font-weight: 700;
            line-height: 1;
        }

        .amount-meta {
            margin-top: 10px;
            color: #6b7280;
            font-size: 14px;
        }

        .status-pill {
            margin-top: 10px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #374151;
            font-size: 13px;
        }

        .status-pill span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 999px;
        }

        .qr-panel {
            margin-top: 24px;
            padding: 18px;
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            display: grid;
            gap: 16px;
            background: #f9fafb;
        }

        .qr-header {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .qr-header strong {
            font-size: 14px;
            display: block;
        }

        .qr-header span {
            color: #6b7280;
            font-size: 13px;
        }

        .qr-image {
            width: 100%;
            min-height: 180px;
            background: linear-gradient(135deg, #dbeafe 0%, #eef2ff 100%);
            border-radius: 16px;
            display: grid;
            place-items: center;
            color: #1d4ed8;
            font-size: 14px;
            letter-spacing: 0.02em;
        }

        .qr-image img {
            max-width: 100px;
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .address-box {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 14px 16px;
            display: grid;
            gap: 6px;
			
			 /* Ensures only SVG handles clicks, not empty box space */
    pointer-events: none; 
  }
  .clickable-svg {
    /* Re-enables clicks specifically for the SVG */
    pointer-events: auto; 
    cursor: pointer;
  }
  
        }

        .address-box code {
            display: block;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
            color: #111827;
            font-size: 13px;
            word-break: break-all;
        }

        .address-tip {
            color: #6b7280;
            font-size: 12px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin-top: 18px;
        }

        .info-card {
            background: #fff;
            border-radius: 16px;
            padding: 14px 16px;
            border: 1px solid #e5e7eb;
        }

        .info-card .label {
            color: #6b7280;
            font-size: 12px;
            margin-bottom: 6px;
        }

        .info-card .value {
            font-weight: 700;
            font-size: 15px;
        }

        .footer {
            padding: 20px 24px 24px;
            border-top: 1px solid #e5e7eb;
        }

        .button-row {
            display: grid;
            gap: 12px;
        }

        .button {
            border-radius: 14px;
            border: none;
            padding: 14px 16px;
            font-weight: 700;
            cursor: pointer;
        }

        .button-primary {
            background: #111827;
            color: #fff;
        }

        .button-secondary {
            background: #f3f4f6;
            color: #111827;
        }

        .help-bar {
            margin-top: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #6b7280;
            font-size: 13px;
        }

        .help-bar svg {
            width: 18px;
            height: 18px;
        }

        #crypto-loader-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            z-index: 100000;
        }

        .loader-box {
            text-align: center;
            padding: 24px 30px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
        }

        .loader-box img {
            width: 56px;
            height: 56px;
            display: block;
            margin: 0 auto 16px;
        }

        .loader-box p {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #111827;
        }

        body.loading .page {
            visibility: hidden;
        }
        .toast {
            position: fixed;
            background: #e5e7eb;
            color: #000000;
            padding: 16px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            font-size: 14px;
			font-weight: 100;
            z-index: 10000;
            animation: slideIn 0.3s ease-in-out;
            max-width: 300px;
            word-wrap: break-word;
            pointer-events: none;
        }
        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }
    </style>
</head>

<body class="loading">
    <div id="crypto-loader-overlay">
        <div class="loader-box">
            <img src="assetsp/loader_1.gif" alt="Loading Crypto Gateway">
            <p>Loading Crypto Gateway.....</p>
        </div>
    </div>
    <div class="page">
        <div class="card">
            <div class="card-header">
                <div class="brand-icon">C</div>
                <div class="brand-title">
                    <h1>cryptomax</h1>
                    <p>Pay with crypto</p>
                </div>
            </div>
            <div class="content">
                <div class="amount"><?php echo $usdtEquivalent; ?> <b style="font-size: 30px; font-weight: 700;">USDT</b> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 8px; cursor: pointer;">
                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg></div>
					
					<div style="display: flex; align-items: center; gap: 4px; float: right;">
				<a href="How to Pay a Crypto Invoice.pdf" target="_blank" style="font-size: 13px;"><strong>How do I pay?</strong></a></div>
					
                <div class="amount-meta"><?php echo $amount; ?> <?php echo $currency; ?> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 8px;">
                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                </div>
	
			   <div class="status-pill"><span></span> Amount · <?php echo $usdEquivalent; ?> USDT</div> 
                <br>
                <div class="status-pill"><span></span> Crypto Charge (0.5%) · <?php echo $cryptoCharge; ?></div>
                <br>
                <div class="status-pill"><span></span> Total · <?php echo $usdtEquivalent; ?> USDT</div>
                <br>
                <div class="status-pill"><span></span> Network · <?php echo $networkDisplay; ?></div>

<div style="display: flex; align-items: center; gap: 4px; float: right;"> 
			  <img src="usdt.png" width="22" height="22"> <span style="font-size: 12px;">Only send USDT on Ethereum Network {USDT-ERC20} to this address</span>
			   </div>
			   
                <div class="qr-panel">
                    <div class="qr-header">
					
                        <strong>Recipient’s wallet address</strong>
                        <span style="cursor: pointer;">0x1e2dd37f2FcE775A36768c17EE034aB6d459a236<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 8px;">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                            </svg></span>
                    </div>
					
                    <div class="qr-image"><img src="assets/qr/eth.jpg" style="max-width: 100px; height: auto;"></div>
                    <div class="address-box"><a>
                        <code style="cursor: pointer;">0x1e2dd37f2FcE775A36768c17EE034aB6d459a236<svg class="clickable-svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 8px;">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                            </svg></code></a>
                        <div class="address-tip">When your payment status will change, we’ll send notification to your e-mail.</div>
                    </div>
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="label">Expiration time</div>
                            <div class="value" id="countdown">30:00</div>
                        </div>
                        <div class="info-card">
                            <div><img src="assets/images/loader_1.gif" alt=""></div>
                            <div class="label">Checking blockchain transaction</div>
                            <div class="value">In progress</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="button-row">
                    
					<button class="button button-primary">WalletConnect</button>
					
                </div>
                <div class="help-bar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14z"></path>
                        <path d="M12 15v-4"></path>
                        <path d="M12 9h.01"></path>
                    </svg>
                    <span>This payment is processed by Pesapal via Cryptomax.</span>
                </div>
            </div>
        </div>
    </div>
    <script>
  let timeInMinutes = 30;
  let time = timeInMinutes * 60;
  const countdownElement = document.getElementById("countdown");

  function updateCountdown() {
    let minutes = Math.floor(time / 60);
    let seconds = time % 60;

    // Add leading zero if seconds < 10
    seconds = seconds < 10 ? '0' + seconds : seconds;
    minutes = minutes < 10 ? '0' + minutes : minutes;

    countdownElement.innerHTML = `${minutes}:${seconds}`;

    if (time > 0) {
      time--;
    } else {
      time = timeInMinutes * 60; // Reset to 30 minutes
    }
  }

  // Update every 1 second
  setInterval(updateCountdown, 1000);

        function showToast(message, element) {
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            
            // Position the toast relative to the clicked element
            if (element) {
                const rect = element.getBoundingClientRect();
                toast.style.left = (rect.right + 10) + 'px';
                toast.style.top = (rect.top + (rect.height / 2) - 20) + 'px';
                element.parentNode.appendChild(toast);
            } else {
                document.body.appendChild(toast);
            }
            
            setTimeout(() => {
                toast.style.animation = 'slideOut 0.3s ease-in-out';
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.parentNode.removeChild(toast);
                    }
                }, 300);
            }, 2000);
        }

        function copyToClipboard(text, message, element) {
            navigator.clipboard.writeText(text).then(() => {
                showToast(message || 'Amount successfully copied!', element);
            }).catch(err => {
                console.error('Failed to copy: ', err);
            });
        }

        const countdownInterval = setInterval(updateCountdown, 1000);
        updateCountdown(); // Initial call

        // Add click listeners for copy functionality
        document.querySelector('.amount svg').addEventListener('click', (e) => {
            e.stopPropagation();
            let text = document.querySelector('.amount').textContent.split(' ')[0];
            copyToClipboard(text, 'Amount successfully copied!', e.target);
        });
        document.querySelector('.qr-header span').addEventListener('click', (e) => {
            let text = document.querySelector('.qr-header span').textContent.trim();
            text = text.replace(/\s*<svg.*<\/svg>\s*/g, '').trim();
            copyToClipboard(text, 'Wallet address copied!', e.target);
        });
        document.querySelector('code').addEventListener('click', (e) => {
            let text = document.querySelector('code').textContent.trim();
            text = text.replace(/\s*<svg.*<\/svg>\s*/g, '').trim();
            copyToClipboard(text, 'Wallet address copied!', e.target);
        });
    </script>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                var overlay = document.getElementById('crypto-loader-overlay');
                if (overlay) {
                    overlay.style.display = 'none';
                }
                document.body.classList.remove('loading');
            }, 1000);
        });
    </script>
</body>

</html>