{% extends 'Admin/base.html.twig' %}
{% block title %}
    OceanExpert | Dashboard
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/responsive.bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-editable.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/nestable.modified.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-editable.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-dialog.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/group.css') }}">
{% endblock %}
{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="wrapper">
            {% include('Group/groupsContent.html.twig') %}
    </div>

    {% include "footer.html.twig" %}

    <script src="{{ asset('js/app.min.js') }}"></script>
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/responsive.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/jquery.nestable.js') }}"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootbox.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-editable.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/wysihtml5-0.3.0.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/wysihtml5.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-tooltip.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/confirm-bootstrap.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-editable.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.select.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-dialog.js') }}" type="text/javascript"></script>
    <script >
        function parseNodes(nodes)
        {
            // takes a nodes array and turns it into a <ol>
            var ol = document.createElement("OL");
            for (var i = 0; i < nodes.length; i++) {
                ol.appendChild(parseNode(nodes[i]));
            }
            return ol;
        }

        function parseNode(node)
        {
            // takes a node object and turns it into a <li>
            var li = document.createElement("LI");
            li.innerHTML = node.groupname;
            li.className = node.class;
            if (node.nodes) {
                li.appendChild(parseNodes(node.nodes));
            }
            return li;
        }

        var obj = '{{ data.groups|raw }}';
        var edit = 0;
        $(document).ready(function()
        {
            //set the top nav menu style
            $(".groups").addClass('navactive');

            var $active = $(".groups");
            $active.addClass('active');
            $active.parents(".treeview-menu").addClass("menu-open").css('display','block');
            $active.parents(".treeview").addClass("active");
            $(".onoffswitch-checkbox").prop("checked",false);
            setTimeout(
                function()
                {
                    $(".dd-handle").first().siblings("button[data-action=expand]").click();
                },
                1000
            );
            Tipped.create('.tipso', {maxWidth: 250});
            var updateOutput = function (e)
            {
                BootstrapDialog.confirm(
                    {
                        title: '<i class="fa fa-fw fa-exclamation-triangle"></i> Confirm',
                        message: 'Are you sure you want to change the group order?',
                        callback: function(result)
                        {
                            if (result) {
                                layout = $nestdata[0].innerHTML;
                                var list = e.length ? e : $(e.target);
                                if (typeof list != 'undefined') {
                                    var tree = list.nestable('serialize');
                                    var order = {
                                        groups: []
                                    };
                                    var process = function(array, parentid)
                                    {
                                        for (var i = 0; i < array.length; i++) {
                                            var node = array[i];
                                            order.groups.push({
                                                "groupId"   : node.id,
                                                "parentId"  : parentid,
                                                "order"     : i
                                            });
                                            if (node.children) {
                                                process(node.children, node.id);
                                            }
                                        }
                                    };
                                    process(
                                        tree,
                                            {{ data.treeGroup }}
                                    );
                                    $.ajax(
                                        {
                                            url: '{{ path('save_group_order') }}',
                                            data: {'order': JSON.stringify(order)},
                                            method: 'post'
                                        }).done(function (response)
                                        {
                                            if (response.status == 1) {
                                                BootstrapDialog.alert(
                                                    {
                                                        type:'TYPE_SUCCESS',
                                                        message:'Group order updated.',
                                                        title:'<i class="fa fa-thumbs-up" aria-hidden="true"></i> Success!'
                                                    }
                                                );
                                            } else {
                                                BootstrapDialog.alert(
                                                    {
                                                        type:'TYPE_DANGER',
                                                        message:'Group order cannot be updated.',
                                                        title:'<i class="fa fa-thumbs-down" aria-hidden="true"></i> Error!'
                                                    }
                                                );
                                            }
                                        }
                                    );
                                }
                            } else {
                                $nestdata[0].innerHTML = layout;
                                $(".actions").css('display','block');
                                $('.dd').nestable('collapseAll');
                                $(".dd-handle").first().siblings("button[data-action=expand]").click();
                                $(".removeGroup").first().hide();
                            }
                        }
                    }
                );
            }

            {% if is_granted('ROLE_MANAGER') %}
            $nestdata =  $('#nestable').nestable({draggable:1}).on('change', updateOutput);
            var layout = $nestdata[0].innerHTML;
            {% else %}
            $('#nestable').nestable();
            {% endif %}

            $('.dd').nestable('collapseAll');
            window.original = $('.dd').html();

            {% if is_granted('ROLE_MANAGER') %}
            $("body").on("click",".addGroup",function (event)
            {
                window.position = $(this);
                var parentGroup = position.parents('.dd-handle').find('.group-name').html();
                var parentGroupId = position.closest('.dd-item').data("id");

                var headingHtml = '<i class="fa fa-fw fa-exclamation-triangle"></i>' +
                    '<span class="modal-heading"> ' +
                    'Are you sure want to add a group under "' +
                    parentGroup +
                    '"?' +
                    '</span>';

                var contentHtml = '<div class="form-horizontal">';
                contentHtml += '<fieldset>';
                contentHtml += '<div class="form-group">';
                contentHtml += '<label class="col-md-3 control-label" for="textinput">' +
                    'Group Name' +
                    '</label>';
                contentHtml += '<div class="col-md-8">';
                contentHtml += '<input ' +
                    'id="groupName" ' +
                    'name="groupName" ' +
                    'type="text" ' +
                    'placeholder="Group Name" ' +
                    'class="form-control input-md">';
                contentHtml += '<input ' +
                    'id="groupId" ' +
                    'name="groupId" ' +
                    'type="hidden" ' +
                    'value="'+parentGroupId+'">';
                contentHtml += '</div>';
                contentHtml += '</div>';
                contentHtml += '</fieldset>';
                contentHtml += '</div>';

                var btnHtml = '<button ' +
                    'type="button" ' +
                    'class="btn btn-success" ' +
                    'id="addGroup" >' +
                    'Add Group' +
                    '</button>';
                btnHtml += '<button ' +
                    'type="button" ' +
                    'class="btn btn-danger" ' +
                    'data-dismiss="modal" >' +
                    'Cancel' +
                    '</button>';
                $(".modal-title").html(headingHtml);
                $(".modal-body").html(contentHtml);
                $(".modal-footer").html(btnHtml);
                $("#modal-edit").modal("show");
            });

            $("body").on("click","#addGroup",function (event)
            {
                var groupname = $("#groupName").val();
                var parentId = $("#groupId").val();
                if ($.trim(groupname) != "") {
                    $.ajax(
                        {
                            url: '{{ path('add_group') }}',
                            data: {
                                'parentId':parentId,
                                'groupname':groupname
                            },
                            method: 'post'
                        }).done(function (response)
                    {
                        if (response.status == 1) {
                            $("#modal-edit").modal("hide");

                            if (position.closest('.dd-handle').siblings('ol').length>0) {
                                var html = "<li class='dd-item' data-id='"+response.childGroup+"'>";
                                html += "<div class='dd-handle'><span class='group-name dd-nodrag'>"+groupname+"</span>";
                                html += "<span href='#' class='pull-right dd-nodrag actions' style='display: block;'>";
                                html += "<span class='tipso' title='Edit "+groupname+" group'><i class='fa fa-eye fa-fw viewGroup'></i></span> ";
                                html += "<span class='tipso' title='Add subgroup in "+groupname+" group'><i class='fa fa-plus fa-fw addGroup'></i></span> ";
                                html += "<span class='tipso' title='Delete "+groupname+" group'><i class='fa fa-minus text-red fa-fw removeGroup'></i><span>";
                                html += "</span>";
                                html += "</div></li>";
                                position.closest('.dd-handle').siblings('ol').prepend(html);
                            } else {
                                var btnHtml = '<button data-action="collapse" type="button">Collapse</button>';
                                btnHtml += '<button data-action="expand" type="button" style="display: none;">Expand</button>';

                                var html    = "<ol class='dd-list'>";
                                html += "<li class='dd-item' data-id='"+response.childGroup+"'>";
                                html += "<div class='dd-handle'><span class='group-name dd-nodrag'>"+groupname+"</span>";
                                html += "<span href='#' class='pull-right dd-nodrag actions' style='display: block;'>";
                                html += "<span class='tipso' title='Edit "+groupname+" group'><i class='fa fa-pencil fa-fw viewGroup'></i></span> ";
                                html += "<span class='tipso' title='Add subgroup in "+groupname+" group'><i class='fa fa-plus fa-fw addGroup'></i></span> ";
                                html += "<span class='tipso' title='Delete "+groupname+" group'><i class='fa fa-minus text-red fa-fw removeGroup'></i><span>";
                                html += "</span>";
                                html += "</div>";
                                html += "</li></ol>";
                                position.closest('.dd-item').prepend(btnHtml);
                                position.closest('.dd-handle').after(html);
                            }
                            layout = $nestdata[0].innerHTML;
                        }
                        $(".removeGroup").first().hide();
                    });
                    Tipped.create('.tipso', {maxWidth: 250});
                } else {
                    return false;
                }
            });

            $("body").on("click",".removeGroup",function (event)
            {
                window.position = $(this);
                var parentGroup = position.parents('.dd-handle').find('.group-name').html();
                var parentGroupId = position.closest('.dd-item').data("id");

                var headingHtml = '<i class="fa fa-fw fa-exclamation-triangle"></i>' +
                    '<span class="modal-heading"> ' +
                    'Are you sure you want to remove group "' +
                    parentGroup +
                    '"?' +
                    '</span>';

                var contentHtml = 'The group "' + parentGroup + '" will be deleted and people will be unlinked from the group.';

                var btnHtml = '<button type="button" class="btn btn-success" id="removeGroup" >Remove Group</button>';
                btnHtml += '<button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>';

                $(".modal-title").html(headingHtml);
                $(".modal-body").html(contentHtml);
                $(".modal-footer").html(btnHtml);
                $("#modal-edit").modal("show");
            });

            $("body").on("click",".viewGroup",function (event)
            {
                window.position = $(this);
                var parentGroupId = position.closest('.dd-item').data("id");
                //var url = "{{ path('view_group', {'id': 'id'}) }}";
                //url = url.replace("id", parentGroupId);
                var url = "{{ path('view_group') }}" + '/' + parentGroupId;
                console.log(url);
                window.location.href = url;
            });

            $("body").on("click","#removeGroup",function (event)
            {
                var groupId = position.closest('.dd-item').data("id");
                $.ajax({
                    url: '{{ path('delete_group') }}',
                    data: {'groupId':groupId},
                    method: 'post'
                }).done(function (data) {
                });

                if (position.closest('.dd-list').children().length < 2) {
                    position.closest('.dd-list').siblings('button').remove()
                    position.closest('.dd-list').remove();
                } else {
                    position.closest('.dd-item').remove();
                }

                $("#modal-edit").modal("hide");
                layout = $nestdata[0].innerHTML;
            });

            $("body").on("click","#editGroup",function (event)
            {
                var groupname = $("#groupName").val();
                position.parents('.dd-handle').find('.group-name').html(groupname);
                $("#modal-edit").modal("hide");
            });

            {% endif %}

            /**
             * redirect the page to the group info when clicking on the name of the group
             */
            $("body").on("click",".group-name",function (event)
            {
                window.position = $(this);
                var parentGroupId = position.closest('.dd-item').data("id");
                //var url = "{{ path('view_group', {"id": "id"}) }}";
                //url = url.replace("id", parentGroupId);
                var url = "{{ path('view_group') }}" + '/' + parentGroupId;
                window.location.href = url;
            });

            $('#nestable-menu').on('click', function(e)
            {
                var target = $(e.target),
                    action = target.data('action');
                if (action === 'expand-all') {
                    $('.dd').nestable('expandAll');
                }
                if (action === 'collapse-all') {
                    $('.dd').nestable('collapseAll');
                    $(".dd-handle").first().siblings("button[data-action=expand]").click();
                }
            });

            $('#edit-group').on('click',function (e)
            {
                if ($(this).is(':checked')){
                    $(".actions").css('display','block');
                    $(".dd-item").bind("touchstart");
                    $(".dd-item").bind("touchstart");
                    edit = 1;
                } else {
                    edit = 0;
                    $(".actions").css('display','none');
                    $(".dd-item").unbind("touchstart");
                    $(".dd-item").unbind('touchstart');
                }
                $(".removeGroup").first().hide();
                $(".dd-item").on("mousedown", function(event) { // mousedown prevent nestable click
                    event.preventDefault();
                    if (edit==0) {
                        return false;
                    } else if(edit==0) {
                        return true;
                    }
                });
            });

            $("#groupFilter").change(function ()
            {
                var id = $(this).val();
                var url = "{{ path('admin_groups', {'id': 'id'}) }}";
                url = url.replace("id", id);
                window.location.href = url;
            });

            $(".dd-item").on("mousedown", function(event)
            {
                // mousedown prevent nestable click
                event.preventDefault();
                if (edit == 0) {
                    return false;
                } else if (edit == 0) {
                    return true;
                }
            });
        });

        /**
         * recursively make a list item for a group and it's subgroups
         * the link for each item is created in $("body").on("click",".group-name".... higher up in this file
         */
        function buildItem(items)
        {
            var html = "";
            $.each(items, function (index, item) {
                html += "<li class='dd-item' data-id='" + item.idGroup + "' id='" + item.idGroup + "'>";
                html += "<div class='dd-handle'><span class='group-name dd-nodrag'>" + item.groupname+"</span>";

                {% if is_granted('ROLE_MANAGER') %}
                html += "<span href='#' class='pull-right dd-nodrag actions'>";
                html += "<span class='tipso' title='Edit \"<strong>"+item.groupname+"</strong>\" group'>" +
                    "<i class='fa fa-pencil fa-fw viewGroup'></i>" +
                    "</span> ";
                html += "<span class='tipso' title='Add subgroup in \"<strong>"+item.groupname+"</strong>\" group'>" +
                    "<i class='fa fa-plus fa-fw addGroup'></i>" +
                    "</span> ";
                html += "<span class='tipso' title='Delete \"<strong>"+item.groupname+"</strong>\" group'>" +
                    "<i class='fa fa-minus text-red fa-fw removeGroup'></i>" +
                    "<span>";
                html += "</span>";
                {% endif %}

                html += "</div>";

                if (item.children) {
                    html += "<ol class='dd-list'>";
                    html += buildItem(item.children);
                    html += "</ol>";
                }
                html += "</li>";
            });
            return html;
        }

        /**
         * take each group and it's info and make a list item for each
         */
        $.each(JSON.parse(obj), function (index, item)
        {
            $('#nestable ul').append(buildItem(item));
        });
    </script>
{% endblock %}