{% extends "base.html" %}

{% block title %}Payment System Settings - Admin{% endblock %}

{% block content %}
<div class="container-fluid" style="padding: 20px; background: #0f3460; min-height: 100vh;">
    <div style="max-width: 1400px; margin: 0 auto;">
        <h2 style="color: #4a9eff; margin-bottom: 30px;">
            <i class="fas fa-cog me-2"></i>Payment System Settings
        </h2>

        <!-- Encryption Key Configuration -->
        <div style="background: #16213e; border: 2px solid #e74c3c; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #e74c3c;">
                <i class="fas fa-key me-2"></i>Encryption Key Configuration
            </h3>
            
            <div style="margin-bottom: 20px; padding: 15px; background: #1a1a2e; border-radius: 8px; border-left: 4px solid #e74c3c;">
                <div style="color: #e74c3c; font-weight: bold; margin-bottom: 5px;">
                    <i class="fas fa-exclamation-triangle me-2"></i>Critical Security Setting
                </div>
                <div style="color: #e0e0e0; font-size: 14px;">
                    The encryption key is used to encrypt HD wallet master keys. Once set, DO NOT change it or you will lose access to all crypto wallets.
                    If not set, a temporary key is generated on each restart (not recommended for production).
                </div>
            </div>
            
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 10px; color: #e0e0e0; font-weight: 500;">
                    Encryption Key Status
                </label>
                <div id="encryptionKeyStatus" style="padding: 15px; background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; color: #e0e0e0;">
                    <i class="fas fa-spinner fa-spin"></i> Loading...
                </div>
            </div>
            
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 10px; color: #e0e0e0; font-weight: 500;">
                    Set New Encryption Key (44 characters, base64)
                </label>
                <input type="text" id="encryptionKey" placeholder="Leave empty to auto-generate" style="width: 100%; padding: 10px; border: 1px solid #0f3460; border-radius: 5px; background: #1a1a2e; color: #e0e0e0; font-family: monospace;">
                <div style="margin-top: 10px; color: #888; font-size: 14px;">
                    <i class="fas fa-info-circle me-2"></i>Leave empty to auto-generate a secure key. Copy and save it securely - you cannot retrieve it later.
                </div>
            </div>
            
            <div style="display: flex; gap: 10px;">
                <button type="button" class="btn" onclick="generateEncryptionKey()" style="background: #9b59b6; color: white;">
                    <i class="fas fa-random me-2"></i>Generate Random Key
                </button>
                <button type="button" class="btn" onclick="saveEncryptionKey()" style="background: #e74c3c; color: white;">
                    <i class="fas fa-save me-2"></i>Save Encryption Key
                </button>
            </div>
        </div>

        <!-- System Status -->
        <div style="background: #16213e; border: 2px solid #4a9eff; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #4a9eff;">
                <i class="fas fa-heartbeat me-2"></i>System Status
            </h3>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px;">
                    <div style="color: #888; font-size: 14px; margin-bottom: 5px;">Master Keys Status</div>
                    <div id="masterKeysStatus" style="font-size: 24px; font-weight: bold; color: #4a9eff;">
                        <i class="fas fa-spinner fa-spin"></i> Loading...
                    </div>
                </div>
                
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px;">
                    <div style="color: #888; font-size: 14px; margin-bottom: 5px;">Total Crypto Balance</div>
                    <div id="totalBalance" style="font-size: 24px; font-weight: bold; color: #4a9eff;">
                        <i class="fas fa-spinner fa-spin"></i> Loading...
                    </div>
                </div>
                
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px;">
                    <div style="color: #888; font-size: 14px; margin-bottom: 5px;">Pending Payments</div>
                    <div id="pendingPayments" style="font-size: 24px; font-weight: bold; color: #f39c12;">
                        <i class="fas fa-spinner fa-spin"></i> Loading...
                    </div>
                </div>
                
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px;">
                    <div style="color: #888; font-size: 14px; margin-bottom: 5px;">Failed Payments</div>
                    <div id="failedPayments" style="font-size: 24px; font-weight: bold; color: #e74c3c;">
                        <i class="fas fa-spinner fa-spin"></i> Loading...
                    </div>
                </div>
            </div>
            
            <div style="margin-top: 15px; padding: 15px; background: #1a1a2e; border-radius: 8px; border-left: 4px solid #4a9eff;">
                <div style="color: #4a9eff; font-weight: bold; margin-bottom: 5px;">
                    <i class="fas fa-info-circle me-2"></i>About Master Keys
                </div>
                <div style="color: #e0e0e0; font-size: 14px;">
                    Master keys are automatically generated on first startup and encrypted with your ENCRYPTION_KEY. 
                    They are used to derive unique payment addresses for each user. The actual keys are never displayed for security.
                </div>
            </div>
        </div>

        <!-- Payment Gateways Configuration -->
        <div style="background: #16213e; border: 2px solid #f39c12; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #f39c12;">
                <i class="fas fa-credit-card me-2"></i>Payment Gateways Configuration
            </h3>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px;">
                <!-- PayPal -->
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; overflow: hidden;">
                    <div style="background: #0070ba; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
                        <h6 style="margin: 0;"><i class="fab fa-paypal me-2"></i>PayPal</h6>
                        <label style="margin: 0; cursor: pointer;">
                            <input type="checkbox" id="paypalEnabled" style="margin-right: 5px;">Enabled
                        </label>
                    </div>
                    <div style="padding: 15px;">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Client ID</label>
                            <input type="text" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="paypalClientId" placeholder="PayPal Client ID">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Client Secret</label>
                            <input type="password" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="paypalClientSecret" placeholder="PayPal Client Secret">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Webhook Secret</label>
                            <input type="password" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="paypalWebhookSecret" placeholder="Webhook Secret">
                        </div>
                        <label style="cursor: pointer;">
                            <input type="checkbox" id="paypalSandbox" checked style="margin-right: 5px;">Sandbox Mode
                        </label>
                    </div>
                </div>

                <!-- Stripe -->
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; overflow: hidden;">
                    <div style="background: #635bff; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
                        <h6 style="margin: 0;"><i class="fab fa-stripe me-2"></i>Stripe</h6>
                        <label style="margin: 0; cursor: pointer;">
                            <input type="checkbox" id="stripeEnabled" style="margin-right: 5px;">Enabled
                        </label>
                    </div>
                    <div style="padding: 15px;">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Publishable Key</label>
                            <input type="text" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="stripePublishableKey" placeholder="pk_...">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Secret Key</label>
                            <input type="password" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="stripeSecretKey" placeholder="sk_...">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Webhook Secret</label>
                            <input type="password" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="stripeWebhookSecret" placeholder="whsec_...">
                        </div>
                        <label style="cursor: pointer;">
                            <input type="checkbox" id="stripeSandbox" checked style="margin-right: 5px;">Test Mode
                        </label>
                    </div>
                </div>

                <!-- Bitcoin -->
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; overflow: hidden;">
                    <div style="background: #f7931a; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
                        <h6 style="margin: 0;"><i class="fab fa-bitcoin me-2"></i>Bitcoin</h6>
                        <label style="margin: 0; cursor: pointer;">
                            <input type="checkbox" id="bitcoinEnabled" style="margin-right: 5px;">Enabled
                        </label>
                    </div>
                    <div style="padding: 15px;">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Bitcoin Address</label>
                            <input type="text" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="bitcoinAddress" placeholder="bc1q...">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Minimum Confirmations</label>
                            <input type="number" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="bitcoinConfirmations" value="3" min="1" max="10">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Expiration Time (minutes)</label>
                            <input type="number" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="bitcoinExpiration" value="120" min="15" max="1440">
                        </div>
                    </div>
                </div>

                <!-- Ethereum -->
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; overflow: hidden;">
                    <div style="background: #627eea; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
                        <h6 style="margin: 0;"><i class="fab fa-ethereum me-2"></i>Ethereum (ETH)</h6>
                        <label style="margin: 0; cursor: pointer;">
                            <input type="checkbox" id="ethEnabled" style="margin-right: 5px;">Enabled
                        </label>
                    </div>
                    <div style="padding: 15px;">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">ETH Wallet Address</label>
                            <input type="text" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="ethAddress" placeholder="0x...">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Minimum Confirmations</label>
                            <input type="number" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="ethConfirmations" value="12" min="1" max="50">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Chain ID</label>
                            <select style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="ethChainId">
                                <option value="1">Ethereum Mainnet</option>
                                <option value="5">Goerli Testnet</option>
                                <option value="11155111">Sepolia Testnet</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- USDT -->
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; overflow: hidden;">
                    <div style="background: #26a17b; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
                        <h6 style="margin: 0;"><i class="fas fa-dollar-sign me-2"></i>Tether (USDT)</h6>
                        <label style="margin: 0; cursor: pointer;">
                            <input type="checkbox" id="usdtEnabled" style="margin-right: 5px;">Enabled
                        </label>
                    </div>
                    <div style="padding: 15px;">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">USDT Wallet Address</label>
                            <input type="text" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="usdtAddress" placeholder="0x...">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Network</label>
                            <select style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="usdtNetwork">
                                <option value="erc20">ERC20 (Ethereum)</option>
                                <option value="trc20">TRC20 (Tron)</option>
                                <option value="bep20">BEP20 (BSC)</option>
                                <option value="solana">Solana</option>
                            </select>
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Minimum Confirmations</label>
                            <input type="number" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="usdtConfirmations" value="3" min="1" max="50">
                        </div>
                    </div>
                </div>

                <!-- USDC -->
                <div style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; overflow: hidden;">
                    <div style="background: #2775ca; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
                        <h6 style="margin: 0;"><i class="fas fa-coins me-2"></i>USD Coin (USDC)</h6>
                        <label style="margin: 0; cursor: pointer;">
                            <input type="checkbox" id="usdcEnabled" style="margin-right: 5px;">Enabled
                        </label>
                    </div>
                    <div style="padding: 15px;">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">USDC Wallet Address</label>
                            <input type="text" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="usdcAddress" placeholder="0x...">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Network</label>
                            <select style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="usdcNetwork">
                                <option value="erc20">ERC20 (Ethereum)</option>
                                <option value="solana">Solana</option>
                                <option value="bep20">BEP20 (BSC)</option>
                                <option value="algorand">Algorand</option>
                            </select>
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #e0e0e0;">Minimum Confirmations</label>
                            <input type="number" style="width: 100%; padding: 8px; border: 1px solid #0f3460; border-radius: 3px; background: #16213e; color: #e0e0e0;" id="usdcConfirmations" value="3" min="1" max="50">
                        </div>
                    </div>
                </div>
            </div>

            <button type="button" class="btn" onclick="savePaymentGateways()" style="background: #f39c12; color: white; margin-top: 20px;">
                <i class="fas fa-save me-2"></i>Save Payment Gateway Configuration
            </button>
        </div>

        <!-- Price Sources Configuration -->
        <div style="background: #16213e; border: 2px solid #f39c12; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #f39c12;">
                <i class="fas fa-chart-line me-2"></i>Crypto Price Sources
            </h3>
            
            <div style="margin-bottom: 15px; color: #e0e0e0;">
                Select which exchanges to use for cryptocurrency price aggregation:
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center;">
                    <input type="checkbox" id="priceCoinbase" checked style="margin-right: 10px; width: 20px; height: 20px;">
                    <span style="color: #e0e0e0; font-weight: 500;">Coinbase</span>
                </label>
                
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center;">
                    <input type="checkbox" id="priceBinance" checked style="margin-right: 10px; width: 20px; height: 20px;">
                    <span style="color: #e0e0e0; font-weight: 500;">Binance</span>
                </label>
                
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center;">
                    <input type="checkbox" id="priceKraken" checked style="margin-right: 10px; width: 20px; height: 20px;">
                    <span style="color: #e0e0e0; font-weight: 500;">Kraken</span>
                </label>
            </div>
            
            <!-- Live Crypto Prices Display -->
            <div style="margin-bottom: 20px; padding: 20px; background: #1a1a2e; border-radius: 8px; border-left: 4px solid #4a9eff;">
                <div style="color: #4a9eff; font-weight: bold; margin-bottom: 15px; display: flex; align-items: center;">
                    <i class="fas fa-coins me-2"></i>Live Cryptocurrency Prices
                    <button onclick="refreshCryptoPrices()" style="margin-left: auto; background: transparent; border: 1px solid #4a9eff; color: #4a9eff; padding: 5px 15px; border-radius: 5px; cursor: pointer; font-size: 12px;">
                        <i class="fas fa-sync-alt me-1"></i>Refresh
                    </button>
                </div>
                
                <!-- Bitcoin -->
                <div style="margin-bottom: 20px; padding: 15px; background: #16213e; border-radius: 8px; border-left: 3px solid #f7931a;">
                    <div style="color: #f7931a; font-weight: bold; margin-bottom: 10px;">
                        <i class="fab fa-bitcoin me-2"></i>Bitcoin (BTC)
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px;">
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Coinbase</div>
                            <div id="priceBtcCoinbase" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Binance</div>
                            <div id="priceBtcBinance" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Kraken</div>
                            <div id="priceBtcKraken" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>
                    <div style="background: #0f3460; padding: 10px; border-radius: 5px; border: 2px solid #f7931a;">
                        <div style="color: #f7931a; font-size: 12px; font-weight: bold;">Average (Applied)</div>
                        <div id="priceBtcAverage" style="color: #f7931a; font-size: 20px; font-weight: bold;">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </div>
                </div>
                
                <!-- Ethereum -->
                <div style="margin-bottom: 20px; padding: 15px; background: #16213e; border-radius: 8px; border-left: 3px solid #627eea;">
                    <div style="color: #627eea; font-weight: bold; margin-bottom: 10px;">
                        <i class="fab fa-ethereum me-2"></i>Ethereum (ETH)
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px;">
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Coinbase</div>
                            <div id="priceEthCoinbase" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Binance</div>
                            <div id="priceEthBinance" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Kraken</div>
                            <div id="priceEthKraken" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>
                    <div style="background: #0f3460; padding: 10px; border-radius: 5px; border: 2px solid #627eea;">
                        <div style="color: #627eea; font-size: 12px; font-weight: bold;">Average (Applied)</div>
                        <div id="priceEthAverage" style="color: #627eea; font-size: 20px; font-weight: bold;">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </div>
                </div>
                
                <!-- USDT -->
                <div style="margin-bottom: 20px; padding: 15px; background: #16213e; border-radius: 8px; border-left: 3px solid #26a17b;">
                    <div style="color: #26a17b; font-weight: bold; margin-bottom: 10px;">
                        <i class="fas fa-dollar-sign me-2"></i>Tether (USDT)
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px;">
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Coinbase</div>
                            <div id="priceUsdtCoinbase" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Binance</div>
                            <div id="priceUsdtBinance" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Kraken</div>
                            <div id="priceUsdtKraken" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>
                    <div style="background: #0f3460; padding: 10px; border-radius: 5px; border: 2px solid #26a17b;">
                        <div style="color: #26a17b; font-size: 12px; font-weight: bold;">Average (Applied)</div>
                        <div id="priceUsdtAverage" style="color: #26a17b; font-size: 20px; font-weight: bold;">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </div>
                </div>
                
                <!-- USDC -->
                <div style="margin-bottom: 15px; padding: 15px; background: #16213e; border-radius: 8px; border-left: 3px solid #2775ca;">
                    <div style="color: #2775ca; font-weight: bold; margin-bottom: 10px;">
                        <i class="fas fa-coins me-2"></i>USD Coin (USDC)
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px;">
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Coinbase</div>
                            <div id="priceUsdcCoinbase" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Binance</div>
                            <div id="priceUsdcBinance" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div style="background: #0f3460; padding: 10px; border-radius: 5px;">
                            <div style="color: #888; font-size: 11px;">Kraken</div>
                            <div id="priceUsdcKraken" style="color: #4a9eff; font-size: 16px; font-weight: bold;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>
                    <div style="background: #0f3460; padding: 10px; border-radius: 5px; border: 2px solid #2775ca;">
                        <div style="color: #2775ca; font-size: 12px; font-weight: bold;">Average (Applied)</div>
                        <div id="priceUsdcAverage" style="color: #2775ca; font-size: 20px; font-weight: bold;">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </div>
                </div>
                
                <div style="color: #888; font-size: 12px; text-align: center;">
                    Last updated: <span id="priceLastUpdated">-</span>
                </div>
            </div>
            
            <button type="button" class="btn" onclick="savePriceSources()" style="background: #f39c12; color: white;">
                <i class="fas fa-save me-2"></i>Save Price Sources
            </button>
        </div>

        <!-- Blockchain Monitoring -->
        <div style="background: #16213e; border: 2px solid #9b59b6; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #9b59b6;">
                <i class="fas fa-cube me-2"></i>Blockchain Monitoring
            </h3>
            
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 10px; color: #e0e0e0; font-weight: 500;">Monitoring Mode</label>
                <select id="blockchainMode" style="width: 100%; max-width: 400px; padding: 10px; border: 1px solid #0f3460; border-radius: 5px; background: #1a1a2e; color: #e0e0e0;">
                    <option value="api">API Polling (Recommended)</option>
                    <option value="webhook">Webhook (Requires public URL)</option>
                </select>
                <div style="margin-top: 10px; color: #888; font-size: 14px;">
                    API Polling: Checks blockchain APIs every minute for new transactions<br>
                    Webhook: Receives instant notifications (requires webhook setup)
                </div>
            </div>
            
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 10px; color: #e0e0e0; font-weight: 500;">Polling Interval (seconds)</label>
                <input type="number" id="pollingInterval" value="60" min="30" max="300" style="width: 100%; max-width: 400px; padding: 10px; border: 1px solid #0f3460; border-radius: 5px; background: #1a1a2e; color: #e0e0e0;">
            </div>
            
            <button type="button" class="btn" onclick="saveBlockchainConfig()" style="background: #9b59b6; color: white;">
                <i class="fas fa-save me-2"></i>Save Blockchain Configuration
            </button>
        </div>

        <!-- Email Notifications -->
        <div style="background: #16213e; border: 2px solid #27ae60; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #27ae60;">
                <i class="fas fa-envelope me-2"></i>Email Notifications
            </h3>
            
            <div style="margin-bottom: 15px; color: #e0e0e0;">
                Enable or disable email notifications for payment events:
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;">
                    <span style="color: #e0e0e0;">Payment Success</span>
                    <input type="checkbox" id="emailPaymentSuccess" checked style="width: 20px; height: 20px;">
                </label>
                
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;">
                    <span style="color: #e0e0e0;">Payment Failed</span>
                    <input type="checkbox" id="emailPaymentFailed" checked style="width: 20px; height: 20px;">
                </label>
                
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;">
                    <span style="color: #e0e0e0;">Subscription Upgraded</span>
                    <input type="checkbox" id="emailSubscriptionUpgraded" checked style="width: 20px; height: 20px;">
                </label>
                
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;">
                    <span style="color: #e0e0e0;">Subscription Downgraded</span>
                    <input type="checkbox" id="emailSubscriptionDowngraded" checked style="width: 20px; height: 20px;">
                </label>
                
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;">
                    <span style="color: #e0e0e0;">Subscription Cancelled</span>
                    <input type="checkbox" id="emailSubscriptionCancelled" checked style="width: 20px; height: 20px;">
                </label>
                
                <label style="background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;">
                    <span style="color: #e0e0e0;">Payment Retry</span>
                    <input type="checkbox" id="emailPaymentRetry" checked style="width: 20px; height: 20px;">
                </label>
            </div>
            
            <button type="button" class="btn" onclick="saveEmailConfig()" style="background: #27ae60; color: white;">
                <i class="fas fa-save me-2"></i>Save Email Configuration
            </button>
        </div>

        <!-- Consolidation Settings -->
        <div style="background: #16213e; border: 2px solid #e67e22; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #e67e22;">
                <i class="fas fa-compress-arrows-alt me-2"></i>Wallet Consolidation
            </h3>
            
            <div style="margin-bottom: 15px; color: #e0e0e0;">
                Set minimum balance thresholds for automatic consolidation to admin addresses:
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <div>
                    <label style="display: block; margin-bottom: 5px; color: #e0e0e0; font-weight: 500;">
                        <i class="fab fa-bitcoin me-2"></i>Bitcoin (BTC)
                    </label>
                    <input type="number" id="consolidationBTC" value="0.01" step="0.001" min="0" style="width: 100%; padding: 10px; border: 1px solid #0f3460; border-radius: 5px; background: #1a1a2e; color: #e0e0e0;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; color: #e0e0e0; font-weight: 500;">
                        <i class="fab fa-ethereum me-2"></i>Ethereum (ETH)
                    </label>
                    <input type="number" id="consolidationETH" value="0.1" step="0.01" min="0" style="width: 100%; padding: 10px; border: 1px solid #0f3460; border-radius: 5px; background: #1a1a2e; color: #e0e0e0;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; color: #e0e0e0; font-weight: 500;">
                        <i class="fas fa-dollar-sign me-2"></i>USDT
                    </label>
                    <input type="number" id="consolidationUSDT" value="100" step="10" min="0" style="width: 100%; padding: 10px; border: 1px solid #0f3460; border-radius: 5px; background: #1a1a2e; color: #e0e0e0;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; color: #e0e0e0; font-weight: 500;">
                        <i class="fas fa-coins me-2"></i>USDC
                    </label>
                    <input type="number" id="consolidationUSDC" value="100" step="10" min="0" style="width: 100%; padding: 10px; border: 1px solid #0f3460; border-radius: 5px; background: #1a1a2e; color: #e0e0e0;">
                </div>
            </div>
            
            <button type="button" class="btn" onclick="saveConsolidationConfig()" style="background: #e67e22; color: white;">
                <i class="fas fa-save me-2"></i>Save Consolidation Settings
            </button>
        </div>

        <!-- Back Button -->
        <div style="margin-top: 30px;">
            <a href="{{ url_for(request, '/dashboard/admin/tiers') }}" class="btn" style="background: #0f3460; color: #4a9eff; border: 1px solid #4a9eff;">
                <i class="fas fa-arrow-left me-2"></i>Back to Tiers
            </a>
        </div>
    </div>
