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

{% block title %}Record Registration Fee Payment{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Record Registration Fee Payment</h1>
                <p class="text-gray-600 dark:text-gray-400 mt-1">Record a new registration fee payment from a customer</p>
            </div>
            <div>
                <a href="{% url 'reports:reports_dashboard' %}"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
                    <span>←</span> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Payment Form -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Payment Details</h2>
        
        <form method="POST" class="space-y-6">
            {% csrf_token %}
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Customer Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Customer <span class="text-red-500">*</span>
                    </label>
                    {{ form.customer }}
                </div>

                <!-- Registration Fee Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Registration Fee <span class="text-red-500">*</span>
                    </label>
                    {{ form.registration_fee }}
                </div>

                <!-- Amount Paid -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Amount Paid <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <span class="absolute left-3 top-2 text-gray-500 dark:text-gray-400">KES</span>
                        {{ form.amount_paid }}
                    </div>
                </div>

                <!-- Payment Method -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Payment Method <span class="text-red-500">*</span>
                    </label>
                    {{ form.payment_method }}
                </div>

                <!-- Payment Date -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Payment Date <span class="text-red-500">*</span>
                    </label>
                    {{ form.payment_date }}
                </div>

                <!-- Transaction Reference -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Transaction Reference
                    </label>
                    {{ form.transaction_reference }}
                </div>

                <!-- Notes -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Payment Notes
                    </label>
                    {{ form.payment_notes }}
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end space-x-4">
                <a href="{% url 'reports:reports_dashboard' %}"
                    class="px-6 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
                    Cancel
                </a>
                <button type="submit"
                    class="px-6 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all transform hover:-translate-y-0.5">
                    <span>💾</span> Record Payment
                </button>
            </div>
        </form>
    </div>

    <!-- Recent Payments -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mt-8">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Recent Registration Fee Payments</h2>
        
        {% if recent_payments %}
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gradient-to-r from-blue-600 to-purple-600">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Receipt #</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Customer</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Fee Type</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Amount</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Date</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    {% for payment in recent_payments %}
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 dark:text-blue-400">
                            <a href="{% url 'reports:registration_fee_payment_detail' payment.pk %}" class="hover:underline">
                                {{ payment.receipt_number }}
                            </a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                            {{ payment.customer.get_full_name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                            {{ payment.registration_fee.get_product_type_display }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-green-600 dark:text-green-400">
                            KES {{ payment.amount_paid|floatformat:2|intcomma }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                            {{ payment.payment_date|date:"M d, Y" }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-8">
            <span>🧾</span>
            <p class="text-gray-600 dark:text-gray-400">No recent payments to display</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const feeSelect = document.getElementById('id_registration_fee');
    const amountInput = document.getElementById('id_amount_paid');
    
    if (feeSelect && amountInput) {
        feeSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            
            // Try to get amount from data attribute or option text
            let amount = selectedOption.getAttribute('data-amount');
            if (!amount) {
                // Extract amount from option text if data attribute not available
                const optionText = selectedOption.text;
                const amountMatch = optionText.match(/KES\s+([\d,]+\.?\d*)/);
                if (amountMatch) {
                    amount = amountMatch[1].replace(/,/g, '');
                }
            }
            
            if (amount) {
                amountInput.value = parseFloat(amount).toFixed(2);
            } else {
                amountInput.value = '';
            }
        });
    }
});
</script>
{% endblock %}