{% extends "base.html" %}

{% block title %}Add User - QuantumQuickSales{% endblock %}

{% block page_title %}Add New User{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">User Information</h6>
            </div>
            <div class="card-body">
                <form method="POST">
                    <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">Unique username for login</div>
                    </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">Secure password for the user</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label">Confirm Password *</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                        <div class="form-text">Re-enter the password to confirm</div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">User Access Level *</label>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="is_admin" id="regular_user" value="0" checked>
                            <label class="form-check-label" for="regular_user">
                                <i class="fas fa-user text-primary me-2"></i>
                                <strong>Regular User</strong>
                            </label>
                            <div class="form-text ms-4">
                                • Create and manage invoices<br>
                                • Search invoice history<br>
                                • Delete own invoices (within 5 minutes)<br>
                                • View product catalog
                            </div>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="is_admin" id="admin_user" value="1">
                            <label class="form-check-label" for="admin_user">
                                <i class="fas fa-user-shield text-danger me-2"></i>
                                <strong>Administrator</strong>
                            </label>
                            <div class="form-text ms-4">
                                • All regular user permissions<br>
                                • Manage products and inventory<br>
                                • Manage users and access levels<br>
                                • View all invoices and reports<br>
                                • System configuration
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Important:</strong> Admin users have full system access. Choose carefully!
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('admin_users') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Users
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Add User
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.querySelector('form').addEventListener('submit', function(e) {
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (password !== confirmPassword) {
        e.preventDefault();
        alert('Passwords do not match! Please try again.');
        return false;
    }
    
    if (password.length < 6) {
        e.preventDefault();
        alert('Password must be at least 6 characters long!');
        return false;
    }
    
    const isAdmin = document.querySelector('input[name="is_admin"]:checked').value;
    if (isAdmin === '1') {
        if (!confirm('Are you sure you want to create an admin user? Admin users have full system access.')) {
            e.preventDefault();
            return false;
        }
    }
});
</script>
{% endblock %}