{% extends "base.html" %}

{% block title %}Update Profile - {{ current_user.full_name }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- 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">
                    <a href="{{ url_for('member_dashboard') }}" class="text-gray-500 hover:text-gray-700 mr-4">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-xl font-semibold text-gray-900">
                        <i class="fas fa-user-edit text-green-600 mr-2"></i>
                        Update Profile
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-sm text-gray-500">
                        {% 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>
                    <a href="{{ url_for('logout') }}" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Profile Update Form -->
    <div class="max-w-3xl mx-auto py-6 sm:px-6 lg:px-8">
        <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">Personal Information</h3>
                <p class="text-sm text-gray-500">Update your profile information and change your password</p>
            </div>
            
            <form method="POST" class="p-6">
                <!-- Flash Messages -->
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="mb-4 p-4 rounded-md {% if category == 'error' %}bg-red-50 border border-red-200{% else %}bg-green-50 border border-green-200{% endif %}">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        {% if category == 'error' %}
                                            <i class="fas fa-exclamation-circle text-red-400"></i>
                                        {% else %}
                                            <i class="fas fa-check-circle text-green-400"></i>
                                        {% endif %}
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm {% if category == 'error' %}text-red-700{% else %}text-green-700{% endif %}">
                                            {{ message }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                <!-- Personal Information Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <!-- Custom ID (Read-only) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-id-badge text-blue-600 mr-2"></i>Member ID
                        </label>
                        <input type="text" 
                               value="{{ current_user.custom_id or 'Not assigned' }}" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-500 cursor-not-allowed" 
                               readonly>
                        <p class="text-xs text-gray-500 mt-1">Your member ID is assigned by your group admin</p>
                    </div>

                    <!-- Username (Read-only) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-user text-purple-600 mr-2"></i>Username
                        </label>
                        <input type="text" 
                               value="{{ current_user.username }}" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-500 cursor-not-allowed" 
                               readonly>
                        <p class="text-xs text-gray-500 mt-1">Username cannot be changed</p>
                    </div>

                    <!-- Full Name -->
                    <div>
                        <label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-user-circle text-green-600 mr-2"></i>Full Name
                        </label>
                        <input type="text" 
                               id="full_name" 
                               name="full_name" 
                               value="{{ current_user.full_name }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" 
                               required>
                    </div>

                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-envelope text-blue-600 mr-2"></i>Email Address
                        </label>
                        <input type="email" 
                               id="email" 
                               name="email" 
                               value="{{ current_user.email }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" 
                               required>
                    </div>

                    <!-- Phone Number -->
                    <div class="md:col-span-2">
                        <label for="phone_number" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-phone text-indigo-600 mr-2"></i>Phone Number
                        </label>
                        <input type="tel" 
                               id="phone_number" 
                               name="phone_number" 
                               value="{{ current_user.phone_number or '' }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" 
                               placeholder="e.g., +880 1234 567890">
                    </div>
                </div>

                <!-- Change Password Section -->
                <div class="border-t border-gray-200 pt-8">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Change Password</h4>
                    <p class="text-sm text-gray-500 mb-6">Leave blank if you don't want to change your password</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Current Password -->
                        <div class="md:col-span-2">
                            <label for="current_password" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-key text-red-600 mr-2"></i>Current Password
                            </label>
                            <input type="password" 
                                   id="current_password" 
                                   name="current_password" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" 
                                   placeholder="Enter current password to change">
                        </div>

                        <!-- New Password -->
                        <div>
                            <label for="new_password" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-lock text-green-600 mr-2"></i>New Password
                            </label>
                            <input type="password" 
                                   id="new_password" 
                                   name="new_password" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" 
                                   placeholder="Enter new password">
                        </div>

                        <!-- Confirm New Password -->
                        <div>
                            <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-lock text-green-600 mr-2"></i>Confirm New Password
                            </label>
                            <input type="password" 
                                   id="confirm_password" 
                                   name="confirm_password" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" 
                                   placeholder="Confirm new password">
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex justify-end space-x-4 mt-8 pt-6 border-t border-gray-200">
                    <a href="{{ url_for('member_dashboard') }}" 
                       class="px-6 py-3 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </a>
                    <button type="submit" 
                            class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
                        <i class="fas fa-save mr-2"></i>Update Profile
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Password strength indicator
document.getElementById('new_password').addEventListener('input', function() {
    const password = this.value;
    const confirmPassword = document.getElementById('confirm_password');
    
    // Simple password strength check
    if (password.length >= 6) {
        this.classList.remove('border-red-300');
        this.classList.add('border-green-300');
    } else {
        this.classList.remove('border-green-300');
        this.classList.add('border-red-300');
    }
    
    // Check password match
    if (confirmPassword.value && password !== confirmPassword.value) {
        confirmPassword.classList.remove('border-green-300');
        confirmPassword.classList.add('border-red-300');
    } else if (confirmPassword.value) {
        confirmPassword.classList.remove('border-red-300');
        confirmPassword.classList.add('border-green-300');
    }
});

// Confirm password match
document.getElementById('confirm_password').addEventListener('input', function() {
    const password = document.getElementById('new_password').value;
    const confirmPassword = this.value;
    
    if (password !== confirmPassword) {
        this.classList.remove('border-green-300');
        this.classList.add('border-red-300');
    } else {
        this.classList.remove('border-red-300');
        this.classList.add('border-green-300');
    }
});
</script>
{% endblock %}