<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
        <title>Workshop</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="section">
                <div class="row">
                    <div class="col s12">
                        <div class="row">
                            <div class="col s12 m9" style="background-color: whitesmoke;">
                                <p class="flow-text" style="text-align: center; padding: 10px;"> Welcome to you personalized workshop, this is where you can add/create/modify 
                                    alot of the items and functions in your site. These modals will walk you through what basic info you will need
                                    in order to further expand on your site.</p>
                            </div>
                            <div class="col s12 m3" style="background-color: aliceblue;">
                                <div class="col s6 m6 m-2">
                                    <a class="btn elevated green modal-trigger" href="#modal1" style="width: 100%;">Add Group</a>
                                </div>
                                <div class="col s6 m6 m-2">
                                    <button class="btn elevated orange" style="width: 100%;">Add Item</button>
                                </div>
                                <div class="col s6 m6 m-2">
                                    <button class="btn elevated blue" style="width: 100%;">Add Shopping List</button>
                                </div>
                                <div class="col s6 m6 m-2">
                                    <button class="btn elevated purple" style="width: 100%;">Add Recipe</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="modal1" class="modal">
            <div class="modal-content">
                <h4>Adding a Group...</h4>
                <div class="row">
                    <div class="col s12">
                        <div class="card-panel">
                            <span class="blue-text">Groups are internal "grouping" of items that can be of the same type, tag, process, etc. The point of them is that you
                                can keep track of all of one thing in a list for quick reference.</span>
                        </div>
                    </div>
                    <div class="col s12 m6 input-field outlined p-2">
                        <input id="group_name" type="text" placeholder=" " maxlength="64">
                        <label for="group_name">Group Name</label>
                        <!--<span class="supporting-text">Supporting Text</span>-->
                    </div>
                    <div class="input-field col s12 m6 p-2">
                        <select id="group_type">
                            <option value="plain" selected>Plain Group</option>
                            <option value="exclusive">Exclusive Group</option>
                            <option value="inclusive">Inclusive Group</option>
                        </select>
                        <label for="group_type">Group Type</label>
                    </div>                          
                    <div class="input-field col s12 p-2">
                        <textarea id="group_description" class="materialize-textarea" placeholder="A short description for what this group represents..."></textarea>
                        <label for="group_description">Group Description</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <a onclick="addGroup()" class="waves-effect btn">Add</a>
            </div>
        </div>

    </body>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.modal');
            var instances = M.Modal.init(elems, {
              // specify options here
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('select');
            var instances = M.FormSelect.init(elems, {
              // specify options here
            });
        });

        function addGroup(){
            var name = document.getElementById("group_name").value
            var description = document.getElementById("group_description").value
            var type = document.getElementById("group_type").value

            const url = new URL('/addGroup', window.location.origin);
            url.searchParams.append('name', name);
            url.searchParams.append('description', description);
            url.searchParams.append('type', type);

            fetch(url)
            .then(response => response.json())
            .then(data => {
                console.log(data)
            })
        }

    </script>
</html>