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

{% block title %}Create User{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-user-plus me-2"></i>Create New User
                    </h4>
                    <div class="card-tools">
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        <div class="row">
                            <div class="col-md-6">
                                <h5>Basic Information</h5>

                                <div class="mb-3">
                                    <label for="username" class="form-label">Username *</label>
                                    <input type="text" class="form-control" id="username" name="username" required>
                                    <div class="form-text">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</div>
                                </div>

                                <div class="mb-3">
                                    <label for="first_name" class="form-label">First Name</label>
                                    <input type="text" class="form-control" id="first_name" name="first_name">
                                </div>

                                <div class="mb-3">
                                    <label for="last_name" class="form-label">Last Name</label>
                                    <input type="text" class="form-control" id="last_name" name="last_name">
                                </div>

                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" name="email">
                                </div>

                                <div class="mb-3">
                                    <label for="password" class="form-label">Password *</label>
                                    <input type="password" class="form-control" id="password" name="password" required>
                                    <div class="form-text">Minimum 8 characters</div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <h5>Additional Information</h5>

                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone</label>
                                    <input type="tel" class="form-control" id="phone" name="phone">
                                </div>

                                <div class="mb-3">
                                    <label for="department" class="form-label">Department</label>
                                    <input type="text" class="form-control" id="department" name="department">
                                </div>

                                <div class="mb-3">
                                    <label for="position" class="form-label">Position</label>
                                    <input type="text" class="form-control" id="position" name="position">
                                </div>

                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                                        <label class="form-check-label" for="is_active">
                                            Active Account
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <h5>Assign Roles</h5>
                                <div class="mb-3">
                                    {% if roles %}
                                        {% for role in roles %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="role_{{ role.id }}" name="roles" value="{{ role.id }}">
                                                <label class="form-check-label" for="role_{{ role.id }}">
                                                    {{ role.name }}
                                                    <br>
                                                    <small class="text-muted">{{ role.description|default:"" }}</small>
                                                </label>
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <p class="text-muted">No roles available. You can assign roles later.</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Create User
                                </button>
                                <a href="{% url 'accounts:user_list' %}" class="btn btn-secondary">
                                    <i class="fas fa-times me-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Help & Guidelines</h5>
                </div>
                <div class="card-body">
                    <h6>User Creation Guidelines:</h6>
                    <ul class="small">
                        <li>Username must be unique</li>
                        <li>Email should be valid for password recovery</li>
                        <li>Password must be at least 8 characters</li>
                        <li>Assign appropriate roles based on user responsibilities</li>
                        <li>Inactive users cannot log in</li>
                    </ul>

                    <h6>Role Assignment:</h6>
                    <p class="small">Select roles that match the user's job responsibilities. Users can have multiple roles.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Password validation
    const passwordInput = document.getElementById('password');
    const submitBtn = document.querySelector('button[type="submit"]');

    passwordInput.addEventListener('input', function() {
        if (this.value.length < 8) {
            this.classList.add('is-invalid');
            this.classList.remove('is-valid');
        } else {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        }
    });

    // Form validation
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const password = passwordInput.value;
        if (password.length < 8) {
            e.preventDefault();
            alert('Password must be at least 8 characters long.');
            return false;
        }
    });
});
</script>
{% endblock %}