{% extends 'base.html' %}

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

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="bg-white shadow sm:rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="sm:flex sm:items-start">
                <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                    <span>⚠️</span>
                </div>
                <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                    <h3 class="text-base font-semibold leading-6 text-gray-900">Permanently Delete Loan</h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500">
                            <strong>Warning:</strong> This action cannot be undone. The loan will be permanently removed from the database.
                        </p>
                        <p class="text-sm text-gray-500 mt-2">
                            This will also permanently delete all associated repayments and receipts.
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Loan Details -->
            <div class="mt-6 border-t border-gray-200 pt-6">
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Loan Number</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.loan_number }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Client</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.borrower.get_full_name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Principal Amount</dt>
                        <dd class="mt-1 text-sm text-gray-900">KES {{ loan.principal_amount|floatformat:2 }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Total Amount</dt>
                        <dd class="mt-1 text-sm text-gray-900">KES {{ loan.total_amount|floatformat:2 }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Status</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.get_status_display }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Repayments</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.repayments.count }} payments</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Deleted On</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.deleted_at|date:"F d, Y H:i" }}</dd>
                    </div>
                    {% if loan.deleted_by %}
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Deleted By</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.deleted_by.get_full_name }}</dd>
                    </div>
                    {% endif %}
                </dl>
            </div>
            
            <!-- Warning -->
            <div class="mt-6 rounded-md bg-red-50 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <span>⚠️</span>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">
                            This action is irreversible
                        </h3>
                        <div class="mt-2 text-sm text-red-700">
                            <p>
                                Once you permanently delete this loan, all associated data will be lost forever. 
                                This includes loan details, application information, repayments, receipts, and audit logs.
                            </p>
                            {% if loan.repayments.count > 0 %}
                            <p class="mt-1 font-medium">
                                This loan has {{ loan.repayments.count }} repayment(s) that will also be deleted.
                            </p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Actions -->
            <div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <a href="{% url 'loans:deleted_loans' %}" 
                   class="inline-flex justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    Cancel
                </a>
                <form method="post" class="inline">
                    {% csrf_token %}
                    <button type="submit" 
                            class="inline-flex justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
                            onclick="return confirm('Are you absolutely sure? This action cannot be undone.')">
                        <i class="fas fa-trash-alt mr-2"></i>
                        Permanently Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}