{#
    template to show and edit the list of groups in the admin pages
    is a copy of Groups/groups.html.twig

    @todo should be changed so this part only adds the admin/dashboard elements and include Groups/groups.html.twig

    @author Arno Lambert <a.lambert@unesco.org>
#}

{% 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">
        {% if app.user %}
            {% block sidebar %}
                {% include('Admin/adminSidebar.html.twig') %}
            {% endblock %}
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <ol class="breadcrumb">
                    <li>
                        <a
                                href="{{ path('frontend_homepage') }}">
                            <i class="fa fa-home"></i>
                            Home
                        </a>
                    </li>
                    <li>
                        <a
                                href="{{ path('admin_dashboard') }}">
                            <i class="fa fa-dashboard"></i>
                            Dashboard
                        </a>
                    </li>
                    <li class="active">
                        <i class="fa fa-users"></i>
                        Groups
                    </li>
                </ol>
            </section>
            {% endif %}
            {% block content %}
                <!-- Main content -->
                <section class="content">
                    <h2>
                        Groups : IOC
                    </h2>
                        <div class="cf nestable-lists">
                            <div class="row midhead">
                                <div class="col-md-6 buffer20">
                                    <div class="btn-group" role="group" id="nestable-menu">
                                        <button
                                                type="button"
                                                class="btn btn-default"
                                                data-action="expand-all">
                                            Expand All
                                        </button>
                                        <button
                                                type="button"
                                                class="btn btn-default"
                                                data-action="collapse-all">
                                            Collapse All
                                        </button>
                                    </div>
                                        {% if (data.isGroupAdmin == 1) or (is_granted('ROLE_GLOBAL_EDITOR')) %}
                                             <span class="editbtn">Edit Groups : <span class="edit-group">
                                                    <input
                                                            type="checkbox"
                                                            name="edit-group"
                                                            class="onoffswitch-checkbox"
                                                            id="edit-group"
                                                            value="0">
                                                    <label class="onoffswitch-label" for="edit-group">
                                                        <span class="onoffswitch-inner"></span>
                                                        <span class="onoffswitch-switch"></span>
                                                    </label>
                                                </span>
                                             </span>
                                        {% endif %}
                                </div>
                                <div class="col-md-6 col-xs-12 pull-right buffer20">
                                    <div class="control-group">
                                        <label
                                                for="groupFilter"
                                                class="col-xs-3 control-label labelFilter">
                                            Filter Groups:
                                        </label>
                                        <div class="col-xs-9 nopadding">
                                            <select
                                                    class="form-control select2"
                                                    title=""
                                                    id="groupFilter">
                                                <option disabled="" selected="">Group</option>
                                                {% for key,filtergroup in data.filtergroups %}
                                                    {% if data.treeGroup == key %}
                                                        <option
                                                                label="{{ filtergroup }}"
                                                                value="{{ key }}"
                                                                selected>
                                                            {{ filtergroup }}
                                                        </option>
                                                    {% else %}
                                                        <option
                                                                label="{{ filtergroup }}"
                                                                value="{{ key }}">
                                                            {{ filtergroup }}
                                                        </option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>  
                            <div class="dd" id="nestable">
                                <ul class="dd-list"></ul>
                            </div>
                        </div>
                </section>
            {% endblock %}
            
            {% if app.user %}   
                </div>
        {% endif %}
        <div
                class="modal fade"
                id="modal-edit"
                tabindex="-1"
                role="dialog"
                aria-labelledby="myModalLabel"
                aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <p><span class="modal-message"></span></p>
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>
    </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');

            $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");
                            var html = "";
                            if (position.closest('.dd-handle').siblings('ol').length>0) {
                                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>'
                                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 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_admin_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");
                window.location.href = "{{ path('view_admin_group') }}" + '/' + parentGroupId;
            });

            $('#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");
                    edit = 1;
                } else {
                    edit = 0;
                    $(".actions").css('display','none');
                    $(".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 %}