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

{% block title %}{% trans "Retry Payment" %} - {% 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-warning">
                    <h5 class="mb-0">
                        <i class="fas fa-redo"></i>
                        {% trans "Retry Payment" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info" role="alert">
                        <p class="mb-0">
                            {% blocktrans %}
                            This payment failed previously. Click the button below to attempt the charge again
                            using your saved payment method.
                            {% endblocktrans %}
                        </p>
                    </div>
                    
                    <div class="card bg-light mb-4">
                        <div class="card-body">
                            <h6>{% trans "Payment Details" %}</h6>
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <small class="text-muted">{% trans "Installment #" %}</small>
                                    <p class="mb-0"><strong>{{ payment.installment_number }}/{{ schedule.total_installments }}</strong></p>
                                </div>
                                <div class="col-md-6">
                                    <small class="text-muted">{% trans "Amount" %}</small>
                                    <p class="mb-0"><strong>${{ payment.amount|floatformat:2 }}</strong></p>
                                </div>
                            </div>
                            <hr>
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <small class="text-muted">{% trans "Due Date" %}</small>
                                    <p class="mb-0">{{ payment.due_date|date:"M d, Y" }}</p>
                                </div>
                                <div class="col-md-6">
                                    <small class="text-muted">{% trans "Attempts" %}</small>
                                    <p class="mb-0">{{ payment.retry_count }}/{{ schedule.max_retries }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {% if payment.error_message %}
                    <div class="alert alert-danger" role="alert">
                        <strong>{% trans "Previous Error:" %}</strong>
                        {{ payment.error_message }}
                    </div>
                    {% endif %}
                    
                    <form method="post" class="mb-3">
                        {% csrf_token %}
                        <div class="alert alert-warning" role="alert">
                            <small>
                                <i class="fas fa-exclamation-triangle"></i>
                                {% trans "Please ensure your card has sufficient funds before retrying." %}
                            </small>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-warning btn-lg">
                                <i class="fas fa-redo"></i>
                                {% trans "Retry Payment Now" %}
                            </button>
                        </div>
                    </form>
                    
                    <div class="alert alert-info" role="alert">
                        <small>
                            {% trans "If this payment fails again, you can update your payment method to try with a different card." %}
                        </small>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <a href="{% url 'installment:update_payment_method' order.id %}" class="btn btn-outline-primary">
                            {% trans "Update Payment Method" %}
                        </a>
                        <a href="{% url 'installment:schedule_detail' order.id %}" class="btn btn-outline-secondary">
                            {% trans "Back to Schedule" %}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}