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

{% block title %}Contributions Management - Admin Panel{% endblock %}

{% block page_title %}All Contributions{% endblock %}

{% block content %}
<!-- Contributions Management -->
<div class="p-8">
    <div class="flex justify-between items-center mb-8">
        <div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">
                Contributions Management
            </h3>
            <p class="text-gray-600">
                Track and manage all member financial contributions
            </p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ url_for('admin_add_contribution') }}" class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 shadow-lg shadow-green-500/25 transition-all duration-200">
                <i class="fas fa-plus mr-2"></i>Add Contribution
            </a>
            <a href="{{ url_for('admin_bulk_import') }}" class="inline-flex items-center px-6 py-3 border border-gray-200 text-sm font-medium rounded-xl text-gray-700 bg-white hover:bg-gray-50 shadow-sm transition-all duration-200">
                <i class="fas fa-upload mr-2"></i>Bulk Import
            </a>
        </div>
    </div>

        <!-- Search and Filter Section -->
        <div class="mt-6 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <form method="GET" class="grid grid-cols-1 gap-4 sm:grid-cols-4">
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
                        <input type="text" name="search" id="search" value="{{ request.args.get('search', '') }}" 
                               placeholder="Member name, ID, or description..."
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                    <div>
                        <label for="month_filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Month</label>
                        <select name="month_filter" id="month_filter"
                                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <option value="">All months</option>
                            {% for month in available_months %}
                                <option value="{{ month.strftime('%Y-%m') }}" {% if request.args.get('month_filter') == month.strftime('%Y-%m') %}selected{% endif %}>
                                    {{ month.strftime('%B %Y') }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="type_filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Type</label>
                        <select name="type_filter" id="type_filter"
                                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <option value="">All types</option>
                            <option value="monthly" {% if request.args.get('type_filter') == 'monthly' %}selected{% endif %}>Monthly</option>
                            <option value="penalty" {% if request.args.get('type_filter') == 'penalty' %}selected{% endif %}>Penalty</option>
                            <option value="bonus" {% if request.args.get('type_filter') == 'bonus' %}selected{% endif %}>Bonus</option>
                        </select>
                    </div>
                    <div class="flex items-end">
                        <button type="submit" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <i class="fas fa-search mr-2"></i>Search
                        </button>
                    </div>
                </form>
                {% if request.args.get('search') or request.args.get('month_filter') or request.args.get('type_filter') %}
                <div class="mt-3">
                    <a href="{{ url_for('admin_contributions') }}" class="text-sm text-primary-600 hover:text-primary-900 dark:text-primary-400">
                        <i class="fas fa-times mr-1"></i>Clear filters
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md">
            <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
                {% for contribution in contributions %}
                <li class="px-6 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-12 w-12">
                                <div class="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
                                    <i class="fas fa-coins text-green-600 dark:text-green-400"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    {% if contribution.member.custom_id %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 mr-2">{{ contribution.member.custom_id }}</span>
                                    {% endif %}
                                    {{ contribution.member.full_name }}
                                </div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    @{{ contribution.member.username }}{% if contribution.member.custom_id %} ({{ contribution.member.custom_id }}){% endif %}
                                    • {{ contribution.contribution_type.title() }} contribution
                                    {% if contribution.contribution_month %}
                                        • For {{ contribution.contribution_month.strftime('%B %Y') }}
                                    {% endif %}
                                </div>
                                {% if contribution.description %}
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ contribution.description }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="text-right">
                                <div class="text-lg 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>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {% if contribution.status == 'confirmed' %}bg-green-100 text-green-800
                                {% elif contribution.status == 'pending' %}bg-yellow-100 text-yellow-800
                                {% else %}bg-red-100 text-red-800{% endif %}">
                                {{ (contribution.status or 'confirmed').title() }}
                            </span>
                        </div>
                    </div>
                </li>
                {% else %}
                <li class="px-6 py-8">
                    <div class="text-center">
                        <i class="fas fa-coins 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 found.</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>
        
        <!-- Pagination -->
        {% if pagination.pages > 1 %}
        <div class="bg-white dark:bg-gray-800 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                {% if pagination.has_prev %}
                    <a href="{{ url_for('admin_contributions', page=pagination.prev_num, search=request.args.get('search', ''), month_filter=request.args.get('month_filter', ''), type_filter=request.args.get('type_filter', '')) }}" 
                       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 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                        Previous
                    </a>
                {% endif %}
                {% if pagination.has_next %}
                    <a href="{{ url_for('admin_contributions', page=pagination.next_num, search=request.args.get('search', ''), month_filter=request.args.get('month_filter', ''), type_filter=request.args.get('type_filter', '')) }}" 
                       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 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                        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 dark:text-gray-300">
                        Showing <span class="font-medium">{{ pagination.per_page * (pagination.page - 1) + 1 }}</span>
                        to <span class="font-medium">{{ pagination.per_page * (pagination.page - 1) + contributions|length }}</span>
                        of <span class="font-medium">{{ pagination.total }}</span> contributions
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <!-- Previous button -->
                        {% if pagination.has_prev %}
                            <a href="{{ url_for('admin_contributions', page=pagination.prev_num, search=request.args.get('search', ''), month_filter=request.args.get('month_filter', ''), type_filter=request.args.get('type_filter', '')) }}" 
                               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 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        {% else %}
                            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-300 dark:bg-gray-800 dark:text-gray-600 dark:border-gray-600">
                                <i class="fas fa-chevron-left"></i>
                            </span>
                        {% endif %}
                        
                        <!-- Page numbers -->
                        {% for page_num in pagination.iter_pages() %}
                            {% if page_num %}
                                {% if page_num != pagination.page %}
                                    <a href="{{ url_for('admin_contributions', page=page_num, search=request.args.get('search', ''), month_filter=request.args.get('month_filter', ''), type_filter=request.args.get('type_filter', '')) }}" 
                                       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 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                                        {{ page_num }}
                                    </a>
                                {% else %}
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary-50 text-sm font-medium text-primary-600 dark:bg-primary-900 dark:text-primary-300 dark:border-gray-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 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600">
                                    ...
                                </span>
                            {% endif %}
                        {% endfor %}
                        
                        <!-- Next button -->
                        {% if pagination.has_next %}
                            <a href="{{ url_for('admin_contributions', page=pagination.next_num, search=request.args.get('search', ''), month_filter=request.args.get('month_filter', ''), type_filter=request.args.get('type_filter', '')) }}" 
                               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 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        {% else %}
                            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-300 dark:bg-gray-800 dark:text-gray-600 dark:border-gray-600">
                                <i class="fas fa-chevron-right"></i>
                            </span>
                        {% endif %}
                    </nav>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}