{% extends "base.html" %}

{% block title %}Events - {{ current_user.full_name }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- 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">
                    <a href="{{ url_for('member_dashboard') }}" class="text-gray-500 hover:text-gray-700 mr-4">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-xl font-semibold text-gray-900">
                        <i class="fas fa-calendar-alt text-green-600 mr-2"></i>
                        Events
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-sm text-gray-500">
                        {% 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>
                    <a href="{{ url_for('logout') }}" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </a>
                </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-gray-700 hover:bg-gray-50 rounded-lg border border-gray-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-green-600 bg-green-50 rounded-lg border border-green-200">
                    <i class="fas fa-calendar-alt mr-2"></i>Events
                </a>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- Events List -->
        <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-green-600 mr-2"></i>Group Events
                </h3>
                <p class="text-sm text-gray-500">Special saving events and campaigns in {{ member_group.name }}</p>
            </div>
            <div class="p-6">
                {% if events %}
                <div class="space-y-6">
                    {% for event in events %}
                    <div class="border border-gray-200 rounded-lg p-6">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center space-x-4">
                                <div class="w-12 h-12 rounded-full flex items-center justify-center
                                    {% if event.is_active %}bg-green-100{% else %}bg-gray-100{% endif %}">
                                    <i class="fas fa-bullseye 
                                        {% if event.is_active %}text-green-600{% else %}text-gray-400{% endif %}"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-medium text-gray-900">{{ event.name }}</h4>
                                    <p class="text-sm text-gray-500">{{ event.description }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                {% if event.is_active %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                    <i class="fas fa-play mr-1"></i>Active
                                </span>
                                {% else %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                                    <i class="fas fa-pause mr-1"></i>Inactive
                                </span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div class="text-center p-4 bg-gray-50 rounded-lg">
                                <div class="text-2xl font-bold text-purple-600">৳{{ "%.2f"|format(event.target_amount) }}</div>
                                <div class="text-sm text-gray-500">Target Amount</div>
                            </div>
                            <div class="text-center p-4 bg-gray-50 rounded-lg">
                                <div class="text-2xl font-bold text-blue-600">
                                    {{ event.start_date.strftime('%b %d') }}
                                </div>
                                <div class="text-sm text-gray-500">Start Date</div>
                            </div>
                            <div class="text-center p-4 bg-gray-50 rounded-lg">
                                <div class="text-2xl font-bold text-red-600">
                                    {{ event.end_date.strftime('%b %d') }}
                                </div>
                                <div class="text-sm text-gray-500">End Date</div>
                            </div>
                        </div>

                        <!-- My Participation -->
                        <div class="border-t border-gray-200 pt-4">
                            <h5 class="font-medium text-gray-900 mb-2">
                                <i class="fas fa-user text-green-600 mr-2"></i>My Participation
                            </h5>
                            {% if participations[event.id] %}
                            <div class="flex items-center justify-between p-3 bg-green-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-check text-green-600"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium text-green-900">Participating</div>
                                        <div class="text-sm text-green-700">
                                            Last contribution: {{ participations[event.id].last_contribution_date.strftime('%b %d, %Y') if participations[event.id].last_contribution_date else 'Not yet' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="font-medium text-green-900">৳{{ "%.2f"|format(participations[event.id].amount_contributed) }}</div>
                                    <div class="text-sm text-green-700">Contributed</div>
                                </div>
                            </div>
                            {% else %}
                            <div class="flex items-center justify-center p-4 bg-gray-50 rounded-lg">
                                <div class="text-center">
                                    <i class="fas fa-user-plus text-gray-400 text-2xl mb-2"></i>
                                    <p class="text-gray-500">Not participating in this event</p>
                                    <p class="text-sm text-gray-400">Contact your admin to join</p>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-12">
                    <i class="fas fa-calendar-alt text-gray-400 text-6xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No events yet</h3>
                    <p class="text-gray-500">Your group hasn't created any special saving events yet.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}