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

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

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

{% block content %}
<!-- Add New Member Form -->
<div class="p-8">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-500 to-purple-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-user-plus text-2xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold">Add New Member</h2>
                    </div>
                    <p class="text-blue-100 text-lg">Create a new member account for your group</p>
                </div>
                <a href="{{ url_for('admin_members') }}" class="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl text-white font-medium transition-all duration-200">
                    ← Back to Members
                </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">
                    <!-- Personal Information Section -->
                    <div class="space-y-6">
                        <div class="border-b border-gray-200 pb-4">
                            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                                <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-user text-white text-sm"></i>
                                </div>
                                Personal Information
                            </h3>
                            <p class="text-gray-600 mt-1">Basic member details and contact information</p>
                        </div>
                        
                        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                            <div class="space-y-2">
                                <label for="custom_id" class="block text-sm font-semibold text-gray-700">
                                    <i class="fas fa-id-card text-blue-500 mr-2"></i>Custom Member ID
                                </label>
                                <input type="text" name="custom_id" id="custom_id" placeholder="e.g., M001, USR-01"
                                       class="block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-gray-50 focus:bg-white transition-all duration-200">
                                <p class="text-xs text-gray-500">Optional unique identifier for this member</p>
                            </div>
                            
                            <div class="space-y-2">
                                <label for="username" class="block text-sm font-semibold text-gray-700">
                                    <i class="fas fa-at text-green-500 mr-2"></i>Username *
                                </label>
                                <input type="text" name="username" id="username" required
                                       class="block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm bg-gray-50 focus:bg-white transition-all duration-200"
                                       placeholder="Enter username">
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <label for="full_name" class="block text-sm font-semibold text-gray-700">
                                <i class="fas fa-user-circle text-purple-500 mr-2"></i>Full Name *
                            </label>
                            <input type="text" name="full_name" id="full_name" required
                                   class="block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm bg-gray-50 focus:bg-white transition-all duration-200"
                                   placeholder="Enter full name">
                        </div>
                        
                        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                            <div class="space-y-2">
                                <label for="email" class="block text-sm font-semibold text-gray-700">
                                    <i class="fas fa-envelope text-red-500 mr-2"></i>Email Address *
                                </label>
                                <input type="email" name="email" id="email" required
                                       class="block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm bg-gray-50 focus:bg-white transition-all duration-200"
                                       placeholder="Enter email address">
                            </div>
                            
                            <div class="space-y-2">
                                <label for="phone_number" class="block text-sm font-semibold text-gray-700">
                                    <i class="fas fa-phone text-orange-500 mr-2"></i>Phone Number
                                </label>
                                <input type="tel" name="phone_number" id="phone_number"
                                       class="block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-orange-500 focus:border-orange-500 text-sm bg-gray-50 focus:bg-white transition-all duration-200"
                                       placeholder="Enter phone number">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Security Section -->
                    <div class="space-y-6">
                        <div class="border-b border-gray-200 pb-4">
                            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                                <div class="w-8 h-8 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-lock text-white text-sm"></i>
                                </div>
                                Security & Access
                            </h3>
                            <p class="text-gray-600 mt-1">Password and permission settings</p>
                        </div>
                        
                        <div class="space-y-2">
                            <label for="password" class="block text-sm font-semibold text-gray-700">
                                <i class="fas fa-key text-gray-600 mr-2"></i>Password *
                            </label>
                            <input type="password" name="password" id="password" required
                                   class="block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-gray-500 focus:border-gray-500 text-sm bg-gray-50 focus:bg-white transition-all duration-200"
                                   placeholder="Enter secure password">
                        </div>
                        
                        <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
                            <div class="flex items-start">
                                <div class="flex-shrink-0">
                                    <input type="checkbox" name="is_admin" id="is_admin"
                                           class="h-5 w-5 text-amber-600 focus:ring-amber-500 border-amber-300 rounded mt-0.5">
                                </div>
                                <div class="ml-3">
                                    <label for="is_admin" class="block text-sm font-semibold text-amber-800">
                                        Grant Admin Privileges
                                    </label>
                                    <p class="text-xs text-amber-700 mt-1">Admin users can manage members, contributions, and system settings</p>
                                </div>
                            </div>
                        </div>
                    </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_members') }}" 
                               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-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-lg shadow-blue-500/25 transition-all duration-200">
                                <i class="fas fa-plus mr-2"></i>Add Member
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}