</div>

<script>
// Load encryption key status
async function loadEncryptionKeyStatus() {
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/settings/encryption-key") }}');
        const data = await response.json();
        
        const statusEl = document.getElementById('encryptionKeyStatus');
        if (data.is_set) {
            statusEl.innerHTML = '<i class="fas fa-check-circle" style="color: #27ae60;"></i> Encryption key is configured (Source: ' + data.source + ')';
        } else {
            statusEl.innerHTML = '<i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> No encryption key set - using temporary key (will change on restart)';
        }
    } catch (error) {
        console.error('Error loading encryption key status:', error);
        document.getElementById('encryptionKeyStatus').innerHTML = '<i class="fas fa-times-circle" style="color: #e74c3c;"></i> Error loading status';
    }
}

// Generate random encryption key
function generateEncryptionKey() {
    // Generate 32 random bytes and encode as base64 (44 characters)
    const array = new Uint8Array(32);
    crypto.getRandomValues(array);
    const base64 = btoa(String.fromCharCode.apply(null, array));
    document.getElementById('encryptionKey').value = base64;
    showToast('Random encryption key generated. Save it securely!', 'warning');
}

// Save encryption key
async function saveEncryptionKey() {
    const key = document.getElementById('encryptionKey').value.trim();
    
    if (!key) {
        showToast('Please enter or generate an encryption key', 'danger');
        return;
    }
    
    if (key.length !== 44) {
        showToast('Encryption key must be 44 characters (base64 encoded)', 'danger');
        return;
    }
    
    if (!confirm('WARNING: Setting or changing the encryption key will affect all encrypted data. Are you sure?')) {
        return;
    }
    
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/settings/encryption-key") }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({encryption_key: key})
        });
        
        const result = await response.json();
        
        if (response.ok && result.success) {
            showToast('Encryption key saved successfully. Server restart required to take effect.', 'success');
            document.getElementById('encryptionKey').value = '';
            loadEncryptionKeyStatus();
        } else {
            showToast(result.error || 'Failed to save encryption key', 'danger');
        }
    } catch (error) {
        showToast('Error saving encryption key: ' + error.message, 'danger');
    }
}

