{{-- resolve --}}
@if(!@$statTree)
    @if(!@$slug)
        <div class="alert alert-danger m-0">Slug missing!</div>
    @endif
    <?php $statTree = \App\Models\StatTree::where('slug', $slug)->first(); ?>
    @if(!@$statTree)
        <div class="alert alert-danger m-0">Stat tree no found!</div>
    @endif
@endif
<link rel="stylesheet" href="/jstree/themes/default/style.min.css" />
<script src="/jstree/jstree.min.js"></script>
<div class="bg-light font-weight-bold text-secondary border-bottom" style="padding: 0.3rem;">Summary</div>
<div id="statTreeView-{{$statTree? $statTree->id: ''}}">
    <div class="stat-tree-view stat-tree-user-view stat-tree-summary-view overflow-auto min-height-300px" id="stat-tree-view-{{$statTree? $statTree->id: ''}}"></div>
</div>
<script>
    (function() {
        function init() {

            (function ($, undefined) {
                "use strict";
                $.jstree.plugins.noclose = function () {
                    this.close_node = $.noop;
                };
            })(jQuery);

            // stat tree
            let StatTree = {
                el: $('#stat-tree-view-{{$statTree? $statTree->id: ""}}'),
                changed: false,

                onSelected: function(_e, _data) {
                    {{--@if(!@$reportTarget)
                        openDynamicStagPopup('/practice-management/stat-tree-lines/view-data/' + _data.node.data.uid + '{{@$showForPro ? '?proUid=' . $showForPro->uid : ''}}',
                            null,
                            _data.node.data.displayLabel,
                            false,
                            'medium');
                    @else
                        $.get('/practice-management/stat-tree-lines/view-data/' + _data.node.data.uid + '{{@$showForPro ? '?proUid=' . $showForPro->uid : ''}}', _data => {
                            $('{{$reportTarget}}').html(_data);
                        });
                    @endif--}}
                },

                load: function() {

                    // destroy if existing
                    try {
                        this.el.jstree('destroy');
                    }
                    catch (e) {}

                    this.el = $('#stat-tree-view-{{$statTree? $statTree->id : ''}}');

                    // get data
                    showMask();

                    <?php
                    $params = [];
                    if(@$showForPro) $params[] = 'proUid=' . $showForPro->uid;
                    if(@$stParams) {
                        foreach ($stParams as $k => $v) {
                            $params[] = 'st__' . $k . '=' . $v;
                        }
                    }
                    $params = '?' . implode('&', $params);
                    ?>
                    @if($statTree)
                    $.get('{{ route('practice-management.statTrees.view.linesJSON', $statTree) }}{!! $params !!}', _data => {

                        // init tree with data
                        this.el
                            .on('redraw.jstree', () => {
                                @if(!@$noDropVisualize)
                                    StatTree.dropVisualize();
                                @endif
                            })
                            .on('select_node.jstree', (_e, _data) => { StatTree.onSelected(_e, _data); })
                            .jstree({
                                "core": {
                                    "select": false,
                                    "multiple": false,
                                    "animation": 0,
                                    'data': _data
                                },
                                "contextmenu": {
                                    show_at_node: false,
                                    items: function (node) {
                                        if(node.data.type === 'stat_tree_line') { // stat_tree_line
                                            return {
                                                "data": {
                                                    "label": "<span class='text-sm'>View Data</span>",
                                                    "action": function (obj) {
                                                        openDynamicStagPopup('/practice-management/stat-tree-lines/view-data/' + node.data.uid,
                                                            null,
                                                            node.data.displayLabel,
                                                            false,
                                                            'medium');
                                                    }
                                                },
                                            }
                                        }
                                    },
                                },
                                "plugins": [
                                    "wholerow",
                                    //"contextmenu",
                                    "noclose"
                                ]
                            });
                    }, 'json').then(hideMask);
                    @endif
                },

                dropVisualize: function() {
                    console.log('redrawn')
                    function calculateDropPercent(node, parent = null) {
                        let realNode = StatTree.el.jstree(true).get_node(node.id);
                        if(!realNode.data) return;
                        if(parent && parent.data.lastRefreshCount !== null) {
                            if(node.data.lastRefreshCount !== null) {
                                realNode.data.dropPercent = (((parent.data.lastRefreshCount - node.data.lastRefreshCount) / parent.data.lastRefreshCount) * 100);
                                if(realNode.data.dropPercent) {
                                    let element = StatTree.el.jstree(true).get_node(node.id, true), cssClass = '';
                                    if(realNode.data.dropPercent > 75) {
                                        cssClass = 'drop-76-100';
                                    }
                                    else if(realNode.data.dropPercent > 50 && realNode.data.dropPercent <= 75) {
                                        cssClass = 'drop-51-75';
                                    }
                                    else if(realNode.data.dropPercent > 25 && realNode.data.dropPercent <= 50) {
                                        cssClass = 'drop-26-50';
                                    }
                                    else if(realNode.data.dropPercent > 0 && realNode.data.dropPercent <= 25) {
                                        cssClass = 'drop-0-25';
                                    }
                                    element.find('>a.jstree-anchor')
                                        .addClass('has-drop-visualization')
                                        .addClass(cssClass)
                                        .attr('data-drop-percent', (realNode.data.dropPercent.toFixed(1)) + '% ⤵');
                                }
                            }
                        }
                        for (let i = 0; i < node.children.length; i++) {
                            calculateDropPercent(node.children[i], node);
                        }
                    }
                    let raw = this.el.jstree('get_json');
                    for (let i = 0; i < raw.length; i++) {
                        calculateDropPercent(raw[i]);
                    }
                },
            };

            StatTree.load();

        }
        addMCInitializer('stat-tree-view-{{$statTree? $statTree->id: ''}}', init, '#statTreeView-{{$statTree? $statTree->id: ''}}');
    }).call(window);
</script>