{% extends "base.html" %}

{% block title %}Add Payment Method - AISBF Dashboard{% endblock %}

{% block content %}
<h2 style="margin-bottom: 30px;">Add Payment Method</h2>

<div style="background: #16213e; border: 2px solid #4a9eff; border-radius: 8px; padding: 30px; margin-bottom: 20px;">
    <p style="color: #a0a0a0; margin-bottom: 10px;">Choose a payment method to add to your account.</p>
    <div style="background: #1a1a2e; border-left: 3px solid #4ade80; padding: 15px; margin-bottom: 30px; border-radius: 4px;">
        <p style="margin: 0; color: #e0e0e0;">
            <i class="fas fa-info-circle me-2 text-success"></i>
            <strong>Important:</strong> Only <strong>Credit Card (Stripe)</strong> can be used for automatic subscription renewals. All other payment methods are for wallet top-ups only.
        </p>
    </div>

    <!-- Stripe and PayPal -->
    {% if 'stripe' in enabled_gateways or 'paypal' in enabled_gateways %}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px;">
        {% if 'stripe' in enabled_gateways %}
        <div style="background: #1a1a2e; border: 2px solid #4a9eff; border-radius: 8px; padding: 25px; text-align: center; transition: all 0.3s ease;">
            <i class="fab fa-cc-stripe" style="font-size: 48px; color: #4a9eff; margin-bottom: 15px;"></i>
            <h3 style="margin: 0 0 10px 0; color: #e0e0e0; font-size: 18px;">Credit Card</h3>
            <p style="color: #a0a0a0; margin-bottom: 20px; font-size: 14px;">Secure payment via Stripe</p>
            <button class="btn" id="stripe-button" style="width: 100%; padding: 12px;">
                <i class="fas fa-plus me-2"></i>Add Credit Card
            </button>
        </div>
        {% endif %}

        {% if 'paypal' in enabled_gateways %}
        <div style="background: #1a1a2e; border: 2px solid #4a9eff; border-radius: 8px; padding: 25px; text-align: center; transition: all 0.3s ease;">
            <i class="fab fa-paypal" style="font-size: 48px; color: #4a9eff; margin-bottom: 15px;"></i>
            <h3 style="margin: 0 0 10px 0; color: #e0e0e0; font-size: 18px;">PayPal</h3>
            <p style="color: #a0a0a0; margin-bottom: 20px; font-size: 14px;">Connect your PayPal account</p>
            <button class="btn" id="paypal-button" style="width: 100%; padding: 12px;">
                <i class="fas fa-link me-2"></i>Connect PayPal
            </button>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Cryptocurrency -->
    {% if 'bitcoin' in enabled_gateways or 'eth' in enabled_gateways or 'usdt' in enabled_gateways or 'usdc' in enabled_gateways %}
    <div style="background: #1a1a2e; border: 2px solid #ffc107; border-radius: 8px; padding: 25px; margin-bottom: 20px;">
        <h3 style="margin: 0 0 10px 0; color: #ffc107; font-size: 18px;">
            <i class="fab fa-bitcoin me-2"></i>Cryptocurrency Payments
        </h3>
        <p style="color: #a0a0a0; margin-bottom: 20px; font-size: 14px;">Set cryptocurrency as your default payment method</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px;">
            {% if 'bitcoin' in enabled_gateways %}
            <button class="crypto-default" data-type="bitcoin" style="background: #0f3460; border: 2px solid #ffc107; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #e0e0e0;">
                <i class="fab fa-bitcoin" style="font-size: 36px; color: #ffc107; margin-bottom: 10px; display: block;"></i>
                <strong style="display: block; font-size: 14px;">Bitcoin</strong>
            </button>
            {% endif %}
            
             {% if 'ethereum' in enabled_gateways or 'eth' in enabled_gateways %}
            <button class="crypto-default" data-type="eth" style="background: #0f3460; border: 2px solid #627eea; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #e0e0e0;">
                <i class="fab fa-ethereum" style="font-size: 36px; color: #627eea; margin-bottom: 10px; display: block;"></i>
                <strong style="display: block; font-size: 14px;">Ethereum</strong>
            </button>
            {% endif %}
            
            {% if 'usdt' in enabled_gateways %}
            <button class="crypto-default" data-type="usdt" style="background: #0f3460; border: 2px solid #26a17b; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #e0e0e0;">
                <i class="fas fa-coins" style="font-size: 36px; color: #26a17b; margin-bottom: 10px; display: block;"></i>
                <strong style="display: block; font-size: 14px;">USDT</strong>
            </button>
            {% endif %}
            
            {% if 'usdc' in enabled_gateways %}
            <button class="crypto-default" data-type="usdc" style="background: #0f3460; border: 2px solid #2775ca; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #e0e0e0;">
                <i class="fas fa-coins" style="font-size: 36px; color: #2775ca; margin-bottom: 10px; display: block;"></i>
                <strong style="display: block; font-size: 14px;">USDC</strong>
            </button>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <div style="text-align: center; margin-top: 30px;">
        <a href="{{ url_for(request, '/dashboard/billing') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Billing
        </a>
    </div>
</div>

