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

{% block title %}Edit My Profile{% endblock title %}

{% block extra_css %}
<style>
    .form-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }
    
    .form-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        padding: 2rem;
        color: white;
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .form-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
    }
    
    .section-title {
        color: #495057;
        font-weight: 600;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e9ecef;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .avatar-upload {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .avatar-preview {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        border: 5px solid #e9ecef;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .avatar-preview:hover {
        border-color: #667eea;
        transform: scale(1.05);
    }
    
    .avatar-placeholder {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #f8f9fa;
        border: 5px solid #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: #6c757d;
        margin: 0 auto 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .avatar-placeholder:hover {
        border-color: #667eea;
        transform: scale(1.05);
        background: #e9ecef;
    }
    
    .upload-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 25px;
        padding: 0.75rem 2rem;
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .upload-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        color: white;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }
    
    .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .form-select {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        padding: 0.75rem 1rem;
    }
    
    .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 8px;
        padding: 0.75rem 2rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }
    
    .btn-secondary {
        border-radius: 8px;
        padding: 0.75rem 2rem;
        font-weight: 600;
    }
    
    .required-field::after {
        content: ' *';
        color: #dc3545;
    }
    
    .help-text {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }
    
    .error-message {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    
    .form-check {
        margin-bottom: 1rem;
    }
    
    .form-check-input:checked {
        background-color: #667eea;
        border-color: #667eea;
    }
    
    .form-check-input:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .loading-spinner {
        display: none;
        width: 20px;
        height: 20px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-left: 10px;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    @media (max-width: 768px) {
        .form-container {
            padding: 1rem;
        }
        
        .form-card {
            padding: 1.5rem;
        }
        
        .form-row {
            grid-template-columns: 1fr;
        }
        
        .avatar-preview,
        .avatar-placeholder {
            width: 120px;
            height: 120px;
        }
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="form-container">
    <!-- Form Header -->
    <div class="form-header">
        <h1 class="mb-2">Edit My Profile</h1>
        <p class="mb-0 opacity-75">Update your personal information and preferences</p>
    </div>

    <form method="post" enctype="multipart/form-data" id="profileForm">
        {% csrf_token %}
        
        <!-- Avatar Section -->
        <div class="form-card">
            <h3 class="section-title">
                <i class="fe fe-image"></i>
                Profile Picture
            </h3>
            
            <div class="avatar-upload">
                {% if profile.avatar %}
                    <img src="{{ profile.avatar.url }}" alt="Current Avatar" class="avatar-preview" id="avatarPreview" onclick="document.getElementById('id_avatar').click()">
                {% else %}
                    <div class="avatar-placeholder" id="avatarPreview" onclick="document.getElementById('id_avatar').click()">
                        <i class="fe fe-user"></i>
                    </div>
                {% endif %}
                
                <div>
                    <input type="file" id="id_avatar" name="avatar" accept="image/*" style="display: none;" onchange="previewAvatar(this)">
                    <button type="button" class="btn upload-btn" onclick="document.getElementById('id_avatar').click()">
                        <i class="fe fe-upload me-2"></i>Choose Photo
                    </button>
                    {% if profile.avatar %}
                        <button type="button" class="btn btn-outline-danger ms-2" onclick="removeAvatar()">
                            <i class="fe fe-trash-2 me-2"></i>Remove
                        </button>
                    {% endif %}
                </div>
                <div class="help-text mt-2">Recommended: Square image, at least 200x200 pixels</div>
            </div>
        </div>

        <!-- Personal Information -->
        <div class="form-card">
            <h3 class="section-title">
                <i class="fe fe-user"></i>
                Personal Information
            </h3>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="id_first_name" class="form-label">First Name</label>
                    <input type="text" class="form-control" id="id_first_name" name="first_name" value="{{ user_obj.first_name }}">
                </div>
                
                <div class="form-group">
                    <label for="id_last_name" class="form-label">Last Name</label>
                    <input type="text" class="form-control" id="id_last_name" name="last_name" value="{{ user_obj.last_name }}">
                </div>
                
                <div class="form-group">
                    <label for="id_phone_number" class="form-label">Phone Number</label>
                    <input type="text" class="form-control" id="id_phone_number" name="phone_number" value="{{ user_obj.phone_number }}" placeholder="Phone Number">
                    <div class="help-text">Optional contact phone number</div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="id_email" class="form-label">Email Address</label>
                <input type="email" class="form-control" id="id_email" name="email" value="{{ user_obj.email }}" readonly>
                <div class="help-text">Contact support to change your email address</div>
            </div>
            
            <div class="form-group">
                <label for="id_birth_date" class="form-label">Birth Date</label>
                <input type="date" class="form-control" id="id_birth_date" name="birth_date" value="{{ profile.birth_date|date:'Y-m-d' }}">
            </div>
            
            <div class="form-group">
                <label for="id_bio" class="form-label">Biography</label>
                <textarea class="form-control" id="id_bio" name="bio" rows="4" maxlength="500">{{ profile.bio }}</textarea>
                <div class="help-text">Tell us about yourself (max 500 characters)</div>
            </div>
        </div>

        <!-- Professional Information -->
        <div class="form-card">
            <h3 class="section-title">
                <i class="fe fe-briefcase"></i>
                Professional Information
            </h3>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="id_job_title" class="form-label">Job Title</label>
                    <input type="text" class="form-control" id="id_job_title" name="job_title" value="{{ profile.job_title }}">
                </div>
                
                <div class="form-group">
                    <label for="id_company" class="form-label">Company</label>
                    <input type="text" class="form-control" id="id_company" name="company" value="{{ profile.company }}">
                </div>
            </div>
            
            <div class="form-group">
                <label for="id_website" class="form-label">Website</label>
                <input type="url" class="form-control" id="id_website" name="website" value="{{ profile.website }}" placeholder="https://">
            </div>
        </div>

        <!-- Preferences -->
        <div class="form-card">
            <h3 class="section-title">
                <i class="fe fe-settings"></i>
                Preferences
            </h3>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="id_timezone" class="form-label">Timezone</label>
                    <select class="form-select" id="id_timezone" name="timezone">
                        <option value="UTC" {% if profile.timezone == 'UTC' %}selected{% endif %}>UTC</option>
                        <option value="America/New_York" {% if profile.timezone == 'America/New_York' %}selected{% endif %}>Eastern Time</option>
                        <option value="America/Chicago" {% if profile.timezone == 'America/Chicago' %}selected{% endif %}>Central Time</option>
                        <option value="America/Denver" {% if profile.timezone == 'America/Denver' %}selected{% endif %}>Mountain Time</option>
                        <option value="America/Los_Angeles" {% if profile.timezone == 'America/Los_Angeles' %}selected{% endif %}>Pacific Time</option>
                        <option value="Europe/London" {% if profile.timezone == 'Europe/London' %}selected{% endif %}>London</option>
                        <option value="Europe/Paris" {% if profile.timezone == 'Europe/Paris' %}selected{% endif %}>Paris</option>
                        <option value="Asia/Tokyo" {% if profile.timezone == 'Asia/Tokyo' %}selected{% endif %}>Tokyo</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="id_language" class="form-label">Language</label>
                    <select class="form-select" id="id_language" name="language">
                        <option value="en" {% if profile.language == 'en' %}selected{% endif %}>English</option>
                        <option value="es" {% if profile.language == 'es' %}selected{% endif %}>Spanish</option>
                        <option value="fr" {% if profile.language == 'fr' %}selected{% endif %}>French</option>
                        <option value="de" {% if profile.language == 'de' %}selected{% endif %}>German</option>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="id_theme" class="form-label">Theme</label>
                    <select class="form-select" id="id_theme" name="theme">
                        <option value="light" {% if profile.theme == 'light' %}selected{% endif %}>Light</option>
                        <option value="dark" {% if profile.theme == 'dark' %}selected{% endif %}>Dark</option>
                        <option value="auto" {% if profile.theme == 'auto' %}selected{% endif %}>Auto (System)</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="id_profile_visibility" class="form-label">Profile Visibility</label>
                    <select class="form-select" id="id_profile_visibility" name="profile_visibility">
                        <option value="public" {% if profile.profile_visibility == 'public' %}selected{% endif %}>Public</option>
                        <option value="private" {% if profile.profile_visibility == 'private' %}selected{% endif %}>Private</option>
                        <option value="contacts" {% if profile.profile_visibility == 'contacts' %}selected{% endif %}>Contacts Only</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Notification Settings -->
        <div class="form-card">
            <h3 class="section-title">
                <i class="fe fe-bell"></i>
                Notification Settings
            </h3>
            
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="id_email_notifications" name="email_notifications" {% if profile.email_notifications %}checked{% endif %}>
                <label class="form-check-label" for="id_email_notifications">
                    Email Notifications
                </label>
                <div class="help-text">Receive notifications via email</div>
            </div>
            
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="id_sms_notifications" name="sms_notifications" {% if profile.sms_notifications %}checked{% endif %}>
                <label class="form-check-label" for="id_sms_notifications">
                    SMS Notifications
                </label>
                <div class="help-text">Receive notifications via SMS</div>
            </div>
            
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="id_notifications_enabled" name="notifications_enabled" {% if profile.notifications_enabled %}checked{% endif %}>
                <label class="form-check-label" for="id_notifications_enabled">
                    General Notifications
                </label>
                <div class="help-text">Enable all notifications</div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="form-card">
            <div class="d-flex justify-content-between align-items-center">
                <a href="{% url 'accounts:current_profile' %}" class="btn btn-secondary">
                    <i class="fe fe-arrow-left me-2"></i>Cancel
                </a>
                
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="fe fe-save me-2"></i>Save Changes
                    <div class="loading-spinner" id="loadingSpinner"></div>
                </button>
            </div>
        </div>
    </form>
</div>

<script>
// Avatar preview functionality
function previewAvatar(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const preview = document.getElementById('avatarPreview');
            
            if (preview.tagName === 'IMG') {
                preview.src = e.target.result;
            } else {
                // Replace placeholder div with img
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = 'Avatar Preview';
                img.className = 'avatar-preview';
                img.id = 'avatarPreview';
                img.onclick = function() { document.getElementById('id_avatar').click(); };
                
                preview.parentNode.replaceChild(img, preview);
            }
        };
        
        reader.readAsDataURL(input.files[0]);
    }
}

// Remove avatar functionality
function removeAvatar() {
    const preview = document.getElementById('avatarPreview');
    const fileInput = document.getElementById('id_avatar');
    
    // Clear file input
    fileInput.value = '';
    
    // Replace img with placeholder
    if (preview.tagName === 'IMG') {
        const placeholder = document.createElement('div');
        placeholder.className = 'avatar-placeholder';
        placeholder.id = 'avatarPreview';
        placeholder.onclick = function() { document.getElementById('id_avatar').click(); };
        placeholder.innerHTML = '<i class="fe fe-user"></i>';
        
        preview.parentNode.replaceChild(placeholder, preview);
    }
}

// Form submission with loading state
document.getElementById('profileForm').addEventListener('submit', function() {
    const submitBtn = document.getElementById('submitBtn');
    const spinner = document.getElementById('loadingSpinner');
    
    submitBtn.disabled = true;
    spinner.style.display = 'inline-block';
    submitBtn.innerHTML = '<i class="fe fe-save me-2"></i>Saving...<div class="loading-spinner" style="display: inline-block; margin-left: 10px;"></div>';
});

// Character counter for bio
document.getElementById('id_bio').addEventListener('input', function() {
    const maxLength = 500;
    const currentLength = this.value.length;
    const helpText = this.nextElementSibling;
    
    helpText.textContent = `Tell us about yourself (${currentLength}/${maxLength} characters)`;
    
    if (currentLength > maxLength) {
        helpText.style.color = '#dc3545';
    } else {
        helpText.style.color = '#6c757d';
    }
});
</script>
{% endblock content %}