@extends('layouts.app')



@section('content')
<div class="container">
@include('shared.messages')
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-indent-right"></span> {{__('texte.categories_arr.categories_order.categories')}}</h3>
                    <div class="pull-right">
                    @permission('category-route-list')
                            <a class="btn btn-primary back-btn" href="{{ route('categories.index') }}">{{__('texte.categories_arr.categories_order.back')}}</a>
                    @endpermission
                    </div>
                </div>
                <div class="panel-body">
                    @permission('category-route-list')
                    <div class="dd" id='nestable'>
                        <ol class="dd-list">
                            @foreach($categories as $current_category)
                            <li class="dd-item" data-id="{{$current_category->id}}">
                                <div class="dd-handle">{{$current_category->name}}</div>
                                @if(count($current_category->children)>0)
                                    <ol class="dd-list">
                                    @foreach($current_category->children as $current_sub_category)
                                        <li class="dd-item" data-id="{{$current_sub_category->id}}">
                                            <div class="dd-handle">{{$current_sub_category->name}}</div>
                                            @if(count($current_sub_category->children)>0)
                                            <ol class="dd-list">
                                                @foreach($current_sub_category->children as $current_sub_sub_category)
                                                    <li class="dd-item" data-id="{{$current_sub_sub_category->id}}">
                                                        <div class="dd-handle">{{$current_sub_sub_category->name}}</div>
                                                    </li>
                                                @endforeach
                                            </ol>    
                                            @endif
                                        </li>
                                    @endforeach
                                    </ol>
                                @endif
                            </li>
                            @endforeach
                        </ol>
                    </div>
                    @endpermission
                </div>
                <div class="panel-footer"></div>

            </div>
	</div>
    </div>
</div>

<script src="{{ asset('js/jquery.nestable.js') }}"></script>

<script>
    $('.dd').nestable();
    

$(document).ready(function()
{

    var updateOutput = function (e) {
        var list = e.length ? e : $(e.target), output = list.data('output');

        $.ajax({
            headers: {
                   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                   },
            method: "POST",
            url: "/set_categories_order",
            data: {
                list: list.nestable('serialize')
            }
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Unable to save new list order: " + errorThrown);
        });
    }; 
    

    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);


    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });

});

</script>
@endsection