{% extends "base.html" %}

{% block content %}
<div class="loan-list-container loan-workspace blocks-workspace" data-currency="{{ currency }}">
    <div class="page-header">
        <h1>My Loans</h1>
        <div class="header-actions">
            <a href="/plugins/loan/apply-loan" class="blocks-button blocks-button-primary">
                <i class="fa fa-plus"></i> Apply for Loan
            </a>
        </div>
    </div>

    <!-- Filter Tabs -->
    <div class="loan-filters">
        <a href="/plugins/loan/my-loans" class="filter-tab {% if filter_status == '' %}active{% endif %}">
            All Loans
        </a>
        <a href="/plugins/loan/my-loans?status=active"
            class="filter-tab {% if filter_status == 'active' %}active{% endif %}">
            Active
        </a>
        <a href="/plugins/loan/my-loans?status=closed"
            class="filter-tab {% if filter_status == 'closed' %}active{% endif %}">
            Closed
        </a>
        <a href="/plugins/loan/my-loans?status=approved"
            class="filter-tab {% if filter_status == 'approved' %}active{% endif %}">
            Pending Disbursement
        </a>
    </div>

    <!-- Loans Grid -->
    {% if loans %}
    <div class="loans-grid">
        {% for loan in loans %}
        <div class="loan-card {% if loan.has_overdue %}overdue{% endif %}">
            <div class="loan-card-header">
                <div class="loan-number">
                    <i class="fa fa-file-invoice"></i>
                    {{ loan.loan_number }}
                </div>
                <span class="loan-status status-{{ loan.status }}">{{ loan.status | upper }}</span>
            </div>

            <div class="loan-card-body">
                <div class="loan-detail-row">
                    <span class="label">Principal Amount:</span>
                    <span class="value">{{ currency }}{{ loan.principal_amount | price }}</span>
                </div>
                <div class="loan-detail-row">
                    <span class="label">Interest Rate:</span>
                    <span class="value">{{ loan.interest_rate }}% p.a.</span>
                </div>
                <div class="loan-detail-row">
                    <span class="label">Monthly EMI:</span>
                    <span class="value">{{ currency }}{{ loan.emi_amount | price }}</span>
                </div>
                <div class="loan-detail-row">
                    <span class="label">Tenure:</span>
                    <span class="value">{{ loan.tenure_months }} months</span>
                </div>
                <div class="loan-detail-row">
                    <span class="label">Outstanding:</span>
                    <span class="value highlight">{{ currency }}{{ loan.outstanding_balance | price }}</span>
                </div>

                {% if loan.next_due_date %}
                <div class="next-payment-info">
                    <i class="fa fa-calendar-alt"></i>
                    Next EMI: <strong>{{ currency }}{{ loan.next_emi | price }}</strong> on {{ loan.next_due_date | date_in_tz(timezone=settings.timezone) }}
                </div>
                {% endif %}

                {% if loan.has_overdue %}
                <div class="overdue-alert">
                    <i class="fa fa-exclamation-circle"></i>
                    Payment Overdue!
                </div>
                {% endif %}
            </div>

            <div class="loan-card-footer">
                <a href="/plugins/loan/loan-details?id={{ loan.id }}" class="blocks-button blocks-button-sm blocks-button-secondary">
                    <i class="fa fa-eye"></i> View Details
                </a>
                {% if loan.status == 'active' %}
                <button class="blocks-button blocks-button-sm blocks-button-primary open-payment-modal" data-loan-id="{{ loan.id }}"
                    data-emi-amount="{{ loan.emi_amount | price }}">
                    <i class="fa fa-credit-card"></i> Make Payment
                </button>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="no-loans-message">
        <i class="fa fa-inbox fa-3x"></i>
        <h2>No Loans Found</h2>
        <p>You don't have any loans yet. Apply for a loan to get started!</p>
        <a href="/plugins/loan/apply-loan" class="blocks-button blocks-button-primary">
            <i class="fa fa-plus"></i> Apply for Loan
        </a>
    </div>
    {% endif %}
    <!-- Payment Modal -->
    <dialog id="paymentModal" class="modal" aria-labelledby="payment-modal-title">
    <div class="modal-content">
        <button type="button" class="close" onclick="closePaymentModal()" aria-label="Close payment dialog">&times;</button>
        <h2 id="payment-modal-title">Make Payment</h2>
        <form id="paymentForm" onsubmit="submitPayment(event)">
            <input type="hidden" id="payment_loan_id" name="loan_id">

            <div class="form-group">
                <label for="payment_amount">Payment Amount ({{ currency }})</label>
                <input type="number" step="0.01" id="payment_amount" name="amount" required>
                <small class="form-hint">Suggested EMI: {{ currency }}<span id="suggested_emi">0</span></small>
            </div>

            <div class="form-group">
                <label for="payment_method">Payment Method</label>
                <select id="payment_method" name="payment_method">
                    <option value="online">Online Payment</option>
                    <option value="bank_transfer">Bank Transfer</option>
                    <option value="cash">Cash</option>
                    <option value="cheque">Cheque</option>
                </select>
            </div>

            <div class="modal-actions">
                <button type="submit" class="blocks-button blocks-button-primary">Process Payment</button>
                <button type="button" class="blocks-button blocks-button-secondary" onclick="closePaymentModal()">Cancel</button>
            </div>
        </form>
    </div>
</dialog>
</div>

{% endblock %}

{% block scripts %}
<script src="/plugins/loan/assets/js/my-loans.js"></script>
{% endblock %}