{% extends 'base.html.twig' %}

{% block title %}Activités{% endblock %}

{% block body %}
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Activités de l'entreprise");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_office.png");
    })
</script>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    <div id="allSampleContent" class="p-4 w-full">

    <link rel="stylesheet" href="https://github.com/NorthwoodsSoftware/GoJS/tree/master/extensions/DataInspector.css" />
    <!--link rel="stylesheet" href="https://github.com/NorthwoodsSoftware/GoJS/blob/master/assets/css/style.css" /-->
    <script>
        var ajaxFillTreeview = "{{ url('ajax_get_arbo_fill_treeview') }}";
        //var ajaxMoveElement = "{#{ url('ajax_move_element') }#}";
        //var ajaxAddElement = "{#{ url('ajax_add_element') }#}";
        //var ajaxDeleteElement = "{#{ url('ajax_delete_element') }#}";
        //var ajaxUpdateElementText = "{#{ url('ajax_update_element_text') }#}";
    </script>
    <script src="https://github.com/NorthwoodsSoftware/GoJS/tree/master/extensions/DataInspector.js"></script>

    <script id="code">
        function init() {

        // Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
        // For details, see https://gojs.net/latest/intro/buildingObjects.html
        const $ = go.GraphObject.make;  // for conciseness in defining templates

        myDiagram =
            new go.Diagram("myDiagramDiv", // must be the ID or reference to div
            {
                allowCopy: true,
                allowDelete: true,
                initialAutoScale: go.Diagram.Uniform,
                maxSelectionCount: 1, // users can select only one part at a time
                validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees
                "clickCreatingTool.archetypeNodeData": { // allow double-click in background to create a new node
                    nom: "(nouvelle activité)",
                    commentaire: "",
                    parent: ""
                },
                "clickCreatingTool.insertPart": function(loc) {  // method override must be function, not =>
                    const node = go.ClickCreatingTool.prototype.insertPart.call(this, loc);
                    if (node !== null) {
                        this.diagram.select(node);
                        this.diagram.commandHandler.scrollToPart(node);
                        this.diagram.commandHandler.editTextBlock(node.findObject("NAMETB"));
                    }
                    return node;
                },
                layout:
                    $(go.TreeLayout,
                    {
                        treeStyle: go.TreeLayout.StyleLastParents,
                        arrangement: go.TreeLayout.ArrangementHorizontal,
                        // properties for most of the tree:
                        angle: 90,
                        layerSpacing: 35,
                        // properties for the "last parents":
                        alternateAngle: 90,
                        alternateLayerSpacing: 35,
                        alternateAlignment: go.TreeLayout.AlignmentBus,
                        alternateNodeSpacing: 20
                    }),
                "undoManager.isEnabled": true // enable undo & redo
            });

            // when the document is modified, add a "*" to the title and enable the "Save" button
            myDiagram.addDiagramListener("Modified", e => {
                const button = document.getElementById("SaveButton");
                if (button) button.disabled = !myDiagram.isModified;
                const idx = document.title.indexOf("*");
                if (myDiagram.isModified) {
                if (idx < 0) document.title += "*";
                } else {
                if (idx >= 0) document.title = document.title.slice(0, idx);
                }
            });

            const levelColors = ["#AC193D", "#2672EC", "#8C0095", "#5133AB", "#008299", "#D24726", "#008A00", "#094AB2"];

            // override TreeLayout.commitNodes to also modify the background brush based on the tree depth level
            myDiagram.layout.commitNodes = function() {  // method override must be function, not =>
                go.TreeLayout.prototype.commitNodes.call(this);  // do the standard behavior
                // then go through all of the vertexes and set their corresponding node's Shape.fill
                // to a brush dependent on the TreeVertex.level value
                myDiagram.layout.network.vertexes.each(v => {
                if (v.node) {
                    const level = v.level % (levelColors.length);
                    const color = levelColors[level];
                    const shape = v.node.findObject("SHAPE");
                    if (shape) shape.stroke = $(go.Brush, "Linear", { 0: color, 1: go.Brush.lightenBy(color, 0.05), start: go.Spot.Left, end: go.Spot.Right });
                }
                });
            };

            // this is used to determine feedback during drags
            function mayWorkFor(node1, node2) {
                if (!(node1 instanceof go.Node)) return false;  // must be a Node
                if (node1 === node2) return false;  // cannot work for yourself
                if (node2.isInTreeOf(node1)) return false;  // cannot work for someone who works for you
                return true;
            }

            // This function provides a common style for most of the TextBlocks.
            // Some of these values may be overridden in a particular TextBlock.
            function textStyle() {
                return { font: "9pt  Segoe UI,sans-serif", stroke: "black" };
            }

            // This converter is used by the Picture.
            function findHeadShot(pic) {
                if (!pic) return "images/HSnopic.png"; // There are only 16 images on the server
                return "images/HS" + pic;
            }

            // define a simple Node template
            myDiagram.nodeTemplate =
              new go.Node("Auto")  // the Shape will automatically surround the TextBlock
                // add a Shape and a TextBlock to this "Auto" Panel
                .add(new go.Shape("RoundedRectangle",
                    { strokeWidth: 0, fill: "white" })  // no border; default fill is white
                    .bind("fill", "color"))  // Shape.fill is bound to Node.data.color
                .add(new go.TextBlock({ margin: 8, stroke: "#333" })  // some room around the text
                    .bind("text", "name"));  // TextBlock.text is bound to Node.data.key
            var originNode;
            var nodeText;
            // define the Node template
            myDiagram.nodeTemplate =
                $(go.Node, "Spot",
                {
                    selectionObjectName: "BODY",
                    mouseEnter: (e, node) => node.findObject("BUTTON").opacity = node.findObject("BUTTONX").opacity = 1,
                    mouseLeave: (e, node) => node.findObject("BUTTON").opacity = node.findObject("BUTTONX").opacity = 0,
                    // handle dragging a Node onto a Node to (maybe) change the reporting relationship
                    mouseDragEnter: (e, node, prev) => {
                        
                        const diagram = node.diagram;
                        const selnode = diagram.selection.first();
                        if (!mayWorkFor(selnode, node)) return;
                        const shape = node.findObject("SHAPE");
                        if (shape) {
                            shape._prevFill = shape.fill;  // remember the original brush
                            shape.fill = "darkred";
                        }
                    },
                    mouseDragLeave: (e, node, next) => {
                        const shape = node.findObject("SHAPE");
                        if (shape && shape._prevFill) {
                            shape.fill = shape._prevFill;  // restore the original brush
                        }
                        
                    },
                    mouseDrop: (e, node) => {
                        const diagram = node.diagram;
                        const selnode = diagram.selection.first();  // assume just one Node in selection
                        if (mayWorkFor(selnode, node)) {
                            // find any existing link into the selected node
                            const link = selnode.findTreeParentLink();
                            
                            if (link !== null) {  // reconnect any existing link
                                link.fromNode = node;
                                const key = selnode.key
                                const parent_key = node.key;
                                const object = myDiagram.model.findNodeDataForKey(key);
                                const parent = myDiagram.model.findNodeDataForKey(parent_key);
                                console.log("objectID = " + object.id + ", parent id = " + parent.id + ' object_level ' + object.level + ' parent_level ' + parent.level);

                                const object_level = object.level;
                                const parent_level = parent.level; 

                                moveObject(object, parent, object.level)

                                //alert('Etes-vous sûr de vouloir rattacher ' + object.name + ' à ' + parent.name + ' ?' );
                            } else {  // else create a new link
                                diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
                            }
                        }
                    }
                },
                // for sorting, have the Node.text be the data.name
                //new go.Binding("text", "name"),
                // bind the Part.layerName to control the Node's layer depending on whether it isSelected
                new go.Binding("layerName", "isSelected", sel => sel ? "Foreground" : "").ofObject(),
                $(go.Panel, "Auto",
                    { name: "BODY" },
                    // define the node's outer shape
                    $(go.Shape, "RoundedRectangle", { name: "SHAPE", fill: "#ffffff", stroke: 'black', strokeWidth: 3.5, portId: "" }),
                    $(go.Panel, "Horizontal",
                    //$(go.Picture, {name: "Picture",desiredSize: new go.Size(70, 70),margin: 1.5, source: "images/HSnopic.png"},new go.Binding("source", "pic", findHeadShot)),
                    // define the panel where the text will appear
                    $(go.Panel, "Table",
                        {
                            minSize: new go.Size(130, NaN),
                            maxSize: new go.Size(150, NaN),
                            margin: 4,
                            defaultAlignment: go.Spot.Center
                        },
                        $(go.RowColumnDefinition, { column: 1, width: 4 }),
                        $(go.TextBlock, textStyle(),  // the name
                        {
                            name: "NAMETB",
                            row: 0, 
                            column: 0,
                            font: "6pt Segoe UI,sans-serif",
                            editable: false, isMultiline: false,
                            minSize: new go.Size(50, 16)
                        },
                        new go.Binding("text", "type").makeTwoWay()),
                        $(go.TextBlock, textStyle(),
                        {
                            row: 1, 
                            column: 0,
                            editable: true, 
                            isMultiline: false,
                            minSize: new go.Size(50, 14),
                            margin: new go.Margin(1, 0, 1, 0),
                            font: "bold 9pt Segoe UI,sans-serif", 
                            stroke: "black",
                            textEdited: (textBlock, previousText, currentText) => {
                                const data = textBlock.part.data;
                                console.log("previousText = " + previousText + ", currentText = " + currentText + ", id = " + data.id + ", level = " + data.level);
                                updateObject(previousText, currentText, data);
                            }
                        },
                        new go.Binding("text", "name").makeTwoWay()),
                        $(go.TextBlock, textStyle(),  // the id
                        {
                            row: 2, 
                            column: 0,
                            font: "italic 6pt sans-serif",
                            wrap: go.TextBlock.WrapFit,
                            editable: false,  // by default newlines are allowed
                            click: function(e, obj) {
                                window.open('../sous-categories/edit/' + obj.part.data.id)
                            }
                        },
                        new go.Binding("text", "id", v => "ID: " + v).makeTwoWay()),
                        $(go.TextBlock, textStyle(),
                        { 
                            font: "normal 6pt sans-serif",
                            row: 3, 
                            column: 0,
                            margin: new go.Margin(1, 0, 1, 0),
                            click: function(e, obj) {
                                window.open('../sous-categories/content/' + obj.part.data.id)
                            }
                        },
                        new go.Binding("text", "elements", v => "( " + v + " éléments)")),
                    ) // end Table Panel
                    ) // end Horizontal Panel
                ), // end Auto Panel
                $("Button",
                    $(go.Shape, "PlusLine", { width: 10, height: 10 }),
                    {
                      name: "BUTTON", 
                      alignment: go.Spot.Right, 
                      opacity: 0,  // initially not visible
                      click: (e, button) => addElement(button.part)
                    },
                    // button is visible either when node is selected or on mouse-over
                    new go.Binding("opacity", "isSelected", s => s ? 1 : 0).ofObject()
                ),
                new go.Binding("isTreeExpanded").makeTwoWay(),
                $("TreeExpanderButton",
                    {
                      name: "BUTTONX", 
                      alignment: go.Spot.Bottom, 
                      opacity: 0,  // initially not visible
                      "_treeExpandedFigure": "TriangleUp",
                      "_treeCollapsedFigure": "TriangleDown"
                    },
                    // button is visible either when node is selected or on mouse-over
                    new go.Binding("opacity", "isSelected", s => s ? 1 : 0).ofObject()
                )
                );  // end Node, a Spot Panel
            

    function addEmployee(node) {
        if (!node) return;
        const thisemp = node.data;
        myDiagram.startTransaction("add employee");
        const newemp = { name: "(new person)", title: "(title)", comments: "", parent: thisemp.key };
        myDiagram.model.addNodeData(newemp);
        const newnode = myDiagram.findNodeForData(newemp);
        if (newnode) newnode.location = node.location;
        myDiagram.commitTransaction("add employee");
        myDiagram.commandHandler.scrollToPart(newnode);
    }

    function addElement(node) {

        if (!node) return;

        const thiselement = node.data;

        const type = thiselement.type;

        myDiagram.startTransaction("add element");
        const newelement = { type: "(new element)", name: "(nom)", comments: "", parent: thiselement.key };
        myDiagram.model.addNodeData(newelement);

        const newnode = myDiagram.findNodeForData(newelement);
        console.log("level = " + thiselement.level + ", nom = " + newelement.name + ", parent_id = " + thiselement.id);

        addObject(thiselement.id, newelement.name, thiselement.level);

        myDiagram.commitTransaction("add element");
        myDiagram.commandHandler.scrollToPart(newnode);
    }

    function deleteElement(node) {

        const response = confirm("Etes-vous sur de vouloir supprimer l\'élément " + node.data.name + " ?");

        if (response) {
            // add code if the user pressed the Ok button
            console.log("Ok was pressed");

            if (!node) return;

            const thiselement = node.data;

            const level = thiselement.level;
            const id = thiselement.id;

            myDiagram.startTransaction("delete element");

            deleteObject(id, level);

            myDiagram.commitTransaction("delete element");
            myDiagram.commandHandler.scrollToPart(node);

        } else {
            // add code if the user pressed the Cancel button
            console.log("Cancel was pressed");
        }
    }

    function editElement(node){

        $('.modal-title span').text(node.data.type);
        $('.nameField').text = node.data.name;
        $('.commentsField').text = node.data.commentaire;

        $('#editModal').modal('show');

        $("#saveEditModal").click(function(){
            console.log("soldeModalButton clicked");
            $("#editModal").modal('hide');
        });
        $("#cancelEditModal").click(function(){
            console.log("soldeModalButton clicked");
            $("#editModal").modal('hide');
        });
    }


    // the context menu allows users to make a position vacant,
    // remove a role and reassign the subtree, or remove a department
    myDiagram.nodeTemplate.contextMenu =
        $("ContextMenu",
        $("ContextMenuButton",
            $(go.TextBlock, "Ajouter Element"),
            {
                click: (e, button) => addElement(button.part.adornedPart),
            }
        ),
        $("ContextMenuButton",
            $(go.TextBlock, "Modifier"),
            {
                click: (e, button) => editElement(button.part.adornedPart)
            }
        ),
        $("ContextMenuButton",
            $(go.TextBlock, "Supprimer Element"),
            {
                click: (e, button) => deleteElement(button.part.adornedPart)
            }
        ),
        );

    // define the Link template
    myDiagram.linkTemplate =
        $(go.Link, go.Link.Orthogonal,
        { layerName: "Background", corner: 5 },
        $(go.Shape, { strokeWidth: 1.5, stroke: "#F5F5F5" }));  // the link shape

    // read in the JSON-format data from the "mySavedModel" element
    //load();


    // support editing the properties of the selected person in HTML
    if (window.Inspector) myInspector = new Inspector("myInspector", myDiagram,
    {
        properties: {
            "key": { readOnly: true },
            "name": {},
            "comments": {}
        }
    }
    );

    // Setup zoom to fit button
    document.getElementById('zoomToFit').addEventListener('click', () => myDiagram.commandHandler.zoomToFit());

    document.getElementById('centerRoot').addEventListener('click', () => {
        myDiagram.scale = 1;
        myDiagram.commandHandler.scrollToPart(myDiagram.findNodeForKey(1));
    });
} // end init


