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

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

{% block content %}
<div class="max-w-2xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-semibold text-gray-900">Move Loan to Deleted</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Soft delete loan {{ loan.loan_number }} (can be restored later)
                </p>
            </div>
            <div class="flex gap-3">
                <a href="{% url 'loans:loan_detail' pk=loan.pk %}"
                    class="inline-flex items-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">
                    <span>←</span>
                    Back to Loan
                </a>
            </div>
        </div>
    </div>

    <!-- Warning Notice -->
    <div class="mb-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">
                    Soft Delete Warning
                </h3>
                <div class="mt-2 text-sm text-red-700">
                    <p>This will move the loan to the deleted loans section. The loan can be restored later if needed.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Loan Information -->
    <div class="mb-6 overflow-hidden rounded-lg bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Loan to be Moved to Deleted</h3>
            <div class="grid grid-cols-1 gap-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 font-semibold">{{ loan.loan_number }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Borrower</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">
                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                            {% if loan.status == 'active' %}bg-green-100 text-green-800
                            {% elif loan.status == 'paid' %}bg-blue-100 text-blue-800
                            {% elif loan.status == 'defaulted' %}bg-red-100 text-red-800
                            {% elif loan.status == 'written_off' %}bg-gray-100 text-gray-800
                            {% elif loan.status == 'rolled_over' %}bg-green-100 text-green-800
                            {% endif %}">
                            {{ loan.get_status_display }}
                        </span>
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Disbursement Date</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ loan.disbursement_date|date:"Y-m-d" }}</dd>
                </div>
            </div>
        </div>
    </div>

    <!-- Repayments Warning -->
    {% if loan.repayments.exists %}
    <div class="mb-6 rounded-md bg-yellow-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-yellow-800">
                    Loan Has Repayments
                </h3>
                <div class="mt-2 text-sm text-yellow-700">
                    <p>This loan has {{ loan.repayments.count }} repayment record(s). Moving this loan to deleted will
                        preserve all repayment data.</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    <!-- Confirmation Form -->
    <div class="overflow-hidden rounded-lg bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Confirm Soft Deletion</h3>
            <p class="text-sm text-gray-600 mb-6">
                Are you sure you want to move this loan to deleted loans? This action will:
            </p>
            <ul class="list-disc list-inside text-sm text-gray-600 mb-6 space-y-1">
                <li>Move the loan to the deleted loans section</li>
                <li>Hide the loan from active loan listings</li>
                {% if loan.repayments.exists %}
                <li>Preserve all {{ loan.repayments.count }} repayment record(s)</li>
                <li>Preserve all associated receipts</li>
                {% endif %}
                <li>Allow the loan to be restored later</li>
            </ul>

            <form method="post" class="space-y-4">
                {% csrf_token %}

                <!-- Confirmation Checkbox -->
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        <input id="confirm_delete" name="confirm_delete" type="checkbox" required
                            class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="confirm_delete" class="font-medium text-gray-700">
                            I understand this will move the loan to deleted loans
                        </label>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
                    <a href="{% url 'loans:loan_detail' pk=loan.pk %}"
                        class="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>
                    <button type="submit" id="delete_button" disabled
                        class="rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 disabled:opacity-50 disabled:cursor-not-allowed">
                        <i class="fas fa-archive mr-2"></i>
                        Move to Deleted Loans
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const confirmCheckbox = document.getElementById('confirm_delete');
        const deleteButton = document.getElementById('delete_button');

        if (confirmCheckbox && deleteButton) {
            confirmCheckbox.addEventListener('change', function () {
                deleteButton.disabled = !this.checked;
            });
        }
    });
</script>
{% endblock %}