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

{% block title %}Record New Payment{% 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>
                        Record New Payment
                    </h3>
                    <div class="card-tools">
                        <a href="{% url 'loans:repayments' %}" class="btn btn-secondary">
                            <span>←</span>Back to Repayments
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <form method="post" id="repaymentForm">
                        {% csrf_token %}
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="loan">Select Loan <span class="text-danger">*</span></label>
                                    <select class="form-control" id="loan" name="loan" required>
                                        <option value="">-- Select a loan --</option>
                                        {% for loan in loans %}
                                        <option value="{{ loan.id }}" 
                                                data-borrower="{{ loan.borrower.get_full_name }}"
                                                data-outstanding="{{ loan.outstanding_amount }}"
                                                data-loan-number="{{ loan.loan_number }}">
                                            {{ loan.loan_number }} - {{ loan.borrower.get_full_name }} 
                                            (Outstanding: KES {{ loan.outstanding_amount|floatformat:2 }})
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="amount">Payment Amount (KES) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="amount" name="amount" 
                                           step="0.01" min="0.01" required placeholder="0.00">
                                    <small class="form-text text-muted">
                                        Outstanding amount: <span id="outstanding-amount">--</span>
                                    </small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="payment_method">Payment Method <span class="text-danger">*</span></label>
                                    <select class="form-control" id="payment_method" name="payment_method" required>
                                        <option value="">-- Select payment method --</option>
                                        <option value="cash">Cash</option>
                                        <option value="mpesa">M-Pesa</option>
                                        <option value="bank_transfer">Bank Transfer</option>
                                        <option value="cheque">Cheque</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="payment_date">Payment Date & Time</label>
                                    <input type="datetime-local" class="form-control" id="payment_date" name="payment_date">
                                    <small class="form-text text-muted">Leave blank to use current time</small>
                                </div>
                            </div>
                        </div>
                        
                        <!-- M-Pesa specific fields -->
                        <div id="mpesa-fields" class="row" style="display: none;">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="mpesa_phone">M-Pesa Phone Number</label>
                                    <input type="tel" class="form-control" id="mpesa_phone" name="mpesa_phone" 
                                           placeholder="254712345678">
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <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" 
                                           placeholder="Optional">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="notes">Notes (Optional)</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3" 
                                      placeholder="Additional notes about this payment"></textarea>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <span>💾</span>Record Payment
                            </button>
                            <a href="{% url 'loans:repayments' %}" class="btn btn-secondary ml-2">
                                <span>✕</span>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const loanSelect = document.getElementById('loan');
    const amountInput = document.getElementById('amount');
    const outstandingAmount = document.getElementById('outstanding-amount');
    const paymentMethodSelect = document.getElementById('payment_method');
    const mpesaFields = document.getElementById('mpesa-fields');
    
    // Update outstanding amount when loan is selected
    loanSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            const outstanding = selectedOption.getAttribute('data-outstanding');
            outstandingAmount.textContent = 'KES ' + parseFloat(outstanding).toFixed(2);
            amountInput.max = outstanding;
        } else {
            outstandingAmount.textContent = '--';
        }
    });
    
    // Show/hide M-Pesa fields
    paymentMethodSelect.addEventListener('change', function() {
        if (this.value === 'mpesa') {
            mpesaFields.style.display = 'block';
        } else {
            mpesaFields.style.display = 'none';
        }
    });
    
    // Set default payment date to current time
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    
    document.getElementById('payment_date').value = `${year}-${month}-${day}T${hours}:${minutes}`;
});
</script>
{% endblock %}