
<link href="includes/js/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<script src="includes/js/fancytree/jquery.fancytree.min.js" type="text/JavaScript" ></script>
<script src="includes/js/fancytree/jquery.fancytree-all-deps.min.js" type="text/JavaScript" ></script>
<script src="includes/js/fancytree/fcs_glyphoptions.js" type="text/JavaScript" ></script>

<form action="index.php?module=category&amp;event=assignCategoryType" method="post" name="hm" onsubmit="return false" id="hm" enctype="multipart/form-data" style="margin:0;padding:0;">

    <input type="hidden" name="id" value="[% $type.type_id %]">
    <input type="hidden" name="sub" value="save">

    <input type="hidden" name="selectedCategories" value="[% $selectedCategories %]" id="selectedCategories" />


    <div class="card panel-fcs-border shadow-sm">
        <div class="card-header">
            <h2>[% $user->gettext('Kategorie') %]</h2>
        </div>
        <div class="card-body">
            <div class="offset-md-2 col-lg-8">
                <div class="card panel-info shadow-sm rounded">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-lg-6">
                                <h3 class="card-title-fcs">[% $user->gettext('Kategorienzuordnung') %]: [% $type.type_name %]</h3>
                            </div>

                            <div class="col-lg-6 text-end">
                                <div class="btn-group">
                                    [% if $user->hasRight(33) %]
                                        <button class="btn btn-outline-primary" onclick="bootbox.confirm('[% $user->gettext('Zuordnung wirklich speichern?') %]', function(result){if(result){submitForm();} })"/>[% $user->gettext('Speichern') %]</button>
                                    [% /if %]
                                    <input type="button" class="btn btn-outline-secondary" onclick="window.location.href = 'index.php?module=category&event=assignCategoryType'" value="[% $user->gettext('Zurück') %]">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card panel-info shadow-sm rounded">
                                    <div class="card-header">
                                        <h3 class="card-title-fcs">[% $user->gettext('Zugeordnete Kategorien') %]</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="tree" id="categorytree">&nbsp;</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card panel-info shadow-sm rounded">
                                    <div class="card-header">
                                        <h3 class="card-title-fcs">[% $user->gettext('Kategorien') %]</h3>
                                    </div>
                                    <div class="card-body">
                                        <div id="tree"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/JavaScript">
<!--

        var Categories = [[% $selectedCategoriesArray %]];

        function setCategoryValue(id, name) {

                if (name != "" && id > 0) {

                        CategoryExists = false;

                        for (i = 0; i < Categories.length; i++) {
                                if (Categories[i] && Categories[i][0] == id) {
                                        CategoryExists = true;
                                        i = Categories.length;
                                }
                        }

                        if (!CategoryExists) {

                                NewCategory = new Array(id, name);
                                Categories.push(NewCategory);
                                CategoriesHiddenField();
                        }
                }
                Categories.sort(sortCategories);
                listCategories();
        }

        function CategoriesHiddenField() {

                temp = "";

                for (i = 0; i < Categories.length; i++) {
            if (Categories[i]) {
                             temp += Categories[i][0]+",";
                        }
                }

                if (temp != "") {
                        temp = temp.substr(0, temp.length - 1);
                }

                document.getElementById("selectedCategories").value = temp;
        }

        function sortCategories(a, b)	{

        if (a[1] && b[1]) {

                  SortString1 = a[1].toLowerCase();
                  SortString2 = b[1].toLowerCase();

                  SortString1 = SortString1.replace(/ä/g,"a");
                  SortString1 = SortString1.replace(/ö/g,"o");
                  SortString1 = SortString1.replace(/ü/g,"u");
                  SortString1 = SortString1.replace(/ß/g,"s");

                  SortString2 = SortString2.replace(/ä/g,"a");
                  SortString2 = SortString2.replace(/ö/g,"o");
                  SortString2 = SortString2.replace(/ü/g,"u");
                  SortString2 = SortString2.replace(/ß/g,"s");

                  return (SortString2 == SortString1) ? 0 : (SortString1 > SortString2) ? 1 : -1;
                }
                return 0;
        }

        function dropCategory(id) {
            if (id > 0) {
                for (i = 0; i < Categories.length; i++) {
                    if (Categories[i] && Categories[i][0] == id) {
                            Categories.splice(i, 1);
                            CategoriesHiddenField();
                    }
                }
            }
            listCategories();
        }

        function listCategories() {
            var obj = document.getElementById("categorytree");
            HTMLOutput = "";
            for (i = 0; i < Categories.length; i++) {
                if (Categories[i]) {
                    HTMLOutput += "<a href=\"JavaScript:void(0);\" onclick=\"dropCategory("+Categories[i][0]+");\">"+Categories[i][1]+"</a><br>";
                }
            }
            obj.innerHTML = HTMLOutput;
        }

       
        $("#tree").fancytree({
            source: {
              url: "index.php?module=category&event=json&id=0&action=assign"
            },
            extensions: ["glyph"],
            activeVisible: true,
            glyph: glyph_opts,
            checkbox: false,
            autoActivate: true, // Automatically activate a node when it is focused (using keys).
            selectMode: 1, // 1:single, 2:multi, 3:multi-hier
            activeVisible: true,
            activate: function(event, data){
                var node = data.node;
                setCategoryValue(node.key, node.title);
            },
            lazyLoad: function(event, data){
                var node = data.node;
                // Load child nodes via ajax GET /getTreeData?mode=children&parent=1234
                data.result = {
                    url: node.data.src,
                  //url: "index.php?module=category&event=json&type=ticket",
                  data: {mode: "children", parent: node.key},
                  cache: false
                };
            }
        }).show();

        listCategories();

// -->
</script>

<!-- Component Category end -->

