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

{% block title %}{% if object %}Edit Profile{% else %}Create Profile{% endif %} - {{ object.user.get_full_name|default:object.user.username|default:'New 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;
    }
    
    .avatar-preview:hover {
        border-color: #667eea;
        transform: scale(1.05);
    }
    
    .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;
    }
    
    .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-row-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }
    
    .textarea-resize {
        resize: vertical;
        min-height: 100px;
    }
    
    .date-input {
        position: relative;
    }
    
    .manager-search {
        position: relative;
    }
    
    .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
    }
    
    .search-result-item {
        padding: 0.75rem 1rem;
        cursor: pointer;
        border-bottom: 1px solid #f8f9fa;
        transition: background-color 0.2s ease;
    }
    
    .search-result-item:hover {
        background-color: #f8f9fa;
    }
    
    .search-result-item:last-child {
        border-bottom: none;
    }
    
    @media (max-width: 768px) {
        .form-container {
            padding: 1rem;
        }
        
        .form-header {
            padding: 1.5rem;
        }
        
        .form-card {
            padding: 1.5rem;
        }
        
        .form-row,
        .form-row-3 {
            grid-template-columns: 1fr;
        }
        
        .avatar-preview {
            width: 120px;
            height: 120px;
        }
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="form-container">
    <!-- Form Header -->
    <div class="form-header">
        <h1 class="mb-2">
            <i class="fe fe-{% if object %}edit-2{% else %}user-plus{% endif %} me-2"></i>
            {% if object %}Edit Profile{% else %}Create Profile{% endif %}
        </h1>
        <p class="mb-0 opacity-75">
            {% if object %}
                Update profile information for {{ object.user.get_full_name|default:object.user.username }}
            {% else %}
                Create a new user profile
            {% endif %}
        </p>
    </div>
    
    <form method="post" enctype="multipart/form-data" id="profile-form">
        {% csrf_token %}
        
        <!-- Avatar Upload -->
        <div class="form-card">
            <div class="avatar-upload">
                <img src="{% if object.avatar %}{{ object.avatar.url }}{% else %}/static/images/default-avatar.png{% endif %}" 
                     alt="Profile Avatar" class="avatar-preview" id="avatar-preview">
                <div>
                    <label for="id_avatar" class="upload-btn">
                        <i class="fe fe-camera me-2"></i>Change Avatar
                    </label>
                    <input type="file" id="id_avatar" name="avatar" accept="image/*" style="display: none;">
                </div>
                <div class="help-text mt-2">Upload a profile picture (JPG, PNG, max 5MB)</div>
            </div>
        </div>
        
        <!-- Personal Information -->
        <div class="form-card">
            <h5 class="section-title">
                <i class="fe fe-user text-primary"></i>
                Personal Information
            </h5>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="id_first_name" class="form-label required-field">First Name</label>
                    <input type="text" class="form-control" id="id_first_name" name="first_name" 
                           value="{{ form.first_name.value|default:'' }}" required>
                    {% if form.first_name.errors %}
                        <div class="error-message">{{ form.first_name.errors.0 }}</div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="id_last_name" class="form-label required-field">Last Name</label>
                    <input type="text" class="form-control" id="id_last_name" name="last_name" 
                           value="{{ form.last_name.value|default:'' }}" required>
                    {% if form.last_name.errors %}
                        <div class="error-message">{{ form.last_name.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="id_phone" class="form-label">Phone Number</label>
                    <input type="tel" class="form-control" id="id_phone" name="phone" 
                           value="{{ form.phone.value|default:'' }}" placeholder="+1 (555) 123-4567">
                    {% if form.phone.errors %}
                        <div class="error-message">{{ form.phone.errors.0 }}</div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="id_date_of_birth" class="form-label">Date of Birth</label>
                    <div class="date-input">
                        <input type="date" class="form-control" id="id_date_of_birth" name="date_of_birth" 
                               value="{{ form.date_of_birth.value|date:'Y-m-d'|default:'' }}">
                    </div>
                    {% if form.date_of_birth.errors %}
                        <div class="error-message">{{ form.date_of_birth.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="form-group">
                <label for="id_address" class="form-label">Address</label>
                <textarea class="form-control textarea-resize" id="id_address" name="address" 
                          rows="3" placeholder="Enter full address">{{ form.address.value|default:'' }}</textarea>
                {% if form.address.errors %}
                    <div class="error-message">{{ form.address.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="id_bio" class="form-label">Bio</label>
                <textarea class="form-control textarea-resize" id="id_bio" name="bio" 
                          rows="4" placeholder="Tell us about yourself...">{{ form.bio.value|default:'' }}</textarea>
                <div class="help-text">Brief description about yourself (max 500 characters)</div>
                {% if form.bio.errors %}
                    <div class="error-message">{{ form.bio.errors.0 }}</div>
                {% endif %}
            </div>
        </div>
        
        <!-- Professional Information -->
        <div class="form-card">
            <h5 class="section-title">
                <i class="fe fe-briefcase text-success"></i>
                Professional Information
            </h5>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="id_role" class="form-label">Role</label>
                    <select class="form-select" id="id_role" name="role">
                        <option value="">Select a role...</option>
                        {% for role in roles %}
                            <option value="{{ role.pk }}" {% if form.role.value == role.pk %}selected{% endif %}>
                                {{ role.name }}
                            </option>
                        {% endfor %}
                    </select>
                    {% if form.role.errors %}
                        <div class="error-message">{{ form.role.errors.0 }}</div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="id_department" class="form-label">Department</label>
                    <select class="form-select" id="id_department" name="department">
                        <option value="">Select a department...</option>
                        {% for department in departments %}
                            <option value="{{ department.pk }}" {% if form.department.value == department.pk %}selected{% endif %}>
                                {{ department.name }}
                            </option>
                        {% endfor %}
                    </select>
                    {% if form.department.errors %}
                        <div class="error-message">{{ form.department.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="id_employee_id" class="form-label">Employee ID</label>
                    <input type="text" class="form-control" id="id_employee_id" name="employee_id" 
                           value="{{ form.employee_id.value|default:'' }}" placeholder="EMP001">
                    {% if form.employee_id.errors %}
                        <div class="error-message">{{ form.employee_id.errors.0 }}</div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="id_hire_date" class="form-label">Hire Date</label>
                    <input type="date" class="form-control" id="id_hire_date" name="hire_date" 
                           value="{{ form.hire_date.value|date:'Y-m-d'|default:'' }}">
                    {% if form.hire_date.errors %}
                        <div class="error-message">{{ form.hire_date.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="form-group">
                <label for="id_manager" class="form-label">Manager</label>
                <div class="manager-search">
                    <input type="text" class="form-control" id="manager-search" 
                           placeholder="Search for a manager..." autocomplete="off">
                    <input type="hidden" id="id_manager" name="manager" 
                           value="{{ form.manager.value|default:'' }}">
                    <div class="search-results" id="manager-results"></div>
                </div>
                <div class="help-text">Start typing to search for a manager</div>
                {% if form.manager.errors %}
                    <div class="error-message">{{ form.manager.errors.0 }}</div>
                {% endif %}
                
                <!-- Selected Manager Display -->
                <div id="selected-manager" class="mt-2" style="display: none;">
                    <div class="d-flex align-items-center gap-2 p-2 bg-light rounded">
                        <img src="" alt="" class="rounded-circle" width="30" height="30" id="selected-manager-avatar">
                        <span id="selected-manager-name"></span>
                        <button type="button" class="btn btn-sm btn-outline-danger ms-auto" id="remove-manager">
                            <i class="fe fe-x"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Form Actions -->
        <div class="form-card">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <a href="{% if object %}{% url 'accounts:profile_detail' object.pk %}{% else %}{% url 'accounts:profile_list' %}{% endif %}" 
                   class="btn btn-secondary">
                    <i class="fe fe-arrow-left me-2"></i>Cancel
                </a>
                
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-primary" id="preview-btn">
                        <i class="fe fe-eye me-2"></i>Preview
                    </button>
                    <button type="submit" class="btn btn-primary" id="save-btn">
                        <i class="fe fe-save me-2"></i>
                        {% if object %}Update Profile{% else %}Create Profile{% endif %}
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Profile Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="preview-content">
                <!-- Preview content will be populated here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('profile-form').submit();">
                    Save Profile
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Avatar upload preview
    const avatarInput = document.getElementById('id_avatar');
    const avatarPreview = document.getElementById('avatar-preview');
    
    avatarInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                avatarPreview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
    
    // Manager search functionality
    const managerSearch = document.getElementById('manager-search');
    const managerResults = document.getElementById('manager-results');
    const managerInput = document.getElementById('id_manager');
    const selectedManager = document.getElementById('selected-manager');
    const selectedManagerAvatar = document.getElementById('selected-manager-avatar');
    const selectedManagerName = document.getElementById('selected-manager-name');
    const removeManagerBtn = document.getElementById('remove-manager');
    
    let searchTimeout;
    
    managerSearch.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        if (query.length < 2) {
            managerResults.style.display = 'none';
            return;
        }
        
        searchTimeout = setTimeout(() => {
            searchManagers(query);
        }, 300);
    });
    
    function searchManagers(query) {
        fetch(`/accounts/api/search-managers/?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                managerResults.innerHTML = '';
                
                if (data.results && data.results.length > 0) {
                    data.results.forEach(manager => {
                        const item = document.createElement('div');
                        item.className = 'search-result-item';
                        item.innerHTML = `
                            <div class="d-flex align-items-center gap-2">
                                <img src="${manager.avatar || '/static/images/default-avatar.png'}" 
                                     alt="${manager.name}" class="rounded-circle" width="30" height="30">
                                <div>
                                    <strong>${manager.name}</strong>
                                    <div class="text-muted small">${manager.email}</div>
                                </div>
                            </div>
                        `;
                        
                        item.addEventListener('click', () => {
                            selectManager(manager);
                        });
                        
                        managerResults.appendChild(item);
                    });
                    
                    managerResults.style.display = 'block';
                } else {
                    managerResults.innerHTML = '<div class="search-result-item text-muted">No managers found</div>';
                    managerResults.style.display = 'block';
                }
            })
            .catch(error => {
                console.error('Error searching managers:', error);
                managerResults.style.display = 'none';
            });
    }
    
    function selectManager(manager) {
        managerInput.value = manager.id;
        managerSearch.value = manager.name;
        selectedManagerAvatar.src = manager.avatar || '/static/images/default-avatar.png';
        selectedManagerName.textContent = manager.name;
        selectedManager.style.display = 'block';
        managerResults.style.display = 'none';
    }
    
    removeManagerBtn.addEventListener('click', function() {
        managerInput.value = '';
        managerSearch.value = '';
        selectedManager.style.display = 'none';
    });
    
    // Hide search results when clicking outside
    document.addEventListener('click', function(e) {
        if (!managerSearch.contains(e.target) && !managerResults.contains(e.target)) {
            managerResults.style.display = 'none';
        }
    });
    
    // Bio character counter
    const bioTextarea = document.getElementById('id_bio');
    const bioHelp = bioTextarea.nextElementSibling;
    
    bioTextarea.addEventListener('input', function() {
        const length = this.value.length;
        const maxLength = 500;
        const remaining = maxLength - length;
        
        if (remaining < 0) {
            bioHelp.textContent = `Exceeded by ${Math.abs(remaining)} characters`;
            bioHelp.className = 'error-message';
        } else {
            bioHelp.textContent = `Brief description about yourself (${remaining} characters remaining)`;
            bioHelp.className = 'help-text';
        }
    });
    
    // Form validation
    const form = document.getElementById('profile-form');
    
    form.addEventListener('submit', function(e) {
        const requiredFields = form.querySelectorAll('[required]');
        let isValid = true;
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            alert('Please fill in all required fields.');
        }
    });
    
    // Preview functionality
    const previewBtn = document.getElementById('preview-btn');
    const previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
    const previewContent = document.getElementById('preview-content');
    
    previewBtn.addEventListener('click', function() {
        const formData = new FormData(form);
        const preview = generatePreview(formData);
        previewContent.innerHTML = preview;
        previewModal.show();
    });
    
    function generatePreview(formData) {
        const firstName = formData.get('first_name') || 'Not provided';
        const lastName = formData.get('last_name') || 'Not provided';
        const phone = formData.get('phone') || 'Not provided';
        const address = formData.get('address') || 'Not provided';
        const bio = formData.get('bio') || 'Not provided';
        const employeeId = formData.get('employee_id') || 'Not provided';
        
        return `
            <div class="row">
                <div class="col-md-4 text-center">
                    <img src="${avatarPreview.src}" alt="Avatar" class="rounded-circle" width="120" height="120">
                    <h5 class="mt-3">${firstName} ${lastName}</h5>
                </div>
                <div class="col-md-8">
                    <h6>Personal Information</h6>
                    <p><strong>Name:</strong> ${firstName} ${lastName}</p>
                    <p><strong>Phone:</strong> ${phone}</p>
                    <p><strong>Address:</strong> ${address}</p>
                    <p><strong>Bio:</strong> ${bio}</p>
                    
                    <h6 class="mt-4">Professional Information</h6>
                    <p><strong>Employee ID:</strong> ${employeeId}</p>
                </div>
            </div>
        `;
    }
    
    // Initialize Select2 for role and department selects
    if (typeof $ !== 'undefined' && $.fn.select2) {
        $('#id_role, #id_department').select2({
            theme: 'bootstrap-5',
            placeholder: 'Select an option...',
            allowClear: true
        });
    }
});
</script>
{% endblock extra_js %}