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

{% block title %}Profile Settings - Savly Admin{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Profile Settings</h1>
                <p class="mt-2 text-gray-600">Manage your account information and preferences</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ url_for('admin_dashboard') }}" 
                   class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200">
                    <i class="fas fa-arrow-left mr-2 h-4 w-4"></i>
                    Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="mb-6 p-4 rounded-lg {% if category == 'error' %}bg-red-50 border border-red-200 text-red-700{% else %}bg-green-50 border border-green-200 text-green-700{% endif %}">
                    <div class="flex items-center">
                        <i class="fas {% if category == 'error' %}fa-exclamation-triangle text-red-500{% else %}fa-check-circle text-green-500{% endif %} mr-2"></i>
                        {{ message }}
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Profile Information Card -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-user-edit mr-2 text-blue-600"></i>
                        Profile Information
                    </h2>
                </div>
                
                <form method="POST" action="{{ url_for('admin_profile_settings') }}" class="p-6 space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Full Name -->
                        <div>
                            <label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-user mr-1 text-gray-400"></i>
                                Full Name
                            </label>
                            <input type="text" 
                                   id="full_name" 
                                   name="full_name" 
                                   value="{{ current_user.full_name or '' }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                                   required>
                        </div>

                        <!-- Custom ID -->
                        <div>
                            <label for="custom_id" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-id-badge mr-1 text-gray-400"></i>
                                Custom ID
                            </label>
                            <input type="text" 
                                   id="custom_id" 
                                   name="custom_id" 
                                   value="{{ current_user.custom_id or '' }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-500"
                                   readonly>
                            <p class="mt-1 text-xs text-gray-500">Custom ID cannot be changed</p>
                        </div>

                        <!-- Username -->
                        <div>
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-at mr-1 text-gray-400"></i>
                                Username
                            </label>
                            <input type="text" 
                                   id="username" 
                                   name="username" 
                                   value="{{ current_user.username or '' }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                                   required>
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-envelope mr-1 text-gray-400"></i>
                                Email Address
                            </label>
                            <input type="email" 
                                   id="email" 
                                   name="email" 
                                   value="{{ current_user.email or '' }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
                        </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 mr-1 text-gray-400"></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-blue-500 focus:border-blue-500 transition-colors duration-200"
                                   placeholder="+1 (555) 123-4567">
                        </div>
                    </div>

                    <!-- Update Profile Button -->
                    <div class="flex justify-end pt-4 border-t border-gray-200">
                        <button type="submit" 
                                name="action" 
                                value="update_profile"
                                class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-purple-700 focus:ring-2 focus:ring-blue-500 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                            <i class="fas fa-save mr-2 h-4 w-4"></i>
                            Update Profile
                        </button>
                    </div>
                </form>
            </div>

            <!-- Password Change Card -->
            <div class="mt-8 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-red-50 to-orange-50 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-lock mr-2 text-red-600"></i>
                        Change Password
                    </h2>
                </div>
                
                <form method="POST" action="{{ url_for('admin_profile_settings') }}" class="p-6 space-y-6">
                    <div class="space-y-4">
                        <!-- Current Password -->
                        <div>
                            <label for="current_password" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-key mr-1 text-gray-400"></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-red-500 focus:border-red-500 transition-colors duration-200"
                                   required>
                        </div>

                        <!-- New Password -->
                        <div>
                            <label for="new_password" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-shield-alt mr-1 text-gray-400"></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-red-500 focus:border-red-500 transition-colors duration-200"
                                   minlength="6"
                                   required>
                            <p class="mt-1 text-xs text-gray-500">Password must be at least 6 characters long</p>
                        </div>

                        <!-- Confirm New Password -->
                        <div>
                            <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-check-double mr-1 text-gray-400"></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-red-500 focus:border-red-500 transition-colors duration-200"
                                   required>
                        </div>
                    </div>

                    <!-- Change Password Button -->
                    <div class="flex justify-end pt-4 border-t border-gray-200">
                        <button type="submit" 
                                name="action" 
                                value="change_password"
                                class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-red-600 to-orange-600 text-white font-medium rounded-lg hover:from-red-700 hover:to-orange-700 focus:ring-2 focus:ring-red-500 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                            <i class="fas fa-lock mr-2 h-4 w-4"></i>
                            Change Password
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Profile Summary Sidebar -->
        <div class="space-y-6">
            <!-- Profile Card -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-green-50 to-blue-50 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-id-card mr-2 text-green-600"></i>
                        Profile Summary
                    </h3>
                </div>
                
                <div class="p-6">
                    <div class="flex items-center space-x-4 mb-6">
                        <div class="h-16 w-16 rounded-xl bg-gradient-to-br from-blue-500 via-purple-500 to-indigo-600 flex items-center justify-center shadow-lg">
                            <span class="text-white text-xl font-bold">{{ current_user.full_name[0] if current_user.full_name else 'A' }}</span>
                        </div>
                        <div>
                            <h4 class="text-lg font-semibold text-gray-900">{{ current_user.full_name or 'Admin User' }}</h4>
                            <p class="text-sm text-gray-600">{{ current_user.email or 'No email set' }}</p>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Role</span>
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
                                {{ 'Super Admin' if current_user.is_superadmin else 'Group Admin' }}
                            </span>
                        </div>
                        
                        {% if current_user.custom_id %}
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">ID</span>
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
                                {{ current_user.custom_id }}
                            </span>
                        </div>
                        {% endif %}
                        
                        {% if current_user.group %}
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Group</span>
                            <span class="text-sm font-medium text-gray-900">{{ current_user.group.name }}</span>
                        </div>
                        {% endif %}
                        
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Status</span>
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
                                <i class="fas fa-circle mr-1 text-green-500" style="font-size: 6px;"></i>
                                Active
                            </span>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Member Since</span>
                            <span class="text-sm text-gray-700">{{ current_user.join_date.strftime('%b %Y') if current_user.join_date else 'N/A' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-purple-50 to-pink-50 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-bolt mr-2 text-purple-600"></i>
                        Quick Actions
                    </h3>
                </div>
                
                <div class="p-6 space-y-3">
                    <a href="{{ url_for('admin_analytics_dashboard') }}" 
                       class="flex items-center w-full px-4 py-3 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition-colors duration-200 group">
                        <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-100 text-blue-600 mr-3 group-hover:bg-blue-200">
                            <i class="fas fa-chart-line h-4 w-4"></i>
                        </div>
                        <span class="font-medium">View Analytics</span>
                    </a>
                    
                    <a href="{{ url_for('admin_notification_center') }}" 
                       class="flex items-center w-full px-4 py-3 text-sm text-gray-700 hover:bg-red-50 hover:text-red-700 rounded-lg transition-colors duration-200 group">
                        <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-red-100 text-red-600 mr-3 group-hover:bg-red-200">
                            <i class="fas fa-bell h-4 w-4"></i>
                        </div>
                        <span class="font-medium">Notifications</span>
                    </a>
                    
                    {% if current_user.is_superadmin %}
                    <a href="{{ url_for('superadmin_dashboard') }}" 
                       class="flex items-center w-full px-4 py-3 text-sm text-gray-700 hover:bg-purple-50 hover:text-purple-700 rounded-lg transition-colors duration-200 group">
                        <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-purple-100 text-purple-600 mr-3 group-hover:bg-purple-200">
                            <i class="fas fa-crown h-4 w-4"></i>
                        </div>
                        <span class="font-medium">Super Admin</span>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Password confirmation validation
document.addEventListener('DOMContentLoaded', function() {
    const newPassword = document.getElementById('new_password');
    const confirmPassword = document.getElementById('confirm_password');
    
    function validatePassword() {
        if (newPassword.value !== confirmPassword.value) {
            confirmPassword.setCustomValidity('Passwords do not match');
        } else {
            confirmPassword.setCustomValidity('');
        }
    }
    
    newPassword.addEventListener('input', validatePassword);
    confirmPassword.addEventListener('input', validatePassword);
});
</script>
{% endblock %}