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

{% block title %}{% trans "Update Payment Method" %} - {% trans "Order" %} #{{ order.id }}{% 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-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-credit-card"></i>
                        {% trans "Update Payment Method" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info" role="alert">
                        <p class="mb-0">
                            {% trans "Update the card used for automatic monthly payments." %}
                            {% trans "Your new card will be used for all future installments starting next month." %}
                        </p>
                    </div>
                    
                    <div class="card bg-light mb-4">
                        <div class="card-body">
                            <h6>{% trans "Current Payment Method" %}</h6>
                            {% if installment_schedule.payment_token %}
                            <p class="mb-0">
                                <i class="fas fa-credit-card"></i>
                                {{ installment_schedule.payment_token.card_brand }} 
                                ending in {{ installment_schedule.payment_token.card_last_four }}
                            </p>
                            {% else %}
                            <p class="text-muted mb-0">{% trans "No payment method on file" %}</p>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="card bg-light mb-4">
                        <div class="card-body">
                            <h6>{% trans "Installment Schedule" %}</h6>
                            <p>
                                {% blocktrans with paid=installment_schedule.paid_installments total=installment_schedule.total_installments %}
                                {{ paid }} of {{ total }} payments completed<br>
                                {% endblocktrans %}
                                {% trans "Monthly Amount:" %} ${{ installment_schedule.installment_amount|floatformat:2 }}<br>
                                {% trans "Next Payment Date:" %} {{ installment_schedule.next_payment_date|date:"M d, Y" }}
                            </p>
                        </div>
                    </div>
                    
                    <form method="post" class="mb-3">
                        {% csrf_token %}
                        <div class="alert alert-warning" role="alert">
                            <small>
                                <i class="fas fa-lock"></i>
                                {% trans "You'll be redirected to Flutterwave to authorize your new card." %}
                            </small>
                        </div>
                        <div class="form-check mb-3">
                            <input 
                                type="checkbox" 
                                id="confirm_update" 
                                name="confirm_update" 
                                class="form-check-input"
                                required
                            >
                            <label class="form-check-label" for="confirm_update">
                                {% trans "I want to update my payment method for this installment schedule" %}
                            </label>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-arrow-right"></i>
                                {% trans "Proceed to Authorization" %}
                            </button>
                        </div>
                    </form>
                    
                    <a href="{% url 'installment:schedule_detail' order.id %}" class="btn btn-outline-secondary w-100">
                        {% trans "Cancel" %}
                    </a>
                </div>
            </div>
            
            <div class="alert alert-success mt-4" role="alert">
                <strong>{% trans "Important:" %}</strong>
                <ul class="mb-0 mt-2">
                    <li>{% trans "Your new card will only be used for future payments" %}</li>
                    <li>{% trans "Previous payments already processed will not be affected" %}</li>
                    <li>{% trans "You can update your payment method anytime" %}</li>
                    <li>{% trans "Your card details are securely handled by Flutterwave" %}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}