{% extends 'base.html' %}
{% load humanize %}

{% block title %}Reprocess Transaction{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">Reprocess Transaction</h1>
                <a href="{% url 'payments:transaction_detail' transaction.id %}" class="btn btn-outline-secondary">
                    <span>←</span> Back to Transaction
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card shadow">
                <div class="card-header bg-warning text-white">
                    <h5 class="mb-0">
                        <span>⚠️</span> Confirm Reprocessing
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-warning">
                        <strong>Retry Matching</strong><br>
                        This will attempt to match the payment to a borrower by ID number and create a repayment record.
                        <br><br>
                        <strong><span>ℹ️</span> Useful when:</strong>
                        <ul class="mb-0">
                            <li>The ID number was added to the system after this payment was made</li>
                            <li>The payment failed to match initially but the borrower now exists</li>
                            <li>You want to retry matching after fixing borrower information</li>
                        </ul>
                    </div>
                    
                    {% if transaction.bill_ref_number %}
                    <div class="alert alert-info">
                        <strong>Bill Ref (ID Number):</strong> {{ transaction.bill_ref_number }}<br>
                        <small>The system will try to match this ID number to a borrower in the system.</small>
                    </div>
                    {% endif %}

                    <h6>Transaction Details:</h6>
                    <table class="table table-sm table-bordered">
                        <tr>
                            <th width="30%">Transaction ID:</th>
                            <td>{{ transaction.trans_id|default:"N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Amount:</th>
                            <td><strong class="text-success">KES {{ transaction.amount|floatformat:2|intcomma }}</strong></td>
                        </tr>
                        <tr>
                            <th>Phone Number:</th>
                            <td>{{ transaction.phone_number|default:transaction.msisdn|default:"N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Current Status:</th>
                            <td>
                                <span class="badge badge-{{ transaction.status|yesno:'success,warning,danger' }}">
                                    {{ transaction.get_status_display }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th>Transaction Time:</th>
                            <td>{{ transaction.trans_time|default:"N/A" }}</td>
                        </tr>
                        {% if transaction.processing_notes %}
                        <tr>
                            <th>Previous Error:</th>
                            <td class="text-danger">{{ transaction.processing_notes }}</td>
                        </tr>
                        {% endif %}
                    </table>

                    <form method="post" class="mt-4">
                        {% csrf_token %}
                        <div class="form-group">
                            <label>
                                <input type="checkbox" required> 
                                I understand this will attempt to process the payment and create a repayment record
                            </label>
                        </div>
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'payments:transaction_detail' transaction.id %}" class="btn btn-secondary">
                                <span>✕</span> Cancel
                            </a>
                            <button type="submit" class="btn btn-warning">
                                <span>↷</span> Reprocess Transaction
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}