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

{% block title %}Deleted Loans - Haven Grazuri Investment Limited{% endblock %}

{% block content %}
<div>
    <!-- Header -->
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-semibold text-text-dark">Deleted Loans</h1>
                    <p class="mt-2 text-sm text-gray-700">
                        View and manage soft-deleted loans. These loans have been removed from the main list but can be restored if needed.
                    </p>
                </div>
                <div class="flex gap-4">
                    <a href="{% url 'loans:loans' %}" 
                       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 Active Loans
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Statistics -->
    <div class="mt-6 mb-8 grid grid-cols-1 gap-5 sm:grid-cols-3">
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Total Deleted Loans</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ total_deleted }}</dd>
        </div>
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Total Value</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                KES {% for loan in deleted_loans %}{{ loan.principal_amount|add:0 }}{% if not forloop.last %}+{% endif %}{% endfor %}
            </dd>
        </div>
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Actions Available</dt>
            <dd class="mt-1 text-sm text-gray-600">Restore or permanently delete</dd>
        </div>
    </div>

    <!-- Search -->
    <div class="mt-6">
        <form method="get" class="space-y-4">
            <div class="flex flex-col sm:flex-row gap-4">
                <div class="relative flex-1">
                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                        <span>🔍</span>
                    </div>
                    <input
                        type="text"
                        name="search"
                        value="{{ search_query|default:'' }}"
                        class="block w-full rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
                        placeholder="Search deleted loans..."
                    />
                </div>
                <button type="submit" 
                        class="rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus:ring-2 focus:ring-primary focus:ring-offset-2 flex items-center gap-2">
                    <span>🔍</span>
                    Search
                </button>
                <a href="{% url 'loans:deleted_loans' %}" 
                   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 flex items-center gap-2">
                    <span>✕</span>
                    Clear
                </a>
            </div>
        </form>
    </div>

    <!-- Deleted Loans Table -->
    <div class="mt-8 flow-root">
        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
                    {% if deleted_loans %}
                    <table class="min-w-full divide-y divide-gray-300">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                                    Loan Details
                                </th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                    Client Information
                                </th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                    Amount
                                </th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                    Deletion Info
                                </th>
                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                                    <span class="sr-only">Actions</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 bg-white">
                            {% for loan in deleted_loans %}
                            <tr>
                                <td class="whitespace-nowrap py-4 pl-4 pr-3 sm:pl-6">
                                    <div class="flex flex-col">
                                        <div class="font-medium text-gray-900">
                                            {{ loan.loan_number }} - {{ loan.application.loan_product.get_product_type_display }}
                                        </div>
                                        <div class="text-gray-500">
                                            Duration: {{ loan.duration_days }} days
                                        </div>
                                        <div class="flex items-center gap-2 text-gray-500">
                                            <span>📅</span>
                                            Disbursed: {{ loan.disbursement_date|date:"Y-m-d" }}
                                        </div>
                                        <div class="mt-1">
                                            <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-red-100 text-red-800">
                                                Deleted
                                            </span>
                                        </div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4">
                                    <div class="flex flex-col">
                                        <div class="font-medium text-gray-900">{{ loan.borrower.get_full_name }}</div>
                                        <div class="text-gray-500">{{ loan.borrower.phone_number }}</div>
                                        <div class="text-gray-500">{{ loan.borrower.email }}</div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4">
                                    <div class="flex flex-col">
                                        <div class="font-medium text-gray-900">
                                            KES {{ loan.principal_amount|floatformat:2 }}
                                        </div>
                                        <div class="text-gray-500">
                                            Interest: KES {{ loan.interest_amount|floatformat:2 }}
                                        </div>
                                        <div class="text-gray-500">
                                            Total: KES {{ loan.total_amount|floatformat:2 }}
                                        </div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4">
                                    <div class="flex flex-col">
                                        <div class="text-sm text-gray-900">
                                            <span>🗑️</span>
                                            {{ loan.deleted_at|date:"Y-m-d H:i" }}
                                        </div>
                                        {% if loan.deleted_by %}
                                        <div class="text-sm text-gray-500">
                                            By: {{ loan.deleted_by.get_full_name }}
                                        </div>
                                        {% endif %}
                                    </div>
                                </td>
                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                    <div class="flex justify-end space-x-2">
                                        <!-- Restore Button -->
                                        <a href="{% url 'loans:restore_loan' loan.pk %}" 
                                           class="inline-flex items-center rounded-md bg-green-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-green-500"
                                           title="Restore Loan">
                                            <span>↶</span>
                                            Restore
                                        </a>
                                        
                                        <!-- Permanently Delete Button -->
                                        {% if not loan.repayments.exists %}
                                        <a href="{% url 'loans:permanently_delete_loan' loan.pk %}" 
                                           class="inline-flex items-center rounded-md bg-red-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-red-500"
                                           title="Permanently Delete"
                                           onclick="return confirm('Are you sure you want to permanently delete this loan? This action cannot be undone.')">
                                            <i class="fas fa-trash-alt mr-1"></i>
                                            Delete Forever
                                        </a>
                                        {% else %}
                                        <span class="inline-flex items-center rounded-md bg-gray-300 px-2 py-1 text-xs font-semibold text-gray-500"
                                              title="Cannot permanently delete loan with repayments">
                                            <span>🔒</span>
                                            Protected
                                        </span>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <div class="text-center py-12">
                        <i class="fas fa-trash-alt text-gray-400 text-4xl mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">No deleted loans found</h3>
                        <p class="text-gray-500">
                            {% if search_query %}
                                No deleted loans match your search criteria.
                            {% else %}
                                There are no deleted loans at the moment.
                            {% endif %}
                        </p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    {% if deleted_loans.paginator.num_pages > 1 %}
    <div class="mt-4 flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
        <div class="flex flex-1 justify-between sm:hidden">
            {% if deleted_loans.has_previous %}
            <a href="?page={{ deleted_loans.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" 
               class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                Previous
            </a>
            {% endif %}
            {% if deleted_loans.has_next %}
            <a href="?page={{ deleted_loans.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" 
               class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                Next
            </a>
            {% endif %}
        </div>
        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700">
                    Showing <span class="font-medium">{{ deleted_loans.start_index }}</span> to
                    <span class="font-medium">{{ deleted_loans.end_index }}</span> of
                    <span class="font-medium">{{ deleted_loans.paginator.count }}</span> results
                </p>
            </div>
            <div>
                <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                    {% if deleted_loans.has_previous %}
                    <a href="?page={{ deleted_loans.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}"
                       class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                        <span class="sr-only">Previous</span>
                        <span>‹</span>
                    </a>
                    {% endif %}
                    
                    {% for i in deleted_loans.paginator.page_range %}
                        {% if deleted_loans.number == i %}
                        <span class="relative z-10 inline-flex items-center bg-primary px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                            {{ i }}
                        </span>
                        {% else %}
                        <a href="?page={{ i }}{% if search_query %}&search={{ search_query }}{% endif %}"
                           class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                            {{ i }}
                        </a>
                        {% endif %}
                    {% endfor %}
                    
                    {% if deleted_loans.has_next %}
                    <a href="?page={{ deleted_loans.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}"
                       class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                        <span class="sr-only">Next</span>
                        <span>›</span>
                    </a>
                    {% endif %}
                </nav>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}