{% 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>

        <!-- 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>
            
            <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 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)
    };
    
    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)
        });
        
        if (response.ok) {
            showToast('Consolidation settings saved', 'success');
        } else {
            showToast('Failed to save consolidation settings', 'danger');
        }
    } catch (error) {
        showToast('Error saving consolidation settings: ' + error.message, 'danger');
    }
}

function showToast(message, type) {
    const toastContainer = document.createElement('div');
    toastContainer.className = 'position-fixed top-0 end-0 p-3';
    toastContainer.style.zIndex = '9999';
    toastContainer.innerHTML = `
        <div class="toast show" role="alert" style="min-width: 300px;">
            <div class="toast-header bg-${type} text-white">
                <strong class="me-auto">Notification</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                ${message}
            </div>
        </div>
    `;
    document.body.appendChild(toastContainer);
    
    setTimeout(() => {
        if (toastContainer.parentNode) {
            toastContainer.parentNode.removeChild(toastContainer);
        }
    }, 5000);
}


// 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() {
    loadSystemStatus();
    loadConfiguration();
    loadPaymentGateways();
});
</script>
{% endblock %}