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

{% block title %}{% if object %}Edit User{% else %}Add User{% endif %} - User Management{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'accounts:user_list' %}">Users</a></li>
    <li class="breadcrumb-item active">{% if object %}Edit User{% else %}Add User{% endif %}</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    {% if object %}Edit User{% else %}Add New User{% endif %}
    <small>{% if object %}{{ object.get_full_name }}{% else %}User Management{% endif %}</small>
</h1>
<!-- END page-header -->

<form method="post" enctype="multipart/form-data" id="user-form">
    {% csrf_token %}
    
    <div class="row">
        <div class="col-xl-8">
            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">User Information</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Username <span class="text-danger">*</span></label>
                                {{ form.username }}
                                {% if form.username.errors %}
                                <div class="text-danger">{{ form.username.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                <div class="text-danger">{{ form.email.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">First Name <span class="text-danger">*</span></label>
                                {{ form.first_name }}
                                {% if form.first_name.errors %}
                                <div class="text-danger">{{ form.first_name.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Last Name <span class="text-danger">*</span></label>
                                {{ form.last_name }}
                                {% if form.last_name.errors %}
                                <div class="text-danger">{{ form.last_name.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    {% if not object %}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Password <span class="text-danger">*</span></label>
                                {{ form.password1 }}
                                {% if form.password1.errors %}
                                <div class="text-danger">{{ form.password1.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                {{ form.password2 }}
                                {% if form.password2.errors %}
                                <div class="text-danger">{{ form.password2.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            <!-- END panel -->

            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Permissions & Groups</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Groups</label>
                                {{ form.groups }}
                                {% if form.groups.errors %}
                                <div class="text-danger">{{ form.groups.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    {{ form.is_staff }}
                                    <label class="form-check-label" for="{{ form.is_staff.id_for_label }}">
                                        Staff Status
                                    </label>
                                </div>
                                <div class="form-check">
                                    {{ form.is_active }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        Active
                                    </label>
                                </div>
                                {% if user.is_superuser %}
                                <div class="form-check">
                                    {{ form.is_superuser }}
                                    <label class="form-check-label" for="{{ form.is_superuser.id_for_label }}">
                                        Superuser Status
                                    </label>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    {% if user.is_superuser %}
                    <div class="mb-3">
                        <label class="form-label">User Permissions</label>
                        {{ form.user_permissions }}
                        {% if form.user_permissions.errors %}
                        <div class="text-danger">{{ form.user_permissions.errors.0 }}</div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
            <!-- END panel -->
        </div>

        <div class="col-xl-4">
            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Form Actions</h4>
                </div>
                <div class="panel-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fa fa-save me-2"></i>
                            {% if object %}Update User{% else %}Create User{% endif %}
                        </button>
                        
                        {% if object %}
                        <button type="submit" name="save_and_continue" class="btn btn-success">
                            <i class="fa fa-save me-2"></i>Save & Continue Editing
                        </button>
                        {% else %}
                        <button type="submit" name="save_and_add_another" class="btn btn-info">
                            <i class="fa fa-plus me-2"></i>Save & Add Another
                        </button>
                        {% endif %}
                        
                        <a href="{% if object %}{% url 'accounts:user_detail' object.pk %}{% else %}{% url 'accounts:user_list' %}{% endif %}" class="btn btn-secondary">
                            <i class="fa fa-times me-2"></i>Cancel
                        </a>
                        
                        {% if object %}
                        <hr>
                        <a href="{% url 'accounts:user_delete' object.pk %}" class="btn btn-danger">
                            <i class="fa fa-trash me-2"></i>Delete User
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- END panel -->

            {% if object %}
            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">User Information</h4>
                </div>
                <div class="panel-body">
                    <table class="table table-borderless">
                        <tr>
                            <td class="fw-bold">Date Joined:</td>
                            <td>{{ object.date_joined|date:"M d, Y" }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Last Login:</td>
                            <td>{{ object.last_login|date:"M d, Y H:i"|default:"Never" }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Status:</td>
                            <td>
                                <span class="badge bg-{{ object.is_active|yesno:'success,danger' }}">
                                    {{ object.is_active|yesno:'Active,Inactive' }}
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- END panel -->
            {% endif %}
        </div>
    </div>
</form>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Form validation
    $('#user-form').on('submit', function(e) {
        var isValid = true;
        var errors = [];
        
        // Required field validation
        if (!$('#id_username').val().trim()) {
            errors.push('Username is required');
            isValid = false;
        }
        
        if (!$('#id_email').val().trim()) {
            errors.push('Email is required');
            isValid = false;
        }
        
        if (!$('#id_first_name').val().trim()) {
            errors.push('First name is required');
            isValid = false;
        }
        
        if (!$('#id_last_name').val().trim()) {
            errors.push('Last name is required');
            isValid = false;
        }
        
        {% if not object %}
        // Password validation for new users
        var password1 = $('#id_password1').val();
        var password2 = $('#id_password2').val();
        
        if (!password1) {
            errors.push('Password is required');
            isValid = false;
        } else if (password1 !== password2) {
            errors.push('Passwords do not match');
            isValid = false;
        }
        {% endif %}
        
        if (!isValid) {
            e.preventDefault();
            toastr.error('Please correct the following errors:<br>' + errors.join('<br>'));
        }
    });
});
</script>
{% endblock %}