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

{% block title %}Admin Dashboard - Group Savings Management{% endblock %}

{% block page_title %}Dashboard{% endblock %}

{% block content %}
<!-- Dashboard Content -->
<div class="max-w-7xl mx-auto">
    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 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">
                                    Total 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 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-calendar-alt text-2xl text-orange-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 Events
                                </dt>
                                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                                    {{ active_events }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <a href="{{ url_for('admin_add_member') }}" class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow hover:shadow-md transition-shadow">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-user-plus text-2xl text-blue-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Add Member</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Register new member</p>
                    </div>
                </div>
            </a>
            
            <a href="{{ url_for('admin_add_contribution') }}" class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow hover:shadow-md transition-shadow">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-plus-circle text-2xl text-green-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Add Contribution</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Record payment</p>
                    </div>
                </div>
            </a>
            
            <a href="{{ url_for('admin_create_event') }}" class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow hover:shadow-md transition-shadow">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-calendar-plus text-2xl text-orange-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Create Event</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">New savings goal</p>
                    </div>
                </div>
            </a>
            
            <a href="{{ url_for('admin_bulk_import') }}" class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow hover:shadow-md transition-shadow">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-upload text-2xl text-purple-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Bulk Import</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Historical data</p>
                    </div>
                </div>
            </a>
        </div>

        <!-- Monthly Payment Status -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- Members with Outstanding Payments -->
            <div class="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-red-500 to-orange-500 px-6 py-4">
                    <h3 class="text-lg font-semibold text-white flex items-center">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        Payment Due - {{ current_month.strftime('%B %Y') }}
                    </h3>
                    <p class="text-red-100 text-sm">Members who haven't paid this month</p>
                </div>
                <div class="p-6">
                    {% if members_due %}
                        <div class="space-y-3">
                            {% for member in members_due %}
                            <div class="flex items-center justify-between p-3 bg-red-50 border border-red-200 rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
                                        <i class="fas fa-user text-white text-xs"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900">{{ member.full_name }}</p>
                                        <p class="text-sm text-gray-500">
                                            {% if member.custom_id %}{{ member.custom_id }} - {% endif %}@{{ member.username }}
                                        </p>
                                    </div>
                                </div>
                                <span class="px-3 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">
                                    Due
                                </span>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="mt-4 pt-4 border-t border-gray-200">
                            <p class="text-sm text-gray-600">
                                <strong>{{ members_due|length }}</strong> member(s) need to make payment
                            </p>
                        </div>
                    {% else %}
                        <div class="text-center py-8">
                            <i class="fas fa-check-circle text-4xl text-green-500 mb-3"></i>
                            <p class="text-lg font-medium text-gray-900">All Caught Up!</p>
                            <p class="text-sm text-gray-500">Everyone has paid for this month</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Members Who Paid -->
            <div class="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-green-500 to-teal-500 px-6 py-4">
                    <h3 class="text-lg font-semibold text-white flex items-center">
                        <i class="fas fa-check-circle mr-2"></i>
                        Paid This Month
                    </h3>
                    <p class="text-green-100 text-sm">Members who have completed payment</p>
                </div>
                <div class="p-6">
                    {% if members_paid %}
                        <div class="space-y-3 max-h-64 overflow-y-auto">
                            {% for member in members_paid %}
                            <div class="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                        <i class="fas fa-check text-white text-xs"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900">{{ member.full_name }}</p>
                                        <p class="text-sm text-gray-500">
                                            {% if member.custom_id %}{{ member.custom_id }} - {% endif %}@{{ member.username }}
                                        </p>
                                    </div>
                                </div>
                                <span class="px-3 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
                                    Paid
                                </span>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="mt-4 pt-4 border-gray-200">
                            <p class="text-sm text-gray-600">
                                <strong>{{ members_paid|length }}</strong> member(s) have paid
                            </p>
                        </div>
                    {% else %}
                        <div class="text-center py-8">
                            <i class="fas fa-info-circle text-4xl text-gray-400 mb-3"></i>
                            <p class="text-lg font-medium text-gray-900">No Payments Yet</p>
                            <p class="text-sm text-gray-500">No payments received for this month</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Recent Contributions -->
        <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md">
            <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                        Recent Contributions
                    </h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-400">
                        Latest member contributions and transactions
                    </p>
                </div>
                <a href="{{ url_for('admin_contributions') }}" class="text-primary-600 hover:text-primary-500 text-sm font-medium">
                    View All →
                </a>
            </div>
            <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
                {% for contribution in recent_contributions %}
                <li class="px-4 py-4 sm:px-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10">
                                <div class="h-10 w-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
                                    <i class="fas fa-user text-primary-600 dark:text-primary-400"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ contribution.member.full_name }}
                                </div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ contribution.contribution_type.title() }} contribution
                                    {% if contribution.contribution_month %}
                                        • For {{ contribution.contribution_month.strftime('%B %Y') }}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-medium text-gray-900 dark:text-white">
                                ৳{{ "%.2f"|format(contribution.amount) }}
                            </div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">
                                {% if contribution.contribution_month %}
                                    {{ contribution.contribution_month.strftime('%B %Y') }}
                                {% else %}
                                    {{ contribution.created_at.strftime('%b %d, %Y') }}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </li>
                {% else %}
                <li class="px-4 py-4 sm:px-6">
                    <div class="text-center py-8">
                        <i class="fas fa-inbox text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">No contributions yet.</p>
                        <a href="{{ url_for('admin_add_contribution') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700">
                            <i class="fas fa-plus mr-2"></i>Add First Contribution
                        </a>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}