<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subscribe - SA STEM Tutor</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Yoco SDK -->
    <script src="https://js.yoco.com/sdk/v1/yoco-sdk-web.js"></script>
    <style>
        .payment-container {
            max-width: 500px;
            margin: 50px auto;
            padding: 30px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .yoco-button {
            background: #00c853;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s;
        }
        .yoco-button:hover {
            background: #00b34a;
        }
        .yoco-button:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        .plan-details {
            background: #f8f9fa;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">SA STEM Tutor</a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="{{ url_for('dashboard') }}">Dashboard</a>
                <a class="nav-link" href="{{ url_for('pricing') }}">Pricing</a>
                <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="payment-container">
            <h2 class="text-center mb-4">Complete Your Subscription</h2>
            
            <!-- Flash messages -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} alert-dismissible fade show">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <div class="plan-details">
                <h4>Premium Plan</h4>
                <p><strong>Price:</strong> R99.00 per month</p>
                <p><strong>Features:</strong></p>
                <ul>
                    <li>Unlimited questions</li>
                    <li>All subjects and languages</li>
                    <li>Priority support</li>
                    <li>CAPS curriculum aligned</li>
                </ul>
            </div>

            <form id="payment-form">
                <div class="mb-3">
                    <label for="card-number" class="form-label">Card Number</label>
                    <div id="card-number" class="form-control" style="height: 45px;"></div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="expiry-date" class="form-label">Expiry Date</label>
                        <div id="expiry-date" class="form-control" style="height: 45px;"></div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="cvv" class="form-label">CVV</label>
                        <div id="cvv" class="form-control" style="height: 45px;"></div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="name" class="form-label">Cardholder Name</label>
                    <input type="text" class="form-control" id="name" placeholder="Full name as on card" required>
                </div>

                <button type="submit" class="yoco-button" id="pay-button">
                    Pay R99.00 Now
                </button>
                
                <div class="text-center mt-3">
                    <a href="{{ url_for('pricing') }}" class="text-muted">← Back to Pricing</a>
                </div>
            </form>

            <div class="mt-4">
                <p class="text-muted small">
                    <strong>Test Card:</strong> 4242 4242 4242 4242<br>
                    <strong>Expiry:</strong> Any future date<br>
                    <strong>CVV:</strong> Any 3 digits
                </p>
            </div>
        </div>
    </div>

    <!-- Payment Processing Modal -->
    <div class="modal fade" id="processingModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Processing Payment</h5>
                </div>
                <div class="modal-body text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Processing...</span>
                    </div>
                    <p class="mt-3">Please wait while we process your payment...</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Initialize Yoco SDK
        var yoco = new YocoSDK({
            publicKey: '{{ yoco_public_key }}'
        });

        // Create card fields
        var cardNumber = yoco.createField('card-number', {
            placeholder: '4242 4242 4242 4242'
        });
        
        var expiryDate = yoco.createField('expiry-date', {
            placeholder: 'MM/YY'
        });
        
        var cvv = yoco.createField('cvv', {
            placeholder: '123'
        });

        var form = document.getElementById('payment-form');
        var payButton = document.getElementById('pay-button');
        var processingModal = new bootstrap.Modal(document.getElementById('processingModal'));

        form.addEventListener('submit', function (event) {
            event.preventDefault();
            
            // Validate form
            var name = document.getElementById('name').value.trim();
            if (!name) {
                alert('Please enter the cardholder name');
                return;
            }

            processingModal.show();
            payButton.disabled = true;
            payButton.innerHTML = 'Processing...';

            yoco.createToken({
                name: name
            }).then(function (result) {
                if (result.error) {
                    processingModal.hide();
                    payButton.disabled = false;
                    payButton.innerHTML = 'Pay R99.00 Now';
                    alert('Payment error: ' + result.error.message);
                } else {
                    // Send token to server
                    fetch('/process-payment', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            token: result.id
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        processingModal.hide();
                        payButton.disabled = false;
                        payButton.innerHTML = 'Pay R99.00 Now';
                        
                        if (data.success) {
                            alert(data.message);
                            window.location.href = '{{ url_for("payment_success") }}';
                        } else {
                            alert('Payment failed: ' + data.error);
                        }
                    })
                    .catch(error => {
                        processingModal.hide();
                        payButton.disabled = false;
                        payButton.innerHTML = 'Pay R99.00 Now';
                        alert('Error processing payment: ' + error);
                    });
                }
            }).catch(function (error) {
                processingModal.hide();
                payButton.disabled = false;
                payButton.innerHTML = 'Pay R99.00 Now';
                alert('Error: ' + error.message);
            });
        });

        // Mount the fields
        cardNumber.mount('#card-number');
        expiryDate.mount('#expiry-date');
        cvv.mount('#cvv');
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>