<div class="modal fade" id="addUserModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="handlers/create_user.php" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="username" class="form-label">Username *</label>
                    <input type="text" name="username" id="username" class="form-control" placeholder="Enter username" required>
                    <small class="form-text text-muted">Username must be unique</small>
                </div>
                
                <div class="mb-3">
                    <label for="email" class="form-label">Email Address *</label>
                    <input type="email" name="email" id="email" class="form-control" placeholder="Enter email address" required>
                    <small class="form-text text-muted">Email must be unique</small>
                </div>
                
                <div class="mb-3">
                    <label for="password" class="form-label">Password *</label>
                    <div class="input-group">
                        <input type="password" name="password" id="password" class="form-control" placeholder="Enter password" required>
                        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('password')">
                            <i class="fa fa-eye" id="password-icon"></i>
                        </button>
                    </div>
                    <small class="form-text text-muted">Minimum 6 characters recommended</small>
                </div>
                
                <div class="mb-3">
                    <label for="confirm_password" class="form-label">Confirm Password *</label>
                    <div class="input-group">
                        <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Confirm password" required>
                        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('confirm_password')">
                            <i class="fa fa-eye" id="confirm_password-icon"></i>
                        </button>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="role_id" class="form-label">Assign Role *</label>
                    <select name="role_id" id="role_id" class="form-select" required>
                        <option value="">Choose a role</option>
                        <?php
                        $roles = $conn->query("SELECT id, name FROM roles ORDER BY name");
                        while ($role = $roles->fetch_assoc()) {
                            echo "<option value='{$role['id']}'>{$role['name']}</option>";
                        }
                        ?>
                    </select>
                    <small class="form-text text-muted">Role determines user permissions</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Create User</button>
            </div>
        </form>
    </div>
</div>

<script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + '-icon');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.className = 'fa fa-eye-slash';
    } else {
        field.type = 'password';
        icon.className = 'fa fa-eye';
    }
}

// Password confirmation validation
document.getElementById('addUserModal').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!');
        return false;
    }
    
    if (password.length < 6) {
        e.preventDefault();
        alert('Password must be at least 6 characters long!');
        return false;
    }
});
</script>
