@extends('layouts.admin')
@section('header_content')
    <style>
        .loading {
            position: absolute;
            top: -14px;
            right: 20px;
            background: #1f374e;
            border-radius: 3px;
            padding: 5px 10px;
            color: #fff;
            display: none;
        }

        .white-box {
            min-height: 550px;
        }

        body.dragging, body.dragging * {
            cursor: move !important;
        }

        .dragged {
            position: absolute;
            opacity: 0.5;
            z-index: 2000;
        }

        ul.simple_with_animation {
            border: 1px solid #ddd;
            background: #edf1f5;
            padding: 10px;
            cursor: move;
            border-radius: 3px;
            min-height: 40px;
            font-weight: 400;
        }

        ul.simple_with_animation li {
            background: #fff;
            padding: 10px;
            margin: 3px 0px;
            min-height: 40px;
        }

        ul.simple_with_animation li.placeholder {
            position: relative;
            /** More li styles **/
        }

        ul.simple_with_animation li.placeholder:before {
            position: absolute;
            /** Define arrowhead **/
        }
    </style>
@endsection
@section('content')
    <!-- Dropdown menus -->
    <div class="content-group">
        <h6 class="text-semibold">Permission</h6>

    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-body border-top-info">
                <div class="text-center">
                    <h2 class="text-semibold no-margin">Allowed Permissions</h2>
                </div>

                <ul class="dropdown-menu dropdown-menu-sortable simple_with_animation" style="display: block; position: static; width: 100%; margin-top: 0; float: none;" id="allowed_permissions">
                    @if(!empty($role->perms))
                        @foreach($role->perms as $perm)
                            <li permid="{{ $perm->id }}"><a href="#">{{ $perm->display_name }}</a></li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-body border-top-info">
                <div class="text-center">
                    <h2 class="no-margin text-semibold">Disallowed Permissions</h2>
                </div>

                <ul class="dropdown-menu dropdown-menu-sortable simple_with_animation" style="display: block; position: static; width: 100%; margin-top: 0; float: none;" id="disallowed_permissions">
                    @foreach($permissions as $permission)
                        <li permid="{{ $permission->id }}"><a href="#">{{ $permission->display_name }}</a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <!-- /dropdown menus -->

@endsection
@section('footer-content')
    <script src="{{ asset('assets/js/plugins/jquery-sortable/jquery-sortable-min.js') }}"></script>
    <!-- Theme JS files -->
    <script type="text/javascript" src="{{asset('assets/js/plugins/ui/dragula.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/forms/selects/select2.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

    {{--<script type="text/javascript" src="{{asset('assets/js/core/app.js')}}"></script>--}}
    <script type="text/javascript" src="{{asset('assets/js/pages/extension_dnd.js')}}"></script>
    <script>
        var adjustment;
        var request_started = false;

        $("ul.simple_with_animation").sortable({
            group: 'simple_with_animation',
            pullPlaceholder: false,
            // animation on drop
            onDrop: function ($item, container, _super) {
                var $clonedItem = $('<li/>').css({height: 0});
                $item.before($clonedItem);
                console.log($item)
                console.log($item.parent().attr('id'))
                $clonedItem.animate({'height': $item.height()});
                if (!request_started) {
                    $.ajax({
                        url: "{{ url('update-permissions') }}",
                        data: "id=" + $item.attr('permid') + "&role={{ Request::segment(2) }}&type=" + $item.parent().attr('id') + "&_token={{ csrf_token() }}",
                        dataType: 'json',
                        type: 'POST',
                        beforeSend: function (jqXHR, settings) {
                            request_started = true;
//                            $('.loading').text('Saving...').fadeIn(1000);
                        },
                        success: function (data) {
                            //console.log(data);
                        },
                        complete: function (jqXHR, textStatus) {
                            request_started = false;
                            if (textStatus == 'success') {
                                $('.loading').text('Saved.');
                                setTimeout(function () {
                                    $('.loading').hide();
                                }, 1000);
                            } else {
                                $('.loading').css('background', '#ff0000').text('Oops! Error occurred. Please try again later.');
                                setTimeout(function () {
                                    $('.loading').hide(function () {
                                        $(this).css('background', '#1f374e');
                                    });
                                }, 1000);
                            }
                        }
                    });
                }

                $item.animate($clonedItem.position(), function () {
                    $clonedItem.detach();
                    _super($item, container);
                });
            },
            // set $item relative to cursor position
            onDragStart: function ($item, container, _super) {
                var offset = $item.offset(),
                        pointer = container.rootGroup.pointer;

                adjustment = {
                    left: pointer.left - offset.left,
                    top: pointer.top - offset.top
                };

                _super($item, container);
            },
            onDrag: function ($item, position) {
                $item.css({
                    left: position.left - adjustment.left,
                    top: position.top - adjustment.top
                });
            }
        });
    </script>
@endsection