{% extends "base.html" %}

{% block title %}{{ current_user.full_name }} - Member Dashboard{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Enhanced Navigation -->
    <nav class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <h1 class="text-xl font-semibold text-gray-900">
                        <i class="fas fa-user-circle text-green-600 mr-2"></i>
                        {{ member_group.name }} - Member Portal
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- Profile Picture -->
                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-green-600"></i>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-medium text-gray-900">
                            {% if current_user.custom_id %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-1">{{ current_user.custom_id }}</span>
                            {% endif %}
                            {{ current_user.full_name }}
                        </span>
                        <span class="text-xs text-gray-500">Member</span>
                    </div>
                    <!-- Profile Menu -->
                    <div class="relative">
                        <button id="profile-menu-button" class="flex items-center text-gray-500 hover:text-gray-700 focus:outline-none">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div id="profile-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
                            <a href="{{ url_for('member_profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-user-edit mr-2"></i>Update Profile
                            </a>
                            <a href="{{ url_for('member_contributions') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-list mr-2"></i>My Contributions
                            </a>
                            <a href="{{ url_for('member_events') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-calendar-alt mr-2"></i>Events
                            </a>
                            <div class="border-t border-gray-100"></div>
                            <a href="{{ url_for('member_submit_contribution') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-plus-circle mr-2"></i>Submit Contribution
                            </a>
                            <a href="{{ url_for('member_request_loan') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-hand-holding-usd mr-2"></i>Request Loan
                            </a>
                            <a href="{{ url_for('member_requests') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-list-alt mr-2"></i>My Requests
                            </a>
                            <div class="border-t border-gray-100"></div>
                            <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-sign-out-alt mr-2"></i>Logout
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Quick Actions Bar -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex space-x-8 overflow-x-auto py-4">
                <a href="{{ url_for('member_dashboard') }}" class="flex items-center px-4 py-2 text-sm font-medium text-green-600 bg-green-50 rounded-lg border border-green-200">
                    <i class="fas fa-home mr-2"></i>Dashboard
                </a>
                <a href="{{ url_for('member_profile') }}" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg border border-gray-200">
                    <i class="fas fa-user-edit mr-2"></i>Update Profile
                </a>
                <a href="{{ url_for('member_contributions') }}" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg border border-gray-200">
                    <i class="fas fa-list mr-2"></i>My Contributions
                </a>
                <a href="{{ url_for('member_events') }}" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg border border-gray-200">
                    <i class="fas fa-calendar-alt mr-2"></i>Events
                </a>
                <a href="{{ url_for('member_submit_contribution') }}" class="flex items-center px-4 py-2 text-sm font-medium text-green-700 hover:bg-green-50 rounded-lg border border-green-200">
                    <i class="fas fa-plus-circle mr-2"></i>Submit Contribution
                </a>
                <a href="{{ url_for('member_request_loan') }}" class="flex items-center px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50 rounded-lg border border-blue-200">
                    <i class="fas fa-hand-holding-usd mr-2"></i>Request Loan
                </a>
            </div>
        </div>
    </div>

    <!-- Dashboard Content -->
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- Monthly Payment Alert -->
        {% if monthly_payment_due %}
        <div class="mb-6">
            <div class="bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl p-6 text-white shadow-lg">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                            <i class="fas fa-exclamation-triangle text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold">Monthly Payment Due</h3>
                            <p class="text-red-100">Your payment for {{ current_month.strftime('%B %Y') }} is overdue</p>
                        </div>
                    </div>
                    <div class="flex flex-col items-end">
                        <span class="text-sm text-red-100 mb-2">Contact admin to record payment</span>
                        <div class="flex space-x-2">
                            <a href="{{ url_for('member_submit_contribution') }}" 
                               class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium transition-colors">
                                <i class="fas fa-plus-circle mr-1"></i>Submit Now
                            </a>
                            <span class="px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
                                <i class="fas fa-clock mr-1"></i>Overdue
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="mb-6">
            <div class="bg-gradient-to-r from-green-500 to-teal-500 rounded-2xl p-6 text-white shadow-lg">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-check-circle text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold">Payment Complete</h3>
                        <p class="text-green-100">Your payment for {{ current_month.strftime('%B %Y') }} has been recorded</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Enhanced Statistics Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- My Total Contributed -->
            <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-piggy-bank 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 truncate">My Total Contributed</dt>
                                <dd class="text-xl font-bold text-green-600">৳{{ "%.2f"|format(total_contributed) }}</dd>
                                <dd class="text-xs text-gray-400 mt-1">All contributions combined</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Monthly Contributions -->
            <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-calendar-check text-2xl text-blue-600"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Monthly Total</dt>
                                <dd class="text-lg font-bold text-blue-600">৳{{ "%.2f"|format(monthly_total) }}</dd>
                                <dd class="text-xs text-gray-400 mt-1">{{ monthly_contributions|length }} payments</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Special Collections -->
            <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-purple-500">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-star text-2xl text-purple-600"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Special Collections</dt>
                                <dd class="text-lg font-bold text-purple-600">৳{{ "%.2f"|format(special_total) }}</dd>
                                <dd class="text-xs text-gray-400 mt-1">{{ special_contributions|length }} contributions</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Group Members -->
            <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-indigo-500">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-users text-2xl text-indigo-600"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Group Members</dt>
                                <dd class="text-lg font-bold text-indigo-600">{{ total_members }}</dd>
                                <dd class="text-xs text-gray-400 mt-1">Active participants</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Self-Service Quick Actions -->
        <div class="mb-8 bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-magic text-purple-600 mr-2"></i>Self-Service Actions
                </h3>
                <p class="text-sm text-gray-600 mt-1">Submit requests and manage your account independently</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <a href="{{ url_for('member_submit_contribution') }}" 
                       class="flex items-center p-4 bg-green-50 hover:bg-green-100 rounded-lg border border-green-200 transition-all duration-200 group">
                        <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200">
                            <i class="fas fa-plus-circle text-green-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-sm font-semibold text-green-900">Submit Contribution</h4>
                            <p class="text-xs text-green-700 mt-1">Submit monthly or special contributions for approval</p>
                        </div>
                    </a>
                    <a href="{{ url_for('member_request_loan') }}" 
                       class="flex items-center p-4 bg-blue-50 hover:bg-blue-100 rounded-lg border border-blue-200 transition-all duration-200 group">
                        <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-200">
                            <i class="fas fa-hand-holding-usd text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-sm font-semibold text-blue-900">Request Loan</h4>
                            <p class="text-xs text-blue-700 mt-1">Apply for loans from your group fund</p>
                        </div>
                    </a>
                    <a href="{{ url_for('member_requests') }}" 
                       class="flex items-center p-4 bg-indigo-50 hover:bg-indigo-100 rounded-lg border border-indigo-200 transition-all duration-200 group">
                        <div class="flex-shrink-0 w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center group-hover:bg-indigo-200">
                            <i class="fas fa-list-alt text-indigo-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-sm font-semibold text-indigo-900">Track Requests</h4>
                            <p class="text-xs text-indigo-700 mt-1">View status of all your submissions</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- Group Total Contributions -->
        <div class="mb-8">
            <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>{{ member_group.name }} - Group Total Contributions
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                        <!-- Group Monthly Total -->
                        <div class="text-center p-4 bg-blue-50 rounded-lg border border-blue-200">
                            <i class="fas fa-calendar-check text-3xl text-blue-600 mb-2"></i>
                            <h4 class="text-sm font-medium text-blue-800 mb-1">All Monthly Contributions</h4>
                            <p class="text-2xl font-bold text-blue-600">৳{{ "%.2f"|format(group_monthly_total) }}</p>
                            <p class="text-xs text-blue-500">From all {{ total_members }} members</p>
                        </div>
                        
                        <!-- Group Special Total -->
                        <div class="text-center p-4 bg-purple-50 rounded-lg border border-purple-200">
                            <i class="fas fa-star text-3xl text-purple-600 mb-2"></i>
                            <h4 class="text-sm font-medium text-purple-800 mb-1">All Special Collections</h4>
                            <p class="text-2xl font-bold text-purple-600">৳{{ "%.2f"|format(group_special_total) }}</p>
                            <p class="text-xs text-purple-500">Group special funds</p>
                        </div>
                        
                        <!-- Group Penalty Total -->
                        <div class="text-center p-4 bg-red-50 rounded-lg border border-red-200">
                            <i class="fas fa-exclamation-triangle text-3xl text-red-600 mb-2"></i>
                            <h4 class="text-sm font-medium text-red-800 mb-1">Total Penalties</h4>
                            <p class="text-2xl font-bold text-red-600">৳{{ "%.2f"|format(group_penalty_total) }}</p>
                            <p class="text-xs text-red-500">Group penalty charges</p>
                        </div>
                        
                        <!-- Group Bonus Total -->
                        <div class="text-center p-4 bg-green-50 rounded-lg border border-green-200">
                            <i class="fas fa-gift text-3xl text-green-600 mb-2"></i>
                            <h4 class="text-sm font-medium text-green-800 mb-1">Total Bonuses</h4>
                            <p class="text-2xl font-bold text-green-600">৳{{ "%.2f"|format(group_bonus_total) }}</p>
                            <p class="text-xs text-green-500">Group bonus credits</p>
                        </div>
                    </div>
                    
                    <!-- Group Grand Total Summary -->
                    <div class="text-center p-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl text-white">
                        <h4 class="text-xl font-medium mb-2">
                            <i class="fas fa-users mr-2"></i>{{ member_group.name }} - Total Group Savings
                        </h4>
                        <p class="text-5xl font-bold mb-2">৳{{ "%.2f"|format(total_group_deposits) }}</p>
                        <p class="text-sm text-blue-100">Combined contributions from all {{ total_members }} active members</p>
                        <div class="mt-4 text-sm text-blue-100">
                            <i class="fas fa-info-circle mr-1"></i>This represents the complete financial fund of your group
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- My Contribution Breakdown -->
        <div class="mb-8">
            <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-pie text-green-600 mr-2"></i>My Personal Contribution Breakdown
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <!-- Monthly Total -->
                        <div class="text-center p-4 bg-blue-50 rounded-lg border border-blue-200">
                            <i class="fas fa-calendar-check text-3xl text-blue-600 mb-2"></i>
                            <h4 class="text-sm font-medium text-blue-800 mb-1">Monthly Contributions</h4>
                            <p class="text-2xl font-bold text-blue-600">৳{{ "%.2f"|format(monthly_total) }}</p>
                            <p class="text-xs text-blue-500">{{ monthly_contributions|length }} payments</p>
                        </div>
                        
                        <!-- Special Total -->
                        <div class="text-center p-4 bg-purple-50 rounded-lg border border-purple-200">
                            <i class="fas fa-star text-3xl text-purple-600 mb-2"></i>
                            <h4 class="text-sm font-medium text-purple-800 mb-1">Special Collections</h4>
                            <p class="text-2xl font-bold text-purple-600">৳{{ "%.2f"|format(special_total) }}</p>
                            <p class="text-xs text-purple-500">{{ special_contributions|length }} contributions</p>
                        </div>
                        
                        <!-- Penalty Total -->
                        <div class="text-center p-4 bg-red-50 rounded-lg border border-red-200">
                            <i class="fas fa-exclamation-triangle text-3xl text-red-600 mb-2"></i>
                            <h4 class="text-sm font-medium text-red-800 mb-1">Penalty Amounts</h4>
                            <p class="text-2xl font-bold text-red-600">৳{{ "%.2f"|format(penalty_total) }}</p>
                            <p class="text-xs text-red-500">Additional charges</p>
                        </div>
                        
                        <!-- Bonus Total -->
                        <div class="text-center p-4 bg-green-50 rounded-lg border border-green-200">
                            <i class="fas fa-gift text-3xl text-green-600 mb-2"></i>
                            <h4 class="text-sm font-medium text-green-800 mb-1">Bonus Amounts</h4>
                            <p class="text-2xl font-bold text-green-600">৳{{ "%.2f"|format(bonus_total) }}</p>
                            <p class="text-xs text-green-500">Additional credits</p>
                        </div>
                    </div>
                    
                    <!-- Grand Total Summary -->
                    <div class="mt-6 pt-4 border-t border-gray-200">
                        <div class="text-center p-6 bg-gradient-to-r from-green-500 to-blue-500 rounded-xl text-white">
                            <h4 class="text-lg font-medium mb-2">Grand Total Contributions</h4>
                            <p class="text-4xl font-bold">৳{{ "%.2f"|format(total_contributed) }}</p>
                            <p class="text-sm text-green-100 mt-2">All time contributions to {{ member_group.name }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Two Column Layout -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- My Contribution 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-line text-green-600 mr-2"></i>My Contribution Trends
                    </h3>
                </div>
                <div class="p-6">
                    <canvas id="contributionChart" width="400" height="200"></canvas>
                </div>
            </div>

            <!-- Member Rankings -->
            <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-trophy text-yellow-600 mr-2"></i>Top Contributors
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        {% for ranking in member_rankings[:5] %}
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center space-x-3">
                                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                                    <span class="text-xs font-medium text-blue-600">{{ loop.index }}</span>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-900">{{ ranking.full_name }}</div>
                                    {% if ranking.custom_id %}
                                    <div class="text-xs text-gray-500">{{ ranking.custom_id }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="font-medium text-green-600">৳{{ "%.2f"|format(ranking.total_amount) }}</div>
                                {% if ranking.id == current_user.id %}
                                <div class="text-xs text-blue-600">You</div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity and Upcoming Events -->
        <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Recent Group 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-clock text-blue-600 mr-2"></i>Recent Group Activity
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        {% for contribution in recent_group_contributions[:8] %}
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center space-x-3">
                                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-plus text-green-600 text-xs"></i>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-900">{{ contribution.member.full_name }}</div>
                                    <div class="text-xs text-gray-500">{{ contribution.contribution_type.title() }} contribution</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="font-medium text-green-600">৳{{ "%.2f"|format(contribution.amount) }}</div>
                                <div class="text-xs text-gray-500">{{ contribution.created_at.strftime('%b %d') }}</div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Upcoming Events -->
            <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-calendar-alt text-purple-600 mr-2"></i>Upcoming Events
                    </h3>
                </div>
                <div class="p-6">
                    {% if upcoming_events %}
                    <div class="space-y-4">
                        {% for event in upcoming_events %}
                        <div class="border border-gray-200 rounded-lg p-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-900">{{ event.name }}</h4>
                                    <p class="text-sm text-gray-500">{{ event.description }}</p>
                                </div>
                                <div class="text-right">
                                    <div class="font-medium text-purple-600">৳{{ "%.2f"|format(event.target_amount) }}</div>
                                    <div class="text-xs text-gray-500">Target</div>
                                </div>
                            </div>
                            <div class="mt-3 flex items-center justify-between">
                                <div class="text-sm text-gray-500">
                                    <i class="fas fa-calendar mr-1"></i>
                                    {{ event.start_date.strftime('%b %d') }} - {{ event.end_date.strftime('%b %d, %Y') }}
                                </div>
                                <div class="text-sm">
                                    {% if event.is_active %}
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        Active
                                    </span>
                                    {% else %}
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        Inactive
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-calendar-alt text-gray-400 text-3xl mb-2"></i>
                        <p class="text-gray-500">No upcoming events</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Profile dropdown toggle
document.getElementById('profile-menu-button').addEventListener('click', function() {
    document.getElementById('profile-menu').classList.toggle('hidden');
});

// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
    const menu = document.getElementById('profile-menu');
    const button = document.getElementById('profile-menu-button');
    
    if (!menu.contains(event.target) && !button.contains(event.target)) {
        menu.classList.add('hidden');
    }
});

// Contribution Chart
const monthlyData = {{ monthly_stats|tojson if monthly_stats else '[]' }};
const chartLabels = monthlyData.map(stat => {
    const date = new Date(stat.month);
    return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
});
const chartData = monthlyData.map(stat => stat.total);

const ctx = document.getElementById('contributionChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: chartLabels,
        datasets: [{
            label: 'My Contributions',
            data: chartData,
            borderColor: 'rgb(34, 197, 94)',
            backgroundColor: 'rgba(34, 197, 94, 0.1)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '৳' + value.toFixed(2);
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return 'Amount: ৳' + context.parsed.y.toFixed(2);
                    }
                }
            }
        }
    }
});
</script>
{% endblock %}