@extends('layouts.app')
@section('title', __( 'commission_group.commission_group' ))

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" />

 
<section class="content">
     
    <div id="commission-tree"></div>
</section>

<!-- Load Treant dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.min.js"></script>

<script>
    // Pass PHP array to JS (as JSON)
    var treeData = {!! json_encode($treeData ?? ['text'=>['name'=>'No data'],'children'=>[]]) !!};

    console.log("Tree Data:", treeData); // Debugging

    window.addEventListener('load', function () {
        try {
            var chartConfig = {
                chart: {
                    container: "#commission-tree",
                    nodeAlign: "BOTTOM",
                    connectors: { type: "step" },
                    node: { HTMLclass: "node" }
                },
                nodeStructure: treeData
            };

            new Treant(chartConfig);
        } catch (err) {
            console.error("Treant error:", err);
            document.getElementById('commission-tree').innerHTML = "<p>Error rendering tree.</p>";
        }
    });
</script>
@endsection