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

{% block title %}Edit Repayment{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <span>✏️</span>
                        Edit Repayment - {{ repayment.receipt_number }}
                    </h3>
                    <div class="card-tools">
                        <a href="{% url 'loans:loan_detail' repayment.loan.pk %}" class="btn btn-secondary">
                            <span>←</span>Back to Loan
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <form method="post">
                                {% csrf_token %}
                                
                                <div class="form-group">
                                    <label for="amount">Amount (KES)</label>
                                    <input type="number" 
                                           class="form-control" 
                                           id="amount" 
                                           name="amount" 
                                           value="{{ repayment.amount }}" 
                                           step="0.01" 
                                           min="0.01" 
                                           required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="payment_method">Payment Method</label>
                                    <select class="form-control" id="payment_method" name="payment_method" required>
                                        {% for value, label in payment_methods %}
                                        <option value="{{ value }}" {% if repayment.payment_method == value %}selected{% endif %}>
                                            {{ label }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="payment_date">Payment Date</label>
                                    <input type="datetime-local" 
                                           class="form-control" 
                                           id="payment_date" 
                                           name="payment_date" 
                                           value="{{ repayment.payment_date|date:'Y-m-d\TH:i' }}" 
                                           required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="mpesa_transaction_id">M-Pesa Transaction ID</label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="mpesa_transaction_id" 
                                           name="mpesa_transaction_id" 
                                           value="{{ repayment.mpesa_transaction_id|default:'' }}"
                                           placeholder="Optional">
                                </div>
                                
                                <div class="form-group">
                                    <label for="mpesa_phone_number">M-Pesa Phone Number</label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="mpesa_phone_number" 
                                           name="mpesa_phone_number" 
                                           value="{{ repayment.mpesa_phone_number|default:'' }}"
                                           placeholder="Optional">
                                </div>
                                
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">
                                        <span>💾</span>Update Repayment
                                    </button>
                                    <a href="{% url 'loans:loan_detail' repayment.loan.pk %}" class="btn btn-secondary ml-2">
                                        Cancel
                                    </a>
                                </div>
                            </form>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="card bg-light">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Loan Information</h5>
                                </div>
                                <div class="card-body">
                                    <p><strong>Loan Number:</strong> {{ repayment.loan.loan_number }}</p>
                                    <p><strong>Borrower:</strong> {{ repayment.loan.borrower.get_full_name }}</p>
                                    <p><strong>Phone:</strong> {{ repayment.loan.borrower.phone_number }}</p>
                                    <p><strong>Principal Amount:</strong> KES {{ repayment.loan.principal_amount|floatformat:2 }}</p>
                                    <p><strong>Total Amount:</strong> KES {{ repayment.loan.total_amount|floatformat:2 }}</p>
                                    <p><strong>Amount Paid:</strong> KES {{ repayment.loan.amount_paid|floatformat:2 }}</p>
                                    <p><strong>Outstanding:</strong> KES {{ repayment.loan.outstanding_balance|floatformat:2 }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}