Don’t worry about the widget aspect for now, it adds needless complications and your procedural code can be easily widgetized later. Making your code into a widget is much easier when you know your code basically works.
All referenced CSS pages and JS libraries cannot be directly linked on your template. They need to be enqueued using wp_enqueue_script() and wp_enqueue_style(). Enqueuing script with the 5th parameter set to true causes it to be loaded in the footer. You should even place as much JS code as possible on an external code page and enqueue that as well, specifying any dependencies so everything gets loaded in the right order. Your footer template code should just have a minimal amount of function calls.
Because you are altering your footer template code, you should create a child theme to protect your alterations. All the enqueue calls will go on your child’s functions.php.
If everything is done correctly, you should get functional footer output. In theory at least. Seems like something or things is always preventing immediate success. Once you get proper output, you can look at widgetizing it. It’s probably best to start with an existing default widget that’s roughly similar to what you need. Copy and modify the code as needed for the desired output.
