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

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <!-- Header -->
        <div class="px-4 py-5 sm:px-6">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Loan Application Details</h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">Application {{ application.application_number }}</p>
                </div>
                <div class="flex space-x-2">
                    {% if application.status == 'pending' and request.user.is_staff %}
                    <a href="{% url 'loans:approve_application' application.pk %}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
                        <span>✓</span>
                        Approve
                    </a>
                    <a href="{% url 'loans:reject_application' application.pk %}" 
                       class="inline-flex items-center px-4 py-2 border border-red-300 text-sm font-medium rounded-md shadow-sm text-red-700 bg-white hover:bg-red-50">
                        <span>✕</span>
                        Reject
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Application Details -->
        <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
            <dl class="sm:divide-y sm:divide-gray-200">
                <!-- Borrower Information -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Borrower</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <div class="flex items-center">
                            <div>
                                <div class="font-medium">{{ application.borrower.get_full_name }}</div>
                                <div class="text-gray-500">{{ application.borrower.email }}</div>
                                <div class="text-gray-500">{{ application.borrower.phone_number }}</div>
                            </div>
                        </div>
                    </dd>
                </div>

                <!-- Loan Product -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Loan Product</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <div>
                            <div class="font-medium">{{ application.loan_product.name }}</div>
                            <div class="text-gray-500">{{ application.loan_product.get_product_type_display }}</div>
                        </div>
                    </dd>
                </div>

                <!-- Requested Amount -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Requested Amount</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <span class="text-lg font-semibold">KES {{ application.requested_amount|floatformat:2 }}</span>
                    </dd>
                </div>

                <!-- Duration -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Duration</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ application.requested_duration }} days
                    </dd>
                </div>

                <!-- Interest Amount -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Interest Amount</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        KES {{ application.interest_amount|floatformat:2|default:"0.00" }}
                    </dd>
                </div>

                <!-- Processing Fee -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Processing Fee</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        KES {{ application.processing_fee_amount|floatformat:2 }}
                    </dd>
                </div>

                <!-- Total Amount -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Total Amount</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <span class="text-lg font-semibold text-green-600">KES {{ application.total_amount|floatformat:2 }}</span>
                    </dd>
                </div>

                <!-- Purpose -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Purpose</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ application.purpose }}
                    </dd>
                </div>

                <!-- Status -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <span class="px-2 py-1 text-xs font-medium rounded-full 
                            {% if application.status == 'approved' %}bg-green-100 text-green-800
                            {% elif application.status == 'disbursed' %}bg-blue-100 text-blue-800
                            {% elif application.status == 'pending' %}bg-yellow-100 text-yellow-800
                            {% elif application.status == 'under_review' %}bg-purple-100 text-purple-800
                            {% elif application.status == 'rejected' %}bg-red-100 text-red-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            {{ application.get_status_display }}
                        </span>
                    </dd>
                </div>

                <!-- Submitted Date -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Submitted</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ application.submitted_at|date:"F j, Y g:i A" }}
                    </dd>
                </div>

                <!-- Reviewed Information -->
                {% if application.reviewed_by %}
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Reviewed By</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <div>
                            <div class="font-medium">{{ application.reviewed_by.get_full_name }}</div>
                            <div class="text-gray-500">{{ application.reviewed_at|date:"F j, Y g:i A" }}</div>
                        </div>
                    </dd>
                </div>
                {% endif %}

                <!-- Review Notes -->
                {% if application.approval_notes %}
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Review Notes</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ application.approval_notes }}
                    </dd>
                </div>
                {% endif %}

                <!-- Repayment Method -->
                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Repayment Method</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ application.get_repayment_method_display }}
                    </dd>
                </div>
            </dl>
        </div>

        <!-- Actions -->
        <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
            <div class="flex justify-between items-center">
                <a href="{% url 'loans:applications' %}" 
                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
                    <span>←</span>
                    Back to Applications
                </a>
                
                {% if application.status == 'approved' and not application.loan %}
                <div class="text-sm text-gray-500">
                    <span>ℹ️</span>
                    Application approved but loan not yet created
                </div>
                {% elif application.loan %}
                <a href="{% url 'loans:loan_detail' application.loan.pk %}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
                    <i class="fas fa-eye mr-2"></i>
                    View Loan
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}""