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

{% block title %}Edit Profile - {{ block.super }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">
                    <i class="fas fa-user-edit me-2"></i>Edit Profile
                </h4>
            </div>
            <div class="card-body p-4">
                <form method="post" enctype="multipart/form-data" id="profileForm">
                    {% csrf_token %}
                    
                    {% if form.non_field_errors or profile_form.non_field_errors %}
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            {% for error in form.non_field_errors %}
                                {{ error }}<br>
                            {% endfor %}
                            {% for error in profile_form.non_field_errors %}
                                {{ error }}<br>
                            {% endfor %}
                        </div>
                    {% endif %}
                    
                    <!-- Profile Picture Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="border-bottom pb-2 mb-3">
                                <i class="fas fa-camera me-2"></i>Profile Picture
                            </h5>
                            <div class="row align-items-center">
                                <div class="col-md-3 text-center">
                                    <div class="position-relative d-inline-block">
                                        {% if user.avatar %}
                                            <img src="{{ user.avatar.url }}" alt="Current Avatar" 
                                                 id="avatarPreview" class="rounded-circle" 
                                                 style="width: 120px; height: 120px; object-fit: cover;">
                                        {% else %}
                                            <div id="avatarPreview" class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" 
                                                 style="width: 120px; height: 120px;">
                                                <i class="fas fa-user fa-3x"></i>
                                            </div>
                                        {% endif %}
                                        <button type="button" class="btn btn-sm btn-primary position-absolute bottom-0 end-0 rounded-circle" 
                                                onclick="document.getElementById('{{ form.avatar.id_for_label }}').click()">
                                            <i class="fas fa-camera"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <input type="file" 
                                           class="form-control {% if form.avatar.errors %}is-invalid{% endif %}" 
                                           id="{{ form.avatar.id_for_label }}"
                                           name="{{ form.avatar.name }}"
                                           accept="image/*"
                                           style="display: none;">
                                    <button type="button" class="btn btn-outline-primary me-2" 
                                            onclick="document.getElementById('{{ form.avatar.id_for_label }}').click()">
                                        <i class="fas fa-upload me-1"></i>Choose Photo
                                    </button>
                                    {% if user.avatar %}
                                        <button type="button" class="btn btn-outline-danger" id="removeAvatarBtn">
                                            <i class="fas fa-trash me-1"></i>Remove
                                        </button>
                                    {% endif %}
                                    <div class="form-text mt-2">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Upload a square image (JPG, PNG, GIF). Maximum size: 5MB.
                                    </div>
                                    {% if form.avatar.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.avatar.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Basic Information -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="border-bottom pb-2 mb-3">
                                <i class="fas fa-user me-2"></i>Basic Information
                            </h5>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.first_name.id_for_label }}" class="form-label">
                                <i class="fas fa-user me-1"></i>First Name
                            </label>
                            <input type="text" 
                                   class="form-control {% if form.first_name.errors %}is-invalid{% endif %}" 
                                   id="{{ form.first_name.id_for_label }}"
                                   name="{{ form.first_name.name }}"
                                   value="{{ form.first_name.value|default:'' }}"
                                   placeholder="Enter your first name">
                            {% if form.first_name.errors %}
                                <div class="invalid-feedback">
                                    {{ form.first_name.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.last_name.id_for_label }}" class="form-label">
                                <i class="fas fa-user me-1"></i>Last Name
                            </label>
                            <input type="text" 
                                   class="form-control {% if form.last_name.errors %}is-invalid{% endif %}" 
                                   id="{{ form.last_name.id_for_label }}"
                                   name="{{ form.last_name.name }}"
                                   value="{{ form.last_name.value|default:'' }}"
                                   placeholder="Enter your last name">
                            {% if form.last_name.errors %}
                                <div class="invalid-feedback">
                                    {{ form.last_name.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.email.id_for_label }}" class="form-label">
                                <i class="fas fa-envelope me-1"></i>Email Address
                            </label>
                            <input type="email" 
                                   class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
                                   id="{{ form.email.id_for_label }}"
                                   name="{{ form.email.name }}"
                                   value="{{ form.email.value|default:'' }}"
                                   placeholder="Enter your email address">
                            {% if form.email.errors %}
                                <div class="invalid-feedback">
                                    {{ form.email.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.phone_number.id_for_label }}" class="form-label">
                                <i class="fas fa-phone me-1"></i>Phone Number
                            </label>
                            <input type="tel" 
                                   class="form-control {% if form.phone_number.errors %}is-invalid{% endif %}" 
                                   id="{{ form.phone_number.id_for_label }}"
                                   name="{{ form.phone_number.name }}"
                                   value="{{ form.phone_number.value|default:'' }}"
                                   placeholder="Enter your phone number">
                            {% if form.phone_number.errors %}
                                <div class="invalid-feedback">
                                    {{ form.phone_number.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-12 mb-3">
                            <label for="{{ form.bio.id_for_label }}" class="form-label">
                                <i class="fas fa-align-left me-1"></i>Bio
                            </label>
                            <textarea class="form-control {% if form.bio.errors %}is-invalid{% endif %}" 
                                      id="{{ form.bio.id_for_label }}"
                                      name="{{ form.bio.name }}"
                                      rows="4"
                                      placeholder="Tell us about yourself...">{{ form.bio.value|default:'' }}</textarea>
                            <div class="form-text">
                                <span id="bioCharCount">0</span>/500 characters
                            </div>
                            {% if form.bio.errors %}
                                <div class="invalid-feedback">
                                    {{ form.bio.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Professional Information -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="border-bottom pb-2 mb-3">
                                <i class="fas fa-briefcase me-2"></i>Professional Information
                            </h5>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ profile_form.job_title.id_for_label }}" class="form-label">
                                <i class="fas fa-id-badge me-1"></i>Job Title
                            </label>
                            <input type="text" 
                                   class="form-control {% if profile_form.job_title.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.job_title.id_for_label }}"
                                   name="{{ profile_form.job_title.name }}"
                                   value="{{ profile_form.job_title.value|default:'' }}"
                                   placeholder="e.g., Software Engineer">
                            {% if profile_form.job_title.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.job_title.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ profile_form.company.id_for_label }}" class="form-label">
                                <i class="fas fa-building me-1"></i>Company
                            </label>
                            <input type="text" 
                                   class="form-control {% if profile_form.company.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.company.id_for_label }}"
                                   name="{{ profile_form.company.name }}"
                                   value="{{ profile_form.company.value|default:'' }}"
                                   placeholder="e.g., Adtlas Corporation">
                            {% if profile_form.company.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.company.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ profile_form.department.id_for_label }}" class="form-label">
                                <i class="fas fa-users me-1"></i>Department
                            </label>
                            <input type="text" 
                                   class="form-control {% if profile_form.department.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.department.id_for_label }}"
                                   name="{{ profile_form.department.name }}"
                                   value="{{ profile_form.department.value|default:'' }}"
                                   placeholder="e.g., Engineering">
                            {% if profile_form.department.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.department.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ profile_form.website.id_for_label }}" class="form-label">
                                <i class="fas fa-globe me-1"></i>Website
                            </label>
                            <input type="url" 
                                   class="form-control {% if profile_form.website.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.website.id_for_label }}"
                                   name="{{ profile_form.website.name }}"
                                   value="{{ profile_form.website.value|default:'' }}"
                                   placeholder="https://example.com">
                            {% if profile_form.website.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.website.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-12 mb-3">
                            <label for="{{ profile_form.linkedin.id_for_label }}" class="form-label">
                                <i class="fab fa-linkedin me-1"></i>LinkedIn Profile
                            </label>
                            <input type="url" 
                                   class="form-control {% if profile_form.linkedin.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.linkedin.id_for_label }}"
                                   name="{{ profile_form.linkedin.name }}"
                                   value="{{ profile_form.linkedin.value|default:'' }}"
                                   placeholder="https://linkedin.com/in/username">
                            {% if profile_form.linkedin.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.linkedin.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Location Information -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="border-bottom pb-2 mb-3">
                                <i class="fas fa-map-marker-alt me-2"></i>Location Information
                            </h5>
                        </div>
                        
                        <div class="col-12 mb-3">
                            <label for="{{ profile_form.location_address.id_for_label }}" class="form-label">
                                <i class="fas fa-home me-1"></i>Address
                            </label>
                            <input type="text" 
                                   class="form-control {% if profile_form.location_address.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.location_address.id_for_label }}"
                                   name="{{ profile_form.location_address.name }}"
                                   value="{{ profile_form.location_address.value|default:'' }}"
                                   placeholder="Street address">
                            {% if profile_form.location_address.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.location_address.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ profile_form.location_city.id_for_label }}" class="form-label">
                                <i class="fas fa-city me-1"></i>City
                            </label>
                            <input type="text" 
                                   class="form-control {% if profile_form.location_city.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.location_city.id_for_label }}"
                                   name="{{ profile_form.location_city.name }}"
                                   value="{{ profile_form.location_city.value|default:'' }}"
                                   placeholder="City">
                            {% if profile_form.location_city.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.location_city.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ profile_form.location_state.id_for_label }}" class="form-label">
                                <i class="fas fa-flag me-1"></i>State/Province
                            </label>
                            <input type="text" 
                                   class="form-control {% if profile_form.location_state.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.location_state.id_for_label }}"
                                   name="{{ profile_form.location_state.name }}"
                                   value="{{ profile_form.location_state.value|default:'' }}"
                                   placeholder="State or Province">
                            {% if profile_form.location_state.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.location_state.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ profile_form.location_country.id_for_label }}" class="form-label">
                                <i class="fas fa-globe-americas me-1"></i>Country
                            </label>
                            <input type="text" 
                                   class="form-control {% if profile_form.location_country.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.location_country.id_for_label }}"
                                   name="{{ profile_form.location_country.name }}"
                                   value="{{ profile_form.location_country.value|default:'' }}"
                                   placeholder="Country">
                            {% if profile_form.location_country.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.location_country.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ profile_form.location_postal_code.id_for_label }}" class="form-label">
                                <i class="fas fa-mail-bulk me-1"></i>Postal Code
                            </label>
                            <input type="text" 
                                   class="form-control {% if profile_form.location_postal_code.errors %}is-invalid{% endif %}" 
                                   id="{{ profile_form.location_postal_code.id_for_label }}"
                                   name="{{ profile_form.location_postal_code.name }}"
                                   value="{{ profile_form.location_postal_code.value|default:'' }}"
                                   placeholder="Postal/ZIP code">
                            {% if profile_form.location_postal_code.errors %}
                                <div class="invalid-feedback">
                                    {{ profile_form.location_postal_code.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Preferences -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="border-bottom pb-2 mb-3">
                                <i class="fas fa-cog me-2"></i>Preferences
                            </h5>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.language.id_for_label }}" class="form-label">
                                <i class="fas fa-language me-1"></i>Language
                            </label>
                            <select class="form-select {% if form.language.errors %}is-invalid{% endif %}" 
                                    id="{{ form.language.id_for_label }}"
                                    name="{{ form.language.name }}">
                                {% for value, label in form.language.field.choices %}
                                    <option value="{{ value }}" {% if form.language.value == value %}selected{% endif %}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                            {% if form.language.errors %}
                                <div class="invalid-feedback">
                                    {{ form.language.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.timezone_field.id_for_label }}" class="form-label">
                                <i class="fas fa-clock me-1"></i>Timezone
                            </label>
                            <select class="form-select {% if form.timezone_field.errors %}is-invalid{% endif %}" 
                                    id="{{ form.timezone_field.id_for_label }}"
                                    name="{{ form.timezone_field.name }}">
                                {% for value, label in form.timezone_field.field.choices %}
                                    <option value="{{ value }}" {% if form.timezone_field.value == value %}selected{% endif %}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                            {% if form.timezone_field.errors %}
                                <div class="invalid-feedback">
                                    {{ form.timezone_field.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Form Actions -->
                    <div class="row">
                        <div class="col-12">
                            <hr>
                            <div class="d-flex justify-content-between">
                                <a href="{% url 'accounts:profile' user.username %}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-1"></i>Cancel
                                </a>
                                <button type="submit" class="btn btn-primary" id="saveBtn">
                                    <span class="btn-text">
                                        <i class="fas fa-save me-1"></i>Save Changes
                                    </span>
                                    <span class="btn-loading d-none">
                                        <span class="loading me-2"></span>Saving...
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const profileForm = document.getElementById('profileForm');
    const saveBtn = document.getElementById('saveBtn');
    const avatarInput = document.getElementById('{{ form.avatar.id_for_label }}');
    const avatarPreview = document.getElementById('avatarPreview');
    const bioTextarea = document.getElementById('{{ form.bio.id_for_label }}');
    const bioCharCount = document.getElementById('bioCharCount');
    const removeAvatarBtn = document.getElementById('removeAvatarBtn');
    
    // Avatar preview
    if (avatarInput) {
        avatarInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    if (avatarPreview.tagName === 'IMG') {
                        avatarPreview.src = e.target.result;
                    } else {
                        // Replace div with img
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.alt = 'Avatar Preview';
                        img.id = 'avatarPreview';
                        img.className = 'rounded-circle';
                        img.style.width = '120px';
                        img.style.height = '120px';
                        img.style.objectFit = 'cover';
                        avatarPreview.parentNode.replaceChild(img, avatarPreview);
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }
    
    // Remove avatar
    if (removeAvatarBtn) {
        removeAvatarBtn.addEventListener('click', function() {
            if (confirm('Are you sure you want to remove your profile picture?')) {
                // Create a hidden input to mark avatar for deletion
                const deleteInput = document.createElement('input');
                deleteInput.type = 'hidden';
                deleteInput.name = 'avatar-clear';
                deleteInput.value = 'on';
                profileForm.appendChild(deleteInput);
                
                // Replace image with default avatar
                const defaultAvatar = document.createElement('div');
                defaultAvatar.id = 'avatarPreview';
                defaultAvatar.className = 'bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center';
                defaultAvatar.style.width = '120px';
                defaultAvatar.style.height = '120px';
                defaultAvatar.innerHTML = '<i class="fas fa-user fa-3x"></i>';
                
                avatarPreview.parentNode.replaceChild(defaultAvatar, avatarPreview);
                this.style.display = 'none';
            }
        });
    }
    
    // Bio character count
    if (bioTextarea && bioCharCount) {
        function updateCharCount() {
            const count = bioTextarea.value.length;
            bioCharCount.textContent = count;
            
            if (count > 450) {
                bioCharCount.className = 'text-warning';
            } else if (count > 500) {
                bioCharCount.className = 'text-danger';
            } else {
                bioCharCount.className = 'text-muted';
            }
        }
        
        updateCharCount();
        bioTextarea.addEventListener('input', updateCharCount);
    }
    
    // Form submission with loading state
    profileForm.addEventListener('submit', function(e) {
        const btnText = saveBtn.querySelector('.btn-text');
        const btnLoading = saveBtn.querySelector('.btn-loading');
        
        // Show loading state
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        saveBtn.disabled = true;
        
        // Re-enable button after 15 seconds (in case of slow response)
        setTimeout(function() {
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');
            saveBtn.disabled = false;
        }, 15000);
    });
    
    // Auto-save draft (optional feature)
    let autoSaveTimeout;
    const formInputs = profileForm.querySelectorAll('input, textarea, select');
    
    formInputs.forEach(input => {
        input.addEventListener('input', function() {
            clearTimeout(autoSaveTimeout);
            autoSaveTimeout = setTimeout(function() {
                // Auto-save functionality can be implemented here
                console.log('Auto-saving draft...');
            }, 5000);
        });
    });
    
    // Unsaved changes warning
    let formChanged = false;
    formInputs.forEach(input => {
        input.addEventListener('change', function() {
            formChanged = true;
        });
    });
    
    window.addEventListener('beforeunload', function(e) {
        if (formChanged) {
            e.preventDefault();
            e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
        }
    });
    
    // Reset form changed flag on successful submission
    profileForm.addEventListener('submit', function() {
        formChanged = false;
    });
    
    // Add smooth animations
    const sections = document.querySelectorAll('.row.mb-4');
    sections.forEach((section, index) => {
        section.style.opacity = '0';
        section.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            section.style.opacity = '1';
            section.style.transform = 'translateY(0)';
        }, index * 100);
    });
});
</script>
{% endblock %}