@extends('layouts.app', ['pageSlug' => 'deviceLists'])
@push('head')
  <link rel="stylesheet" href="{{asset('css/zTreeStyle/zTreeStyle.css')}}" type="text/css">  
@endpush
@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Monitoring Diagram</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel" style="position:relative">
    <div class="row">
        <div class="col-lg-12">
            Diagram
        </div>
    </div>
    <br>
    <div class="row">
      <ul id="tree" class="ztree"></ul>
      <div class="detail">
        <div id="name"></div>
        <div id="ip"></div>
        <div id="group"></div>
        <div id="type"></div>
      </div>
    </div>
</div>
@endsection

@push('js')

<style>
  .detail{
    position: absolute;
    top: 0;
    right: 0;
    margin: 15px;
    text-align: right;
    border: 1px solid gray;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 3px 4px 3px 0px rgba(12, 12, 12, 0.34);
}
</style>
<script type="text/javascript" src="{{asset('js/jquery.ztree.core.js')}}"></script>
<script>

var zNodes;//
//  = [
//       {id: 1, pId: 0, name: "[core] Basic Functions", open: false},
//       {id: 101, pId: 1, name: "Standard JSON Data", open: false},
//       {id: 102, pId: 1, name: "Simple JSON Data", file: "core/simpleData"},
//       {id: 103, pId: 1, name: "Don't Show Line", file: "core/noline"},
//       {id: 104, pId: 1, name: "Don't Show Icon", file: "core/noicon"},

//       {id: 2, pId: 0, name: "[excheck] Checkbox & Radio", open: false},
//       {id: 201, pId: 2, name: "Checkbox Operation", file: "excheck/checkbox"},

//       {id: 3, pId: 0, name: "[exedit] Editing", open: false},
//       {id: 301, pId: 3, name: "Normal Drag Node Operation", file: "exedit/drag"},
//     ];
   
    $(document).ready(function(){
        getData();
    })

    function getData(){
        var url = '{{route('network.diagram.get')}}';
        axios.post(url, null).then((res)=>{
            zNodes = res.data;
            
            var t = $("#tree");
            t = $.fn.zTree.init(t, setting, zNodes);
            // demoIframe = $("#testIframe");
            // demoIframe.bind("load", loadReady);
            // var zTree = $.fn.zTree.getZTreeObj("tree");
            // zTree.selectNode(zTree.getNodeByParam("id", 101));
            // console.log(res);
        })
    }

    var zTree;
    var demoIframe;

    var setting = {
      view: {
        dblClickExpand: false,
        showLine: true,
        selectedMulti: false
      },
      data: {
        simpleData: {
          enable: true,
          idKey: "id",
          pIdKey: "pId",
          rootPId: ""
        }
      },
      callback: {
        beforeClick: function (treeId, treeNode) {
          var zTree = $.fn.zTree.getZTreeObj("tree");

          showDetail(treeNode);
          
          if (treeNode.isParent) {
            zTree.expandNode(treeNode);
            return false;
          } else {
            // demoIframe.attr("src", treeNode.file + ".html");
            return true;
          }
        }
      }
    };

    function showDetail(treeNode){
      $('#name').html(treeNode.name);
      $('#ip').html(treeNode.ip);
      $('#type').html(treeNode.type);
      $('#group').html(treeNode.group);
    }

    

    $(document).ready(function () {
      

    });

    function loadReady() {
      var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
        htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
        maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
        h = demoIframe.height() >= maxH ? minH : maxH;
      if (h < 530) h = 530;
      demoIframe.height(h);
    }
</script>
    
@endpush