@section('head')
    <style type="text/css">
        .dd,.dd-list{padding:0;list-style:none}.dd,.dd-empty,.dd-item,.dd-placeholder{margin:0;font-size:13px;line-height:20px;position:relative;display:block}.dd,.dd-item>button,.dd-list{position:relative}.dd-handle,.dd-item>button{font-weight:700;margin:5px 0}.dd{max-width:600px}.dd-list{display:block;margin:0}.dd-list .dd-list{padding-left:30px}.dd-empty,.dd-item,.dd-placeholder{padding:0;min-height:20px}.dd-handle{display:block;height:30px;padding:5px 10px;color:#333;text-decoration:none;border:1px solid #ccc;background:#fafafa;border-radius:3px;box-sizing:border-box}.dd-handle:hover{color:#2ea8e5;background:#fff}.dd-item>button{cursor:pointer;float:left;width:25px;height:20px;padding:0;text-indent:100%;white-space:nowrap;overflow:hidden;border:0;background:0 0;font-size:12px;line-height:1;text-align:center}.dd-item>button:before{display:block;position:absolute;width:100%;text-align:center;text-indent:0}.dd-item>button.dd-expand:before{content:'+'}.dd-item>button.dd-collapse:before{content:'-'}.dd-collapsed .dd-collapse,.dd-collapsed .dd-list,.dd-expand{display:none}.dd-collapsed .dd-expand{display:block}.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-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)}.dd-nochildren .dd-placeholder{display:none}
    </style>
@endsection
@section('scripts')
    <script type="text/javascript">
        $('#create_menu').on('click', function () {
            swal({
                    title: "Nhập tên menu",
                    type: "input",
                    showCancelButton: true,
                    confirmButtonColor: "#2196F3",
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                    animation: "slide-from-top",
                    cancelButtonText: "Huỷ",
                    confirmButtonText: "Tạo"
                },
                function (inputValue) {
                    if (inputValue === false) return false;
                    if (inputValue === "") {
                        swal.showInputError("Bạn chưa nhập tên");
                        return false
                    }
                    $.ajax({
                        url: '{{route('admin.menu.store')}}',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            _token: _token,
                            name: inputValue
                        },
                        success: function (response) {
                            location.href = response.redirect;
                        },
                        error: function () {
                            errorNotice('Có lỗi xảy ra khi cập nhật.');
                        }
                    })
                });
        });

        $('#edit_menu').on('click', function () {
            swal({
                    title: "Nhập tên menu",
                    type: "input",
                    inputValue:$(this).data('value'),
                    showCancelButton: true,
                    confirmButtonColor: "#2196F3",
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                    animation: "slide-from-top",
                    cancelButtonText: "Huỷ",
                    confirmButtonText: "Cập nhật"
                },
                function (inputValue) {
                    if (inputValue === false) return false;
                    if (inputValue === "") {
                        swal.showInputError("Bạn chưa nhập tên");
                        return false
                    }
                    $.ajax({
                        url: '{{route('admin.menu.update',$menu_current['id'])}}',
                        type: 'PUT',
                        dataType: 'json',
                        data: {
                            _token: _token,
                            name: inputValue,
                        },
                        success: function (response) {
                            location.reload();
                        },
                        error: function () {
                            errorNotice('Có lỗi xảy ra khi cập nhật.');
                        }
                    })
                });
        });

        $('#delete_menu').on('click', function () {
            swal({
                    title: "Xác nhận xóa menu",
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    confirmButtonColor: "#2196F3",
                    showLoaderOnConfirm: true,
                    cancelButtonText: "Không",
                    confirmButtonText: "Có"
                },
                function () {
                    $.ajax({
                        url: '{{route('admin.menu.destroy', $menu_current['id'])}}',
                        type: 'DELETE',
                        dataType: 'json',
                        data: {
                            _token: _token,
                        },
                        success: function (response) {
                            location.href = "{{route('admin.menu.index')}}";
                        },
                        error: function () {
                            errorNotice('Có lỗi xảy ra khi xóa');
                        }
                    })
                });
        });


        var old_data;
        $('.menu_container').nestable({
            handleClass: 'menu-handle',
            placeClass: 'sortable-placeholder',
            expandBtnHTML: '',
            collapseBtnHTML: '',
            emptyClass: '',
            noDragClass: 'heading-elements',
            onDragStart: function (l, e, p) {
                old_data = $(l).nestable('toArray');
            },
            callback: function (l, e, p) {
                var new_data = $(l).nestable('toArray');
                if (JSON.stringify(old_data) !== JSON.stringify(new_data)) {
                    $.ajax({
                        url: '{{route('admin.menu.sort')}}',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            _token: _token,
                            data: new_data
                        },
                        success: function (response) {
                            successNotice('Cập nhật thành công.');
                        },
                        error: function () {
                            errorNotice('Có lỗi xảy ra khi cập nhật.');
                        }
                    })
                }

            }
        });

        $('.menu_container').on('submit', '.store-form', function (event) {
            event.preventDefault();
            var cur_item = $(this).find('.widget-item');
            $(this).closest('.store-form').ajaxSubmit({
                success: function (data) {
                    cur_item.attr('data-id', data.id);
                    cur_item.find('.panel-title').html(cur_item.find('input[name="name"]').val());
                    successNotice('Lưu thành công');
                },
                error: function (data) {
                    errorNotice('Có lỗi xảy ra');
                }
            });
            return false;
        });

        $('.menu_container').on('click', '.btn-remove-item', function (event) {
            event.preventDefault();
            var btn = $(this);
            swal({
                    title: "Xác nhận xóa menu con",
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    confirmButtonColor: "#2196F3",
                    showLoaderOnConfirm: true,
                    cancelButtonText: "Không",
                    confirmButtonText: "Có"
                },
                function () {
                    btn.closest('.store-form').ajaxSubmit({
                        type: 'DELETE',
                        success: function (data) {
                            swal.close();
                            if (data) {
                                btn.closest('.menu-item').remove();
                                // $('.menu_container').nestable('remove', btn.closest('.menu-item').data('id'));
                            } else {
                                errorNotice('Không thể xóa mục này');
                            }
                        },
                        error: function (data) {
                            swal.close();
                            errorNotice('Có lỗi xảy ra');
                        }
                    });
                });
        });

        $('#btn-remove-all-item').click(function () {
            let _this = this;
            swal({
                showLoaderOnConfirm: true,
                closeOnConfirm: false,
                title: "Bạn có chắc thực hiện thao tác xóa không ?",
                text: "Bạn sẽ không thể lấy lại được dữ liệu này !",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#FF7043",
                cancelButtonText: "Không",
                confirmButtonText: "Có"
            }, function () {
                $.ajax({
                    url: $(_this).data('url'),
                    type: 'DELETE',
                    dataType: 'json',
                    data: {
                        _token: _token,
                    },
                    success: function (data) {
//                   $('.menu_container').nestable('removeAll');
                        window.location.replace(data.redirect);
                        swal.close();
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        swal.close();
                    }
                });
            });
        });

        function buildTree(list) {
            var tree=[],i, j;
            for (i = 0; i < list.length; i += 1) {
                list[i].hasChild = false;
                for (j = 0; j < list.length; j += 1) {
                    if (list[i].taxonomy_id == list[j].parent_taxonomy_id) {
                        list[i].hasChild = true;
                    }
                }
            }

            var items_delete = [];
            for (i = 0; i < list.length; i += 1) {
                if (list[i].hasChild == false) {
                    for (j = 0; j < list.length; j += 1) {
                        if (list[i].parent_taxonomy_id == list[j].taxonomy_id) {
                            list[j].child.push(list[i]);
                            items_delete.push(i);
                        }
                    }
                }
            }
            if(items_delete.length){
                items_delete.forEach(function (element) {
                    delete list[element];
                });
                list.forEach(function (element) {
                    tree.push(element);
                });
                return buildTree(tree)
            }else{
                return list
            }
        }

        function ListToTree(list) {
            for (let i = 0; i < list.length; i += 1) {
                list[i].child = []
            }
            return buildTree(list);
        }

        $('.add_lists').click(function (event) {
            event.preventDefault();
            var checked = $(this).closest('.category-content').find('.checked input');
            var menu_item = [];
            checked.each(function (index) {
                menu_item.push($(this).data());
            });
            let data = {items:ListToTree(menu_item)}
            addItemMenu(data);
        });

        $('a[data-input=origin]').each(function (i, value) {
            var value_exist = $('.category-content input[data-taxonomy=' + $(value).data('taxonomy') + ']input[data-taxonomy_id=' + $(value).data('taxonomy_id') + ']');
            $(value).html(value_exist.data('name'));

            $(this).closest('.widget-item').find('.menu_type').html(value_exist.closest('.sidebar-category').find('.category-title span').html());
        });

        function addItemMenu(data) {
            data.menu_id = $('#menu_id').val();
            data._token = _token;
            $.ajax({
                url: '{{route('admin.menu.item.store')}}',
                type: 'POST',
                data: data,
                success: function (html) {
                    // $('.menu_container ol:first-child').append(html);
                    // successNotice('Thông báo', 'Thêm menu con thành công.');
                    location.reload();
                },
                error: function () {
                    errorNotice('Thông báo', 'Có lỗi xảy ra.');
                }
            });
        }

        //form external link

        //before show form modal
        $('.external_link').click(function () {
            $('#modal_form_external_link input[name=parent_id]').val($(this).data('parent_id'));
        })

        //action submit form external
        $('#form_external_link').submit(function () {
            var item = {};
            $.each($(this).serializeArray(), function (i, input) {
                item[input.name] = input.value;
            });
            let data = {items:[item]}
            addItemMenu(data);
            return false;
        })
        $('.category-collapsed').on('click', function (e) {
            e.preventDefault();
            let collapse = $(this).find('[data-action=collapse]');
            var $categoryCollapse = collapse.parent().parent().parent().nextAll();
            collapse.parents('.category-title').toggleClass('category-collapsed');
            collapse.toggleClass('rotate-180');
            // containerHeight(); // adjust page height
            $categoryCollapse.slideToggle(150);
        });

    </script>
@endsection