<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Team Members</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <style>
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .alert.member-clicked {
            text-decoration-line: line-through;
            background-color: #ddd;
            border-color: #ddd;
        }

        .alert.member-absent {
            text-decoration-line: line-through;
            background-color: #f8d7da;
            border-color: #f8d7da;
        }

        .copyright {
            margin-top: 10px;
            margin-right: 10px;
            text-align: right;
        }

        .form-inline.form-members .input-group {
            display: inline-table;
            vertical-align: middle;
        }

        .form-inline.form-members .input-group .input-group-btn {
            width: auto;
        }

        h2 {
            margin-bottom: 20px;
        }
    </style>

</head>

<body>
    <center>

        <div class="container">
            <h2 class="text text-success text-center">My Team Members</h2>
            <div id="memberlist" class="row">

            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-4">
                    <h3>Team 1</h3>
                    <div class="column" id="listteam1">

                    </div>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <h3>Team 2</h3>
                    <div class="column" id="listteam2">

                    </div>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <h3>Team 3</h3>
                    <div class="column" id="listteam3">

                    </div>
                </div>
            </div>
            <footer class="footer">
                <div class="container">
                    <!-- Input for members -->
                    <div class="form-inline form-members">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Add member" id="text" value="Alasdair Mckee">
                            <div class="input-group-btn">
                                <button class="btn btn-success btn-addmember"><i class="glyphicon glyphicon-plus"></i></button>
                            </div>
                        </div>
                        <button class="btn btn-success" data-team="team1"><i class="glyphicon glyphicon-plus"></i> Team1</button>
                        <button class="btn btn-success" data-team="team2"><i class="glyphicon glyphicon-plus"></i> Team2</button>
                        <button class="btn btn-success" data-team="team3"><i class="glyphicon glyphicon-plus"></i> Team3</button>
                    </div>

                    <div class="form-group hidden">
                        <label for="exampleFormControlTextarea1">Team1</label>
                        <textarea class="form-control" id="team1" rows="9">
                Bentley Parrish
                Hunter Pineda
                Ammar Burks
                Tanya Vang
                Aimie Ewing
                Anabella Chan
                Amayah Sparks
                Priyanka Cooke
                Boyd Pacheco
                Mai Lynch
            </textarea>

                        <label for="exampleFormControlTextarea1">Team2</label>
                        <textarea class="form-control" id="team2" rows="9">
                Alan Rangel
                Ikra Knowles
                Chelsea Avalos
                Aysha Glenn
                Margaret Couch
                Effie Corbett
                Yassin Arias
                Caspian Rice
            </textarea>

                        <label for="exampleFormControlTextarea1">Team3</label>
                        <textarea class="form-control" id="team3" rows="9">
                Armani Curran
                Monica Kemp
                Nur Davis
                Hashir Dodson
                Ty Hagan
                Aariz Rowley
            </textarea>
                    </div>

                </div>
                <p class="copyright">Created by: Me • <a href="mailto:[email protected]">[email protected]</a> • ver 1.5</p>
            </footer>

    </center>
    <script>
        $(document).ready(function() {


            var memberList1 = $("#listteam1");
            var memberList2 = $("#listteam2");
            var memberList3 = $("#listteam3");




            memberList.on("click", ".alert", function() {
                $(this).toggleClass("member-clicked");
            });

            memberList.on("click", ".close", function() {
                var memberColumn = $(this).parent().parent();
                memberColumn.fadeOut();
            });

            $(".btn-addmember").click(function() {
                var newMember = $("#text").val().trim();
                if (newMember) {
                    addMember(newMember);
                } else {
                    alert("Please, enter the name of the member");
                }
                $("#text").val("");
            });

            $(".btn[data-team]").click(function() {
                addTeam($(this).data("team"));
            });

            function addMember(member, list) {
                member = member.trim();
                if (member) {
                    $("#list" + list).append(
                        `<div class="alert alert-success">` +
                        `<span class="close" aria-label="close">&times;</span><b>` +
                        member +
                        `</b></div>`
                    );
                }
            }

            function addTeam(id) {
                var team = $("#" + id)
                    .val()
                    .trim();
                if (team) {
                    var members = team.split("\n");
                    console.log(members);
                    for (var i = 0; i < members.length; i++) {
                        addMember(members[i], id);
                    }
                }
            }

            $(document).on('dblclick', '.alert', function() {
                $(this).toggleClass("member-absent");
            });
        });
    </script>
</body>

</html>