{% extends "base.html" %}

{% block title %}Submit Contribution - {{ 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-plus-circle text-green-600 mr-2"></i>
                        Submit Contribution
                    </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-green-600 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-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-gray-700 hover:bg-gray-50 rounded-lg border border-gray-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-4xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Contribution Form -->
            <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-money-bill-wave text-green-600 mr-2"></i>Submit New Contribution
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">Submit your contribution details for admin approval</p>
                </div>
                <form method="POST" class="p-6 space-y-6">
                    <!-- Contribution Type -->
                    <div>
                        <label for="contribution_type" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-tag text-blue-600 mr-1"></i>Contribution Type
                        </label>
                        <select name="contribution_type" id="contribution_type" required 
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            <option value="">Select contribution type</option>
                            <option value="monthly">Monthly Contribution</option>
                            <option value="special">Special Collection</option>
                            <option value="penalty">Penalty Payment</option>
                            <option value="bonus">Bonus Contribution</option>
                        </select>
                    </div>

                    <!-- Monthly Contribution Month (shown only for monthly) -->
                    <div id="monthly-month-field" style="display: none;">
                        <label for="contribution_month" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-calendar text-blue-600 mr-1"></i>Contribution Month
                        </label>
                        <input type="month" name="contribution_month" id="contribution_month" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    </div>

                    <!-- Amount -->
                    <div>
                        <label for="amount" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-dollar-sign text-green-600 mr-1"></i>Amount (৳)
                        </label>
                        <input type="number" name="amount" id="amount" step="0.01" min="0" required 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
                               placeholder="Enter amount">
                        <!-- Quick amount buttons -->
                        <div class="mt-2 flex flex-wrap gap-2">
                            <button type="button" onclick="setAmount(4000)" class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200">৳4,000</button>
                            <button type="button" onclick="setAmount(5000)" class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200">৳5,000</button>
                            <button type="button" onclick="setAmount(6000)" class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200">৳6,000</button>
                        </div>
                    </div>

                    <!-- Payment Method -->
                    <div>
                        <label for="payment_method" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-credit-card text-purple-600 mr-1"></i>Payment Method
                        </label>
                        <select name="payment_method" id="payment_method" required 
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            <option value="">Select payment method</option>
                            <option value="cash">Cash</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="mobile_banking">Mobile Banking (bKash/Nagad/Rocket)</option>
                            <option value="check">Check</option>
                        </select>
                    </div>

                    <!-- Reference Number -->
                    <div>
                        <label for="reference_number" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-hashtag text-indigo-600 mr-1"></i>Reference Number (Optional)
                        </label>
                        <input type="text" name="reference_number" id="reference_number" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
                               placeholder="Transaction ID, Check number, etc.">
                    </div>

                    <!-- Description -->
                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-comment text-gray-600 mr-1"></i>Description (Optional)
                        </label>
                        <textarea name="description" id="description" rows="3" 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
                                  placeholder="Additional notes or details"></textarea>
                    </div>

                    <!-- Submit Button -->
                    <div class="pt-4">
                        <button type="submit" 
                                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200">
                            <i class="fas fa-paper-plane mr-2"></i>
                            Submit Contribution Request
                        </button>
                    </div>
                </form>
            </div>

            <!-- Pending 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-clock text-orange-600 mr-2"></i>Pending Requests
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">Your submitted contribution requests awaiting approval</p>
                </div>
                <div class="p-6">
                    {% if pending_requests %}
                        <div class="space-y-4">
                            {% for request in pending_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-orange-100 text-orange-800">
                                                {{ request.contribution_type.title() }}
                                            </span>
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                Pending
                                            </span>
                                        </div>
                                        <div class="text-lg font-semibold text-gray-900">৳{{ "%.2f"|format(request.amount) }}</div>
                                        {% 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 %}
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        {{ request.created_at.strftime('%b %d, %Y') }}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-8">
                            <i class="fas fa-inbox text-gray-400 text-4xl mb-4"></i>
                            <p class="text-gray-500">No pending contribution requests</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Show/hide monthly contribution month field
document.getElementById('contribution_type').addEventListener('change', function() {
    const monthField = document.getElementById('monthly-month-field');
    if (this.value === 'monthly') {
        monthField.style.display = 'block';
        document.getElementById('contribution_month').required = true;
    } else {
        monthField.style.display = 'none';
        document.getElementById('contribution_month').required = false;
    }
});

// Set quick amount
function setAmount(amount) {
    document.getElementById('amount').value = amount;
}
</script>
{% endblock %}