// Load system status
async function loadSystemStatus() {
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/payment-system/status") }}');
        const data = await response.json();
        
        // Update master keys status
        const masterKeysEl = document.getElementById('masterKeysStatus');
        if (data.master_keys_initialized) {
            masterKeysEl.innerHTML = '<i class="fas fa-check-circle" style="color: #27ae60;"></i> ' + data.master_keys_count + ' Keys Active';
        } else {
            masterKeysEl.innerHTML = '<i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> Not Initialized';
        }
        
        // Update balances
        document.getElementById('totalBalance').textContent = '$' + (data.total_balance_usd || 0).toFixed(2);
        document.getElementById('pendingPayments').textContent = data.pending_payments || 0;
        document.getElementById('failedPayments').textContent = data.failed_payments || 0;
    } catch (error) {
        console.error('Error loading system status:', error);
        document.getElementById('masterKeysStatus').innerHTML = '<i class="fas fa-times-circle" style="color: #e74c3c;"></i> Error';
    }
}

// Load configuration
async function loadConfiguration() {
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/payment-system/config") }}');
        const data = await response.json();
        
        // Load price sources
        if (data.price_sources) {
            document.getElementById('priceCoinbase').checked = data.price_sources.coinbase || false;
            document.getElementById('priceBinance').checked = data.price_sources.binance || false;
            document.getElementById('priceKraken').checked = data.price_sources.kraken || false;
        }
        
        // Load blockchain config
        if (data.blockchain) {
            document.getElementById('blockchainMode').value = data.blockchain.mode || 'api';
            document.getElementById('pollingInterval').value = data.blockchain.polling_interval || 60;
        }
        
        // Load email config
        if (data.email_notifications) {
            document.getElementById('emailPaymentSuccess').checked = data.email_notifications.payment_success !== false;
            document.getElementById('emailPaymentFailed').checked = data.email_notifications.payment_failed !== false;
            document.getElementById('emailSubscriptionUpgraded').checked = data.email_notifications.subscription_upgraded !== false;
            document.getElementById('emailSubscriptionDowngraded').checked = data.email_notifications.subscription_downgraded !== false;
            document.getElementById('emailSubscriptionCancelled').checked = data.email_notifications.subscription_cancelled !== false;
            document.getElementById('emailPaymentRetry').checked = data.email_notifications.payment_retry !== false;
        }
        
        // Load consolidation config
        if (data.consolidation) {
            document.getElementById('consolidationBTC').value = data.consolidation.btc || 0.01;
            document.getElementById('consolidationETH').value = data.consolidation.eth || 0.1;
            document.getElementById('consolidationUSDT').value = data.consolidation.usdt || 100;
            document.getElementById('consolidationUSDC').value = data.consolidation.usdc || 100;
        }
    } catch (error) {
        console.error('Error loading configuration:', error);
    }
}

