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

{% block title %}Generate Receipt - {{ loan.loan_number }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="bg-gradient-to-r from-green-600 to-green-800 text-white py-8">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center space-x-4">
                <div class="bg-white bg-opacity-20 p-3 rounded-full">
                    <i class="fas fa-plus-circle text-2xl"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-bold">Generate Receipt</h1>
                    <p class="text-green-100 mt-1">Loan: {{ loan.loan_number }} - {{ loan.borrower.get_full_name }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
            <form method="post" class="space-y-6">
                {% csrf_token %}
                
                <!-- Loan Information -->
                <div class="bg-blue-50 rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Loan Information</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Loan Number</label>
                            <div class="text-lg font-semibold text-gray-900">{{ loan.loan_number }}</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Total Amount</label>
                            <div class="text-lg font-semibold text-gray-900">KES {{ loan.total_amount|floatformat:2 }}</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Outstanding Balance</label>
                            <div class="text-lg font-semibold {% if loan.outstanding_amount > 0 %}text-red-600{% else %}text-green-600{% endif %}">
                                KES {{ loan.outstanding_amount|floatformat:2 }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payment Details -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="amount" class="block text-sm font-medium text-gray-700 mb-2">Payment Amount *</label>
                        <input type="number" step="0.01" name="amount" id="amount" required
                               max="{{ loan.outstanding_amount }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        <p class="text-sm text-gray-500 mt-1">Maximum: KES {{ loan.outstanding_amount|floatformat:2 }}</p>
                    </div>
                    
                    <div>
                        <label for="payment_method" class="block text-sm font-medium text-gray-700 mb-2">Payment Method *</label>
                        <select name="payment_method" id="payment_method" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            <option value="">Select Payment Method</option>
                            <option value="mpesa">M-Pesa</option>
                            <option value="bank">Bank Transfer</option>
                            <option value="cash">Cash</option>
                        </select>
                    </div>
                </div>

                <!-- M-Pesa Details (conditional) -->
                <div id="mpesa-details" class="hidden space-y-4">
                    <div class="bg-green-50 rounded-lg p-4">
                        <h4 class="text-md font-semibold text-gray-900 mb-3">M-Pesa Transaction Details</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="mpesa_code" class="block text-sm font-medium text-gray-700 mb-1">M-Pesa Code</label>
                                <input type="text" name="mpesa_code" id="mpesa_code"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            </div>
                            <div>
                                <label for="phone_number" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                                <input type="text" name="phone_number" id="phone_number"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex justify-between items-center pt-6 border-t border-gray-200">
                    <a href="{% url 'loans:loan_detail' loan.id %}" 
                       class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                        <span>←</span>Back to Loan
                    </a>
                    
                    <button type="submit" 
                            class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                        <span>🧾</span>Generate Receipt
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Show/hide M-Pesa details based on payment method
document.getElementById('payment_method').addEventListener('change', function() {
    const mpesaDetails = document.getElementById('mpesa-details');
    if (this.value === 'mpesa') {
        mpesaDetails.classList.remove('hidden');
        document.getElementById('mpesa_code').required = true;
        document.getElementById('phone_number').required = true;
    } else {
        mpesaDetails.classList.add('hidden');
        document.getElementById('mpesa_code').required = false;
        document.getElementById('phone_number').required = false;
    }
});
</script>
{% endblock %}