{% extends "base.html" %}

{% block head %}
{% include "partials/admin_vendor_chartjs.html" %}
{% endblock %}

{% block content %}
<div class="loan-details-container loan-workspace blocks-workspace" id="loan-details-page" data-currency="{{ currency | default(value='₹') }}">
    {% if error %}
    <div class="error-message">
        <i class="fa fa-exclamation-triangle"></i>
        <p>{{ error }}</p>
        <a href="/plugins/loan/my-loans" class="blocks-button blocks-button-secondary">
            <i class="fa fa-arrow-left"></i> Back to My Loans
        </a>
    </div>
    {% else %}
    <div class="page-header">
        <div>
            <h1>{{ loan.loan_number }}</h1>
            <span class="loan-status status-{{ loan.status }}">{{ loan.status | upper }}</span>
        </div>
        <div class="header-actions">
            <a href="/plugins/loan/my-loans" class="blocks-button blocks-button-secondary">
                <i class="fa fa-arrow-left"></i> Back to Loans
            </a>
        </div>
    </div>

    <!-- Loan Summary -->
    <div class="loan-info-grid">
        <div class="info-card">
            <h3>Principal Amount</h3>
            <p class="info-value">{{ currency | default(value='₹') }}{{ loan.principal_amount | price }}</p>
        </div>
        <div class="info-card">
            <h3>Interest Rate</h3>
            <p class="info-value">{{ loan.interest_rate }}% p.a.</p>
        </div>
        <div class="info-card">
            <h3>Monthly EMI</h3>
            <p class="info-value">{{ currency | default(value='₹') }}{{ loan.emi_amount | price }}</p>
        </div>
        <div class="info-card">
            <h3>Tenure</h3>
            <p class="info-value">{{ loan.tenure_months }} months</p>
        </div>
        <div class="info-card">
            <h3>Total Paid</h3>
            <p class="info-value success" id="total_paid_display">{{ currency | default(value='₹') }}{{ loan.total_paid
                | price }}</p>
        </div>
        <div class="info-card">
            <h3>Outstanding</h3>
            <p class="info-value warning" id="outstanding_balance_display">{{ currency | default(value='₹') }}{{
                loan.outstanding_balance | price }}
            </p>
        </div>
    </div>

    <!-- Payment Progress -->
    <div class="progress-section">
        <h2>Payment Progress</h2>
        <div class="progress-bar-container">
            <div class="progress-bar" id="progress_bar" data-progress="{{ progress_percent }}"
                role="progressbar" aria-label="Loan repayment progress" aria-valuemin="0" aria-valuemax="100"
                aria-valuenow="{{ progress_percent }}">
                <span class="progress-label" id="progress_label">{{ progress_percent | round }}%</span>
            </div>
        </div>
        <div class="progress-chart">
            <canvas id="loanProgressChart"></canvas>
        </div>
    </div>

    <!-- Payment Schedule -->
    <div class="schedule-section">
        <div class="section-header">
            <h2>Payment Schedule</h2>
            <div class="schedule-tabs">
                <button class="tab-btn active" onclick="setScheduleFilter('upcoming')"
                    id="tab-upcoming">Upcoming</button>
                <button class="tab-btn" onclick="setScheduleFilter('history')" id="tab-history">History</button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="schedule-table blocks-admin-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Due Date</th>
                        <th>EMI</th>
                        <th>Principal</th>
                        <th>Interest</th>
                        <th>Balance</th>
                        <th>Status</th>
                        <th>Paid Date</th>
                    </tr>
                </thead>
                <tbody id="scheduleTableBody">
                    {% for item in schedule %}
                    <tr class="status-{{ item.payment_status }}" data-schedule-row>
                        <td>{{ item.installment_number }}</td>
                        <td>{{ item.due_date | date_in_tz(timezone=settings.timezone) }}</td>
                        <td>{{ currency | default(value='₹') }}{{ item.emi_amount | price }}</td>
                        <td>{{ currency | default(value='₹') }}{{ item.principal_component | price }}</td>
                        <td>{{ currency | default(value='₹') }}{{ item.interest_component | price }}</td>
                        <td>{{ currency | default(value='₹') }}{{ item.outstanding_balance | price }}</td>
                        <td>
                            <span class="badge badge-{{ item.payment_status }}">
                                {{ item.payment_status | upper }}
                            </span>
                        </td>
                        <td>{{ item.paid_date | default(value="-") | date_in_tz(timezone=settings.timezone) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="pagination-controls" id="schedulePagination"></div>
    </div>

    <!-- Penalties (if any) -->
    {% if penalties %}
    <div class="penalties-section">
        <h2>Penalties</h2>
        <div class="table-responsive">
            <table class="penalties-table blocks-admin-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Overdue Amount</th>
                        <th>Days Overdue</th>
                        <th>Penalty Rate</th>
                        <th>Penalty Amount</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for penalty in penalties %}
                    <tr>
                        <td>{{ penalty.penalty_date | date_in_tz(timezone=settings.timezone) }}</td>
                        <td>{{ currency | default(value='₹') }}{{ penalty.overdue_amount | price }}</td>
                        <td>{{ penalty.days_overdue }} days</td>
                        <td>{{ penalty.penalty_rate }}%</td>
                        <td>{{ currency | default(value='₹') }}{{ penalty.penalty_amount | price }}</td>
                        <td>
                            <span class="badge badge-{{ penalty.status }}">
                                {{ penalty.status | upper }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- Payment History -->
    <div class="payment-history-section">
        <div class="section-header">
            <h2>Payment History</h2>
            {% if loan.status == 'active' %}
            <button class="blocks-button blocks-button-primary" onclick="openPaymentModal()">
                <i class="fa fa-credit-card"></i> Make Payment
            </button>
            {% endif %}
        </div>
        {% if payments %}
        <div class="table-responsive">
            <table class="payments-table blocks-admin-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Principal</th>
                        <th>Interest</th>
                        <th>Penalty</th>
                        <th>Method</th>
                        <th>Reference</th>
                    </tr>
                </thead>
                <tbody id="paymentsTableBody">
                    {% for payment in payments %}
                    <tr data-payment-row>
                        <td>{{ payment.payment_date | date_in_tz(timezone=settings.timezone) }}</td>
                        <td><strong>{{ currency | default(value='₹') }}{{ payment.amount_paid | price }}</strong></td>
                        <td>{{ currency | default(value='₹') }}{{ payment.principal_paid | price }}</td>
                        <td>{{ currency | default(value='₹') }}{{ payment.interest_paid | price }}</td>
                        <td>{{ currency | default(value='₹') }}{{ payment.penalty_paid | price }}</td>
                        <td>{{ payment.payment_method }}</td>
                        <td>{{ payment.transaction_reference | default(value="-") }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="pagination-controls" id="paymentsPagination"></div>
        {% else %}
        <p class="no-data">No payments made yet</p>
        {% endif %}
    </div>

    <!-- 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)">
                <div class="form-group">
                    <label for="payment_amount">Payment Amount ({{ currency | default(value='₹') }})</label>
                    <input type="number" step="0.01" id="payment_amount" name="amount"
                        value="{{ loan.emi_amount | price }}" required>
                    <small class="form-hint">Suggested EMI: {{ currency | default(value='₹') }}{{ loan.emi_amount | price
                        }}</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="form-group">
                    <label for="payment_date">Payment Date *</label>
                    <input type="date" id="payment_date" name="payment_date" required>
                </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 id="loan-data" data-currency="{{ currency | default(value='₹') }}"
        data-schedule="{{ schedule | json_encode }}" data-loan-id="{{ loan.id }}">
    </div>

    {% endif %}
</div>

{% endblock %}

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