{% extends 'base.html' %}

{% block title %}Loan {{ loan.loan_number }} -RuralPointADVANCE{% endblock %}

{% block content %}
<div>
    <!-- Loan Header -->
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <div class="flex items-center gap-4">
                <h1 class="text-2xl font-semibold text-text-dark">Loan {{ loan.loan_number }}</h1>
                <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 == 'rolled_over' %}bg-purple-100 text-purple-800
                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                    {{ loan.get_status_display }}
                </span>
            </div>
            <p class="mt-2 text-sm text-gray-700">
                {{ loan.application.loan_product.get_product_type_display }} - Disbursed on {{ loan.disbursement_date|date:"M d, Y" }}
            </p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
            {% if loan.status == 'active' %}
            <div class="flex gap-2">
                <button onclick="showRepaymentModal('{{ loan.pk }}')" class="rounded-md bg-primary px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-secondary">
                    Record Payment
                </button>
                <button onclick="showRolloverModal('{{ loan.pk }}')" class="rounded-md bg-white px-3 py-2 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    Request Rollover
                </button>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Loan Summary Cards -->
    <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <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">Principal Amount</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                KES {{ loan.principal_amount|floatformat:2 }}
            </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">Amount Repaid</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                KES {{ loan.amount_paid|floatformat:2 }}
            </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">Outstanding Balance</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                KES {{ loan.outstanding_amount|floatformat:2 }}
            </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">Due Date</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                {{ loan.due_date|date:"M d, Y" }}
            </dd>
            {% if loan.is_overdue %}
            <dd class="mt-2 text-sm font-medium text-red-600">
                {{ loan.days_overdue }} days overdue
            </dd>
            {% endif %}
        </div>
    </div>

    <!-- Loan Details and Repayment History -->
    <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
        <!-- Loan Details -->
        <div class="rounded-lg bg-white shadow">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Loan Details</h3>
            </div>
            <div class="border-t border-gray-200 px-4 py-5 sm:px-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">Borrower</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ loan.borrower.get_full_name }}
                            <div class="text-gray-500">{{ loan.borrower.phone_number }}</div>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Loan Product</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.application.loan_product.name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Interest Rate</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.application.loan_product.interest_rate }}%</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Processing Fee</dt>
                        <dd class="mt-1 text-sm text-gray-900">KES {{ loan.processing_fee|floatformat:2 }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Duration</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.duration_days }} days</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Late Payments</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ late_payments }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        <!-- Repayment History -->
        <div class="rounded-lg bg-white shadow">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Repayment History</h3>
            </div>
            <div class="border-t border-gray-200">
                <div class="flow-root">
                    <ul role="list" class="divide-y divide-gray-200">
                        {% for repayment in repayments %}
                        <li class="px-4 py-4 sm:px-6">
                            <div class="flex items-center justify-between">
                                <div class="flex flex-col">
                                    <p class="text-sm font-medium text-gray-900">
                                        KES {{ repayment.amount|floatformat:2 }}
                                    </p>
                                    <p class="text-sm text-gray-500">
                                        {{ repayment.get_payment_method_display }}
                                        {% if repayment.mpesa_transaction_id %}
                                        - {{ repayment.mpesa_transaction_id }}
                                        {% endif %}
                                    </p>
                                </div>
                                <div class="flex flex-col items-end">
                                    <p class="text-sm text-gray-500">
                                        {{ repayment.payment_date|date:"M d, Y" }}
                                    </p>
                                    <p class="text-sm text-gray-500">
                                        {{ repayment.receipt_number }}
                                    </p>
                                </div>
                            </div>
                        </li>
                        {% empty %}
                        <li class="px-4 py-4 sm:px-6 text-center text-sm text-gray-500">
                            No repayments recorded yet.
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Rollover History -->
    {% if rollovers %}
    <div class="mt-8">
        <div class="rounded-lg bg-white shadow">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Rollover History</h3>
            </div>
            <div class="border-t border-gray-200">
                <div class="flow-root">
                    <ul role="list" class="divide-y divide-gray-200">
                        {% for rollover in rollovers %}
                        <li class="px-4 py-4 sm:px-6">
                            <div class="flex items-center justify-between">
                                <div class="flex flex-col">
                                    <div class="flex items-center gap-2">
                                        <p class="text-sm font-medium text-gray-900">
                                            {{ rollover.requested_duration }} days extension
                                        </p>
                                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                                            {% if rollover.status == 'approved' %}bg-green-100 text-green-800
                                            {% elif rollover.status == 'rejected' %}bg-red-100 text-red-800
                                            {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                                            {{ rollover.get_status_display }}
                                        </span>
                                    </div>
                                    <p class="text-sm text-gray-500">
                                        Rollover Fee: KES {{ rollover.rollover_fee|floatformat:2 }}
                                    </p>
                                    <p class="text-sm text-gray-500">
                                        Reason: {{ rollover.reason }}
                                    </p>
                                </div>
                                <div class="flex flex-col items-end">
                                    <p class="text-sm text-gray-500">
                                        Requested: {{ rollover.requested_at|date:"M d, Y" }}
                                    </p>
                                    {% if rollover.reviewed_at %}
                                    <p class="text-sm text-gray-500">
                                        Reviewed: {{ rollover.reviewed_at|date:"M d, Y" }}
                                    </p>
                                    {% endif %}
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Repayment Modal -->
<div id="repaymentModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
    <div class="fixed inset-0 z-10 overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                <form id="repaymentForm" method="post" action="{% url 'loans:record_repayment' pk=loan.pk %}">
                    {% csrf_token %}
                    <div>
                        <div class="mt-3 text-center sm:mt-5">
                            <h3 class="text-lg font-semibold leading-6 text-gray-900">Record Payment</h3>
                            <div class="mt-2">
                                <div class="mb-4">
                                    <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label>
                                    <div class="mt-1">
                                        <input type="number" name="amount" id="amount" step="0.01" required
                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm 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">
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="payment_method" class="block text-sm font-medium text-gray-700">Payment Method</label>
                                    <div class="mt-1">
                                        <select name="payment_method" id="payment_method" required
                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6">
                                            <option value="mpesa">M-Pesa</option>
                                            <option value="bank">Bank Transfer</option>
                                            <option value="cash">Cash</option>
                                            <option value="cheque">Cheque</option>
                                        </select>
                                    </div>
                                </div>
                                <div id="mpesaFields" class="mb-4">
                                    <label for="mpesa_phone" class="block text-sm font-medium text-gray-700">M-Pesa Phone Number</label>
                                    <div class="mt-1">
                                        <input type="tel" name="mpesa_phone" id="mpesa_phone"
                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm 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">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
                        <button type="submit" class="inline-flex w-full justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-secondary sm:col-start-2">
                            Record Payment
                        </button>
                        <button type="button" onclick="hideRepaymentModal()" class="mt-3 inline-flex w-full 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 sm:col-start-1 sm:mt-0">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Rollover Modal -->
<div id="rolloverModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
    <div class="fixed inset-0 z-10 overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                <form id="rolloverForm" method="post" action="{% url 'loans:request_rollover' pk=loan.pk %}">
                    {% csrf_token %}
                    <div>
                        <div class="mt-3 text-center sm:mt-5">
                            <h3 class="text-lg font-semibold leading-6 text-gray-900">Request Loan Rollover</h3>
                            <div class="mt-2">
                                <div class="mb-4">
                                    <label for="requested_duration" class="block text-sm font-medium text-gray-700">Additional Duration (Days)</label>
                                    <div class="mt-1">
                                        <input type="number" name="requested_duration" id="requested_duration" min="1" required
                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm 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">
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="reason" class="block text-sm font-medium text-gray-700">Reason for Rollover</label>
                                    <div class="mt-1">
                                        <textarea name="reason" id="reason" rows="3" required
                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm 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"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
                        <button type="submit" class="inline-flex w-full justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-secondary sm:col-start-2">
                            Submit Request
                        </button>
                        <button type="button" onclick="hideRolloverModal()" class="mt-3 inline-flex w-full 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 sm:col-start-1 sm:mt-0">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Show/hide M-Pesa fields based on payment method
    document.getElementById('payment_method').addEventListener('change', function() {
        const mpesaFields = document.getElementById('mpesaFields');
        mpesaFields.style.display = this.value === 'mpesa' ? 'block' : 'none';
    });

    // Modal functions
    function showRepaymentModal() {
        document.getElementById('repaymentModal').classList.remove('hidden');
    }

    function hideRepaymentModal() {
        document.getElementById('repaymentModal').classList.add('hidden');
    }

    function showRolloverModal() {
        document.getElementById('rolloverModal').classList.remove('hidden');
    }

    function hideRolloverModal() {
        document.getElementById('rolloverModal').classList.add('hidden');
    }
</script>
{% endblock %}