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

{% block title %}
    {% if form.instance.pk %}
        Edit {{ form.instance.get_full_name|default:form.instance.email }}
    {% else %}
        Create New User
    {% endif %} - Ad-tlas
{% endblock %}

{% block breadcrumb_items %}
    <li class="breadcrumb-item"><a href="{% url 'accounts:user_list' %}">Users</a></li>
    {% if form.instance.pk %}
        <li class="breadcrumb-item"><a href="{% url 'accounts:user_detail' form.instance.pk %}">{{ form.instance.get_full_name|default:form.instance.email }}</a></li>
        <li class="breadcrumb-item active">Edit</li>
    {% else %}
        <li class="breadcrumb-item active">Create User</li>
    {% endif %}
{% endblock %}

{% block page_title %}
    {% if form.instance.pk %}
        <i class="fas fa-user-edit me-2"></i>Edit User
    {% else %}
        <i class="fas fa-user-plus me-2"></i>Create New User
    {% endif %}
{% endblock %}

{% block page_actions %}
    <div class="btn-group" role="group">
        <a href="{% url 'accounts:user_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Back to List
        </a>
        {% if form.instance.pk %}
            <a href="{% url 'accounts:user_detail' form.instance.pk %}" class="btn btn-outline-info">
                <i class="fas fa-eye me-1"></i>View Details
            </a>
        {% endif %}
    </div>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <form method="post" enctype="multipart/form-data" id="userForm" novalidate>
            {% csrf_token %}
            
            <!-- Basic Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-user me-2"></i>Basic Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Avatar Upload -->
                        {% if form.avatar %}
                            <div class="col-12 mb-4">
                                <div class="text-center">
                                    <div class="mb-3">
                                        {% if form.instance.avatar %}
                                            <img src="{{ form.instance.avatar.url }}" alt="Current Avatar" 
                                                 class="rounded-circle" width="100" height="100" id="avatarPreview">
                                        {% else %}
                                            <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mx-auto" 
                                                 style="width: 100px; height: 100px;" id="avatarPreview">
                                                <i class="fas fa-user fa-2x text-white"></i>
                                            </div>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="{{ form.avatar.id_for_label }}" class="form-label">{{ form.avatar.label }}</label>
                                        {{ form.avatar }}
                                        {% if form.avatar.help_text %}
                                            <div class="form-text">{{ form.avatar.help_text }}</div>
                                        {% endif %}
                                        {% if form.avatar.errors %}
                                            <div class="invalid-feedback d-block">
                                                {% for error in form.avatar.errors %}
                                                    {{ error }}
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        
                        <!-- Email -->
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.email.id_for_label }}" class="form-label required">{{ form.email.label }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                {{ form.email }}
                            </div>
                            {% if form.email.help_text %}
                                <div class="form-text">{{ form.email.help_text }}</div>
                            {% endif %}
                            {% if form.email.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.email.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Username (if exists) -->
                        {% if form.username %}
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.username.id_for_label }}" class="form-label">{{ form.username.label }}</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-at"></i></span>
                                    {{ form.username }}
                                </div>
                                {% if form.username.help_text %}
                                    <div class="form-text">{{ form.username.help_text }}</div>
                                {% endif %}
                                {% if form.username.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.username.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        
                        <!-- First Name -->
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.first_name.id_for_label }}" class="form-label">{{ form.first_name.label }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                {{ form.first_name }}
                            </div>
                            {% if form.first_name.help_text %}
                                <div class="form-text">{{ form.first_name.help_text }}</div>
                            {% endif %}
                            {% if form.first_name.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.first_name.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Last Name -->
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.last_name.id_for_label }}" class="form-label">{{ form.last_name.label }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                {{ form.last_name }}
                            </div>
                            {% if form.last_name.help_text %}
                                <div class="form-text">{{ form.last_name.help_text }}</div>
                            {% endif %}
                            {% if form.last_name.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.last_name.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Password Section (for new users or password change) -->
            {% if form.password1 or form.password2 %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-lock me-2"></i>
                            {% if form.instance.pk %}
                                Change Password
                            {% else %}
                                Set Password
                            {% endif %}
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if form.instance.pk %}
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                Leave password fields empty to keep the current password.
                            </div>
                        {% endif %}
                        
                        <div class="row">
                            <!-- Password 1 -->
                            {% if form.password1 %}
                                <div class="col-md-6 mb-3">
                                    <label for="{{ form.password1.id_for_label }}" class="form-label {% if not form.instance.pk %}required{% endif %}">{{ form.password1.label }}</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                                        {{ form.password1 }}
                                        <button class="btn btn-outline-secondary" type="button" id="togglePassword1">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    {% if form.password1.help_text %}
                                        <div class="form-text">{{ form.password1.help_text }}</div>
                                    {% endif %}
                                    {% if form.password1.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.password1.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                            
                            <!-- Password 2 -->
                            {% if form.password2 %}
                                <div class="col-md-6 mb-3">
                                    <label for="{{ form.password2.id_for_label }}" class="form-label {% if not form.instance.pk %}required{% endif %}">{{ form.password2.label }}</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                                        {{ form.password2 }}
                                        <button class="btn btn-outline-secondary" type="button" id="togglePassword2">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    {% if form.password2.help_text %}
                                        <div class="form-text">{{ form.password2.help_text }}</div>
                                    {% endif %}
                                    {% if form.password2.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.password2.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Password Strength Indicator -->
                        <div id="passwordStrength" class="mt-2" style="display: none;">
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                            <small class="form-text">Password strength: <span id="strengthText">Weak</span></small>
                        </div>
                    </div>
                </div>
            {% endif %}
            
            <!-- Contact Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-address-card me-2"></i>Contact Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Phone -->
                        {% if form.phone %}
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.phone.id_for_label }}" class="form-label">{{ form.phone.label }}</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                    {{ form.phone }}
                                </div>
                                {% if form.phone.help_text %}
                                    <div class="form-text">{{ form.phone.help_text }}</div>
                                {% endif %}
                                {% if form.phone.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.phone.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        
                        <!-- Website -->
                        {% if form.website %}
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.website.id_for_label }}" class="form-label">{{ form.website.label }}</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-globe"></i></span>
                                    {{ form.website }}
                                </div>
                                {% if form.website.help_text %}
                                    <div class="form-text">{{ form.website.help_text }}</div>
                                {% endif %}
                                {% if form.website.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.website.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        
                        <!-- Address -->
                        {% if form.address %}
                            <div class="col-12 mb-3">
                                <label for="{{ form.address.id_for_label }}" class="form-label">{{ form.address.label }}</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                    {{ form.address }}
                                </div>
                                {% if form.address.help_text %}
                                    <div class="form-text">{{ form.address.help_text }}</div>
                                {% endif %}
                                {% if form.address.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.address.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        
                        <!-- Bio -->
                        {% if form.bio %}
                            <div class="col-12 mb-3">
                                <label for="{{ form.bio.id_for_label }}" class="form-label">{{ form.bio.label }}</label>
                                {{ form.bio }}
                                {% if form.bio.help_text %}
                                    <div class="form-text">{{ form.bio.help_text }}</div>
                                {% endif %}
                                {% if form.bio.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.bio.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Permissions & Status (Staff only) -->
            {% if user.is_staff %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-shield-alt me-2"></i>Permissions & Status
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Status Checkboxes -->
                            <div class="col-md-6 mb-3">
                                <h6 class="text-muted mb-3">Account Status</h6>
                                
                                {% if form.is_active %}
                                    <div class="form-check mb-2">
                                        {{ form.is_active }}
                                        <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                            {{ form.is_active.label }}
                                        </label>
                                        {% if form.is_active.help_text %}
                                            <div class="form-text">{{ form.is_active.help_text }}</div>
                                        {% endif %}
                                        {% if form.is_active.errors %}
                                            <div class="invalid-feedback d-block">
                                                {% for error in form.is_active.errors %}
                                                    {{ error }}
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                                
                                {% if form.is_staff %}
                                    <div class="form-check mb-2">
                                        {{ form.is_staff }}
                                        <label class="form-check-label" for="{{ form.is_staff.id_for_label }}">
                                            {{ form.is_staff.label }}
                                        </label>
                                        {% if form.is_staff.help_text %}
                                            <div class="form-text">{{ form.is_staff.help_text }}</div>
                                        {% endif %}
                                        {% if form.is_staff.errors %}
                                            <div class="invalid-feedback d-block">
                                                {% for error in form.is_staff.errors %}
                                                    {{ error }}
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                                
                                {% if form.is_superuser and user.is_superuser %}
                                    <div class="form-check mb-2">
                                        {{ form.is_superuser }}
                                        <label class="form-check-label" for="{{ form.is_superuser.id_for_label }}">
                                            {{ form.is_superuser.label }}
                                        </label>
                                        {% if form.is_superuser.help_text %}
                                            <div class="form-text">{{ form.is_superuser.help_text }}</div>
                                        {% endif %}
                                        {% if form.is_superuser.errors %}
                                            <div class="invalid-feedback d-block">
                                                {% for error in form.is_superuser.errors %}
                                                    {{ error }}
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <!-- Groups -->
                            {% if form.groups %}
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-muted mb-3">Groups</h6>
                                    {{ form.groups }}
                                    {% if form.groups.help_text %}
                                        <div class="form-text">{{ form.groups.help_text }}</div>
                                    {% endif %}
                                    {% if form.groups.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.groups.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endif %}
            
            <!-- Form Actions -->
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{% url 'accounts:user_list' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i>Cancel
                            </a>
                        </div>
                        
                        <div>
                            {% if form.instance.pk %}
                                <button type="submit" class="btn btn-primary" id="saveBtn">
                                    <i class="fas fa-save me-1"></i>Update User
                                </button>
                            {% else %}
                                <button type="submit" class="btn btn-success" id="saveBtn">
                                    <i class="fas fa-plus me-1"></i>Create User
                                </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.required::after {
    content: ' *';
    color: #dc3545;
}

.form-control:invalid {
    border-color: #dc3545;
}

.form-control:valid {
    border-color: #198754;
}

#avatarPreview {
    transition: all 0.3s ease;
}

#avatarPreview:hover {
    transform: scale(1.05);
}
</style>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Avatar preview
    $('#id_avatar').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#avatarPreview').html(`<img src="${e.target.result}" alt="Avatar Preview" class="rounded-circle" width="100" height="100">`);
            };
            reader.readAsDataURL(file);
        }
    });
    
    // Password toggle
    $('#togglePassword1').click(function() {
        const passwordField = $('#id_password1');
        const icon = $(this).find('i');
        
        if (passwordField.attr('type') === 'password') {
            passwordField.attr('type', 'text');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            passwordField.attr('type', 'password');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });
    
    $('#togglePassword2').click(function() {
        const passwordField = $('#id_password2');
        const icon = $(this).find('i');
        
        if (passwordField.attr('type') === 'password') {
            passwordField.attr('type', 'text');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            passwordField.attr('type', 'password');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });
    
    // Password strength checker
    $('#id_password1').on('input', function() {
        const password = $(this).val();
        if (password.length > 0) {
            $('#passwordStrength').show();
            const strength = checkPasswordStrength(password);
            updatePasswordStrengthUI(strength);
        } else {
            $('#passwordStrength').hide();
        }
    });
    
    function checkPasswordStrength(password) {
        let score = 0;
        
        // Length check
        if (password.length >= 8) score += 1;
        if (password.length >= 12) score += 1;
        
        // Character variety checks
        if (/[a-z]/.test(password)) score += 1;
        if (/[A-Z]/.test(password)) score += 1;
        if (/[0-9]/.test(password)) score += 1;
        if (/[^A-Za-z0-9]/.test(password)) score += 1;
        
        return score;
    }
    
    function updatePasswordStrengthUI(score) {
        const progressBar = $('#passwordStrength .progress-bar');
        const strengthText = $('#strengthText');
        
        let width, color, text;
        
        if (score <= 2) {
            width = '25%';
            color = 'bg-danger';
            text = 'Weak';
        } else if (score <= 4) {
            width = '50%';
            color = 'bg-warning';
            text = 'Fair';
        } else if (score <= 5) {
            width = '75%';
            color = 'bg-info';
            text = 'Good';
        } else {
            width = '100%';
            color = 'bg-success';
            text = 'Strong';
        }
        
        progressBar.removeClass('bg-danger bg-warning bg-info bg-success')
                  .addClass(color)
                  .css('width', width);
        strengthText.text(text);
    }
    
    // Form validation
    $('#userForm').on('submit', function(e) {
        let isValid = true;
        
        // Check required fields
        $(this).find('[required]').each(function() {
            if (!$(this).val()) {
                isValid = false;
                $(this).addClass('is-invalid');
            } else {
                $(this).removeClass('is-invalid').addClass('is-valid');
            }
        });
        
        // Email validation
        const email = $('#id_email').val();
        if (email && !isValidEmail(email)) {
            isValid = false;
            $('#id_email').addClass('is-invalid');
        }
        
        // Password confirmation
        const password1 = $('#id_password1').val();
        const password2 = $('#id_password2').val();
        if (password1 && password2 && password1 !== password2) {
            isValid = false;
            $('#id_password2').addClass('is-invalid');
        }
        
        if (!isValid) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $('.is-invalid').first().offset().top - 100
            }, 500);
        } else {
            // Show loading state
            $('#saveBtn').prop('disabled', true)
                        .html('<i class="fas fa-spinner fa-spin me-1"></i>Saving...');
        }
    });
    
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    
    // Real-time validation
    $('input, textarea, select').on('blur', function() {
        if ($(this).attr('required') && !$(this).val()) {
            $(this).addClass('is-invalid');
        } else {
            $(this).removeClass('is-invalid').addClass('is-valid');
        }
    });
    
    // Email validation on blur
    $('#id_email').on('blur', function() {
        const email = $(this).val();
        if (email && !isValidEmail(email)) {
            $(this).addClass('is-invalid');
        }
    });
});
</script>
{% endblock %}