@extends('tree.app')

@section('styles')
@endsection

@section('content')
    @include('menu::menu.tree.navbar')
    <div class="row">
        <div class="col-md-9">
            <div class="card card-body">
                @if (!empty($data))
                    <div id="tree_view">
                        <ul>
                            @foreach ($data as $item)
                                @if (!empty($item->children) && $item->children->count())
                                    <li data-jstree='{"opened":true,"icon":"fas fa-chevron-circle-right"}'
                                        data-id="{{ $item->id }}"> <a>{{ $item->translate->name ?? '' }}</a>
                                        @include('menu::menu.tree.children', ['param' => $item->children])
                                    </li>
                                @else
                                    <li data-jstree='{"opened":true,"icon":"fas fa-chevron-circle-right"}'
                                        data-id="{{ $item->id }}">{{ $item->translate->name }}</li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var $_section = $.parseJSON('null');
        console.log($_section);
        var $_config = $.parseJSON('null');
        console.log($_config);
    </script>
    {{ module_vite('build-menu', 'resources/assets/js/menu.js') }}
@endsection