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

{% block title %}Audit Logs - 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">Audit Logs</h1>
        <p class="text-gray-600 mt-1">System activity tracking and monitoring</p>
    </div>

    <!-- Activity Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Member Registrations -->
        <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-user-plus text-green-600 mr-2"></i>Recent Member Registrations
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4 max-h-96 overflow-y-auto">
                    {% for member in recent_members %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <span class="text-green-600 font-bold text-sm">{{ member.full_name[0] if member.full_name else 'U' }}</span>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-gray-900">{{ member.full_name }}</p>
                                <p class="text-xs text-gray-500">{{ member.username }} • {{ member.custom_id or 'No ID' }}</p>
                                <p class="text-xs text-gray-400">{{ member.group.name if member.group else 'No Group' }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            {% if member.is_admin %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                Admin
                            </span>
                            {% else %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                Member
                            </span>
                            {% endif %}
                            <p class="text-xs text-gray-500 mt-1">{{ member.created_at.strftime('%b %d, %Y') }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Recent Contributions -->
        <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-coins text-blue-600 mr-2"></i>Recent Contributions
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4 max-h-96 overflow-y-auto">
                    {% for contribution, member_name, member_id, group_name in recent_contributions %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                {% if contribution.contribution_type == 'monthly' %}
                                <i class="fas fa-calendar-alt text-blue-600"></i>
                                {% elif contribution.contribution_type == 'special' %}
                                <i class="fas fa-star text-blue-600"></i>
                                {% elif contribution.contribution_type == 'penalty' %}
                                <i class="fas fa-exclamation-triangle text-blue-600"></i>
                                {% else %}
                                <i class="fas fa-gift text-blue-600"></i>
                                {% endif %}
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-gray-900">{{ member_name }}</p>
                                <p class="text-xs text-gray-500">{{ member_id }} • {{ group_name }}</p>
                                <p class="text-xs text-gray-400">{{ contribution.contribution_type|title }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-bold text-blue-600">৳{{ "%.2f"|format(contribution.amount) }}</p>
                            <p class="text-xs text-gray-500">{{ contribution.created_at.strftime('%b %d, %Y') }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Loan Requests & Groups -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Loan Requests -->
        <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-hand-holding-usd text-purple-600 mr-2"></i>Recent Loan Requests
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4 max-h-96 overflow-y-auto">
                    {% for loan, member_name, member_id, group_name in recent_loan_requests %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                                {% if loan.status == 'pending' %}
                                <i class="fas fa-clock text-purple-600"></i>
                                {% elif loan.status == 'approved' %}
                                <i class="fas fa-check text-purple-600"></i>
                                {% else %}
                                <i class="fas fa-times text-purple-600"></i>
                                {% endif %}
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-gray-900">{{ member_name }}</p>
                                <p class="text-xs text-gray-500">{{ member_id }} • {{ group_name }}</p>
                                <p class="text-xs text-gray-400">{{ loan.repayment_months }} months</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-bold text-purple-600">৳{{ "%.2f"|format(loan.amount_requested) }}</p>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {% if loan.status == 'pending' %}bg-yellow-100 text-yellow-800{% elif loan.status == 'approved' %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                                {{ loan.status|title }}
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Recent Groups -->
        <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-orange-600 mr-2"></i>Recent Groups
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4 max-h-96 overflow-y-auto">
                    {% for group in recent_groups %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-users text-orange-600"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-gray-900">{{ group.name }}</p>
                                <p class="text-xs text-gray-500">{{ group.group_code }}</p>
                                <p class="text-xs text-gray-400">{{ group.description or 'No description' }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            {% if group.is_active %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                Active
                            </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">
                                Inactive
                            </span>
                            {% endif %}
                            <p class="text-xs text-gray-500 mt-1">{{ group.created_at.strftime('%b %d, %Y') }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Admin Activity -->
    <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-user-shield text-red-600 mr-2"></i>Admin Activity Overview
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {% for admin in admin_members %}
                <div class="p-4 bg-gray-50 rounded-lg">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-user-shield text-red-600"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">{{ admin.full_name }}</p>
                            <p class="text-xs text-gray-500">{{ admin.username }} • {{ admin.custom_id or 'No ID' }}</p>
                            <p class="text-xs text-gray-400">{{ admin.group.name if admin.group else 'No Group' }}</p>
                        </div>
                    </div>
                    <div class="mt-2">
                        {% if admin.is_superadmin %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                            Superadmin
                        </span>
                        {% elif admin.is_group_admin %}
                        <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 Admin
                        </span>
                        {% else %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                            Admin
                        </span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}