{% extends "base.html" %}

{% block title %}My Requests - {{ current_user.full_name }}{% 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-list-alt text-indigo-600 mr-2"></i>
                        My Requests
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <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>
                </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_submit_contribution') }}" 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-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-gray-700 hover:bg-gray-50 rounded-lg border border-gray-200">
                    <i class="fas fa-hand-holding-usd mr-2"></i>Request Loan
                </a>
                <a href="{{ url_for('member_requests') }}" class="flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg border border-indigo-200">
                    <i class="fas fa-list-alt mr-2"></i>My Requests
                </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>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <div class="bg-white p-4 rounded-lg shadow border-l-4 border-green-500">
                <div class="flex items-center">
                    <i class="fas fa-plus-circle text-2xl text-green-600 mr-3"></i>
                    <div>
                        <div class="text-sm font-medium text-gray-500">Contribution Requests</div>
                        <div class="text-xl font-bold text-gray-900">{{ contribution_requests|length }}</div>
                    </div>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow border-l-4 border-blue-500">
                <div class="flex items-center">
                    <i class="fas fa-hand-holding-usd text-2xl text-blue-600 mr-3"></i>
                    <div>
                        <div class="text-sm font-medium text-gray-500">Loan Requests</div>
                        <div class="text-xl font-bold text-gray-900">{{ loan_requests|length }}</div>
                    </div>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow border-l-4 border-yellow-500">
                <div class="flex items-center">
                    <i class="fas fa-clock text-2xl text-yellow-600 mr-3"></i>
                    <div>
                        <div class="text-sm font-medium text-gray-500">Pending</div>
                        <div class="text-xl font-bold text-gray-900">
                            {% set pending_contrib = contribution_requests|selectattr("status", "equalto", "pending")|list|length %}
                            {% set pending_loans = loan_requests|selectattr("status", "equalto", "pending")|list|length %}
                            {{ pending_contrib + pending_loans }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow border-l-4 border-green-500">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-2xl text-green-600 mr-3"></i>
                    <div>
                        <div class="text-sm font-medium text-gray-500">Approved</div>
                        <div class="text-xl font-bold text-gray-900">
                            {% set approved_contrib = contribution_requests|selectattr("status", "equalto", "approved")|list|length %}
                            {% set approved_loans = loan_requests|selectattr("status", "equalto", "approved")|list|length %}
                            {{ approved_contrib + approved_loans }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Contribution 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-plus-circle text-green-600 mr-2"></i>Contribution Requests
                    </h3>
                </div>
                <div class="p-6">
                    {% if contribution_requests %}
                        <div class="space-y-4">
                            {% for request in contribution_requests %}
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-2 mb-2">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                {{ request.contribution_type.title() }}
                                            </span>
                                            {% if request.status == 'pending' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                    <i class="fas fa-clock mr-1"></i>Pending
                                                </span>
                                            {% elif request.status == 'approved' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <i class="fas fa-check mr-1"></i>Approved
                                                </span>
                                            {% elif request.status == 'rejected' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                    <i class="fas fa-times mr-1"></i>Rejected
                                                </span>
                                            {% endif %}
                                        </div>
                                        <div class="text-xl font-semibold text-gray-900">৳{{ "%.2f"|format(request.amount) }}</div>
                                        {% if request.contribution_month %}
                                        <div class="text-sm text-gray-600">
                                            <i class="fas fa-calendar mr-1"></i>{{ request.contribution_month.strftime('%B %Y') }}
                                        </div>
                                        {% endif %}
                                        {% if request.payment_method %}
                                        <div class="text-sm text-gray-600">
                                            <i class="fas fa-credit-card mr-1"></i>{{ request.payment_method.replace('_', ' ').title() }}
                                        </div>
                                        {% endif %}
                                        {% if request.reference_number %}
                                        <div class="text-sm text-gray-600">
                                            <i class="fas fa-hashtag mr-1"></i>{{ request.reference_number }}
                                        </div>
                                        {% endif %}
                                        {% if request.description %}
                                        <div class="text-sm text-gray-600 mt-1">{{ request.description }}</div>
                                        {% endif %}
                                        {% if request.admin_notes %}
                                        <div class="mt-2 p-2 bg-gray-50 rounded text-sm">
                                            <strong>Admin Notes:</strong> {{ request.admin_notes }}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="text-xs text-gray-500 text-right">
                                        <div>{{ request.created_at.strftime('%b %d, %Y') }}</div>
                                        {% if request.approved_at %}
                                        <div class="mt-1">Approved: {{ request.approved_at.strftime('%b %d, %Y') }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-8">
                            <i class="fas fa-plus-circle text-gray-400 text-4xl mb-4"></i>
                            <p class="text-gray-500">No contribution requests</p>
                            <a href="{{ url_for('member_submit_contribution') }}" class="text-green-600 hover:text-green-700 text-sm mt-2 inline-block">
                                Submit your first contribution →
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 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-blue-600 mr-2"></i>Loan Requests
                    </h3>
                </div>
                <div class="p-6">
                    {% if loan_requests %}
                        <div class="space-y-4">
                            {% for loan in loan_requests %}
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-2 mb-2">
                                            {% if loan.status == 'pending' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                    <i class="fas fa-clock mr-1"></i>Pending
                                                </span>
                                            {% elif loan.status == 'approved' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <i class="fas fa-check mr-1"></i>Approved
                                                </span>
                                            {% elif loan.status == 'rejected' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                    <i class="fas fa-times mr-1"></i>Rejected
                                                </span>
                                            {% elif loan.status == 'active' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    <i class="fas fa-handshake mr-1"></i>Active
                                                </span>
                                            {% elif loan.status == 'completed' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                    <i class="fas fa-check-circle mr-1"></i>Completed
                                                </span>
                                            {% endif %}
                                        </div>
                                        <div class="text-xl font-bold text-gray-900">৳{{ "%.2f"|format(loan.amount_requested) }}</div>
                                        <div class="text-sm text-gray-600 space-y-1">
                                            <div><i class="fas fa-calendar mr-1"></i>{{ loan.repayment_months }} months</div>
                                            <div><i class="fas fa-money-bill-alt mr-1"></i>৳{{ "%.2f"|format(loan.monthly_payment) }}/month</div>
                                        </div>
                                        <div class="text-sm text-gray-600 mt-2">
                                            <strong>Purpose:</strong> {{ loan.purpose[:80] }}{% if loan.purpose|length > 80 %}...{% endif %}
                                        </div>
                                        {% if loan.admin_notes %}
                                        <div class="mt-2 p-2 bg-gray-50 rounded text-sm">
                                            <strong>Admin Notes:</strong> {{ loan.admin_notes }}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="text-xs text-gray-500 text-right">
                                        <div>{{ loan.created_at.strftime('%b %d, %Y') }}</div>
                                        {% if loan.approved_at %}
                                        <div class="mt-1">Approved: {{ loan.approved_at.strftime('%b %d, %Y') }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-8">
                            <i class="fas fa-hand-holding-usd text-gray-400 text-4xl mb-4"></i>
                            <p class="text-gray-500">No loan requests</p>
                            <a href="{{ url_for('member_request_loan') }}" class="text-blue-600 hover:text-blue-700 text-sm mt-2 inline-block">
                                Request your first loan →
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}