{% extends "base.html" %}

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

{% block content %}
<div class="loan-dashboard-container loan-workspace blocks-workspace" data-currency="{{ currency | default(value='₹') }}"
    data-status="{{ loans_by_status | json_encode }}" data-trend="{{ payment_trend | json_encode }}">
    <div class="dashboard-header">
        <h1>Loan Dashboard</h1>
        <p class="dashboard-subtitle">Manage your loans and track payments</p>
    </div>

    <!-- Summary Cards -->
    <div class="loan-summary-cards">
        <div class="summary-card">
            <div class="card-icon total-loans">
                <i class="fa fa-file-invoice-dollar"></i>
            </div>
            <div class="card-content">
                <h3>{{ summary.total_loans }}</h3>
                <p>Total Loans</p>
            </div>
        </div>

        <div class="summary-card">
            <div class="card-icon active-loans">
                <i class="fa fa-check-circle"></i>
            </div>
            <div class="card-content">
                <h3>{{ summary.active_loans }}</h3>
                <p>Active Loans</p>
            </div>
        </div>

        <div class="summary-card">
            <div class="card-icon total-disbursed">
                <i class="fa fa-hand-holding-usd"></i>
            </div>
            <div class="card-content">
                <h3>{{ currency | default(value='₹') }}{{ summary.total_disbursed | price }}</h3>
                <p>Total Disbursed</p>
            </div>
        </div>

        <div class="summary-card">
            <div class="card-icon total-paid">
                <i class="fa fa-coins"></i>
            </div>
            <div class="card-content">
                <h3>{{ currency | default(value='₹') }}{{ summary.total_paid | price }}</h3>
                <p>Total Paid</p>
            </div>
        </div>

        <div class="summary-card">
            <div class="card-icon outstanding">
                <i class="fa fa-exclamation-triangle"></i>
            </div>
            <div class="card-content">
                <h3>{{ currency | default(value='₹') }}{{ summary.outstanding_balance | price }}</h3>
                <p>Outstanding</p>
            </div>
        </div>

        {% if summary.overdue_loans > 0 %}
        <div class="summary-card alert-card">
            <div class="card-icon overdue">
                <i class="fa fa-bell"></i>
            </div>
            <div class="card-content">
                <h3>{{ summary.overdue_loans }}</h3>
                <p>Overdue Loans</p>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="dashboard-grid">
        <!-- Charts Section -->
        <div class="dashboard-section chart-section">
            <h2>Loan Overview</h2>
            <div class="chart-container">
                <canvas id="loanStatusChart"></canvas>
            </div>
        </div>

        <div class="dashboard-section chart-section">
            <h2>Payment Trend (Last 6 Months)</h2>
            <div class="chart-container">
                <canvas id="paymentTrendChart"></canvas>
            </div>
        </div>

        <!-- Upcoming Payments -->
        <div class="dashboard-section">
            <h2>Upcoming Payments</h2>
            {% if upcoming_payments %}
            <div class="upcoming-payments-list">
                {% for payment in upcoming_payments %}
                <div class="payment-item">
                    <div class="payment-info">
                        <strong>{{ payment.loan_number }}</strong>
                        <span class="payment-date">Due: {{ payment.due_date | date_in_tz(timezone=settings.timezone) }}</span>
                    </div>
                    <div class="payment-amount">
                        <strong>{{ currency | default(value='₹') }}{{ payment.emi_amount | price }}</strong>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="no-data">No upcoming payments</p>
            {% endif %}
        </div>

        <!-- Recent Payments -->
        <div class="dashboard-section">
            <h2>Recent Payments</h2>
            {% if recent_payments %}
            <div class="recent-payments-list">
                {% for payment in recent_payments %}
                <div class="payment-item">
                    <div class="payment-info">
                        <strong>{{ payment.loan_number }}</strong>
                        <span class="payment-date">{{ payment.payment_date | date_in_tz(timezone=settings.timezone) }}</span>
                    </div>
                    <div class="payment-amount success">
                        <strong>{{ currency | default(value='₹') }}{{ payment.amount_paid | price }}</strong>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="no-data">No recent payments</p>
            {% endif %}
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <a href="/plugins/loan/apply-loan" class="blocks-button blocks-button-primary">
            <i class="fa fa-plus"></i> Apply for New Loan
        </a>
        <a href="/plugins/loan/my-loans" class="blocks-button blocks-button-secondary">
            <i class="fa fa-list"></i> View All Loans
        </a>
        <a href="/plugins/loan/payment-history" class="blocks-button blocks-button-secondary">
            <i class="fa fa-history"></i> Payment History
        </a>
    </div>
</div>

{% endblock %}

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