{% extends "admin/base_admin.html" %}

{% block title %}Reports - Admin Panel{% endblock %}

{% block page_title %}Reports{% endblock %}

{% block content %}
<!-- Financial Reports & Analytics -->
<div class="p-8">
    <div class="mb-8">
        <h3 class="text-2xl font-bold text-gray-900 mb-2">
            Financial Reports & Analytics
        </h3>
        <p class="text-gray-600">
            Comprehensive insights into group savings performance and member contributions
        </p>
    </div>

        <!-- Summary Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-users text-2xl text-primary-600"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                                    Active Members
                                </dt>
                                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                                    {{ total_members }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-dollar-sign text-2xl text-green-600"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                                    Total Contributions
                                </dt>
                                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                                    ৳{{ "%.2f"|format(total_contributions) }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Monthly Contributions Chart -->
        {% if monthly_contributions %}
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg mb-8">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mb-4">
                    Monthly Contributions Trend
                </h3>
                <div class="space-y-4">
                    {% for contribution in monthly_contributions %}
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ contribution.month.strftime('%B %Y') }}
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="w-64 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                <div class="bg-primary-600 h-2 rounded-full" style="width: {{ (contribution.total / total_contributions * 100) if total_contributions > 0 else 0 }}%"></div>
                            </div>
                            <div class="text-sm font-medium text-gray-900 dark:text-white w-20 text-right">
                                ৳{{ "%.2f"|format(contribution.total) }}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Export Options -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mb-4">
                    Export Data
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                        <i class="fas fa-file-csv mr-2"></i>Export Members CSV
                    </button>
                    <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                        <i class="fas fa-file-excel mr-2"></i>Export Contributions
                    </button>
                    <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                        <i class="fas fa-file-pdf mr-2"></i>Generate Report PDF
                    </button>
                </div>
                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                    Download member data and contribution records for external analysis
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}