{% extends 'base.html' %}

{% block title %}Payment Receipts - HAVEN GRAZURI ADVANCE{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold text-gray-900">Payment Receipts</h2>
                    <p class="mt-1 text-sm text-gray-600">View and manage payment receipts for loan repayments.</p>
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'utils:bulk_generate_receipts' %}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary">
                        <span>+</span>
                        Generate Missing Receipts
                    </a>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white shadow rounded-lg mb-6">
            <div class="px-4 py-5 sm:p-6">
                <form method="get" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
                        <input type="text" name="search" id="search" value="{{ search_query }}"
                               placeholder="Receipt number, borrower name, loan number..."
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                    </div>
                    <div>
                        <label for="date_from" class="block text-sm font-medium text-gray-700">From Date</label>
                        <input type="date" name="date_from" id="date_from" value="{{ date_from }}"
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                    </div>
                    <div>
                        <label for="date_to" class="block text-sm font-medium text-gray-700">To Date</label>
                        <input type="date" name="date_to" id="date_to" value="{{ date_to }}"
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                    </div>
                    <div>
                        <label for="payment_method" class="block text-sm font-medium text-gray-700">Payment Method</label>
                        <select name="payment_method" id="payment_method"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                            <option value="">All Methods</option>
                            <option value="cash" {% if payment_method == 'cash' %}selected{% endif %}>Cash</option>
                            <option value="mpesa" {% if payment_method == 'mpesa' %}selected{% endif %}>M-Pesa</option>
                            <option value="bank_transfer" {% if payment_method == 'bank_transfer' %}selected{% endif %}>Bank Transfer</option>
                            <option value="cheque" {% if payment_method == 'cheque' %}selected{% endif %}>Cheque</option>
                        </select>
                    </div>
                    <div class="flex items-end">
                        <button type="submit"
                                class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            <span>🔍</span>
                            Filter
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Receipts Table -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                {% if receipts %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Receipt #
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Borrower
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Loan #
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Amount
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Payment Date
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Method
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for receipt in receipts %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {{ receipt.receipt_number|default:"N/A" }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">
                                        {{ receipt.loan.borrower.get_full_name }}
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        {{ receipt.loan.borrower.phone_number }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ receipt.loan.loan_number }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    KES {{ receipt.amount|floatformat:2 }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ receipt.payment_date|date:"M d, Y" }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                                        {% if receipt.payment_method == 'mpesa' %}bg-green-100 text-green-800
                                        {% elif receipt.payment_method == 'cash' %}bg-blue-100 text-blue-800
                                        {% elif receipt.payment_method == 'bank_transfer' %}bg-purple-100 text-purple-800
                                        {% else %}bg-gray-100 text-gray-800{% endif %}">
                                        {{ receipt.get_payment_method_display|default:receipt.payment_method|capfirst }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        {% if receipt.id %}
                                        <a href="{% url 'utils:view_receipt' receipt.id %}" 
                                           class="text-primary hover:text-secondary" title="View Receipt">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{% url 'utils:download_receipt' receipt.id %}" 
                                           class="text-green-600 hover:text-green-900" title="Download PDF">
                                            <span>⬇️</span>
                                        </a>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-12">
                    <span>🧾</span>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No Payment Receipts Found</h3>
                    <p class="text-gray-500 mb-4">
                        {% if search_query or date_from or date_to or payment_method %}
                            No receipts match your current filters. Try adjusting your search criteria.
                        {% else %}
                            No payment receipts have been generated yet.
                        {% endif %}
                    </p>
                    <a href="{% url 'utils:bulk_generate_receipts' %}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary">
                        <span>+</span>
                        Generate Receipts
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}