{% extends "base.html" %}

{% block title %}My Contributions - {{ 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-list text-green-600 mr-2"></i>
                        My Contributions
                    </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-green-600 bg-green-50 rounded-lg border border-green-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>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <!-- Monthly Total -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <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-medium text-gray-900">৳{{ "%.2f"|format(monthly_total) }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Special Total -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <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 Total</dt>
                                <dd class="text-lg font-medium text-gray-900">৳{{ "%.2f"|format(special_total) }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Penalty Total -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-2xl text-red-600"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Penalty Total</dt>
                                <dd class="text-lg font-medium text-gray-900">৳{{ "%.2f"|format(penalty_total) }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bonus Total -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-gift 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">Bonus Total</dt>
                                <dd class="text-lg font-medium text-gray-900">৳{{ "%.2f"|format(bonus_total) }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contributions 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-list text-green-600 mr-2"></i>All Contributions
                </h3>
                <p class="text-sm text-gray-500">Complete history of your contributions</p>
            </div>
            <div class="p-6">
                {% if contributions.items %}
                <div class="space-y-4">
                    {% for contribution in contributions.items %}
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-4">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center
                                {% if contribution.contribution_type == 'monthly' %}bg-blue-100{% endif %}
                                {% if contribution.contribution_type == 'special' %}bg-purple-100{% endif %}
                                {% if contribution.contribution_type == 'penalty' %}bg-red-100{% endif %}
                                {% if contribution.contribution_type == 'bonus' %}bg-green-100{% endif %}">
                                <i class="fas 
                                    {% if contribution.contribution_type == 'monthly' %}fa-calendar-check text-blue-600{% endif %}
                                    {% if contribution.contribution_type == 'special' %}fa-star text-purple-600{% endif %}
                                    {% if contribution.contribution_type == 'penalty' %}fa-exclamation-triangle text-red-600{% endif %}
                                    {% if contribution.contribution_type == 'bonus' %}fa-gift text-green-600{% endif %}
                                "></i>
                            </div>
                            <div>
                                <div class="font-medium text-gray-900">
                                    {{ contribution.contribution_type.title() }} Contribution
                                </div>
                                <div class="text-sm text-gray-500">
                                    {% if contribution.contribution_month %}
                                        For {{ contribution.contribution_month.strftime('%B %Y') }}
                                    {% elif contribution.description %}
                                        {{ contribution.description }}
                                    {% else %}
                                        Recorded on {{ contribution.created_at.strftime('%B %d, %Y') }}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="font-medium text-gray-900">৳{{ "%.2f"|format(contribution.amount) }}</div>
                            <div class="text-sm text-gray-500">{{ contribution.created_at.strftime('%b %d, %Y') }}</div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- Pagination -->
                {% if contributions.pages > 1 %}
                <div class="mt-6 flex items-center justify-between">
                    <div class="flex-1 flex justify-between sm:hidden">
                        {% if contributions.has_prev %}
                        <a href="{{ url_for('member_contributions', page=contributions.prev_num) }}" class="relative 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">
                            Previous
                        </a>
                        {% endif %}
                        {% if contributions.has_next %}
                        <a href="{{ url_for('member_contributions', page=contributions.next_num) }}" class="ml-3 relative 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">
                            Next
                        </a>
                        {% endif %}
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Showing {{ contributions.per_page * (contributions.page - 1) + 1 }} to {{ contributions.per_page * contributions.page if contributions.page < contributions.pages else contributions.total }} of {{ contributions.total }} results
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                                {% if contributions.has_prev %}
                                <a href="{{ url_for('member_contributions', page=contributions.prev_num) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                                {% endif %}
                                {% for page_num in contributions.iter_pages() %}
                                    {% if page_num %}
                                        {% if page_num != contributions.page %}
                                        <a href="{{ url_for('member_contributions', page=page_num) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                            {{ page_num }}
                                        </a>
                                        {% else %}
                                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
                                            {{ page_num }}
                                        </span>
                                        {% endif %}
                                    {% else %}
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                        ...
                                    </span>
                                    {% endif %}
                                {% endfor %}
                                {% if contributions.has_next %}
                                <a href="{{ url_for('member_contributions', page=contributions.next_num) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                                {% endif %}
                            </nav>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% else %}
                <div class="text-center py-12">
                    <i class="fas fa-coins text-gray-400 text-6xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No contributions yet</h3>
                    <p class="text-gray-500">Your contribution history will appear here once you make your first payment.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}