@extends('layouts.tenant.master')

@section('title', tenant('id'))

@section('css')
    <link href="https://unpkg.com/vis-network/styles/vis-network.min.css" rel="stylesheet">
@endsection

@section('style')
    <style>
        #network {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
    </style>
@endsection

@section('breadcrumb-title')
    <h2>Admin<span>Dashboard </span></h2>
@endsection
@section('breadcrumb-items')
    <li class="breadcrumb-item">Admin </li>
    <li class="breadcrumb-item">Dashboard</li>
@endsection

@section('content')
    <div class="container">
        {{-- <pre>{!! json_encode($vis_nodes, JSON_PRETTY_PRINT) !!}</pre>
        <pre>{!! json_encode($vis_edges, JSON_PRETTY_PRINT) !!}</pre> --}}
        <h4>Connection Charts</h4>
        <div id="network" style="width: 100%; height: 600px; border: 1px solid lightgray;"></div>
    </div>
@endsection

@section('script')
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

    <script>
        console.log("Script is loaded");
        document.addEventListener("DOMContentLoaded", function () {
            console.log("DOM loaded");
            const nodes = new vis.DataSet(@json($vis_nodes));
            const edges = new vis.DataSet(@json($vis_edges));

            const container = document.getElementById("network");
            const data = { nodes, edges };
            const options = {
                layout: {
                    hierarchical: {
                        enabled: true,
                        direction: "UD",
                        sortMethod: "directed",
                        nodeSpacing: 200,
                        levelSeparation: 150
                    }
                },
                nodes: {
                    shape: "box",
                    font: { size: 14 },
                    color: {
                        background: "#D2E5FF",
                        border: "#2B7CE9"
                    }
                },
                edges: {
                    arrows: {
                        to: { enabled: true, scaleFactor: 1 }
                    },
                    smooth: {
                        type: "cubicBezier",
                        forceDirection: "vertical",
                        roundness: 0.4
                    }
                },
                physics: false
            };

            new vis.Network(container, data, options);
        });
    </script>
@endsection