{% extends "superadmin/base_superadmin.html" %}

{% block title %}Reports - Superadmin{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div class="border-b border-gray-200 pb-4">
        <h1 class="text-2xl font-bold text-gray-900">Advanced Reports</h1>
        <p class="text-gray-600 mt-1">Comprehensive system reports and analytics</p>
    </div>

    <!-- Report Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Financial Overview -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-green-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-dollar-sign text-3xl text-green-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Contributions</dt>
                            <dd class="text-2xl font-bold text-green-600">৳{{ "%.2f"|format(report_data.total_contributions) }}</dd>
                            <dd class="text-xs text-gray-400 mt-1">All time total</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Loan Overview -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-blue-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-hand-holding-usd text-3xl text-blue-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Loans</dt>
                            <dd class="text-2xl font-bold text-blue-600">৳{{ "%.2f"|format(report_data.total_loans) }}</dd>
                            <dd class="text-xs text-gray-400 mt-1">Approved loans</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Generation -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Financial Report -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-chart-line text-green-600 mr-2"></i>Financial Report
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <div class="flex items-center">
                            <i class="fas fa-money-bill-wave text-green-600 mr-3"></i>
                            <div>
                                <h4 class="text-sm font-medium text-green-900">Comprehensive Financial Analysis</h4>
                                <p class="text-sm text-green-700 mt-1">Income, expenses, and financial trends</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        <button class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                            <i class="fas fa-file-pdf mr-2"></i>Generate PDF Report
                        </button>
                        <button class="w-full bg-green-100 hover:bg-green-200 text-green-800 font-medium py-2 px-4 rounded-lg transition-colors">
                            <i class="fas fa-file-excel mr-2"></i>Export to Excel
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- User Activity Report -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-users text-blue-600 mr-2"></i>User Activity Report
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div class="flex items-center">
                            <i class="fas fa-user-clock text-blue-600 mr-3"></i>
                            <div>
                                <h4 class="text-sm font-medium text-blue-900">Member Activity Analysis</h4>
                                <p class="text-sm text-blue-700 mt-1">Login patterns, contribution activity</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                            <i class="fas fa-file-pdf mr-2"></i>Generate PDF Report
                        </button>
                        <button class="w-full bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium py-2 px-4 rounded-lg transition-colors">
                            <i class="fas fa-file-excel mr-2"></i>Export to Excel
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Group Performance Report -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-building text-purple-600 mr-2"></i>Group Performance
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                        <div class="flex items-center">
                            <i class="fas fa-chart-bar text-purple-600 mr-3"></i>
                            <div>
                                <h4 class="text-sm font-medium text-purple-900">Group Analytics</h4>
                                <p class="text-sm text-purple-700 mt-1">Performance metrics by group</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                            <i class="fas fa-file-pdf mr-2"></i>Generate PDF Report
                        </button>
                        <button class="w-full bg-purple-100 hover:bg-purple-200 text-purple-800 font-medium py-2 px-4 rounded-lg transition-colors">
                            <i class="fas fa-file-excel mr-2"></i>Export to Excel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Group Performance Table -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-table text-orange-600 mr-2"></i>Group Performance Summary
            </h3>
        </div>
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Group</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Members</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Contributions</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Contribution</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Performance</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for group in report_data.group_performance %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                                        <i class="fas fa-building text-blue-600"></i>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ group.name }}</div>
                                        <div class="text-sm text-gray-500">{{ group.group_code }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ group.member_count or 0 }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                ৳{{ "%.2f"|format(group.total_contributions or 0) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                ৳{{ "%.2f"|format(group.avg_contribution or 0) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% set performance = (group.total_contributions or 0) / 10000 * 100 %}
                                {% if performance >= 80 %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    <i class="fas fa-arrow-up mr-1"></i>Excellent
                                </span>
                                {% elif performance >= 60 %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                    <i class="fas fa-arrow-right mr-1"></i>Good
                                </span>
                                {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    <i class="fas fa-arrow-down mr-1"></i>Needs Improvement
                                </span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Monthly Trends Chart -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-chart-area text-indigo-600 mr-2"></i>Monthly Contribution Trends
            </h3>
        </div>
        <div class="p-6">
            <canvas id="monthlyTrendsChart" width="400" height="200"></canvas>
        </div>
    </div>

    <!-- Custom Report Builder -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-tools text-gray-600 mr-2"></i>Custom Report Builder
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Report Type</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option>Financial Summary</option>
                        <option>Member Activity</option>
                        <option>Group Performance</option>
                        <option>Loan Analysis</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date Range</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option>Last 30 Days</option>
                        <option>Last 3 Months</option>
                        <option>Last 6 Months</option>
                        <option>Last Year</option>
                        <option>All Time</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Format</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option>PDF</option>
                        <option>Excel</option>
                        <option>CSV</option>
                    </select>
                </div>
            </div>
            <div class="mt-6">
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition-colors">
                    <i class="fas fa-magic mr-2"></i>Generate Custom Report
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Monthly Trends Chart
const ctx = document.getElementById('monthlyTrendsChart').getContext('2d');
const monthlyTrendsChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [
            {% for trend in report_data.monthly_trends %}
            '{{ trend.month.strftime("%b %Y") if trend.month else "N/A" }}',
            {% endfor %}
        ],
        datasets: [{
            label: 'Total Contributions',
            data: [
                {% for trend in report_data.monthly_trends %}
                {{ trend.total or 0 }},
                {% endfor %}
            ],
            borderColor: 'rgb(99, 102, 241)',
            backgroundColor: 'rgba(99, 102, 241, 0.1)',
            tension: 0.1
        }, {
            label: 'Number of Contributions',
            data: [
                {% for trend in report_data.monthly_trends %}
                {{ trend.count or 0 }},
                {% endfor %}
            ],
            borderColor: 'rgb(34, 197, 94)',
            backgroundColor: 'rgba(34, 197, 94, 0.1)',
            tension: 0.1,
            yAxisID: 'y1'
        }]
    },
    options: {
        responsive: true,
        interaction: {
            mode: 'index',
            intersect: false,
        },
        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                grid: {
                    drawOnChartArea: false,
                },
            }
        }
    }
});
</script>
{% endblock %}