// Show the diagram's model in JSON format
function save() {
  document.getElementById("mySavedModel").value = myDiagram.model.toJson();
  myDiagram.isModified = false;
}

function moveObject(object, parent, level){
    
    myDiagram.startTransaction("moveObject");

    $.ajax({
      url: ajaxMoveElement,
      method: "get",
      dataType: "json",
      data: {
        objectID: object.id,
        parentID: parent.id,
        level: level
      }
    }).done(function (response) {
      //alert('Les données ont bien été mises à jour.');
      console.log('Les données ont bien été mises à jour.');
    }).fail(function (response) {
      alert('Erreur à la mise à jour des données. Consultez les logs du navigateur pour plus d\'informations.');
      console.log('Erreur à la mise à jour des données. Consultez les logs du navigateur pour plus d\'informations.');
    });

    myDiagram.commitTransaction("moveObject");
}

function addObject(parentID, nom, level){
    
    myDiagram.startTransaction("addObject");
    $.ajax({
      url: ajaxAddElement,
      method: "get",
      dataType: "json",
      data: {
        parentID: parentID,
        nom: nom,
        level: level
      }
    }).done(function (response) {
      //alert('L\' élément a bien éte ajouté.');
      refreshData();
      console.log('L\' élément a bien éte ajouté.');
    }).fail(function (response) {
      alert('Erreur à la mise à jour des données. Consultez les logs du navigateur pour plus d\'informations.');
      console.log('Erreur à la mise à jour des données. Consultez les logs du navigateur pour plus d\'informations.');
    });

    myDiagram.commitTransaction("addObject");
}

