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

{% block title %}Loan Management - Haven Grazuri Investment Limited{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Loan Management</h1>
                <p class="mt-1 text-sm text-gray-500">Manage and track all loans in the system</p>
            </div>
            <div class="flex space-x-4">
                <a href="{% url 'loans:new_application' %}" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
                    <span>+</span>
                    <span>Add New Loan</span>
                </a>
                <a href="{% url 'loans:add_existing_loan' %}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
                    <i class="fas fa-file-import"></i>
                    <span>Import Existing Loan</span>
                </a>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-lg shadow p-6 mb-8">
            <form method="GET" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select name="status" class="w-full rounded-lg border-gray-300">
                        <option value="">All Statuses</option>
                        {% for status_code, status_label in statuses %}
                        <option value="{{ status_code }}" {% if filters.status == status_code %}selected{% endif %}>
                            {{ status_label }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Product</label>
                    <select name="product" class="w-full rounded-lg border-gray-300">
                        <option value="">All Products</option>
                        {% for product in loan_products %}
                        <option value="{{ product.product_type }}" {% if filters.product == product.product_type %}selected{% endif %}>
                            {{ product.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Client</label>
                    <select name="client" class="w-full rounded-lg border-gray-300">
                        <option value="">All Clients</option>
                        {% for client in clients %}
                        <option value="{{ client.id }}" {% if filters.client == client.id %}selected{% endif %}>
                            {{ client.get_full_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">From Date</label>
                    <input type="date" name="date_from" value="{{ filters.date_from }}" class="w-full rounded-lg border-gray-300">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">To Date</label>
                    <input type="date" name="date_to" value="{{ filters.date_to }}" class="w-full rounded-lg border-gray-300">
                </div>
                <div class="md:col-span-3 lg:col-span-5 flex justify-end space-x-4">
                    <button type="submit" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                        <span>🔍</span>Apply Filters
                    </button>
                    <a href="{% url 'loans:applications' %}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
                        <span>✕</span>Clear
                    </a>
                </div>
            </form>
        </div>

        <!-- Loans List -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for application in applications %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 bg-primary rounded-full flex items-center justify-center text-white">
                                    {{ application.borrower.first_name|slice:":1" }}{{ application.borrower.last_name|slice:":1" }}
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">{{ application.borrower.get_full_name }}</div>
                                    <div class="text-sm text-gray-500">{{ application.borrower.phone_number }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ application.loan_product.name }}</div>
                            <div class="text-sm text-gray-500">{{ application.repayment_method|title }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">KES {{ application.requested_amount|floatformat:2 }}</div>
<div class="text-sm text-gray-500">Total: KES {{ application.total_amount|floatformat:2 }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ application.requested_duration }} Days</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {% if application.status == 'approved' %}bg-green-100 text-green-800
                                {% elif application.status == 'pending' %}bg-yellow-100 text-yellow-800
                                {% elif application.status == 'rejected' %}bg-red-100 text-red-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ application.get_status_display }}
                            </span>
                            {% if application.auto_approved %}
                            <span class="ml-2 text-xs text-gray-500">(Auto)</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ application.submitted_at|date:"M d, Y" }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <a href="{% url 'loans:loan_detail' pk=application.id %}" class="text-primary hover:text-blue-900">View Details</a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="px-6 py-4 text-center text-gray-500">
                            No loans found. <a href="{% url 'loans:new_application' %}" class="text-primary hover:text-blue-900">Add a new loan</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}