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

{% block title %}Add Contribution - Admin Panel{% endblock %}

{% block page_title %}Add New Contribution{% endblock %}

{% block content %}
<!-- Add New Contribution Form -->
<div class="p-8">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="bg-gradient-to-r from-green-500 to-teal-600 rounded-2xl p-8 mb-8 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <div class="flex items-center mb-2">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-plus-circle text-2xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold">Add New Contribution</h2>
                    </div>
                    <p class="text-green-100 text-lg">Record a member contribution to the group fund</p>
                </div>
                <a href="{{ url_for('admin_contributions') }}" class="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl text-white font-medium transition-all duration-200">
                    ← Back to Contributions
                </a>
            </div>
        </div>
        
        <!-- Form Container -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden">
            <div class="p-8">
                
                <form method="POST" class="space-y-8">
                    <!-- Member Selection -->
                    <div class="space-y-3">
                        <label for="member_id" class="block text-sm font-semibold text-gray-900">
                            <i class="fas fa-user text-blue-500 mr-2"></i>Member
                        </label>
                        <select name="member_id" id="member_id" required
                                class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 focus:bg-white transition-all duration-200">
                            <option value="">Select a member</option>
                            {% for member in members %}
                            <option value="{{ member.id }}">
                                {% if member.custom_id %}{{ member.custom_id }} - {% endif %}{{ member.full_name }} (@{{ member.username }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Amount and Type Section -->
                    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
                        <div class="space-y-3">
                            <label for="amount" class="block text-sm font-semibold text-gray-900">
                                <i class="fas fa-money-bill-wave text-green-500 mr-2"></i>Amount (৳)
                            </label>
                            <div class="space-y-3">
                                <input type="number" name="amount" id="amount" step="0.01" min="0" required
                                       class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-gray-50 focus:bg-white transition-all duration-200"
                                       placeholder="Enter amount">
                                <div class="flex flex-wrap gap-2">
                                    <button type="button" onclick="document.getElementById('amount').value = 4000" 
                                            class="px-4 py-2 text-sm font-medium rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 shadow-md transition-all duration-200">
                                        ৳4,000
                                    </button>
                                    <button type="button" onclick="document.getElementById('amount').value = 5000" 
                                            class="px-4 py-2 text-sm font-medium rounded-lg bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 shadow-md transition-all duration-200">
                                        ৳5,000
                                    </button>
                                    <button type="button" onclick="document.getElementById('amount').value = 6000" 
                                            class="px-4 py-2 text-sm font-medium rounded-lg bg-gradient-to-r from-purple-500 to-purple-600 text-white hover:from-purple-600 hover:to-purple-700 shadow-md transition-all duration-200">
                                        ৳6,000
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="space-y-3">
                            <label for="contribution_type" class="block text-sm font-semibold text-gray-900">
                                <i class="fas fa-tags text-purple-500 mr-2"></i>Type
                            </label>
                            <select name="contribution_type" id="contribution_type" required
                                    class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-gray-50 focus:bg-white transition-all duration-200">
                                <option value="">Select type</option>
                                <option value="monthly">Monthly Contribution</option>
                                <option value="penalty">Penalty</option>
                                <option value="bonus">Bonus Payment</option>
                                <option value="special">Special Collection</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- Month Selection -->
                    <div class="space-y-3">
                        <label for="contribution_month" class="block text-sm font-semibold text-gray-900">
                            <i class="fas fa-calendar text-orange-500 mr-2"></i>Contribution Month (for monthly contributions)
                        </label>
                        <select name="contribution_month" id="contribution_month"
                                class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50 focus:bg-white transition-all duration-200">
                            <option value="">Select month</option>
                            {% set month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] %}
                            {% for year in range(2024, 2026) %}
                                <optgroup label="{{ year }}">
                                    {% for month in range(1, 13) %}
                                        {% set month_date = '%04d-%02d-01'|format(year, month) %}
                                        {% set month_name = month_names[month-1] + ' ' + year|string %}
                                        <option value="{{ month_date }}">{{ month_name }}</option>
                                    {% endfor %}
                                </optgroup>
                            {% endfor %}
                        </select>
                        <p class="text-xs text-gray-500">Select the month this contribution is for (since January 2024)</p>
                    </div>
                    
                    <!-- Payment Date -->
                    <div class="space-y-3">
                        <label for="contribution_date" class="block text-sm font-semibold text-gray-900">
                            <i class="fas fa-clock text-teal-500 mr-2"></i>Payment Date (for historical records)
                        </label>
                        <input type="date" name="contribution_date" id="contribution_date"
                               class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500 bg-gray-50 focus:bg-white transition-all duration-200">
                        <p class="text-xs text-gray-500">Leave empty for today's date, or select when payment was actually made</p>
                    </div>
                    
                    <!-- Description -->
                    <div class="space-y-3">
                        <label for="description" class="block text-sm font-semibold text-gray-900">
                            <i class="fas fa-sticky-note text-indigo-500 mr-2"></i>Description
                        </label>
                        <textarea name="description" id="description" rows="4"
                                  class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 focus:bg-white transition-all duration-200"
                                  placeholder="Optional notes about this contribution"></textarea>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="border-t border-gray-200 pt-6">
                        <div class="flex justify-end space-x-4">
                            <a href="{{ url_for('admin_contributions') }}" 
                               class="inline-flex items-center px-6 py-3 border border-gray-300 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-times mr-2"></i>Cancel
                            </a>
                            <button type="submit"
                                    class="inline-flex items-center px-8 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 shadow-lg shadow-green-500/25 transition-all duration-200">
                                <i class="fas fa-plus mr-2"></i>
                                Add Contribution
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-set contribution month for monthly contributions
document.getElementById('contribution_type').addEventListener('change', function() {
    const monthField = document.getElementById('contribution_month');
    if (this.value === 'monthly' && !monthField.value) {
        const today = new Date();
        const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        monthField.value = firstDay.toISOString().split('T')[0];
    }
});
</script>
{% endblock %}