{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans "Authorize Payment Method" %}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title mb-4">{% trans "Authorize Payment Method" %}</h2>
                    
                    <div class="alert alert-info" role="alert">
                        <h6 class="alert-heading">{% trans "Secure Payment Setup" %}</h6>
                        <p class="mb-0">
                            {% blocktrans %}
                            You'll be redirected to Flutterwave's secure payment page to authorize your card.
                            Your card details will be encrypted and only used for automatic monthly charges.
                            {% endblocktrans %}
                        </p>
                    </div>
                    
                    <div class="card bg-light mb-4">
                        <div class="card-body">
                            <h6>{% trans "Payment Plan Details" %}</h6>
                            <div class="d-flex justify-content-between mb-2">
                                <span>{% trans "Total Amount" %}:</span>
                                <strong>${{ order.total|floatformat:2 }}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>{% trans "Monthly Payment" %}:</span>
                                <strong>${{ monthly_payment|floatformat:2 }}</strong>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>{% trans "Number of Payments" %}:</span>
                                <strong>{{ num_installments }} {% trans "months" %}</strong>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between">
                                <span>{% trans "Order #" %}</span>
                                <strong>#{{ order.id }}</strong>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-muted small">
                            {% blocktrans %}
                            We securely store your card token for automatic monthly payments.
                            You can change or cancel anytime from your account settings.
                            {% endblocktrans %}
                        </p>
                    </div>
                    
                    {% if authorization_url %}
                    <div class="d-grid gap-2 mb-3">
                        <a href="{{ authorization_url }}" target="_blank" class="btn btn-primary btn-lg">
                            <i class="fas fa-lock"></i>
                            {% trans "Authorize with Flutterwave" %}
                        </a>
                    </div>
                    
                    <div class="alert alert-warning" role="alert">
                        <small>
                            <i class="fas fa-info-circle"></i>
                            {% trans "After authorization, you'll be redirected back. If the redirect doesn't happen automatically, click below:" %}
                        </small>
                    </div>
                    
                    <form method="post" class="mb-3">
                        {% csrf_token %}
                        <div class="form-group mb-3">
                            <label for="transaction_reference">{% trans "Transaction Reference:" %}</label>
                            <input 
                                type="text" 
                                id="transaction_reference" 
                                name="transaction_reference" 
                                class="form-control"
                                placeholder="{% trans 'Paste transaction reference from Flutterwave' %}"
                                required
                            >
                            <small class="form-text text-muted">
                                {% trans "This will be provided after successful authorization" %}
                            </small>
                        </div>
                        <button type="submit" class="btn btn-success w-100">
                            {% trans "Confirm Authorization" %}
                        </button>
                    </form>
                    {% else %}
                    <div class="alert alert-danger" role="alert">
                        {% trans "Could not initialize payment. Please try again." %}
                    </div>
                    {% endif %}
                    
                    <a href="{% url 'shop:order_detail' order.id %}" class="btn btn-outline-secondary w-100">
                        {% trans "Back to Order" %}
                    </a>
                </div>
            </div>
            
            <div class="card mt-4">
                <div class="card-body">
                    <h6>{% trans "Payment Security" %}</h6>
                    <ul class="small mb-0">
                        <li>✓ {% trans "256-bit SSL encryption" %}</li>
                        <li>✓ {% trans "PCI DSS compliant" %}</li>
                        <li>✓ {% trans "No card details stored on our servers" %}</li>
                        <li>✓ {% trans "Only used for authorized payments" %}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}