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

{% block title %}Delinquent Loans Analytics - Enhanced Report{% endblock %}

{% block extra_css %}
<style>
.metric-card {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.metric-card.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.metric-card.warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.metric-card.danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.metric-card.info { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.metric-card.critical { background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%); }

.delinquency-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.delinquency-mild { background-color: #fef3c7; color: #92400e; }
.delinquency-moderate { background-color: #fee2e2; color: #991b1b; }
.delinquency-severe { background-color: #fecaca; color: #7f1d1d; }
.delinquency-critical { background-color: #dc2626; color: #ffffff; }

.filter-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;
}

.chart-container {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    height: 350px;
}

.data-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

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

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

.data-table tr:hover {
    background: #f9fafb;
}

.clickable {
    cursor: pointer;
    transition: all 0.2s;
}

.clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-btn.primary { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); color: white; }
.action-btn.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
.action-btn.warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
.action-btn.danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }

.recovery-action {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    margin: 0.25rem 0;
}

.recovery-contact { background-color: #dbeafe; color: #1e40af; }
.recovery-legal { background-color: #fee2e2; color: #991b1b; }
.recovery-writeoff { background-color: #f3f4f6; color: #6b7280; }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Header Section -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
                    <span>⚠️</span>
                    Delinquent Loans Analytics
                </h1>
                <p class="text-gray-600 dark:text-gray-400 mt-2">
                    Comprehensive analysis of overdue loans and recovery management
                </p>
            </div>
            <div class="flex gap-3">
                <button onclick="initiateRecoveryActions()" class="action-btn warning">
                    <i class="fas fa-gavel"></i>
                    Recovery Actions
                </button>
                <button onclick="exportToExcel()" class="action-btn success">
                    <span>📊</span>
                    Export Excel
                </button>
                <button onclick="exportToPDF()" class="action-btn danger">
                    <span>📄</span>
                    Export PDF
                </button>
                <a href="{% url 'reports:reports_dashboard' %}" class="action-btn primary">
                    <span>←</span>
                    Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="filter-card mb-8">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <span>🔍</span>
            Report Filters
        </h3>
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Delinquency Level</label>
                <select name="days_filter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="this.form.submit()">
                    <option value="" {% if not days_filter %}selected{% endif %}>All Delinquent</option>
                    <option value="mild" {% if days_filter == 'mild' %}selected{% endif %}>Mild (1-30 days)</option>
                    <option value="moderate" {% if days_filter == 'moderate' %}selected{% endif %}>Moderate (31-60 days)</option>
                    <option value="severe" {% if days_filter == 'severe' %}selected{% endif %}>Severe (61-90 days)</option>
                    <option value="critical" {% if days_filter == 'critical' %}selected{% endif %}>Critical (90+ days)</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Amount Range</label>
                <select name="amount_filter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">All Amounts</option>
                    <option value="small">Small (< KSh 50k)</option>
                    <option value="medium">Medium (KSh 50k-200k)</option>
                    <option value="large">Large (> KSh 200k)</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Recovery Status</label>
                <select name="recovery_status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">All Status</option>
                    <option value="no_action">No Action Taken</option>
                    <option value="contacted">Borrower Contacted</option>
                    <option value="payment_plan">Payment Plan</option>
                    <option value="legal_action">Legal Action</option>
                    <option value="written_off">Written Off</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="action-btn primary w-full">
                    <span>🔍</span>
                    Apply Filters
                </button>
            </div>
        </form>
    </div>

    <!-- Key Metrics Row -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="metric-card danger clickable" onclick="filterByDelinquency('all')">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-2xl font-bold mb-2">
                        {{ report_data.summary.total_delinquent_loans|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Total Delinquent Loans</p>
                    <p class="text-xs opacity-75">KSh {{ report_data.summary.total_delinquent_amount|default:0|floatformat:0|intcomma }}</p>
                </div>
                <span>⚠️</span>
            </div>
        </div>

        <div class="metric-card warning clickable" onclick="showAverageDelinquency()">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-2xl font-bold mb-2">
                        {{ report_data.summary.average_days_overdue|default:0|floatformat:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Average Days Overdue</p>
                    <p class="text-xs opacity-75">Median: {{ report_data.summary.median_days_overdue|default:0 }} days</p>
                </div>
                <i class="fas fa-calendar-times text-3xl opacity-75"></i>
            </div>
        </div>

        <div class="metric-card info clickable" onclick="showRecoveryRate()">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-2xl font-bold mb-2">
                        {{ report_data.summary.recovery_rate|default:0|floatformat:1 }}%
                    </h3>
                    <p class="text-sm opacity-90">Recovery Rate</p>
                    <p class="text-xs opacity-75">Last 30 days</p>
                </div>
                <span>📈</span>
            </div>
        </div>

        <div class="metric-card success clickable" onclick="showRecoveredAmount()">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-2xl font-bold mb-2">
                        KSh {{ report_data.summary.recovered_amount|default:0|floatformat:0|intcomma }}
                    </h3>
                    <p class="text-sm opacity-90">Recovered This Month</p>
                    <p class="text-xs opacity-75">{{ report_data.summary.recovered_loans|default:0 }} loans</p>
                </div>
                <span>💳</span>
            </div>
        </div>
    </div>

    <!-- Delinquency Severity Breakdown -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="metric-card warning clickable" onclick="filterByDelinquency('mild')">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-semibold mb-2">
                        {{ report_data.delinquency_breakdown.mild_count|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Mild (1-30 days)</p>
                    <p class="text-xs opacity-75">KSh {{ report_data.delinquency_breakdown.mild_amount|default:0|floatformat:0|intcomma }}</p>
                </div>
                <span>⚠️</span>
            </div>
        </div>

        <div class="metric-card danger clickable" onclick="filterByDelinquency('moderate')">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-semibold mb-2">
                        {{ report_data.delinquency_breakdown.moderate_count|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Moderate (31-60 days)</p>
                    <p class="text-xs opacity-75">KSh {{ report_data.delinquency_breakdown.moderate_amount|default:0|floatformat:0|intcomma }}</p>
                </div>
                <span>⚠️</span>
            </div>
        </div>

        <div class="metric-card danger clickable" onclick="filterByDelinquency('severe')">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-semibold mb-2">
                        {{ report_data.delinquency_breakdown.severe_count|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Severe (61-90 days)</p>
                    <p class="text-xs opacity-75">KSh {{ report_data.delinquency_breakdown.severe_amount|default:0|floatformat:0|intcomma }}</p>
                </div>
                <span>🔥</span>
            </div>
        </div>

        <div class="metric-card critical clickable" onclick="filterByDelinquency('critical')">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-semibold mb-2">
                        {{ report_data.delinquency_breakdown.critical_count|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Critical (90+ days)</p>
                    <p class="text-xs opacity-75">KSh {{ report_data.delinquency_breakdown.critical_amount|default:0|floatformat:0|intcomma }}</p>
                </div>
                <i class="fas fa-skull-crossbones text-2xl opacity-75"></i>
            </div>
        </div>
    </div>


    <!-- Detailed Delinquent Loans Table -->
    <div class="data-table mb-8">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">
                <i class="fas fa-table text-blue-500 mr-2"></i>
                Detailed Delinquent Loans Analysis
            </h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr>
                        <th class="text-left">Loan Details</th>
                        <th class="text-left">Borrower Contact</th>
                        <th class="text-center">Days Overdue</th>
                        <th class="text-right">Outstanding Amount</th>
                        <th class="text-center">Delinquency Level</th>
                        <th class="text-left">Last Payment</th>
                        <th class="text-left">Recovery Actions</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% if report_data.loans %}
                        {% for loan in report_data.loans %}
                        <tr class="clickable" onclick="viewLoanDetails('{{ loan.id }}')">
                            <td>
                                <div class="font-medium text-blue-600">{{ loan.loan_number }}</div>
                                <div class="text-sm text-gray-500">{{ loan.product_name|default:"Standard Loan" }}</div>
                                <div class="text-sm text-gray-500">Original: KSh {{ loan.principal_amount|floatformat:0|intcomma }}</div>
                            </td>
                            <td>
                                <div class="font-medium text-gray-900">{{ loan.borrower_name }}</div>
                                <div class="text-sm text-gray-500">{{ loan.borrower_phone }}</div>
                                <div class="text-sm text-gray-500">{{ loan.borrower_email|default:"No email" }}</div>
                            </td>
                            <td class="text-center">
                                <div class="font-bold text-red-600 text-lg">{{ loan.days_overdue }}</div>
                                <div class="text-sm text-gray-500">days</div>
                            </td>
                            <td class="text-right">
                                <div class="font-medium text-red-600">
                                    KSh {{ loan.outstanding_amount|floatformat:0|intcomma }}
                                </div>
                                <div class="text-sm text-gray-500">
                                    Interest: KSh {{ loan.outstanding_interest|default:0|floatformat:0|intcomma }}
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="delinquency-badge delinquency-{{ loan.delinquency_level|default:'mild' }}">
                                    {{ loan.delinquency_label|default:'Mild' }}
                                </span>
                            </td>
                            <td>
                                {% if loan.last_payment_date %}
                                    <div class="text-sm text-gray-900">{{ loan.last_payment_date|date:"M d, Y" }}</div>
                                    <div class="text-sm text-gray-500">KSh {{ loan.last_payment_amount|floatformat:0|intcomma }}</div>
                                {% else %}
                                    <span class="text-sm text-gray-400">No payments</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="space-y-1">
                                    {% if loan.recovery_actions.contacted %}
                                        <div class="recovery-action recovery-contact">
                                            <span>📞</span> Contacted
                                        </div>
                                    {% endif %}
                                    {% if loan.recovery_actions.payment_plan %}
                                        <div class="recovery-action recovery-contact">
                                            <i class="fas fa-calendar-check mr-1"></i> Payment Plan
                                        </div>
                                    {% endif %}
                                    {% if loan.recovery_actions.legal_action %}
                                        <div class="recovery-action recovery-legal">
                                            <i class="fas fa-gavel mr-1"></i> Legal Action
                                        </div>
                                    {% endif %}
                                    {% if loan.recovery_actions.written_off %}
                                        <div class="recovery-action recovery-writeoff">
                                            <span>✕</span> Written Off
                                        </div>
                                    {% endif %}
                                    {% if not loan.recovery_actions.any %}
                                        <span class="text-sm text-gray-400">No actions taken</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="flex justify-center gap-2">
                                    <button onclick="contactBorrower('{{ loan.id }}')" class="action-btn primary" title="Contact Borrower">
                                        <span>📞</span>
                                    </button>
                                    <button onclick="createPaymentPlan('{{ loan.id }}')" class="action-btn success" title="Payment Plan">
                                        <i class="fas fa-calendar-plus"></i>
                                    </button>
                                    <button onclick="initiateRecovery('{{ loan.id }}')" class="action-btn warning" title="Recovery Action">
                                        <i class="fas fa-gavel"></i>
                                    </button>
                                    <button onclick="viewLoanDetails('{{ loan.id }}')" class="action-btn info" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="8" class="text-center py-8 text-gray-500">
                                <span>✓</span>
                                <h3 class="text-lg font-medium mb-2">No Delinquent Loans Found</h3>
                                <p>No delinquent loans found matching your selected criteria.</p>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Recovery Actions Summary -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="metric-card info clickable" onclick="showContactedLoans()">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold mb-2">
                        {{ report_data.recovery_summary.contacted_count|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Borrowers Contacted</p>
                    <p class="text-xs opacity-75">{{ report_data.recovery_summary.contact_success_rate|default:0|floatformat:1 }}% response rate</p>
                </div>
                <span>📞</span>
            </div>
        </div>

        <div class="metric-card success clickable" onclick="showPaymentPlans()">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold mb-2">
                        {{ report_data.recovery_summary.payment_plans_count|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Active Payment Plans</p>
                    <p class="text-xs opacity-75">{{ report_data.recovery_summary.payment_plan_success_rate|default:0|floatformat:1 }}% success rate</p>
                </div>
                <i class="fas fa-calendar-check text-2xl opacity-75"></i>
            </div>
        </div>

        <div class="metric-card warning clickable" onclick="showLegalActions()">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold mb-2">
                        {{ report_data.recovery_summary.legal_actions_count|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Legal Actions</p>
                    <p class="text-xs opacity-75">KSh {{ report_data.recovery_summary.legal_actions_amount|default:0|floatformat:0|intcomma }}</p>
                </div>
                <i class="fas fa-gavel text-2xl opacity-75"></i>
            </div>
        </div>

        <div class="metric-card danger clickable" onclick="showWriteOffs()">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold mb-2">
                        {{ report_data.recovery_summary.write_offs_count|default:0 }}
                    </h3>
                    <p class="text-sm opacity-90">Write-offs</p>
                    <p class="text-xs opacity-75">KSh {{ report_data.recovery_summary.write_offs_amount|default:0|floatformat:0|intcomma }}</p>
                </div>
                <span>✕</span>
            </div>
        </div>
    </div>

    <!-- Summary Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="filter-card">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <span>📊</span>
                Delinquency Summary
            </h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Delinquency Rate:</span>
                    <span class="font-semibold text-red-600">{{ report_data.summary.delinquency_rate|default:0|floatformat:1 }}%</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Worst Performing Product:</span>
                    <span class="font-semibold text-yellow-600">{{ report_data.summary.worst_product|default:"N/A" }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Longest Overdue:</span>
                    <span class="font-semibold text-red-600">{{ report_data.summary.longest_overdue|default:0 }} days</span>
                </div>
            </div>
        </div>

        <div class="filter-card">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fas fa-trending-up text-green-500 mr-2"></i>
                Recovery Performance
            </h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Recovery Success Rate:</span>
                    <span class="font-semibold text-green-600">{{ report_data.summary.recovery_success_rate|default:0|floatformat:1 }}%</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Average Recovery Time:</span>
                    <span class="font-semibold text-blue-600">{{ report_data.summary.avg_recovery_time|default:0|floatformat:0 }} days</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Best Recovery Method:</span>
                    <span class="font-semibold text-purple-600">{{ report_data.summary.best_recovery_method|default:"N/A" }}</span>
                </div>
            </div>
        </div>

        <div class="filter-card">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <span>🧮</span>
                Financial Impact
            </h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Provision Required:</span>
                    <span class="font-semibold text-red-600">KSh {{ report_data.summary.provision_required|default:0|floatformat:0|intcomma }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Interest Lost:</span>
                    <span class="font-semibold text-yellow-600">KSh {{ report_data.summary.interest_lost|default:0|floatformat:0|intcomma }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Recovery Costs:</span>
                    <span class="font-semibold text-blue-600">KSh {{ report_data.summary.recovery_costs|default:0|floatformat:0|intcomma }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    initializeCharts();
});

function initializeCharts() {
    // All charts removed
}

// Interactive Functions
function filterByDelinquency(level) {
    const params = new URLSearchParams(window.location.search);
    params.set('days_filter', level === 'all' ? '' : level);
    window.location.href = `${window.location.pathname}?${params.toString()}`;
}

function showAverageDelinquency() {
    alert('Average Days Overdue: {{ report_data.summary.average_days_overdue|default:0|floatformat:0 }} days');
}

function showRecoveryRate() {
    alert('Recovery Rate: {{ report_data.summary.recovery_rate|default:0|floatformat:1 }}%');
}

function showRecoveredAmount() {
    alert('Recovered This Month: KSh {{ report_data.summary.recovered_amount|default:0|floatformat:0|intcomma }}');
}

function contactBorrower(loanId) {
    alert(`Contacting borrower for loan ${loanId}`);
}

function createPaymentPlan(loanId) {
    alert(`Creating payment plan for loan ${loanId}`);
}

function initiateRecovery(loanId) {
    alert(`Initiating recovery action for loan ${loanId}`);
}

function initiateRecoveryActions() {
    if (confirm('Initiate recovery actions for all critical delinquent loans?')) {
        alert('Recovery actions initiated successfully!');
    }
}

function viewLoanDetails(loanId) {
    window.open(`/loans/${loanId}/`, '_blank');
}

function showContactedLoans() {
    alert('Contacted Borrowers: {{ report_data.recovery_summary.contacted_count|default:0 }}');
}

function showPaymentPlans() {
    alert('Active Payment Plans: {{ report_data.recovery_summary.payment_plans_count|default:0 }}');
}

function showLegalActions() {
    alert('Legal Actions: {{ report_data.recovery_summary.legal_actions_count|default:0 }}');
}

function showWriteOffs() {
    alert('Write-offs: {{ report_data.recovery_summary.write_offs_count|default:0 }}');
}

function exportToExcel() {
    window.location.href = '{% url "reports:delinquent_loans_report" %}?export=excel&{{ request.GET.urlencode }}';
}

function exportToPDF() {
    window.location.href = '{% url "reports:delinquent_loans_report" %}?export=pdf&{{ request.GET.urlencode }}';
}
</script>
{% endblock %}