@extends('layouts.app')
@section('title','My Genealogy')
@section('content')
<div class="bg-white p-4 rounded shadow">
  <h2 class="text-lg font-semibold mb-4">My Genealogy</h2>
  <div id="mynetwork" style="height:600px;border:1px solid #eee;"></div>
</div>

<link href="https://unpkg.com/vis-network/styles/vis-network.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<script>
fetch("{{ route('genealogy.data') }}")
  .then(r=>r.json())
  .then(data=>{
    const container = document.getElementById('mynetwork');
    const nodes = new vis.DataSet(data.nodes);
    const edges = new vis.DataSet(data.edges);
    const network = new vis.Network(container, { nodes, edges }, { layout:{hierarchical:{enabled:true, direction:'UD', sortMethod:'directed'}}, interaction:{hover:true}, physics:false });
    network.on("selectNode", function(params){ if(params.nodes.length){ const id = params.nodes[0]; window.location = '/admin/user/'+id; }});
  });
</script>
@endsection