@extends('layouts.app')



@section('content')
@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">{{__('texte.categories_arr.categories_order.categories')}}</h3>
                <div class="pull-right">
                    <a class="btn btn-primary back-btn" href="{{ route('categories.index') }}" @cannot('list_categories') disabled="disabled" @endcannot>{{__('texte.categories_arr.categories_order.categories')}}</a>
                </div>
            </div>
            <div class="panel-body">
                <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>
            </div>
            <div class="panel-footer"></div>

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

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

<script>
    $('.dd').nestable({maxDepth:3});
    

$(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