{% extends 'base.html' %}

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

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900">Fix Loan Total Amounts</h1>
        <p class="mt-2 text-sm text-gray-600">
            This tool will fix loans where the total amount is incorrectly calculated.
        </p>
    </div>

    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Summary</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-blue-50 p-4 rounded">
                <div class="text-sm text-gray-600">Total Loans</div>
                <div class="text-2xl font-bold text-blue-600">{{ total_loans }}</div>
            </div>
            <div class="bg-red-50 p-4 rounded">
                <div class="text-sm text-gray-600">Loans with Incorrect Totals</div>
                <div class="text-2xl font-bold text-red-600">{{ incorrect_count }}</div>
            </div>
            <div class="bg-green-50 p-4 rounded">
                <div class="text-sm text-gray-600">Loans Already Correct</div>
                <div class="text-2xl font-bold text-green-600">{{ total_loans|add:"-"|add:incorrect_count }}</div>
            </div>
        </div>
    </div>

    {% if incorrect_loans %}
    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Loans to be Fixed</h2>
        <div class="overflow-x-auto">
            <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">Loan Number</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Borrower</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Principal</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Interest</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Processing Fee</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Current Total</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Correct Total</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Difference</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for loan in incorrect_loans %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ loan.loan_number }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ loan.borrower }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-gray-900">KES {{ loan.principal|floatformat:2 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-gray-900">KES {{ loan.interest|floatformat:2 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-gray-900">KES {{ loan.processing_fee|floatformat:2 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-red-600 font-semibold">KES {{ loan.current_total|floatformat:2 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-green-600 font-semibold">KES {{ loan.correct_total|floatformat:2 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-blue-600 font-semibold">+KES {{ loan.difference|floatformat:2 }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <form method="post" class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
        {% csrf_token %}
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <svg class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>
            <div class="ml-3 flex-1">
                <h3 class="text-sm font-medium text-yellow-800">Warning</h3>
                <div class="mt-2 text-sm text-yellow-700">
                    <p>This action will update {{ incorrect_count }} loan(s) in the database. The total amount will be recalculated as:</p>
                    <p class="mt-2 font-mono bg-white px-2 py-1 rounded">Total = Principal + Interest + Processing Fee</p>
                </div>
                <div class="mt-4">
                    <button type="submit" class="bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-2 px-4 rounded">
                        Fix {{ incorrect_count }} Loan(s)
                    </button>
                    <a href="{% url 'loans:loans' %}" class="ml-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded">
                        Cancel
                    </a>
                </div>
            </div>
        </div>
    </form>
    {% else %}
    <div class="bg-green-50 border border-green-200 rounded-lg p-6">
        <div class="flex items-center">
            <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-green-800">All loans are correct!</h3>
                <p class="mt-2 text-sm text-green-700">No loans need to be fixed. All total amounts are correctly calculated.</p>
            </div>
        </div>
        <div class="mt-4">
            <a href="{% url 'loans:loans' %}" class="bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded">
                Back to Loans
            </a>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}