<style>
        .fancytree-title{
            white-space: pre-wrap;
overflow-wrap: break-word;
    }

    span.fancytree-title {
        display: inline !important;
    }

    #CatTree .notpublished {
        text-decoration: line-through;
    }   
</style>

<link href="includes/js/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<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>
[% if $tid > 0 %]
    <form action="index.php?module=category&amp;class=select&amp;type=ticket[% if $showInPopup%]&showInPopup=1[% /if %]" method="post" name="tform" class="form-inline">
        <input type="hidden" name="tid" value="[% $tid %]" />
        <input type="hidden" name="id" value="[% $id %]" />
        <input type="hidden" name="cid" id="cid" value="[% $cid %]" />
        <input type="hidden" name="save" value="1" />
        <input type='hidden' name='type' value='[% $TicketTypeID %]' />

        <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">

                [% if $chooseCatRequired %]
                    <div class="alert alert-warning">
                        <strong>[% $user->gettext('Kategorie 1 muss gewählt sein') %]</strong>
                        <br/>
                        [% $user->gettext('Bitte wählen Sie die Kategorie aus.') %]
                    </div>

                [% /if %]

                <div id="CatTree" style="text-align:left;"></div>
                <hr/>
                [% if $OnHoldDate != '' %]
                    <div class="form-group row mb-3">
                        <label for="keepOnHold">[% $user->gettext('Zur&uuml;ckstellung beibehalten?') %]</label>
                        <input type="checkbox" name="confirmOnhold" value="hold" checked="checked"/>
                    </div>
                [% /if %]
                [% if $cid %]
                    <input type="button" id="removeCat" value="[% $user->gettext('Zuordnung entfernen') %]" class="btn btn-outline-primary" onclick="setCategoryValue(0, '');"/>
                [% /if %]
                [% if $OnHoldDate != '' %]
                    <input type="button" id="CatSubmitButton" value="[% $user->gettext('Speichern') %]" class="btn btn-outline-primary" onclick="submit();"/>
                [% else %]                
                    <input type="hidden" id="CatSubmitButton" value="[% $user->gettext('Speichern') %]" class="btn btn-outline-primary" onclick="submit();"/>
                [% /if %]
            </div>
        </div>
    </form>
    <script type="text/javascript" language="javascript">
        <!--
        var url = "index.php?module=category&event=xml&type=ticket&id=[% if $id == 2 && $catdep %][% $pid %]&cid=2[% else %]0&cid=1[% /if %]";
        [% if $hmcompany|strpos:"AVAG HOLDING" !== false %]
        url += "&view=[% if $id==2 %]eds[% else %]avag[% /if %]&tid=[% $tid %]";
        [% /if %]
            //var tree2 = new WebFXLoadTree("[% $user->gettext('Kategorien') %]", url, "javascript:setCategoryValue(0, '')");
        //document.getElementById('CatTree').innerHTML = tree2;

        //     -->
</script>
[% else %]

    <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="CatTree" style="text-align:left;"></div>
            <hr/>
            [% if $cid %]
                <input type="button" id="removeCat" value="[% $user->gettext('Zuordnung entfernen') %]" class="btn btn-outline-primary" onclick="setCategoryValue(0, '');"/>
            [% /if %]
            [%*
            <input type="button" id="CatSubmitButton" value="[% $user->gettext('Speichern') %]" class="btn btn-outline-primary" onclick="submit();"/>
            *%]
            [% if  $editCollection %]
            <input type="button" id="CatSubmitButton" value="[% $user->gettext('Zuordnung entfernen') %]" class="btn btn-outline-danger" onclick="setToNull([% $id %]);"/>
            [% /if %]
        </div>
    </div>
[% /if %]
<script type="text/javascript" language="javascript">


        [% if $close && !$showInPopup %]
            window.location.href = "index.php?module=ticket&event=show&id=[% $tid %]";
        [% /if %]

    var url = "index.php?module=category&event=json&type=ticket&id=";
        [% if $catdep %]
            [% if $id == 2 %]
    var id = $("#CategoryID1").val();
    url += (id) ? id + "&cid=2" : "0&cid=2";
            [% else %]
    url += "0&cid=1";
            [% /if %]
        [% else %]
            url += "0";
        [% /if %]

        [% if $hmcompany|strpos:"AVAG HOLDING" !== false %]
            url += "&view=[% if $id==2 %]eds[% else %]avag[% /if %]&tid=[% $tid %]";
        [% /if %]

        [% if $cid %]
            url += "&activecatid=[% $cid %]";
        [% /if %]
            
            [% if $TicketTypeID %]
                url += "&typeid=[% $TicketTypeID %]";
            [% /if %]




    $("#CatTree").fancytree({
        source: {
            url: url
        },
        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) {
            // A node was activated: display its title:

            var node = data.node;


    // Prüfen, ob der Title eine "notpublished"-Klasse enthält
    if ($(node.span).find(".notpublished").length > 0) {
    //if ($(node.title).hasClass("notpublished")) {
      // Auswahl verhindern
      event.preventDefault();
      // Optional: Node sofort deaktivieren (damit er nicht aktiv markiert bleibt)
      node.setActive(false);
      // Optional: Hinweis an den Benutzer
      alert("Diese Kategorie ist nicht veröffentlicht und kann nicht gewählt werden.");
      return false;
    }

            setCategoryValue(node.key, node.title);
            
            //$("#echoActive").text(node.title);

        }
    }).show();
    
    
    $("#CatTree").fancytree("getTree").visit(function(node){
    if(node.selected) {
        
        node.visitParents(function(parent){
            parent.partsel = true;
            parent.setActive();
        });
    }
});
    
    

        [% if $formailaddressid === 0 || $formailaddressid > 0 %]
            function setCategoryValue(id, name) {
                $("#[% $formailaddressid %]_CatID").val(id);
                $("#[% $formailaddressid %]_CatName").val(name);
        $.fancybox.close();
    }
        [% /if %]

        [% if $tid > 0 %]
    function setCategoryValue(id, name) {
        $("#cid").val(id);
            [% if $OnHoldDate == '' %]
        $("#CatSubmitButton").trigger("click");
            [% /if %]
    }
        [% else %]
