{% extends "base.html" %}
{% import "macros/empty_state.html" as empty %}

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

{% block content %}
<div class="payment-history-container loan-workspace blocks-workspace" id="payment-history-page" data-currency="{{ currency | default(value='₹') }}"
    data-pagination="{{ pagination | json_encode }}"
    data-monthly-breakdown="{{ monthly_breakdown | json_encode }}">

    <div class="page-header">
        <h1>Payment History</h1>
        <p class="page-subtitle text-muted">View and track all your loan repayments</p>
    </div>

    <!-- Summary Cards -->
    <div class="payment-summary-cards">
        <div class="summary-card">
            <div class="card-icon total-paid">
                <i class="fa fa-hand-holding-dollar"></i>
            </div>
            <div class="card-content">
                <h3>{{ currency | default(value='₹') }}{{ total_paid |
                    default(value=0) | price }}</h3>
                <p>Total Paid</p>
            </div>
        </div>

        <div class="summary-card">
            <div class="card-icon total-principal">
                <i class="fa fa-chart-line"></i>
            </div>
            <div class="card-content">
                <h3>{{ currency | default(value='₹') }}{{ total_principal |
                    default(value=0) | price }}</h3>
                <p>Principal</p>
            </div>
        </div>

        <div class="summary-card">
            <div class="card-icon total-interest">
                <i class="fa fa-percent"></i>
            </div>
            <div class="card-content">
                <h3>{{ currency | default(value='₹') }}{{ total_interest |
                    default(value=0) | price }}</h3>
                <p>Interest</p>
            </div>
        </div>

        {% if total_penalty and total_penalty > 0 %}
        <div class="summary-card">
            <div class="card-icon total-penalty">
                <i class="fa fa-gavel"></i>
            </div>
            <div class="card-content">
                <h3>{{ currency | default(value='₹') }}{{ total_penalty | price }}</h3>
                <p>Penalties</p>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Monthly Breakdown Chart -->
    <div class="chart-section">
        <h2>Monthly Payment Breakdown</h2>
        <div class="chart-container monthly-breakdown-chart">
            <canvas id="monthlyBreakdownChart"></canvas>
        </div>
    </div>

    <!-- Payment History Table -->
    <div class="payment-history-section">
        <div class="section-header">
            <h2>All Payments</h2>
            <div id="pagination-info" class="text-muted"></div>
        </div>

        <div id="payments-table-container">
            {% if payments %}
            <div class="table-responsive">
                <table class="payments-table blocks-admin-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Loan Number</th>
                            <th>Total Amount</th>
                            <th>Principal</th>
                            <th>Interest</th>
                            <th>Penalty</th>
                            <th>Method</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody id="payments-tbody">
                        {% for payment in payments %}
                        <tr>
                            <td>{{ payment.payment_date | date_in_tz(timezone=settings.timezone) }}</td>
                            <td>
                                <a href="/plugins/loan/loan-details?id={{ payment.loan_id }}">
                                    {{ payment.loan_number }}
                                </a>
                            </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>
                                {% if payment.penalty_paid and payment.penalty_paid > 0 %}
                                <span class="penalty-amount">{{ currency | default(value='₹') }}{{ payment.penalty_paid | price
                                    }}</span>
                                {% else %}
                                -
                                {% endif %}
                            </td>
                            <td>{{ payment.payment_method }}</td>
                            <td>
                                <span class="badge badge-{{ payment.status }}">
                                    {{ payment.status | upper }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div id="pagination-controls" class="pagination-container">
                <button id="prev-btn" class="blocks-button blocks-button-secondary" onclick="changePage(currentPage - 1)">
                    <i class="fa fa-chevron-left"></i> Previous
                </button>
                <div id="page-numbers" class="page-numbers">
                    {# Initial page numbers will be filled by JS #}
                </div>
                <button id="next-btn" class="blocks-button blocks-button-secondary" onclick="changePage(currentPage + 1)">
                    Next <i class="fa fa-chevron-right"></i>
                </button>
            </div>
            {% else %}
            {{ empty::empty_state(icon="fa fa-receipt", title="No Payment History", description="You haven't made any loan payments yet.") }}
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

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