// Save functions
async function savePriceSources() {
    const config = {
        coinbase: document.getElementById('priceCoinbase').checked,
        binance: document.getElementById('priceBinance').checked,
        kraken: document.getElementById('priceKraken').checked
    };
    
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/payment-system/config/price-sources") }}', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(config)
        });
        
        if (response.ok) {
            showToast('Price sources configuration saved', 'success');
        } else {
            showToast('Failed to save price sources', 'danger');
        }
    } catch (error) {
        showToast('Error saving price sources: ' + error.message, 'danger');
    }
}

async function saveBlockchainConfig() {
    const config = {
        mode: document.getElementById('blockchainMode').value,
        polling_interval: parseInt(document.getElementById('pollingInterval').value)
    };
    
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/payment-system/config/blockchain") }}', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(config)
        });
        
        if (response.ok) {
            showToast('Blockchain configuration saved', 'success');
        } else {
            showToast('Failed to save blockchain configuration', 'danger');
        }
    } catch (error) {
        showToast('Error saving blockchain configuration: ' + error.message, 'danger');
    }
}

async function saveEmailConfig() {
    const config = {
        payment_success: document.getElementById('emailPaymentSuccess').checked,
        payment_failed: document.getElementById('emailPaymentFailed').checked,
        subscription_upgraded: document.getElementById('emailSubscriptionUpgraded').checked,
        subscription_downgraded: document.getElementById('emailSubscriptionDowngraded').checked,
        subscription_cancelled: document.getElementById('emailSubscriptionCancelled').checked,
        payment_retry: document.getElementById('emailPaymentRetry').checked
    };
    
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/payment-system/config/email") }}', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(config)
        });
        
        if (response.ok) {
            showToast('Email configuration saved', 'success');
        } else {
            showToast('Failed to save email configuration', 'danger');
        }
    } catch (error) {
        showToast('Error saving email configuration: ' + error.message, 'danger');
    }
}

