{% extends 'base.html' %}
{% load humanize %}

{% block title %}Interest Schedule - {{ loan.loan_number }}{% endblock %}

{% block extra_css %}
<style>
.interest-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-label {
    color: #6b7280;
    font-weight: 500;
}

.metric-value {
    color: #111827;
    font-weight: 600;
}

.highlight-value {
    color: #10b981;
    font-size: 1.25rem;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table th {
    background: #f9fafb;
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
}

.schedule-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.schedule-table tr:hover {
    background: #f9fafb;
}
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
                    <i class="fas fa-percentage text-blue-500 mr-3"></i>
                    Interest Schedule
                </h1>
                <p class="text-gray-600 dark:text-gray-400 mt-2">
                    {{ loan.loan_number }} - {{ loan.borrower.get_full_name }}
                </p>
            </div>
            <a href="{% url 'loans:loan_detail' loan.id %}" class="btn btn-primary">
                <span>←</span>
                Back to Loan
            </a>
        </div>
    </div>

    <!-- Interest Breakdown Card -->
    <div class="interest-card">
       <h2 class="text-xl font-semibold text-gray-900 mb-4">
            <span>📊</span>
            Interest Breakdown
        </h2>
        
        <div class="metric-row">
            <span class="metric-label">Principal Amount:</span>
            <span class="metric-value">KSh {{ loan.principal_amount|floatformat:2|intcomma }}</span>
        </div>
        
        <div class="metric-row">
            <span class="metric-label">Interest Rate:</span>
            <span class="metric-value">{{ interest_breakdown.interest_rate|floatformat:1 }}% per month</span>
        </div>
        
        <div class="metric-row">
            <span class="metric-label">Total Interest:</span>
            <span class="metric-value highlight-value">KSh {{ interest_breakdown.total_interest|floatformat:2|intcomma }}</span>
        </div>
        
        <div class="metric-row">
            <span class="metric-label">Interest Paid:</span>
            <span class="metric-value text-green-600">KSh {{ interest_breakdown.interest_paid|floatformat:2|intcomma }}</span>
        </div>
        
        <div class="metric-row">
            <span class="metric-label">Interest Outstanding:</span>
            <span class="metric-value text-orange-600">KSh {{ interest_breakdown.interest_outstanding|floatformat:2|intcomma }}</span>
        </div>
    </div>

    <!-- Payment Schedule -->
    {% if schedule %}
    <div class="interest-card">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
            <span>📅</span>
            Payment Schedule
        </h2>
        
        <div class="overflow-x-auto">
            <table class="schedule-table">
                <thead>
                    <tr>
                        <th>Payment #</th>
                        <th>Due Date</th>
                        <th>Principal</th>
                        <th>Interest</th>
                        <th>Total Payment</th>
                        <th>Balance</th>
                    </tr>
                </thead>
                <tbody>
                    {% for payment in schedule %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ payment.due_date|date:"M d, Y" }}</td>
                        <td>KSh {{ payment.principal|floatformat:2|intcomma }}</td>
                        <td>KSh {{ payment.interest|floatformat:2|intcomma }}</td>
                        <td class="font-semibold">KSh {{ payment.total|floatformat:2|intcomma }}</td>
                        <td>KSh {{ payment.balance|floatformat:2|intcomma }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="interest-card">
        <div class="text-center py-8 text-gray-500">
            <span>ℹ️</span>
            <p>No payment schedule available for this loan.</p>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}