@extends('layouts.parent')
@section('title', 'Silsilah')
@section('content')
<div class="row">
  <div class="col-md-12 my-3">
    <a href="{{ route('geanology.index') }}" class="btn btn-primary">
      <i class="bx bx-arrow-back"></i>
      Kembali
    </a>
  </div>
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        <div id="myDiagram"></div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('script')
<script>
  function init() {
      const dataSapi = @json($keys);
      const linksSapi = @json($parents);
      if(dataSapi.length === 0) {
        document.getElementById("myDiagram").innerHTML = "<h1>Silsilah tidak diketahui, silahkan lengkapi data sapi terlebih dahulu!</h1>";
        // buang border card
        document.getElementById("myDiagram").style.border = "none";
        document.getElementById("myDiagram").style.display = "flex";
        document.getElementById("myDiagram").style.justifyContent = "center";
        document.getElementById("myDiagram").style.alignItems = "center";
        document.getElementById("myDiagram").style.height = "30vh";
        return;
      }
      if(linksSapi.length === 0) {
        // delete myDiagram
        return;
      }
      const data = JSON.parse(dataSapi);
      const links = JSON.parse(linksSapi);




      const $ = go.GraphObject.make;
      const myDiagram = $(go.Diagram, "myDiagram", {
        "undoManager.isEnabled": true,
        layout: $(go.TreeLayout, {
          angle: 270,
          arrangement: go.TreeLayout.ArrangementFixedRoots,
          layerSpacing: 35,
          nodeSpacing: 20,
        }),
      });

      myDiagram.nodeTemplate =
        $(go.Node, "Horizontal", 
          {
            background: "black",
            margin: 10,
            padding: 10,
          },
         
          $(go.Picture, 
            {
              name: "Picture", 
              desiredSize: new go.Size(20, 20),
              margin: 5,
              cursor: "pointer",
            },
            new go.Binding("source", "image")
          ),
          $(go.Panel, "Vertical", 
          $(go.TextBlock, { margin: 5, font: "bold 12px sans-serif", stroke: "white" }, new go.Binding("text", "name")),
            $(go.TextBlock,
              { margin: 2, font: "12px sans-serif", stroke: "white" },
              new go.Binding("text", "nama_pemilik")
            ),
            $(go.TextBlock,
              { margin: 2, font: "12px sans-serif", stroke: "white" },
              new go.Binding("text", "phone")
            )
          )
        );


      myDiagram.linkTemplate =
        $(go.Link,
          { routing: go.Link.Orthogonal, corner: 5 },
          $(go.Shape, { stroke: "black", strokeWidth: 2 }),
        );

     
      myDiagram.model = new go.GraphLinksModel(data, links);
    }

    window.addEventListener('DOMContentLoaded', init);
</script>
@endpush