function deleteObject(id, level){

    myDiagram.startTransaction("deleteObject");
    $.ajax({
      url: ajaxDeleteElement,
      method: "get",
      dataType: "json",
      data: {
        id: id,
        level: level
      }
    }).done(function (response) {
      alert('L\' élément a bien éte supprimé.');
      console.log('L\' élément a bien éte supprimé.');
    }).fail(function (response) {
      alert('Erreur à la mise à jour des données. Consultez les logs du navigateur pour plus d\'informations.');
      console.log('Erreur à la mise à jour des données. Consultez les logs du navigateur pour plus d\'informations.');
    });

    refreshData();
    myDiagram.commitTransaction("deleteObject");
}

function updateObject(previousText, currentText, data){

    $.ajax({
        url: ajaxUpdateElementText,
        method: "get",
        dataType: "json",
        data: {
            elementID: data.id,
            previousText: previousText,
            text: currentText,
            level: data.level
        }
        }).done(function (response) {
            //alert('Les données ont bien été mises à jour.');
            console.log('Les données ont bien été mises à jour.');
        }).fail(function (response) {
            alert('Erreur à la mise à jour des données. Consultez les logs du navigateur pour plus d\'informations.');
            console.log('Erreur à la mise à jour des données. Consultez les logs du navigateur pour plus d\'informations.');
    });

}
function refreshData(){

    $.ajax({ 
        type: 'GET', 
        url: ajaxFillTreeview, 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
            
            var test = 
            {
                "class": "go.TreeModel",
                "nodeDataArray": data
            };

            console.log(test);

            myDiagram.model = go.Model.fromJson(test);
            // make sure new data keys are unique positive integers
            let lastkey = 1;
            myDiagram.model.makeUniqueKeyFunction = (model, datal) => {
                let k = datal.key || lastkey;
                while (model.findNodeDataForKey(k)) k++;
                datal.key = lastkey = k;
                return k;
            };
        }
    });

}

