<x-app-layout>

    <x-slot name="after_style">
        <link rel="stylesheet" href="/bower_components/fontawesome-iconpicker/dist/css/fontawesome-iconpicker.min.css">

        <style>
            .dd {
                font-size: 13px;
                line-height: 20px
            }

            .dd,
            .dd-list {
                position: relative;
                display: block;
                margin: 0;
                padding: 0;
                list-style: none
            }

            .dd-collapsed .dd-list {
                display: none
            }

            .dd-empty,
            .dd-item,
            .dd-placeholder {
                display: block;
                position: relative;
                margin: 0;
                padding: 0;
                min-height: 20px;
                font-size: 13px;
                line-height: 20px
            }

            .dd-handle {
                display: block;
                height: 50px;
                margin: 5px 0;
                padding: 14px 25px;
                color: #333;
                text-decoration: none;
                font-weight: 700;
                border: 1px solid #ccc;
                background: #fafafa;
                border-radius: 3px;
                box-sizing: border-box;
                -moz-box-sizing: border-box
            }

            .dd-handle:hover {
                color: #2ea8e5;
                background: #fff
            }

            .dd-item>button {
                display: block;
                position: relative;
                cursor: pointer;
                width: 40px;
                height: 37px;
                margin: 5px 0;
                padding: 0;
                text-indent: 100%;
                white-space: nowrap;
                overflow: hidden;
                border: 0;
                background: transparent;
                font-size: 12px;
                line-height: 1;
                text-align: center;
                font-weight: 700
            }

            .dd-item>button:before {
                content: "+";
                display: block;
                position: absolute;
                width: 100%;
                text-align: center;
                text-indent: 0
            }

            .dd-item>button[data-action=collapse]:before {
                content: "-"
            }

            .dd-empty,
            .dd-placeholder {
                margin: 5px 0;
                padding: 0;
                min-height: 30px;
                background: #f2fbff;
                border: 1px dashed #b6bcbf;
                box-sizing: border-box;
                -moz-box-sizing: border-box
            }

            .dd-empty {
                border: 1px dashed #bbb;
                min-height: 100px;
                background-color: #e5e5e5;
                background-image: linear-gradient(45deg, #fff 25%, transparent 0, transparent 75%, #fff 0, #fff), linear-gradient(45deg, #fff 25%, transparent 0, transparent 75%, #fff 0, #fff);
                background-size: 60px 60px;
                background-position: 0 0, 30px 30px
            }

            .dd-dragel {
                position: absolute;
                pointer-events: none;
                z-index: 9999
            }

            .dd-dragel>.dd-item .dd-handle {
                margin-top: 0
            }

            .dd-dragel .dd-handle {
                box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1)
            }

            .nestable-lists {
                display: block;
                clear: both;
                padding: 30px 0;
                width: 100%;
                border: 0;
                border-top: 2px solid #ddd;
                border-bottom: 2px solid #ddd
            }

            #nestable-menu {
                padding: 0;
                margin: 20px 0
            }

            #nestable2-output,
            #nestable-output {
                width: 100%;
                height: 7em;
                font-size: .75em;
                line-height: 1.333333em;
                font-family: Consolas, monospace;
                padding: 5px;
                box-sizing: border-box;
                -moz-box-sizing: border-box
            }

            #nestable2 .dd-handle {
                color: #fff;
                border: 1px solid #999;
                background: #bbb;
                background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#999));
                background: linear-gradient(180deg, #bbb 0, #999)
            }

            .menus .table>tbody>tr>td {
                line-height: 44px
            }

            #nestable2 .dd-handle:hover {
                background: #bbb
            }

            #nestable2 .dd-item>button:before {
                color: #fff
            }

            @media only screen and (min-width:700px) {
                .dd {
                    float: left;
                    width: 100%
                }

                .dd+.dd {
                    margin-left: 2%
                }
            }

            .dd-hover>.dd-handle {
                background: #2ea8e5 !important
            }

            .dd3-content {
                display: block;
                height: 30px;
                margin: 5px 0;
                padding: 5px 10px 5px 40px;
                color: #333;
                text-decoration: none;
                font-weight: 700;
                border: 1px solid #ccc;
                background: #fafafa;
                background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));
                background: linear-gradient(180deg, #fafafa 0, #eee);
                border-radius: 3px;
                box-sizing: border-box;
                -moz-box-sizing: border-box
            }

            .dd3-content:hover {
                color: #2ea8e5;
                background: #fff
            }

            .dd-dragel>.dd3-item>.dd3-content {
                margin: 0
            }

            .dd3-item>button {
                margin-left: 30px
            }

            .dd3-handle {
                position: absolute;
                margin: 0;
                left: 0;
                top: 0;
                cursor: pointer;
                width: 30px;
                text-indent: 100%;
                white-space: nowrap;
                overflow: hidden;
                border: 1px solid #aaa;
                background: #ddd;
                background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
                background: linear-gradient(180deg, #ddd 0, #bbb);
                border-top-right-radius: 0;
                border-bottom-right-radius: 0
            }

            .dd3-handle:before {
                content: "\2261";
                display: block;
                position: absolute;
                left: 0;
                top: 3px;
                width: 100%;
                text-align: center;
                text-indent: 0;
                color: #fff;
                font-size: 20px;
                font-weight: 400
            }

            .dd3-handle:hover {
                background: #ddd
            }

            @if(App::isLocale('ar')) .dd .item_actions {
                z-index: 9;
                position: relative;
                top: 4px;
                left: 10px;
            }

            .dd .item_actions .edit {
                margin-left: 5px;
            }

            .dd-list .dd-list {
                padding-right: 30px
            }

            .dd-item>button {
                float: right;
            }

            @else .dd .item_actions {
                z-index: 9;
                position: relative;
                top: 4px;
                right: 10px;
            }

            .dd .item_actions .edit {
                margin-right: 5px;
            }

            .dd-list .dd-list {
                padding-left: 30px
            }

            .dd-item>button {
                float: left;
            }

            @endif .dd .btn {
                margin-top: 5px;
                margin-bottom: 5px;
                border-width: 1px;
                font-family: Open Sans, sans-serif;
            }
        </style>
    </x-slot>

    <div class="row mt-2">
            <div class="col-7">
                <div class="card">
                    <div class="card-body">
                        <div class="dd">
                            <x-menu :items="$items" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-5">
                @include('menu.create')
            </div>
        </div>

    <x-slot name="after_script">
        <script src="/bower_components/jquery-nestable/jquery.nestable.js"></script>
        <script src="/bower_components/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.min.js"></script>
        <script>
            $(function() {
                $('.dd').nestable({});
                $('.dd').on('change', function() {
                    var order = $('.dd').nestable('serialize');
                    axios.post('/menu/order', {
                            order: order
                        })
                        .then(res => {
                            alert_success(res.data.message);
                        });
                });

                $('.removeButton').click(function() {
                    var el = $(this).closest('li');
                    axios.delete('/menu/' + el.data('id'))
                        .then(res => {
                            el.remove();
                            alert_success(res.data.message);
                        });
                });

                $('.icon').iconpicker();
                $('.icon').on('iconpickerSelected', function(event) {
                    $('.icon-fa').html('<i class="' + event.target.value + '"></i>');
                });

            });
            var app = new Vue({
                    el: '#app',
                    mounted:function(){
                            this.$root.load = false;
                    }
                })
        </script>
    </x-slot>
</x-app-layout>