//Bei Ticketerstellung:
    function setCategoryValue(id, name) {


            [% if $id == 1 && $catdep %]
        $("#CategoryID2").val(0).trigger('change');
        $("#CategoryDescr2").val(null).trigger('change');
            [% /if %]

            [% if $id == 2 && $catdep %]
        setCatData(id);
            [% else %]

//test
// Set the value, creating a new option if necessary

if($('#CategoryDescr[% $id %]').prop("type") == 'text'){
    $('#CategoryDescr[% $id %]').val(name);
} else {
                if ($('#CategoryDescr[% $id %]').find("option[value='" + id + "']").length) {
            $('#CategoryDescr[% $id %]').val(id).trigger('change');
        } else {
            // Create a DOM Option and pre-select by default
            var newOption = new Option(name, id, true, true);
            // Append it to the select
            $('#CategoryDescr[% $id %]').append(newOption).trigger('change');
        }
//test ende
              
}
  $("#CategoryID[% $id %]").val(id).trigger('change');

                [% if $category_escalation == 1 || $CatPrio == 1%]
                sndReq(id);
                [% else %]
        $.fancybox.close();
                [% /if %]
            [% /if %]

    }
        [% /if %]





function setCatData(Cat2ID) {
    var request = $.ajax({
        url: "index.php?module=category&event=getCatData&id=" + Cat2ID,
        type: "POST",

        dataType: "json"
    });

    request.done(function (CatData) {
      
        if (("undefined" != CatData.RootName && 0 < CatData.RootID)) {

            if ($('#CategoryDescr1').prop("type") == 'text') {
                $('#CategoryDescr1').val(CatData.RootName);
            } else {
                if ($('#CategoryDescr1').find("option[value='" + CatData.RootID + "']").length) {
                    $('#CategoryDescr1').val(CatData.RootID).trigger('change');
                } else {
                    var newOption = new Option(CatData.RootName, CatData.RootID, true, true);
                    $('#CategoryDescr1').append(newOption).trigger('change');
                }
            }
            $("#CategoryID1").val(CatData.RootID).trigger('change');
        }
        if (("undefined" != CatData.Name && 0 < CatData.ID) && (CatData.RootID != CatData.ID)) {

            $("#CategoryID2").val(CatData.ID).trigger('change');

            if ($('#CategoryDescr2').prop("type") == 'text') {
                $('#CategoryDescr2').val(CatData.Name);
            } else {
                if ($('#CategoryDescr2').find("option[value='" + CatData.ID + "']").length) {
                    $('#CategoryDescr2').val(CatData.ID).trigger('change');
                } else {
                    var newOption = new Option(CatData.Name, CatData.ID, true, true);
                    $('#CategoryDescr2').append(newOption).trigger('change');
                }
            }
        }
        //Kategorie2 leeren:
        if (CatData.ID === false) {
            $("#CategoryID2").val(0).trigger('change');
            $("#CategoryDescr2").val(null).trigger('change');
        }
        sndReq(Cat2ID);
    });
    request.fail(function (jqXHR, textStatus) {
    });
}


            function createRequestObject() {
        var ro;
        var browser = navigator.appName;
        if (browser == "Microsoft Internet Explorer") {
            ro = new ActiveXObject("Microsoft.XMLHTTP");
                } else {
            ro = new XMLHttpRequest();
                }
                return ro;
            }

            var http = createRequestObject();

            function sndReq(id) {
        [% if  $id == 1 %]
        var Other_CatID = $("#CategoryID2").val();
        [% /if %]
        [% if  $id == 2 %]
        var Other_CatID = $("#CategoryID1").val();
        [% /if %]
        http.open('get', 'index.php?module=category&event=getCatDepValues&cat_id=' + id + '&other_cat=' + Other_CatID);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }

    function handleResponse() {
        if (http.readyState == 4) {
            var response = http.responseText;

            var Teile = response.split("|");

        [% if $category_escalation == 1 && $tid == 0 %]
            //$("#expires").val(Teile[0]).trigger('change');
        [% /if %]
        [% if $CatPrio %]
            $("#prio_id").val(Teile[1]).trigger('change');
            $("#PrioDesc").val(Teile[2]).trigger('change');
        [% /if %]
            $.fancybox.close();
        }
    }
    
    

    </script>
