@extends('back.layouts.main')
@section('title', 'Categories')
@section('content')
<form action="" class='main-form' method="post" enctype="multipart/form-data" >
    @csrf
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-content overflow-auto collapse show">
                    <div class="card-body card-dashboard">

                        <div id="jstree" class="demo">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-none category-details col-md-6">
            <div class="card">
                <div class="card-content overflow-auto collapse show">
                    <div class="card-body card-dashboard">
                        <div id="main_data">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-none category-details col-md-12">
            <div class="card">
                <div class="card-content overflow-auto collapse show">
                    <div class="card-body card-dashboard">
                        <div id="attribute_div">

                        </div>
                        <input type="submit" name='save' value="Save" class='btn btn-primary'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@stop

@section('breadcrumbs')
<li class="breadcrumb-item active">Categories</li>
@stop

@push('footer')
<script src="{{ url('admin/app-assets/js/scripts/jsTree/jstree.min.js') }} "></script>
<script>
    $('#jstree').jstree({ 'core' : {
        'data' : {!!  json_encode($result) !!}
    }
    }).on("changed.jstree", function (e, data) {
        if(!data.selected.length) return ;

        var level = data.instance.get_node(data.selected[0]).parents.length;
        $('.category-details').removeClass('d-none');
        $('#main_data').html("<img style='margin: 30px 45%;width: 50px;' src='../loading.gif'>");
        $('#attribute_div').html("<img style='margin: 30px 45%;width: 50px;' src='../loading.gif'>");
        if (data.instance.get_node(data.selected[0]).li_attr.class == 'add')
        {
            var parent = data.instance.get_node(data.selected[0]).parent;
            var url = '{{ url('./backend/categories/create?parent_id=') }}' + parent + '&level=' + level

        } else {
            var id = data.instance.get_node(data.selected[0]).id;
            var url = '{{ url('./backend/categories/edit?id=') }}' + id ;
        }
        $.ajax({
            url: url,
            dataType:"json",
        }).done(function (response) {
            $('#main_data').html(response.main);
            $('#attribute_div').html(response.attributes);
            $('.main-form').attr('action' ,response.action);
        });

    }).bind("loaded.jstree", function ()
    {
        // $("#jstree").jstree("select_node", {{ request('selected') }}).trigger("select_node.jstree");
    });

</script>
@endpush


@push('header')
<link href="{{ url('admin/app-assets/js/scripts/jsTree/style.min.css') }}" rel="stylesheet">
@endpush