@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.vat_rates_arr.order.vat_rates')}}</h3>
                <div class="pull-right">
                    <a class="btn btn-primary back-btn" href="{{ route('vat_rates.index') }}" @cannot('list_vat_rates') disabled="disabled" @endcannot>{{__('texte.vat_rates_arr.order.vat_rates')}}</a>
                </div>
            </div>
            <div class="panel-body">
                <div class="dd" id='nestable'>
                    <ol class="dd-list">
                        @foreach($vat_rates as $vat_rate)
                        <li class="dd-item" data-id="{{$vat_rate->id}}">
                            <div class="dd-handle">{{$vat_rate->rate}}</div>                            
                        </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:1});
    

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