{% load i18n %}
{% load bootstrap3 %}

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">
            {% trans "Card, M-Pesa & Mobile Money via Paystack" %}
        </h3>
    </div>
    <div class="panel-body">
        {% if settings.endpoint == 'sandbox' %}
            <div class="alert alert-warning">
                <strong>{% trans "Test mode" %}</strong>
                {% trans "This payment will be processed in test mode. No actual money will be charged." %}
            </div>
        {% endif %}
        
        <p>{% trans "You will be redirected to Paystack to complete your payment securely using your preferred method." %}</p>
        
        <div class="paystack-info">
            <h4>{% trans "Supported Payment Methods:" %}</h4>
            <div class="row">
                {% if 'card' in settings.supported_channels %}
                <div class="col-md-6">
                    <div class="payment-method">
                        <i class="fa fa-credit-card"></i>
                        <strong>{% trans "Credit/Debit Cards" %}</strong>
                        <p>{% trans "Visa, Mastercard, Verve" %}</p>
                    </div>
                </div>
                {% endif %}
                
                {% if 'mobile_money' in settings.supported_channels %}
                <div class="col-md-6">
                    <div class="payment-method">
                        <i class="fa fa-mobile"></i>
                        <strong>{% trans "M-Pesa & Mobile Money" %}</strong>
                        <p>{% trans "M-Pesa, Airtel Money, etc." %}</p>
                    </div>
                </div>
                {% endif %}
                
                {% if 'bank' in settings.supported_channels %}
                <div class="col-md-6">
                    <div class="payment-method">
                        <i class="fa fa-bank"></i>
                        <strong>{% trans "Bank Transfer" %}</strong>
                        <p>{% trans "Direct bank transfers" %}</p>
                    </div>
                </div>
                {% endif %}
                
                {% if 'ussd' in settings.supported_channels %}
                <div class="col-md-6">
                    <div class="payment-method">
                        <i class="fa fa-phone"></i>
                        <strong>{% trans "USSD" %}</strong>
                        <p>{% trans "Pay via USSD codes" %}</p>
                    </div>
                </div>
                {% endif %}
                
                {% if 'qr' in settings.supported_channels %}
                <div class="col-md-6">
                    <div class="payment-method">
                        <i class="fa fa-qrcode"></i>
                        <strong>{% trans "QR Code" %}</strong>
                        <p>{% trans "Scan to pay" %}</p>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        
        {% if settings.endpoint == 'sandbox' %}
            <div class="alert alert-info">
                <strong>{% trans "Test payment details" %}</strong><br>
                <strong>{% trans "Card:" %}</strong> 4084084084084081, Expiry: 12/25, CVV: 123, PIN: 1234<br>
                <strong>{% trans "M-Pesa:" %}</strong> Use phone number 254708374149 for test M-Pesa payments<br>
                <strong>{% trans "Bank Transfer:" %}</strong> Any test account details will work in sandbox mode
            </div>
        {% endif %}
    </div>
</div>

<style>
.payment-method {
    text-align: center;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.payment-method i {
    font-size: 24px;
    color: #337ab7;
    margin-bottom: 10px;
    display: block;
}

.payment-method strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.payment-method p {
    margin: 0;
    color: #666;
    font-size: 12px;
}
</style>

<script>
// Add any client-side JavaScript for Paystack integration if needed
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Paystack inline if using inline checkout
    // This would be used for inline payments instead of redirect
});
</script>