
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pump Selection</title>

<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>

<style>

body{
margin:0;
font-family:Arial;
font-size:11px;
}

.container{
display:flex;
height:100vh;
}

.sidebar{
width:320px;
border-right:1px solid #ccc;
padding:5px;
overflow:auto;
}

.diagram{
flex:1;
padding:5px;
overflow:auto;
}

.node{
margin-left:5px;
}

.children{
margin-left:0px;
border-left:1px dashed #ccc;
padding-left:10px;
margin-top:5px;
}
.mermaid .node rect{
    padding:2px !important;
}

.mermaid .node text{
    font-size:10px !important;
    font-weight: bold !important;
}

.mermaid .label{
    font-size:10px !important;
    font-weight: bold !important;
}

.mermaid svg{
    max-width:100%;
}
</style>
</head>

<body>

<div class="container">

<div class="sidebar" id="tree"></div>

<div class="diagram">
<div id="diagram"></div>
</div>

</div>

<script>

mermaid.initialize({
startOnLoad:false,
securityLevel:'loose',
themeVariables:{
    fontSize:'10px'
}
});
const nodes = @json($diagram);
function getChildren(parent){
return nodes.filter(n=>n.parent===parent);
}

/* INIT ROOT */

function init(){

let root = getChildren(null);

root.forEach(node=>{
createNode(node,document.getElementById("tree"));
});

}

function createNode(node,container){

let div=document.createElement("div");
div.className="node";
div.id="node_"+node.id;

div.innerHTML=`
<label>
<input type="checkbox" data-id="${node.id}" onchange="toggleNode(this)">
${node.name}
</label>
`;

container.appendChild(div);

}

/* TOGGLE NODE */

function toggleNode(el){

let id=parseInt(el.dataset.id);

if(el.checked){

appendChildren(id);

autoCheckParent(id);

}else{

removeChildren(id);

}

updateDiagram();

}

/* APPEND CHILDREN */

function appendChildren(parentId){

let parentDiv=document.getElementById("node_"+parentId);

if(parentDiv.querySelector(".children")) return;

let children=getChildren(parentId);

if(!children.length) return;

let box=document.createElement("div");
box.className="children";

children.forEach(child=>{
createNode(child,box);
});

parentDiv.appendChild(box);

}

/* REMOVE CHILDREN */

function removeChildren(parentId){

let parentDiv=document.getElementById("node_"+parentId);

let childrenBox=parentDiv.querySelector(".children");

if(childrenBox) childrenBox.remove();

}

/* AUTO SELECT PARENT */

function autoCheckParent(id){

let node = nodes.find(n=>n.id===id);

if(!node.parent) return;

let parentCheckbox = document.querySelector(
`input[data-id="${node.parent}"]`
);

if(parentCheckbox && !parentCheckbox.checked){

parentCheckbox.checked=true;

appendChildren(node.parent);

}

}

/* BUILD DIAGRAM */

function updateDiagram(){

let checked = Array.from(document.querySelectorAll("input[type=checkbox]:checked"))
.map(c=>parseInt(c.dataset.id));

let text="flowchart LR\n";

let edges=new Set();

checked.forEach(id=>{

let node = nodes.find(n=>n.id===id);

if(node.parent){

let parent = nodes.find(n=>n.id===node.parent);

edges.add(
`node${parent.id}["${parent.name}"] --> node${node.id}["${node.name}"]`
);

}

});

edges.forEach(e=>{
text+=e+"\n";
});

const diagram=document.getElementById("diagram");

diagram.innerHTML=`<div class="mermaid">${text}</div>`;

mermaid.run({
nodes:diagram.querySelectorAll('.mermaid')
});

}

init();

</script>

</body>
</html>