async function saveConsolidationConfig() {
    const config = {
        btc: parseFloat(document.getElementById('consolidationBTC').value),
        eth: parseFloat(document.getElementById('consolidationETH').value),
        usdt: parseFloat(document.getElementById('consolidationUSDT').value),
        usdc: parseFloat(document.getElementById('consolidationUSDC').value)
    };
    
    console.log('Saving consolidation config:', config);
    
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/payment-system/config/consolidation") }}', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(config)
        });
        
        const result = await response.json();
        console.log('Save response:', result);
        
        if (response.ok && result.success) {
            showToast('Consolidation settings saved successfully', 'success');
        } else {
            showToast(result.error || 'Failed to save consolidation settings', 'danger');
        }
    } catch (error) {
        console.error('Error saving consolidation settings:', error);
        showToast('Error saving consolidation settings: ' + error.message, 'danger');
    }
}

function showToast(message, type) {
    // Remove any existing alerts
    const existingAlerts = document.querySelectorAll('.payment-alert');
    existingAlerts.forEach(alert => alert.remove());
    
    // Create prominent alert at top of page
    const alertDiv = document.createElement('div');
    alertDiv.className = 'payment-alert';
    alertDiv.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
        min-width: 400px;
        max-width: 600px;
        padding: 20px 30px;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        animation: slideDown 0.3s ease-out;
    `;
    
    // Set colors based on type
    if (type === 'success') {
        alertDiv.style.background = 'linear-gradient(135deg, #27ae60 0%, #2ecc71 100%)';
        alertDiv.style.color = 'white';
        alertDiv.style.border = '2px solid #27ae60';
        alertDiv.innerHTML = `
            <i class="fas fa-check-circle" style="font-size: 24px; margin-right: 10px; vertical-align: middle;"></i>
            <span style="vertical-align: middle;">${message}</span>
        `;
    } else if (type === 'danger') {
        alertDiv.style.background = 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)';
        alertDiv.style.color = 'white';
        alertDiv.style.border = '2px solid #e74c3c';
        alertDiv.innerHTML = `
            <i class="fas fa-exclamation-circle" style="font-size: 24px; margin-right: 10px; vertical-align: middle;"></i>
            <span style="vertical-align: middle;">${message}</span>
        `;
    } else if (type === 'warning') {
        alertDiv.style.background = 'linear-gradient(135deg, #f39c12 0%, #e67e22 100%)';
        alertDiv.style.color = 'white';
        alertDiv.style.border = '2px solid #f39c12';
        alertDiv.innerHTML = `
            <i class="fas fa-exclamation-triangle" style="font-size: 24px; margin-right: 10px; vertical-align: middle;"></i>
            <span style="vertical-align: middle;">${message}</span>
        `;
    }
    
    // Add animation keyframes
    if (!document.getElementById('alertAnimations')) {
        const style = document.createElement('style');
        style.id = 'alertAnimations';
        style.textContent = `
            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateX(-50%) translateY(-20px);
                }
                to {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
            }
            @keyframes slideUp {
                from {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
                to {
                    opacity: 0;
                    transform: translateX(-50%) translateY(-20px);
                }
            }
        `;
        document.head.appendChild(style);
    }
    
    document.body.appendChild(alertDiv);
    
    // Auto-remove after 4 seconds with fade out animation
    setTimeout(() => {
        alertDiv.style.animation = 'slideUp 0.3s ease-out';
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.parentNode.removeChild(alertDiv);
            }
        }, 300);
    }, 4000);
}


// Load and save payment gateway functions
function loadPaymentGateways() {
    fetch('{{ url_for(request, "/api/admin/settings/payment-gateways") }}')
        .then(response => response.json())
        .then(gateways => {
            // Load gateway configuration into form fields
            if (gateways.paypal) {
                document.getElementById('paypalEnabled').checked = gateways.paypal.enabled || false;
                document.getElementById('paypalClientId').value = gateways.paypal.client_id || '';
                document.getElementById('paypalClientSecret').value = gateways.paypal.client_secret || '';
                document.getElementById('paypalWebhookSecret').value = gateways.paypal.webhook_secret || '';
                document.getElementById('paypalSandbox').checked = gateways.paypal.sandbox !== false;
            }
            
            if (gateways.stripe) {
                document.getElementById('stripeEnabled').checked = gateways.stripe.enabled || false;
                document.getElementById('stripePublishableKey').value = gateways.stripe.publishable_key || '';
                document.getElementById('stripeSecretKey').value = gateways.stripe.secret_key || '';
                document.getElementById('stripeWebhookSecret').value = gateways.stripe.webhook_secret || '';
                document.getElementById('stripeSandbox').checked = gateways.stripe.sandbox !== false;
            }
            
            if (gateways.bitcoin) {
                document.getElementById('bitcoinEnabled').checked = gateways.bitcoin.enabled || false;
                document.getElementById('bitcoinAddress').value = gateways.bitcoin.address || '';
                document.getElementById('bitcoinConfirmations').value = gateways.bitcoin.confirmations || 3;
                document.getElementById('bitcoinExpiration').value = gateways.bitcoin.expiration_minutes || 120;
            }
            
            if (gateways.ethereum) {
                document.getElementById('ethEnabled').checked = gateways.ethereum.enabled || false;
                document.getElementById('ethAddress').value = gateways.ethereum.address || '';
                document.getElementById('ethConfirmations').value = gateways.ethereum.confirmations || 12;
                document.getElementById('ethChainId').value = gateways.ethereum.chain_id || 1;
            }
            
            if (gateways.usdt) {
                document.getElementById('usdtEnabled').checked = gateways.usdt.enabled || false;
                document.getElementById('usdtAddress').value = gateways.usdt.address || '';
                document.getElementById('usdtNetwork').value = gateways.usdt.network || 'erc20';
                document.getElementById('usdtConfirmations').value = gateways.usdt.confirmations || 3;
            }
            
            if (gateways.usdc) {
                document.getElementById('usdcEnabled').checked = gateways.usdc.enabled || false;
                document.getElementById('usdcAddress').value = gateways.usdc.address || '';
                document.getElementById('usdcNetwork').value = gateways.usdc.network || 'erc20';
                document.getElementById('usdcConfirmations').value = gateways.usdc.confirmations || 3;
            }
        });
}

function savePaymentGateways() {
    const gatewaysData = {
        paypal: {
            enabled: document.getElementById('paypalEnabled').checked,
            client_id: document.getElementById('paypalClientId').value,
            client_secret: document.getElementById('paypalClientSecret').value,
            webhook_secret: document.getElementById('paypalWebhookSecret').value,
            sandbox: document.getElementById('paypalSandbox').checked
        },
        stripe: {
            enabled: document.getElementById('stripeEnabled').checked,
            publishable_key: document.getElementById('stripePublishableKey').value,
            secret_key: document.getElementById('stripeSecretKey').value,
            webhook_secret: document.getElementById('stripeWebhookSecret').value,
            sandbox: document.getElementById('stripeSandbox').checked
        },
        bitcoin: {
            enabled: document.getElementById('bitcoinEnabled').checked,
            address: document.getElementById('bitcoinAddress').value,
            confirmations: parseInt(document.getElementById('bitcoinConfirmations').value),
            expiration_minutes: parseInt(document.getElementById('bitcoinExpiration').value)
        },
        ethereum: {
            enabled: document.getElementById('ethEnabled').checked,
            address: document.getElementById('ethAddress').value,
            confirmations: parseInt(document.getElementById('ethConfirmations').value),
            chain_id: parseInt(document.getElementById('ethChainId').value)
        },
        usdt: {
            enabled: document.getElementById('usdtEnabled').checked,
            address: document.getElementById('usdtAddress').value,
            network: document.getElementById('usdtNetwork').value,
            confirmations: parseInt(document.getElementById('usdtConfirmations').value)
        },
        usdc: {
            enabled: document.getElementById('usdcEnabled').checked,
            address: document.getElementById('usdcAddress').value,
            network: document.getElementById('usdcNetwork').value,
            confirmations: parseInt(document.getElementById('usdcConfirmations').value)
        }
    };
    
    fetch('{{ url_for(request, "/api/admin/settings/payment-gateways") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(gatewaysData)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Failed to save payment gateway configuration');
        }
        return response.json();
    })
    .then(result => {
        if (result.success) {
            showToast('Payment gateway configuration saved successfully', 'success');
        } else {
            showToast(result.error || 'Error saving payment gateway configuration', 'danger');
        }
    })
    .catch(error => {
        console.error('Error saving payment gateways:', error);
        showToast('Error saving payment gateway configuration: ' + error.message, 'danger');
    });
}

// Load data on page load - update to include payment gateways
document.addEventListener('DOMContentLoaded', function() {
    loadEncryptionKeyStatus();
    loadSystemStatus();
    loadConfiguration();
    loadPaymentGateways();
    loadCryptoPrices();
    
    // Auto-refresh crypto prices every 60 seconds
    setInterval(loadCryptoPrices, 60000);
});

// Load crypto prices from all sources
async function loadCryptoPrices() {
    try {
        const response = await fetch('{{ url_for(request, "/api/admin/crypto/prices") }}');
        const data = await response.json();
        
        // Get currency settings for symbol
        const currencyResponse = await fetch('{{ url_for(request, "/api/admin/settings/currency") }}');
        const currencyData = await currencyResponse.json();
        const currencySymbol = currencyData.currency_symbol || '$';
        
        // Update BTC prices
        updateCryptoPrice('Btc', data.btc, currencySymbol);
        
        // Update ETH prices
        updateCryptoPrice('Eth', data.eth, currencySymbol);
        
        // Update USDT prices
        updateCryptoPrice('Usdt', data.usdt, currencySymbol);
        
        // Update USDC prices
        updateCryptoPrice('Usdc', data.usdc, currencySymbol);
        
        // Update last updated time
        const now = new Date();
        document.getElementById('priceLastUpdated').textContent = now.toLocaleTimeString();
        
    } catch (error) {
        console.error('Error loading crypto prices:', error);
        ['Btc', 'Eth', 'Usdt', 'Usdc'].forEach(crypto => {
            document.getElementById(`price${crypto}Coinbase`).innerHTML = '<span style="color: #e74c3c;">Error</span>';
            document.getElementById(`price${crypto}Binance`).innerHTML = '<span style="color: #e74c3c;">Error</span>';
            document.getElementById(`price${crypto}Kraken`).innerHTML = '<span style="color: #e74c3c;">Error</span>';
            document.getElementById(`price${crypto}Average`).innerHTML = '<span style="color: #e74c3c;">Error</span>';
        });
    }
}

// Helper function to update individual crypto prices
function updateCryptoPrice(crypto, priceData, currencySymbol) {
    // Update Coinbase
    if (priceData.coinbase !== null && priceData.coinbase !== undefined) {
        document.getElementById(`price${crypto}Coinbase`).textContent = currencySymbol + priceData.coinbase.toFixed(2);
        document.getElementById(`price${crypto}Coinbase`).style.color = '#27ae60';
    } else {
        document.getElementById(`price${crypto}Coinbase`).innerHTML = '<span style="color: #888;">Disabled</span>';
    }
    
    // Update Binance
    if (priceData.binance !== null && priceData.binance !== undefined) {
        document.getElementById(`price${crypto}Binance`).textContent = currencySymbol + priceData.binance.toFixed(2);
        document.getElementById(`price${crypto}Binance`).style.color = '#27ae60';
    } else {
        document.getElementById(`price${crypto}Binance`).innerHTML = '<span style="color: #888;">Disabled</span>';
    }
    
    // Update Kraken
    if (priceData.kraken !== null && priceData.kraken !== undefined) {
        document.getElementById(`price${crypto}Kraken`).textContent = currencySymbol + priceData.kraken.toFixed(2);
        document.getElementById(`price${crypto}Kraken`).style.color = '#27ae60';
    } else {
        document.getElementById(`price${crypto}Kraken`).innerHTML = '<span style="color: #888;">Disabled</span>';
    }
    
    // Update Average
    if (priceData.average !== null && priceData.average !== undefined) {
        document.getElementById(`price${crypto}Average`).textContent = currencySymbol + priceData.average.toFixed(2);
    } else {
        document.getElementById(`price${crypto}Average`).innerHTML = '<span style="color: #e74c3c;">No sources</span>';
    }
}

// Refresh crypto prices manually
function refreshCryptoPrices() {
    ['Btc', 'Eth', 'Usdt', 'Usdc'].forEach(crypto => {
        document.getElementById(`price${crypto}Coinbase`).innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        document.getElementById(`price${crypto}Binance`).innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        document.getElementById(`price${crypto}Kraken`).innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        document.getElementById(`price${crypto}Average`).innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    });
    loadCryptoPrices();
}

</script>
{% endblock %}