@extends('physician.layouts.master')
@section('content')

<!-- PLUGINS STYLES-->
    <link href="{{asset('')}}assets/vendors/jstree/dist/themes/default/style.min.css" rel="stylesheet" />

   <style>
        #jstree-dynamic { overflow-y: scroll; }

        #jstree { overflow-y: scroll; }
    </style>

            <!-- START PAGE CONTENT-->
            <div class="page-content fade-in-up">
                <div class="row">
                    
                    <div class="col-md-12">
                        <div class="ibox">
                            <div class="ibox-head">
                                <div class="ibox-title">{{ $heading }}</div>
                            </div>
                            <div class="ibox-body">
                                
                                <div id="jstree-dynamic">

                                    {!! $tree_html !!}
                                    
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-6" style="display: none;">
                        <div class="ibox">
                            <div class="ibox-head">
                                <div class="ibox-title">Basic - Static</div>
                            </div>
                            <div class="ibox-body">
                                
                                <div id="jstree">
                                    <ul>
                                        <li class="jstree-open">Admin theme
                                            <ul>
                                                <li class="jstree-open">assets
                                                    <ul>
                                                        <li class="jstree-open">html
                                                            <ul>
                                                                <li data-jstree="{&quot;type&quot;:&quot;html&quot;}">index.html</li>
                                                                <li data-jstree="{&quot;type&quot;:&quot;html&quot;}">dashboard.html</li>
                                                            </ul>
                                                        </li>
                                                        <li>css
                                                            <ul>
                                                                <li data-jstree="{&quot;type&quot;:&quot;css&quot;}">style.css</li>
                                                                <li data-jstree="{&quot;type&quot;:&quot;css&quot;}">plugins.css</li>
                                                            </ul>
                                                        </li>
                                                        <li class="jstree-open">js
                                                            <ul>
                                                                <li data-jstree="{&quot;type&quot;:&quot;js&quot;}">bootstrap.js</li>
                                                                <li data-jstree="{&quot;type&quot;:&quot;js&quot;}">jquery.js</li>
                                                                <li data-jstree="{&quot;type&quot;:&quot;js&quot;}">app.js</li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>fonts
                                                    <ul>
                                                        <li data-jstree="{&quot;type&quot;:&quot;file&quot;}">glyphicons-halflings-regular.eot</li>
                                                        <li data-jstree="{&quot;type&quot;:&quot;file&quot;}">glyphicons-halflings-regular.svg</li>
                                                        <li data-jstree="{&quot;type&quot;:&quot;file&quot;}">glyphicons-halflings-regular.ttf</li>
                                                        <li data-jstree="{&quot;type&quot;:&quot;file&quot;}">glyphicons-halflings-regular.woff</li>
                                                    </ul>
                                                </li>
                                                <li class="jstree-open">img
                                                    <ul>
                                                        <li data-jstree="{&quot;type&quot;:&quot;img&quot;}">logo.jpg</li>
                                                        <li data-jstree="{&quot;type&quot;:&quot;img&quot;}">logo-small.png</li>
                                                        <li data-jstree="{&quot;type&quot;:&quot;img&quot;}">avatar.png</li>
                                                    </ul>
                                                </li>
                                                <li>Media
                                                    <ul>
                                                        <li data-jstree="{&quot;type&quot;:&quot;video&quot;}">video.avi</li>
                                                        <li data-jstree="{&quot;type&quot;:&quot;video&quot;}">video2.avi</li>
                                                        <li data-jstree="{&quot;type&quot;:&quot;audio&quot;}">audio.mp3</li>
                                                        <li data-jstree="{&quot;type&quot;:&quot;audio&quot;}">audio2.mp3</li>
                                                    </ul>
                                                </li>
                                                <li>Docs
                                                    <ul>
                                                        <li data-jstree="{&quot;icon&quot;:&quot;fa fa-file-excel-o&quot;}">excel.xlsx</li>
                                                        <li data-jstree="{&quot;icon&quot;:&quot;fa fa-file-word-o&quot;}">word.docx</li>
                                                        <li data-jstree="{&quot;icon&quot;:&quot;fa fa-file-powerpoint-o&quot;}">powerpoint.pptx</li>
                                                        <li data-jstree="{&quot;icon&quot;:&quot;fa fa-file-pdf-o&quot;}">layout.pdf</li>
                                                    </ul>
                                                </li>
                                                <li class="text-success" data-jstree="{&quot;type&quot;:&quot;html&quot;}"> index.html</li>
                                                <li data-jstree="{&quot;type&quot;:&quot;file&quot;}"> .htaccess</li>
                                                <li data-jstree="{&quot;icon&quot;:&quot;fa fa-file-image-o&quot;}"> favicon.ico</li>
                                                <li data-jstree="{&quot;icon&quot;:&quot;fa fa-file-archive-o&quot;}"> archive.zip</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div> 
                    
                </div>
            </div>
            <!-- END PAGE CONTENT-->
@endsection

@section('scripts')

    <!-- PAGE LEVEL PLUGINS-->
    <script src="{{asset('')}}assets/vendors/jstree/dist/jstree.js"></script>
    <!-- PAGE LEVEL SCRIPTS-->
    <script src="{{asset('')}}assets/js/scripts/tree-view-demo.js"></script>

    <script>
        $(function(){
    $('#jstree-dynamic').jstree({
      core : {
            'check_callback' : true
        },
        plugins:["dnd","types"],
        types : {
            'default' : {
                'icon' : 'fa fa-folder'
            },
            'file' : {
                icon : 'fa fa-file-o'
            },
            'html' : {
                icon : 'fa fa-file-code-o'
            },
            'css' : {
                icon : 'fa fa-file-code-o'
            },
            'js' : {
                icon : 'fa fa-file-text-o'
            },
            'img' : {
                icon : 'fa fa-file-image-o'
            },
            'audio' : {
                icon : 'fa fa-file-audio-o'
            },
            'video' : {
                icon : 'fa fa-file-video-o'
            },
        }
    });

    });
    </script>

@endsection