@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.sliders_arr.sliders_order.sliders')}}</h3>
                    <div class="pull-right">
                    @permission('promotion-route-list')
                            <a class="btn btn-primary back-btn" href="{{ route('sliders.index') }}">{{__('texte.sliders_arr.sliders_order.back')}}</a>
                    @endpermission
                    </div>
                </div>
                <div class="panel-body">
                    @permission('slider-route-list')
                    <div class="dd" id='nestable'>
                        <ol class="dd-list">
                            @foreach($sliders as $current_slider)
                            <li class="dd-item" data-id="{{$current_slider->id}}">
                                <div class="dd-handle">@if($current_slider->background)<img class="thumb_image" src="{{asset('/images/sliders/thumbs/'.$current_slider->background->name)}}" alt="{{$current_slider->image->title}}"/>@endif</div>                                
                            </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_sliders_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