// the Search functionality highlights all of the nodes that have at least one data property match a RegExp
    function searchDiagram() {  // called by button
      var input = document.getElementById("mySearch");
      if (!input) return;
      myDiagram.focus();

      myDiagram.startTransaction("highlight search");

      if (input.value) {
        // search four different data properties for the string, any of which may match for success
        // create a case insensitive RegExp from what the user typed
        var safe = input.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        var regex = new RegExp(safe, "i");
        var results = myDiagram.findNodesByExample({ name: regex });
        myDiagram.highlightCollection(results);
        // try to center the diagram at the first node that was found
        if (results.count > 0) myDiagram.centerRect(results.first().actualBounds);
      } else {  // empty string only clears highlighteds collection
        myDiagram.clearHighlighteds();
      }

      myDiagram.commitTransaction("highlight search");
    }
    window.addEventListener('DOMContentLoaded', init);
/*function load() {
  myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  // make sure new data keys are unique positive integers
  let lastkey = 1;
  myDiagram.model.makeUniqueKeyFunction = (model, data) => {
    let k = data.key || lastkey;
    while (model.findNodeDataForKey(k)) k++;
    data.key = lastkey = k;
    return k;
  };
}*/

$(document).ready(function () {   

    $(".page-title").text($(".page-title").text().replace("TITRE", "ARBORESCENCE DU SITE"));
    $(".page-subtitle").text($(".page-subtitle").text().replace("Sous-titre", "Gestion des catégories"));

    $.ajax({ 
        type: 'GET', 
        url: ajaxFillTreeview, 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
            
            var test = 
            {
                "class": "go.TreeModel",
                "nodeDataArray": data
            };

            console.log(test);

            myDiagram.model = go.Model.fromJson(test);
            // make sure new data keys are unique positive integers
            let lastkey = 1;
            myDiagram.model.makeUniqueKeyFunction = (model, datal) => {
                let k = datal.key || lastkey;
                while (model.findNodeDataForKey(k)) k++;
                datal.key = lastkey = k;
                return k;
            };
        }
    });
});
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="editModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edition d'un élément</h5><span></span>
                <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
            <p>
                <label for="nameField">Nom</label>
                <input type="text" class="form-control" id="nameField" aria-describedby="nameHelp" placeholder="Saisir un nom">
                <!--small id="dateHelp" class="form-text text-muted">Sélectionner la date du solde</small-->
            </p>
            <p>
                <label for="commentsField">Commentaire</label>
                <input type="textarea" class="form-control" id="commentsField" aria-describedby="commentHelp" placeholder="Saisir un commentaire">
            </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close" data-bs-dismiss="modal" id="closeEdit
                Modal">Fermer</button>
                <button type="button" id="saveEditModal" data-bs-dismiss="modal" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<div id="sample">
  <div id="myDiagramDiv" style="background-color: #AED6F1; border: solid 1px black; height: 570px;"></div>
  <br>
    <p>
        <button id="zoomToFit" class="btn btn-primary">Zoomer</button>
        <button class="btn btn-primary" id="centerRoot">Centrer</button>
        <input type="search" id="mySearch" onkeypress="if (event.keyCode === 13) searchDiagram()" />
        <button onclick="searchDiagram()" class="btn btn-primary">Rechercher</button>
    </p>
  </div>
</body>
{% endblock %}