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

{% block title %}Reports & Statements Dashboard{% endblock %}

{% block extra_css %}
<style>
    .dashboard-card {
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
        transition: transform 0.2s;
    }
    
    .dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    
    .metric-card {
        text-align: center;
        padding: 15px;
        border-radius: 8px;
        color: white;
        margin-bottom: 15px;
    }
    
    .metric-card.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .metric-card.success { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .metric-card.warning { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .metric-card.danger { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
    .metric-card.info { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
    
    .metric-value {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .metric-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    .report-section {
        margin-bottom: 30px;
    }
    
    .report-header {
        display: flex;
        justify-content: between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f8f9fa;
    }
    
    .report-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #2c3e50;
    }
    
    .btn-export {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        padding: 8px 16px;
        border-radius: 5px;
        font-size: 0.9rem;
        transition: all 0.3s;
    }
    
    .btn-export:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        color: white;
    }
    
    .table-responsive {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .table {
        margin-bottom: 0;
    }
    
    .table thead th {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        font-weight: 600;
        padding: 15px 12px;
    }
    
    .table tbody tr:hover {
        background-color: #f8f9fa;
    }
    
    .badge-status {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .status-active { background-color: #d4edda; color: #155724; }
    .status-overdue { background-color: #f8d7da; color: #721c24; }
    .status-pending { background-color: #fff3cd; color: #856404; }
    .status-resolved { background-color: #d1ecf1; color: #0c5460; }
    
    .quick-filters {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .filter-group {
        display: flex;
        gap: 15px;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .summary-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .empty-state {
        text-align: center;
        padding: 40px;
        color: #6c757d;
    }
    
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 15px;
        opacity: 0.5;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">Reports & Statements Dashboard</h1>
                    <p class="text-muted">Comprehensive analytics and reporting for loan management</p>
                </div>
                <div>
                    <span class="badge badge-info">Last Updated: {{ dashboard_data.generated_at|date:"M d, Y H:i" }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Metrics -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="dashboard-card">
                <h5 class="mb-3">Portfolio Overview</h5>
                <div class="summary-stats">
                    <div class="metric-card primary">
                        <div class="metric-value">{{ dashboard_data.summary_metrics.total_active_loans|floatformat:0 }}</div>
                        <div class="metric-label">Active Loans</div>
                    </div>
                    <div class="metric-card success">
                        <div class="metric-value">KES {{ dashboard_data.summary_metrics.total_portfolio_value|floatformat:0|intcomma }}</div>
                        <div class="metric-label">Portfolio Value</div>
                    </div>
                    <div class="metric-card warning">
                        <div class="metric-value">KES {{ dashboard_data.summary_metrics.total_outstanding|floatformat:0|intcomma }}</div>
                        <div class="metric-label">Outstanding Amount</div>
                    </div>
                    <div class="metric-card info">
                        <div class="metric-value">{{ dashboard_data.summary_metrics.collection_rate|floatformat:1 }}%</div>
                        <div class="metric-label">Collection Rate</div>
                    </div>
                    <div class="metric-card danger">
                        <div class="metric-value">{{ dashboard_data.summary_metrics.loans_due_today|floatformat:0 }}</div>
                        <div class="metric-label">Due Today</div>
                    </div>
                    <div class="metric-card warning">
                        <div class="metric-value">{{ dashboard_data.summary_metrics.overdue_loans|floatformat:0 }}</div>
                        <div class="metric-label">Overdue Loans</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Client Growth & Analytics Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="dashboard-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <div class="report-header" style="border-color: rgba(255,255,255,0.2);">
                    <h5 class="report-title" style="color: white;">
                        <i class="fas fa-users-cog mr-2"></i>
                        Client Growth & Loan Officer Performance
                    </h5>
                    <button onclick="openClientGrowthModal()" class="btn btn-light btn-sm">
                        <span>📈</span> View Detailed Report
                    </button>
                </div>
                <div class="row mt-3">
                    <div class="col-md-3">
                        <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 8px; text-align: center;">
                            <div style="font-size: 2rem; font-weight: bold;" id="total-clients-count">
                                <span>⟳</span>
                            </div>
                            <div style="font-size: 0.9rem; opacity: 0.9;">Total Active Clients</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 8px; text-align: center;">
                            <div style="font-size: 2rem; font-weight: bold;" id="new-clients-this-month">
                                <span>⟳</span>
                            </div>
                            <div style="font-size: 0.9rem; opacity: 0.9;">New Clients This Month</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 8px; text-align: center;">
                            <div style="font-size: 2rem; font-weight: bold;" id="active-loan-officers">
                                <span>⟳</span>
                            </div>
                            <div style="font-size: 0.9rem; opacity: 0.9;">Active Loan Officers</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 8px; text-align: center;">
                            <div style="font-size: 2rem; font-weight: bold;" id="avg-clients-per-officer">
                                <span>⟳</span>
                            </div>
                            <div style="font-size: 0.9rem; opacity: 0.9;">Avg Clients/Officer</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loans Due Today -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="dashboard-card">
                <div class="report-header">
                    <h5 class="report-title">
                        <i class="fas fa-calendar-day text-danger mr-2"></i>
                        Loans Due Today
                    </h5>
                    <div>
                        <a href="{% url 'reports:enhanced_loans_due_report' %}?today_only=true" class="btn btn-sm btn-outline-primary mr-2">
                            <i class="fas fa-eye"></i> View All
                        </a>
                        <a href="{% url 'reports:enhanced_loans_due_report' %}?today_only=true&format=pdf" class="btn btn-export btn-sm">
                            <span>⬇️</span> Export PDF
                        </a>
                    </div>
                </div>
                
                {% if dashboard_data.loans_due_today.loans %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Loan #</th>
                                <th>Borrower</th>
                                <th>Phone</th>
                                <th>Amount Due</th>
                                <th>Product</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loan in dashboard_data.loans_due_today.categorized.today|slice:":10" %}
                            <tr>
                                <td><strong>{{ loan.loan_number }}</strong></td>
                                <td>{{ loan.borrower__first_name }} {{ loan.borrower__last_name }}</td>
                                <td>{{ loan.borrower__phone_number|default:"N/A" }}</td>
                                <td><strong>KES {{ loan.outstanding_balance|floatformat:2|intcomma }}</strong></td>
                                <td><span class="badge badge-info">{{ loan.application__loan_product__name|default:"N/A" }}</span></td>
                                <td>
                                    <a href="#" class="btn btn-sm btn-outline-primary">
                                        <span>📞</span> Contact
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="empty-state">
                    <span>✓</span>
                    <h6>No loans due today</h6>
                    <p>All loans are up to date!</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Delinquent Loans -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="dashboard-card">
                <div class="report-header">
                    <h5 class="report-title">
                        <span>⚠️</span>
                        Delinquent Loans
                    </h5>
                    <div>
                        <a href="{% url 'reports:delinquent_loans_report' %}" class="btn btn-sm btn-outline-primary mr-2">
                            <i class="fas fa-eye"></i> View All
                        </a>
                        <a href="{% url 'reports:delinquent_loans_report' %}?format=pdf" class="btn btn-export btn-sm">
                            <span>⬇️</span> Export PDF
                        </a>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-4">
                        <div class="metric-card warning">
                            <div class="metric-value">{{ dashboard_data.delinquent_loans.summary.mild_delinquent_count }}</div>
                            <div class="metric-label">1-30 Days Overdue</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="metric-card danger">
                            <div class="metric-value">{{ dashboard_data.delinquent_loans.summary.moderate_delinquent_count }}</div>
                            <div class="metric-label">31-60 Days Overdue</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="metric-card danger">
                            <div class="metric-value">{{ dashboard_data.delinquent_loans.summary.severe_delinquent_count }}</div>
                            <div class="metric-label">60+ Days Overdue</div>
                        </div>
                    </div>
                </div>
                
                {% if dashboard_data.delinquent_loans.loans %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Loan #</th>
                                <th>Borrower</th>
                                <th>Phone</th>
                                <th>Days Overdue</th>
                                <th>Amount Overdue</th>
                                <th>Severity</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loan in dashboard_data.delinquent_loans.loans|slice:":10" %}
                            <tr>
                                <td><strong>{{ loan.loan_number }}</strong></td>
                                <td>{{ loan.borrower__first_name }} {{ loan.borrower__last_name }}</td>
                                <td>{{ loan.borrower__phone_number|default:"N/A" }}</td>
                                <td>{{ loan.days_overdue.days }} days</td>
                                <td><strong>KES {{ loan.outstanding_balance|floatformat:2|intcomma }}</strong></td>
                                <td>
                                    {% if loan.days_overdue.days <= 30 %}
                                        <span class="badge badge-warning">Mild</span>
                                    {% elif loan.days_overdue.days <= 60 %}
                                        <span class="badge badge-danger">Moderate</span>
                                    {% else %}
                                        <span class="badge badge-dark">Severe</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="empty-state">
                    <span>✓</span>
                    <h6>No delinquent loans</h6>
                    <p>All loans are current!</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Quick Reports Grid -->
    <div class="row">
        <!-- Processing Fees -->
        <div class="col-lg-6 mb-4">
            <div class="dashboard-card">
                <div class="report-header">
                    <h5 class="report-title">
                        <span>🪙</span>
                        Processing Fees (Current Month)
                    </h5>
                    <a href="{% url 'reports:processing_fees_report' %}" class="btn btn-export btn-sm">
                        <span>📊</span> View Report
                    </a>
                </div>
                
                <div class="row">
                    <div class="col-6">
                        <div class="metric-card success">
                            <div class="metric-value">KES {{ dashboard_data.processing_fees_current_month.summary.total_processing_fees|floatformat:0|intcomma }}</div>
                            <div class="metric-label">Total Fees</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="metric-card info">
                            <div class="metric-value">{{ dashboard_data.processing_fees_current_month.summary.total_loans_processed }}</div>
                            <div class="metric-label">Loans Processed</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Interest Income -->
        <div class="col-lg-6 mb-4">
            <div class="dashboard-card">
                <div class="report-header">
                    <h5 class="report-title">
                        <i class="fas fa-percentage text-primary mr-2"></i>
                        Interest Income (Current Month)
                    </h5>
                    <a href="{% url 'reports:interest_income_report' %}" class="btn btn-export btn-sm">
                        <span>📈</span> View Report
                    </a>
                </div>
                
                <div class="row">
                    <div class="col-6">
                        <div class="metric-card primary">
                            <div class="metric-value">KES {{ dashboard_data.interest_income_current_month.summary.total_interest_income|floatformat:0|intcomma }}</div>
                            <div class="metric-label">Total Interest</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="metric-card info">
                            <div class="metric-value">{{ dashboard_data.interest_income_current_month.summary.total_loans }}</div>
                            <div class="metric-label">Interest Bearing Loans</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Registration Fees -->
        <div class="col-lg-6 mb-4">
            <div class="dashboard-card">
                <div class="report-header">
                    <h5 class="report-title">
                        <i class="fas fa-file-invoice-dollar text-info mr-2"></i>
                        Registration Fees
                    </h5>
                    <div>
                        <a href="{% url 'reports:registration_fees_settings' %}" class="btn btn-sm btn-outline-secondary mr-2">
                            <span>⚙️</span> Settings
                        </a>
                        <a href="{% url 'reports:registration_fees_report' %}" class="btn btn-export btn-sm">
                            <span>📊</span> View Report
                        </a>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-6">
                        <div class="metric-card info">
                            <div class="metric-value">KES {{ dashboard_data.registration_fees_current_month.summary.total_registration_income|floatformat:0|intcomma }}</div>
                            <div class="metric-label">Total Income</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="metric-card success">
                            <div class="metric-value">{{ dashboard_data.registration_fees_current_month.summary.total_registrations }}</div>
                            <div class="metric-label">Registrations</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Customer Requests -->
        <div class="col-lg-6 mb-4">
            <div class="dashboard-card">
                <div class="report-header">
                    <h5 class="report-title">
                        <i class="fas fa-headset text-warning mr-2"></i>
                        Customer Requests
                    </h5>
                    <div>
                        <a href="{% url 'reports:customer_requests_list' %}" class="btn btn-sm btn-outline-primary mr-2">
                            <span>📋</span> Manage
                        </a>
                        <a href="{% url 'reports:customer_requests_report' %}" class="btn btn-export btn-sm">
                            <span>📊</span> View Report
                        </a>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-4">
                        <div class="metric-card warning">
                            <div class="metric-value">{{ dashboard_data.customer_requests_current_month.summary.pending_requests }}</div>
                            <div class="metric-label">Pending</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="metric-card info">
                            <div class="metric-value">{{ dashboard_data.customer_requests_current_month.summary.in_progress_requests }}</div>
                            <div class="metric-label">In Progress</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="metric-card success">
                            <div class="metric-value">{{ dashboard_data.customer_requests_current_month.summary.resolved_requests }}</div>
                            <div class="metric-label">Resolved</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row">
        <div class="col-12">
            <div class="dashboard-card">
                <h5 class="mb-3">Quick Actions</h5>
                <div class="row">
                    <div class="col-md-3 mb-2">
                        <a href="{% url 'reports:loans_due_report' %}" class="btn btn-outline-primary btn-block">
                            <i class="fas fa-calendar-check"></i> View All Due Loans
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{% url 'reports:loans_in_arrears_report' %}" class="btn btn-outline-warning btn-block">
                            <span>⚠️</span> Loans in Arrears
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{% url 'reports:create_customer_request' %}" class="btn btn-outline-info btn-block">
                            <span>+</span> Create Request
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{% url 'reports:record_registration_fee_payment' %}" class="btn btn-outline-success btn-block">
                            <span>🧾</span> Record Fee Payment
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Auto-refresh dashboard every 5 minutes
    setInterval(function() {
        location.reload();
    }, 300000);
    
    // Initialize tooltips
    $('[data-toggle="tooltip"]').tooltip();
    
    // Add loading states to export buttons
    $('.btn-export').click(function() {
        var btn = $(this);
        var originalText = btn.html();
        btn.html('<span>⟳</span> Generating...');
        btn.prop('disabled', true);
        
        setTimeout(function() {
            btn.html(originalText);
            btn.prop('disabled', false);
        }, 3000);
    });
    
    // Load client analytics on page load
    loadClientAnalytics();
});

function loadClientAnalytics() {
    fetch('{% url "users:acquisition_trends_api" %}')
        .then(response => response.json())
        .then(data => {
            if (data.total_clients !== undefined) {
                document.getElementById('total-clients-count').textContent = data.total_clients;
            }
            if (data.new_clients_this_month !== undefined) {
                document.getElementById('new-clients-this-month').textContent = data.new_clients_this_month;
            }
        })
        .catch(error => {
            console.error('Error loading client analytics:', error);
            document.getElementById('total-clients-count').textContent = 'N/A';
            document.getElementById('new-clients-this-month').textContent = 'N/A';
        });
    
    // Load officer count
    fetch('{% url "users:officer_performance_api" %}')
        .then(response => response.json())
        .then(data => {
            if (data.officers) {
                document.getElementById('active-loan-officers').textContent = data.officers.length;
                const totalClients = data.officers.reduce((sum, officer) => sum + (officer.total_clients || 0), 0);
                const avgClients = data.officers.length > 0 ? (totalClients / data.officers.length).toFixed(1) : 0;
                document.getElementById('avg-clients-per-officer').textContent = avgClients;
            }
        })
        .catch(error => {
            console.error('Error loading officer data:', error);
            document.getElementById('active-loan-officers').textContent = 'N/A';
            document.getElementById('avg-clients-per-officer').textContent = 'N/A';
        });
}

function openClientGrowthModal() {
    $('#clientGrowthModal').modal('show');
    loadOfficerPerformanceData();
}

function loadOfficerPerformanceData() {
    const tbody = document.getElementById('officer-data-body');
    
    fetch('{% url "users:officer_performance_api" %}')
        .then(response => response.json())
        .then(data => {
            if (data.officers && data.officers.length > 0) {
                tbody.innerHTML = data.officers.map(officer => `
                    <tr>
                        <td><strong>${officer.officer_name}</strong></td>
                        <td>${officer.branch || 'N/A'}</td>
                        <td><span class="badge badge-info">${officer.total_clients || 0}</span></td>
                        <td><span class="badge badge-primary">${officer.active_loans || 0}</span></td>
                        <td><strong>KES ${(officer.portfolio_value || 0).toLocaleString()}</strong></td>
                        <td><strong class="text-danger">KES ${(officer.total_outstanding || 0).toLocaleString()}</strong></td>
                        <td>
                            <span class="badge ${officer.collection_rate >= 80 ? 'badge-success' : officer.collection_rate >= 60 ? 'badge-warning' : 'badge-danger'}">
                                ${(officer.collection_rate || 0).toFixed(1)}%
                            </span>
                        </td>
                        <td>
                            <span class="badge ${officer.default_rate <= 5 ? 'badge-success' : officer.default_rate <= 10 ? 'badge-warning' : 'badge-danger'}">
                                ${(officer.default_rate || 0).toFixed(1)}%
                            </span>
                        </td>
                        <td>
                            <a href="/portfolio/officer/${officer.officer_id}/clients/" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i> View Clients
                            </a>
                        </td>
                    </tr>
                `).join('');
            } else {
                tbody.innerHTML = '<tr><td colspan="9" class="text-center">No loan officers found</td></tr>';
            }
        })
        .catch(error => {
            console.error('Error loading officer performance:', error);
            tbody.innerHTML = '<tr><td colspan="9" class="text-center text-danger">Error loading data</td></tr>';
        });
}

function exportClientGrowthReport() {
    window.location.href = '{% url "users:export_analytics_data" %}?report_type=officer_performance';
}
</script>

<!-- Client Growth Report Modal -->
<div class="modal fade" id="clientGrowthModal" tabindex="-1" role="dialog" aria-labelledby="clientGrowthModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="clientGrowthModalLabel">
                    <span>📈</span>Client Growth & Loan Officer Performance
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="table-responsive">
                            <table class="table table-hover" id="officer-performance-table">
                                <thead>
                                    <tr>
                                        <th>Loan Officer</th>
                                        <th>Branch</th>
                                        <th>Total Clients</th>
                                        <th>Active Loans</th>
                                        <th>Portfolio Value</th>
                                        <th>Outstanding</th>
                                        <th>Collection Rate</th>
                                        <th>Default Rate</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="officer-data-body">
                                    <tr>
                                        <td colspan="9" class="text-center">
                                            <span>⟳</span> Loading data...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="exportClientGrowthReport()">
                    <span>⬇️</span> Export Report
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}