<!-- Stripe Elements Container (Modal) -->
<div id="stripe-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: #16213e; border: 2px solid #4a9eff; border-radius: 8px; padding: 30px; max-width: 500px; width: 90%; position: relative;">
        <button id="close-stripe-modal" style="position: absolute; top: 15px; right: 15px; background: transparent; border: none; color: #e0e0e0; font-size: 24px; cursor: pointer; padding: 0; width: 30px; height: 30px; line-height: 1;">&times;</button>
        
        <h3 style="margin: 0 0 20px 0; color: #4a9eff;">
            <i class="fab fa-cc-stripe me-2"></i>Add Credit Card
        </h3>
        
        <form id="payment-form">
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 8px; color: #e0e0e0; font-weight: 500;">Card Details</label>
                <div id="card-element" style="background: #1a1a2e; padding: 12px; border: 1px solid #0f3460; border-radius: 4px;"></div>
                <div id="card-errors" style="color: #dc3545; margin-top: 8px; font-size: 14px;"></div>
            </div>
            
            <div style="display: flex; gap: 10px; justify-content: flex-end;">
                <button type="button" id="cancel-stripe" class="btn btn-secondary">Cancel</button>
                <button type="submit" id="submit-button" class="btn">
                    <i class="fas fa-plus me-2"></i>Add Card
                </button>
            </div>
        </form>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://js.stripe.com/v3/"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let stripe = null;
    let cardElement = null;
    let stripeInitialized = false;

    // Crypto default buttons
    document.querySelectorAll('.crypto-default').forEach(button => {
        button.addEventListener('click', function() {
            const type = this.dataset.type;
            fetch('/dashboard/billing/add-method', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ type: type, action: 'set_default' })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = '/dashboard/billing?success=' + encodeURIComponent(data.message);
                } else {
                    showAlert('Error: ' + data.error, 'Error', '❌', 'danger');
                }
            });
        });
    });

    // PayPal button
    const paypalButton = document.getElementById('paypal-button');
    if (paypalButton) {
        paypalButton.addEventListener('click', function() {
            window.location.href = '/dashboard/billing/add-method/paypal/oauth';
        });
    }

    // Stripe button - show Stripe modal
    const stripeButton = document.getElementById('stripe-button');
    const stripeModal = document.getElementById('stripe-modal');
    const closeStripeModal = document.getElementById('close-stripe-modal');
    const cancelStripe = document.getElementById('cancel-stripe');
    
    if (stripeButton && stripeModal) {
        stripeButton.addEventListener('click', function() {
            const stripeKey = '{{ stripe_publishable_key }}';
            
            if (!stripeKey) {
                showAlert('Stripe is not configured. Please contact the administrator.', 'Not Configured', '⚠️', 'warn');
                return;
            }
            
            // Show modal
            stripeModal.style.display = 'flex';
            
            // Initialize Stripe Elements only once
            if (!stripeInitialized) {
                stripe = Stripe(stripeKey);
                const elements = stripe.elements();
                
                // Create card element with custom styling
                cardElement = elements.create('card', {
                    style: {
                        base: {
                            color: '#e0e0e0',
                            fontFamily: '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
                            fontSize: '16px',
                            '::placeholder': {
                                color: '#a0a0a0'
                            }
                        },
                        invalid: {
                            color: '#dc3545',
                            iconColor: '#dc3545'
                        }
                    }
                });
                
                cardElement.mount('#card-element');
                
                // Handle real-time validation errors
                cardElement.on('change', function(event) {
                    const displayError = document.getElementById('card-errors');
                    if (event.error) {
                        displayError.textContent = event.error.message;
                    } else {
                        displayError.textContent = '';
                    }
                });
                
                stripeInitialized = true;
            }
        });
        
        // Close modal handlers
        closeStripeModal.addEventListener('click', function() {
            stripeModal.style.display = 'none';
        });
        
        cancelStripe.addEventListener('click', function() {
            stripeModal.style.display = 'none';
        });
        
        // Close modal when clicking outside
        stripeModal.addEventListener('click', function(e) {
            if (e.target === stripeModal) {
                stripeModal.style.display = 'none';
            }
        });
        
        // Handle form submission
        const form = document.getElementById('payment-form');
        form.addEventListener('submit', async (event) => {
            event.preventDefault();
            
            const submitButton = document.getElementById('submit-button');
            submitButton.disabled = true;
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
            
            try {
                const {error, paymentMethod} = await stripe.createPaymentMethod({
                    type: 'card',
                    card: cardElement,
                });
                
                if (error) {
                    document.getElementById('card-errors').textContent = error.message;
                    submitButton.disabled = false;
                    submitButton.innerHTML = '<i class="fas fa-plus me-2"></i>Add Card';
                } else {
                    // Send payment method ID to server
                    const response = await fetch('/dashboard/billing/add-method/stripe', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ payment_method_id: paymentMethod.id })
                    });
                    
                    const data = await response.json();
                    
                    if (data.success) {
                        window.location.href = '/dashboard/billing?success=' + encodeURIComponent(data.message);
                    } else {
                        document.getElementById('card-errors').textContent = data.error || 'Failed to add payment method';
                        submitButton.disabled = false;
                        submitButton.innerHTML = '<i class="fas fa-plus me-2"></i>Add Card';
                    }
                }
            } catch (err) {
                document.getElementById('card-errors').textContent = 'An unexpected error occurred. Please try again.';
                submitButton.disabled = false;
                submitButton.innerHTML = '<i class="fas fa-plus me-2"></i>Add Card';
            }
        });
    }
});
</script>
{% endblock %}