{% extends 'base.html' %}
{% load static %}

{% block title %}Edit Profile - HAVEN GRAZURI ADVANCE{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <div class="max-w-4xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- Page header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-semibold text-gray-900">Edit Profile</h1>
                    <p class="mt-2 text-sm text-gray-700">
                        Update your personal information and profile settings.
                    </p>
                </div>
                <a href="{% url 'users:profile' %}" 
                   class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    <span>←</span>
                    Back to Profile
                </a>
            </div>
        </div>

        <form method="post" enctype="multipart/form-data" class="space-y-8">
            {% csrf_token %}
            
            <!-- Profile Image Section -->
            <div class="bg-white shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <span>📷</span>
                        Profile Image
                    </h3>
                    
                    <div class="flex items-center space-x-6">
                        <div class="shrink-0">
                            <img id="profile-preview" class="h-24 w-24 object-cover rounded-full border-2 border-gray-300" 
                                 src="{{ user.get_profile_image_url }}" alt="Profile image">
                        </div>
                        <div class="flex-1">
                            <div class="space-y-4">
                                <div>
                                    <label for="profile_image" class="block text-sm font-medium text-gray-700">
                                        Upload New Profile Image
                                    </label>
                                    <div class="mt-1">
                                        <input type="file" name="profile_image" id="profile_image" accept="image/*"
                                               onchange="previewImage(this)"
                                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-dark">
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">
                                        PNG, JPG, GIF up to 5MB. Image will be resized to 300x300px.
                                    </p>
                                </div>
                                
                                {% if user.profile_image %}
                                <div class="flex items-center">
                                    <input type="checkbox" name="remove_profile_image" value="true" id="remove_image"
                                           class="rounded border-gray-300 text-primary focus:ring-primary">
                                    <label for="remove_image" class="ml-2 text-sm text-gray-700">
                                        Remove current profile image
                                    </label>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Basic Information -->
            <div class="bg-white shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <span>👤</span>
                        Basic Information
                    </h3>
                    
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div>
                            <label for="first_name" class="block text-sm font-medium text-gray-700">First Name</label>
                            <input type="text" name="first_name" id="first_name" value="{{ user.first_name }}"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                        </div>
                        
                        <div>
                            <label for="last_name" class="block text-sm font-medium text-gray-700">Last Name</label>
                            <input type="text" name="last_name" id="last_name" value="{{ user.last_name }}"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                        </div>
                        
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                            <input type="email" name="email" id="email" value="{{ user.email }}"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                        </div>
                        
                        <div>
                            <label for="phone_number" class="block text-sm font-medium text-gray-700">Phone Number</label>
                            <input type="tel" name="phone_number" id="phone_number" value="{{ user.phone_number }}"
                                   placeholder="+254XXXXXXXXX"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                        </div>
                    </div>
                    
                    <!-- Role and Status (Read-only) -->
                    <div class="mt-6 pt-6 border-t border-gray-200">
                        <h4 class="text-md font-medium text-gray-900 mb-4">Account Information</h4>
                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Role</label>
                                <div class="mt-1 px-3 py-2 bg-gray-50 border border-gray-300 rounded-md text-sm text-gray-900">
                                    {{ user.get_role_display }}
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Status</label>
                                <div class="mt-1 px-3 py-2 bg-gray-50 border border-gray-300 rounded-md text-sm">
                                    <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                                        {% if user.status == 'active' %}bg-green-100 text-green-800
                                        {% elif user.status == 'inactive' %}bg-gray-100 text-gray-800
                                        {% elif user.status == 'suspended' %}bg-red-100 text-red-800
                                        {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                                        {{ user.get_status_display }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end space-x-3">
                <a href="{% url 'users:profile' %}"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    Cancel
                </a>
                <button type="submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    <span>💾</span>
                    Update Profile
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function previewImage(input) {
    const preview = document.getElementById('profile-preview');
    
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            preview.src = e.target.result;
        };
        
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
{% endblock %}