@section('scripts')
    {{ Html::script(config('app.assets_url').'/backend/js/core/libraries/jquery_ui/interactions.min.js') }}
    {{ Html::script(config('app.assets_url').'/backend/js/core/libraries/jquery_ui/touch.min.js') }}
    {{ Html::script(config('app.assets_url').'/backend/js/plugins/pickers/color/spectrum.js') }}
    <script type="text/javascript">
        var widget_new = false;
        $('.widget-item-exist textarea[bs-type=ckeditor-widget]').each(function () {
            WBForm.initCkeditor($(this).attr('id'));
        });
        var sortable_ids = {};

        function assembleData(object, arguments) {
            var data = $(object).sortable('toArray', {
                attribute: 'data-id'
            }); // Get array data
            var step_id = $(object).closest('.widget-block').data('pos'); // Get step_id and we will use it as property name
            var block_id = $(object).closest('.widget-block').data('block');
            var arrayLength = data.length; // no need to explain

            /* Create step_id property if it does not exist */
            if (!arguments.hasOwnProperty(step_id)) {
                arguments[step_id] = new Array();
            }

            /* Loop through all items */
            for (var i = 0; i < arrayLength; i++) {
                var image_id = data[i];
                /* push all image_id onto property step_id (which is an array) */
                arguments[step_id].push({id: image_id, block: block_id});
            }
            return arguments;
        }

        WB.chooseColor('.color_style');


        $(".widget-block").sortable({
            cancel: '.cke_inner',
            zIndex: 10000,
            connectWith: '.widget-block',
            items: '.panel',
            helper: 'original',
            cursor: 'move',
            handle: '.panel-title, [data-action=move]',
            revert: 100,
            containment: '.content-wrapper',
            forceHelperSize: true,
            placeholder: 'sortable-placeholder',
            forcePlaceholderSize: true,
            tolerance: 'pointer',
            opacity: 0.8,
            dropOnEmpty: true,
            start: function (e, ui) {
                ui.item.data('start_pos', $(ui.item).parent().attr('id')+'_'+ui.item.index());
                $($(ui.item).data('position')).parent().css('border-color','#999');

                ui.placeholder.height(ui.item.outerHeight());
                sortable_ids = {};
                ui.item.find("textarea[bs-type=ckeditor-widget]").each(function() {
                    var id_textarea = $(this).attr("id");
                    if(id_textarea){
                        if(id_textarea=='wg_cke_' || id_textarea=='wg_cke_1_' || id_textarea=='wg_cke_2_'){
                            var new_id=Math.floor((Math.random() * 999) + 1);
                            id_textarea =id_textarea+new_id;
                            $(this).attr('id',id_textarea);
                        }
                        if(CKEDITOR.instances[id_textarea]){
                            CKEDITOR.instances[id_textarea].destroy();
                        }
                    }
                });
            },
            update: function (e, ui) {
                if (this === ui.item.parent()[0]) {
                    /* In case the change occures in the same container */
                    if (ui.sender == null) {
                        sortable_ids = assembleData(this, sortable_ids);
                    }
                }
            },
            remove: function (event, ui) {
                /* Get array of items in the list where we removed the item */
                sortable_ids = assembleData(this, sortable_ids);
            },
            receive: function (event, ui) {
                if($(ui.sender).sortable( "instance") && !(ui.item.parent().is($(ui.item).data('position')))){
                    errorNotice('Không tồn tại widget ở vị trí này');
                    $(ui.sender).sortable('cancel');
                }

                /* Get array of items where we added a new item */
                sortable_ids = assembleData(this, sortable_ids);
            },
            stop: function (event, ui) {
                $($(ui.item).data('position')).parent().css('border-color','#ddd');
                var start_pos = ui.item.data('start_pos');
                if (widget_new || start_pos != $(ui.item).parent().attr('id')+'_'+ui.item.index()) {
                    widget_new  =false;
                    ui.item.find("textarea[bs-type=ckeditor-widget]").each(function() {
                        var  new_id = $(this).attr("id");
                        if(new_id){
                            WBForm.initCkeditor(new_id);
                        }
                    });

                /* Send JSON to the server */
                $.ajax({
                    url: route_order,
                    type: 'PUT',
                    data: {
                        '_token': _token,
                        data: sortable_ids
                    },
                    success: function (data) {
                        successNotice('Lưu sắp xếp thành công.');
                    },
                    error: function (data) {
                        errorNotice('Cập nhật thất bại.');
                    }
                });
                    }
            },

        });

        $(".widget-availables .widget-item").draggable({
            cancel: '.cke_inner',
            zIndex: 100,
            containment: '.content-wrapper',
            helper: function (e) {
                $($(this).data('position')).parent().css('border-color','#999');
                $(this).draggable( "option", "connectToSortable",$(this).data('position'));

                var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable");
                var widget_type=original.find('input[name=widget_taxonomy]').val();
                 if(widget_type=='post_category'|| widget_type=='product_category'|| widget_type=='partner'){
                    original.find('select').each(function() {
                         if ($(this)[0].selectize) {
                         $(this)[0].selectize.destroy();
                    }
                })
                }
                return original.clone().css({
                    width: original.outerWidth()
                });
            },
            revert: 100,
            stop: function (event, ui) {
                $($(this).data('position')).parent().css('border-color','#ddd');
                var widget = $(ui.helper);
                if (widget.parent().hasClass("widget-block")) {
                    widget.addClass('widget-item-new').css('width', "auto").removeClass('ui-draggable').removeClass('ui-draggable-handle').removeAttr('style');
                    widget.find('[data-action=collapse]').click();
                    widget.find('.btn-update-item').click();

                    var widget_type=widget.find('input[name=widget_taxonomy]').val();

                    //reinit selectize
                    if(widget_type=='post_category'|| widget_type=='product_category'|| widget_type=='partner'){
                        widget.find('select[bs-type=multiSelect]').selectize();
                    }

                    if (widget_type == 'service' || widget_type == 'widget_two_column' || widget_type == 'widget_three_column' || widget_type == 'service_price_table' || widget_type == 'widget_two_block') {
                        var new_id = widget.data('id');
                        widget.find('.nav-tabs li a').each(function (index, el) {
                            $(this).attr('href', '#block-tab-' + new_id + (index + 1));
                        });
                        widget.find('.tab-content .tab-pane').each(function (index, el) {
                            $(this).attr('id', 'block-tab-' + new_id + (index + 1));
                        });
                    }

                    if (widget.find('input[type=checkbox]').length) {
                        widget.find('input[type="checkbox"]').uniform();
                    }

                    if (widget_type == 'banner') {
                        var new_id = widget.data('id');
                        widget.find('#banner_0').attr('id', 'banner_' + new_id);
                        widget.find('#lfm_banner_0').attr('id', 'lfm_banner_' + new_id);

                        $('#lfm_banner_' + new_id).mlibready({
                            returnto: '#banner_' + new_id,
                            runfunction: 'fillBanner',
                            maxFilesize: 2
                        });
                    }

                    if (widget_type == 'news_and_testimonial') {
                        var new_id = widget.data('id');
                        widget.find('ul.nav-tabs > li a').attr('href', '#block-tab-1-' + new_id);
                        widget.find('ul.nav-tabs > li + li a').attr('href', '#block-tab-2-' + new_id);
                        widget.find('.tab-content > .tab-pane').attr('id', 'block-tab-1-' + new_id);
                        widget.find('.tab-content > tab-pane + .tab-pane').attr('id', 'block-tab-2-' + new_id);
                    }

                    if (widget.find('.colorpicker-component').length) {
                        $('.colorpicker-component').colorpicker();
                    }
                    widget.find('.sp-replacer.sp-light').remove();
                    if (widget.find('.color_style').length) {
                        WB.chooseColor('.color_style');
                    }
                }
            }
        });
        //reset checkbox
        $.uniform.restore('.widget-availables input[type="checkbox"]');

        $('.widget-availables').droppable({
            accept: ".widget-item-exist,.widget-item-new",
            activate: function (event, ui) {
                // console.log('drop active');
            },
            drop: function (event, ui) {
                ui.draggable.find('.btn-remove-item').click();
            }
        });

        // Collapse on click
        $('.widget-block').on('click', '.widget-item-new [data-action=collapse]', function (e) {
            e.preventDefault();
            $(this).closest('.widget-item-new').find('.panel-body').slideToggle(150);
            $(this).toggleClass('rotate-180');
        });

        // Collapse on click
        $('.widget-block').on('click','fieldset [data-action=collapse_background]', function (e) {
            e.preventDefault();
            var $fieldsetCollapse = $(this).closest('fieldset');
            $fieldsetCollapse.children('div.collapse:first').toggleClass('in');

            $fieldsetCollapse.children('div.collapse:first').slideToggle(150);
        });

        $('.widget-block').on('click', '.btn-update-item', function () {
            var cur_item = $(this).closest('.widget-item');
            $(this).closest('.store-form').ajaxSubmit({
                async: false,
                beforeSerialize: function ($form, options) {
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                    }
                    return true;
                },
                beforeSubmit: function (formData, formObject, formOptions) {
                    var pos = formObject.closest('.widget-block').data('pos');
                    var block_id = formObject.closest('.widget-block').data('block');
                    var id = cur_item.attr('data-id');
                    var taxonomy = formObject.find('input[name="widget_taxonomy"]').val();
                    formData.push({
                        'name': 'position',
                        'value': pos
                    });
                    formData.push({
                        'name': 'id',
                        'value': id
                    });
                    formData.push({
                        'name': 'block',
                        'value': block_id
                    });
                },
                success: function (data) {
                    if (data.id) {
                        cur_item.attr('data-id', data.id);
                        cur_item.find('.in-widget-title').html(': ' + cur_item.find('input[name="title"]').val());
                        if(data.is_published==1){
                            cur_item.addClass('border-top-lg border-top-success');
                        }
                        else {
                            cur_item.removeClass('border-top-lg border-top-success');
                        }
                        successNotice((data.action=='store')?'Thêm widget thành công':'Lưu widget thành công');
                        if(data.action=='store'){
                            widget_new=true;
                        }
                        if (data.child_ids) {
                            cur_item.find('input[name="child[0][id]"]').val(data.child_ids[0]);
                            cur_item.find('input[name="child[1][id]"]').val(data.child_ids[1]);
                        }
                    } else {
                        cur_item.remove();
                        errorNotice('Không tồn tại widget ở vị trí này!');
                        return false;
                    }
                },
                error: function (data) {
                    errorNotice('Có lỗi xảy ra');
                }
            });
        });

        $('.widget-block').on('click', '.btn-remove-item', function () {
            var btn = $(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 () {
                btn.closest('.store-form').ajaxSubmit({
                    type: 'DELETE',
                    beforeSubmit: function (formData, formObject, formOptions) {
                        var remove_id = btn.closest('.widget-item').attr('data-id');
                        formData.push({
                            'name': 'id',
                            'value': remove_id
                        });
                    },
                    success: function (data) {
                        btn.closest('.widget-item').remove();
                        successNotice('Xóa thành công');
                        swal.close();
                    },
                    error: function (data) {
                        errorNotice('Có lỗi xảy ra');
                        swal.close();
                    }
                });
            });
        });

        $(document).on('click', '.preview_style', function () {
            var select = $(this).parents('div.row:first').find('select[name="config[style]"]');
            var option = $(this).parents('div.row:first').find('option:selected');
            var img_src = option.attr('thumb');
            $('#image_preview').attr('src', img_src);
        });

    </script>

    <script type="text/javascript">
        $(document).on('change', '.banner_style', function () {
            var block_banner = {};
            block_banner[1] = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::Banner(null, 1)) !!}';
            block_banner[2] = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::Banner(null, 2)) !!}';
            block_banner[3] = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::Banner(null, 3)) !!}';
            block_banner[4] = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::Banner(null, 4)) !!}';
            block_banner[5] = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::Banner(null, 5)) !!}';

            $(this).parents('form:first').find('.banner').html(block_banner[$(this).val()]);
        });

        $(document).on('change', 'select[name=select_banner_type]', function () {
            $(this).parents('#modal_banner:first').find('.modal_banner_select').hide();
            $(this).parents('#modal_banner:first').find('#modal_banner_select_' + $(this).val()).show();
        });

        var preview_banner_image, input_banner_image, input_banner_link, input_banner_type, input_banner_type_id;
        $(document).on('click', '.banner_img', function (event) {
            preview_banner_image = $(this);
            input_banner_image = $(this).next();
            input_banner_link = input_banner_image.next();
            input_banner_type = input_banner_link.next();
            input_banner_type_id = input_banner_type.next();

            $('.modal_banner_select').hide();
            if (input_banner_type.val() == 'slider') {
                $("#modal_banner").find('select[name=banner_select_slider]:first').val(input_banner_type_id.val());
                $("#modal_banner").find('select[name=select_banner_type]:first').val(input_banner_type.val());
                $('#modal_banner_select_' + input_banner_type.val()).show();
            } else {
                $("#modal_banner").find('select[name=select_banner_type]:first').val('image');
                $('#modal_banner_select_image').show();
            }

            $("#modal_banner").find('input[name=banner_select_image]:first').val(input_banner_image.val());
            if (input_banner_image.val() !== '') {
                $("#modal_banner").find('.img-thumbnail:first').attr('src', input_banner_image.val());
            } else {
                $("#modal_banner").find('.img-thumbnail:first').attr('src', preview_banner_image.attr('src'));
            }
            $("#modal_banner").find('input[name=banner_select_link]:first').val(input_banner_link.val());

            $("#modal_banner").modal();
            return false;
        });

        $(document).on('click', '#btn_update_banner', function (event) {
            var banner_type = $('select[name=select_banner_type]').val();
            input_banner_type.val(banner_type);
            if (banner_type == 'slider') {
                preview_banner_image.attr('src', 'https://place-hold.it/500x300/ff0000/ffffff&text=Slider&fontsize=100');
                var slider_id = $("#modal_banner").find('select[name=banner_select_slider]:first').val();
                input_banner_type_id.val(slider_id);
            } else {
                var image = $("#modal_banner").find('input[name=banner_select_image]:first').val();
                var link = $("#modal_banner").find('input[name=banner_select_link]:first').val();


                if (image) {
                    input_banner_image.val(image);
                    preview_banner_image.attr('src', image);
                }
                input_banner_link.val(link);
            }

            $("#modal_banner").modal('hide');
            return false;
        });


        var block_slider = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::bsSelect('Chọn slide','config[blocks][0][slider][slide_id]',$sliders)) !!}';
        var block_post = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::bsSelect('Nhóm','config[blocks][0][post][group_feature_id]',$post_group) . Form::bsText('Giới hạn số lượng','config[blocks][0][post][limit]')) !!}';
         var block_post_category = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::bsMultiSelect('Thể loại','config[blocks][0][post_category][ids][]',$post_category,@$block['ids']) . Form::bsText('Giới hạn số lượng','config[blocks][0][post_category][limit]')) !!}';
        var block_product = '{!! preg_replace("/(\r\n)+|\r+|\n+|\t+/i", " ", Form::bsSelect('Nhóm','config[blocks][0][product][group_feature_id]',$product_group) . Form::bsText('Giới hạn số lượng','config[blocks][0][product][limit]')) !!}';

        $(document).on('change', '.select_widget_type', function (event) {
            var block = $(this).parents('.tab-pane:first').find('.block');
            var block_id = block.data('block_id');
            switch ($(this).val()) {
                case 'slider':
                    block.html(block_slider.replaceAll('[blocks][0]', '[blocks][' + block_id + ']'));
                    break;
                case 'post':
                    block.html(block_post.replaceAll('[blocks][0]', '[blocks][' + block_id + ']'));
                    break;
                case 'post_category':
                    block.html(block_post_category.replaceAll('[blocks][0]', '[blocks][' + block_id + ']'));
                    block.find('select[bs-type=multiSelect]').selectize();
                    break;
                case 'product':
                    block.html(block_product.replaceAll('[blocks][0]', '[blocks][' + block_id + ']'));
                    break;
            }
        });

    </script>

    <script>
        var preview_image, input_image;
        $(document).on('click', '.image_select', function (event) {
            preview_image = $(this);
            input_image = $(this).next();

            $("#modal_image").find('input[name=select_image]:first').val(input_image.val());
            if (input_image.val() === '') {
                $("#modal_image").find('.img-thumbnail:first').attr('src', preview_image.attr('src'));
            }else{
                $("#modal_image").find('.img-thumbnail:first').attr('src', input_image.val());
            }

            $("#modal_image").modal();
            return false;
        });

        $(document).on('click', '#btn_update_image', function (event) {
            var image = $("#modal_image").find('input[name=select_image]:first').val();
            if (image) {
                input_image.val(image);
                preview_image.attr('src', image);
            }

            $("#modal_image").modal('hide');
            return false;
        });

    </script>

    <script>
        $('.colorpicker-component').colorpicker();

        $(document).on('click', '.remove_image', function () {
            var $input = $(this).prev();
            var $image = $input.prev();
            $input.val('');
            $image.attr('src', '{{config('app.assets_url').'/backend/images/no_image/200_200_NO_IMAGE.png'}}');
        });

        $(document).on('change', 'select.background-type', function () {
           let $background_config = $(this).closest('.background_config');
           let value = $(this).val();

           $background_config.children('div.background-type').addClass('hidden');
           $background_config.children('div.background-type-'+value).removeClass('hidden');
        });

        $('#widgets-right input[type="checkbox"]').uniform();

    </script>
    <!-- widget form -->
    <script>
        var form_widget = null;
        (function ($) {
            $('#modal-form-setting input[type="checkbox"]').uniform();
            $(document).on('click', '.form-setting', function() {
                form_widget = $(this).parents('.widget-form');

                if($(form_widget).has('.form-item-fullname').length) {
                     $('#modal-form-setting input[name="form-item-fullname"]').prop('checked',true).uniform('refresh');
                }
                if($(form_widget).has('.form-item-email').length) {
                     $('#modal-form-setting input[name="form-item-email"]').prop('checked',true).uniform('refresh');
                }
                if($(form_widget).has('.form-item-phone').length) {
                     $('#modal-form-setting input[name="form-item-phone"]').prop('checked',true).uniform('refresh');
                }
                if($(form_widget).has('.form-item-address').length) {
                     $('#modal-form-setting input[name="form-item-address"]').prop('checked',true).uniform('refresh');
                }
                if($(form_widget).has('.form-item-message').length) {
                     $('#modal-form-setting input[name="form-item-message"]').prop('checked',true).uniform('refresh');
                }
                if($(form_widget).has('.form-item-date-1').length) {
                     $('#modal-form-setting input[name="form-item-date-1"]').prop('checked',true).uniform('refresh');
                }
                if($(form_widget).has('.form-item-date-2').length) {
                     $('#modal-form-setting input[name="form-item-date-2"]').prop('checked',true).uniform('refresh');
                }
                if($(form_widget).has('.form-item-quantity').length) {
                     $('#modal-form-setting input[name="form-item-quantity"]').prop('checked',true).uniform('refresh');
                }
            });

            $('.widget-form .form_items').sortable({
                cancel: '.cke_inner',
                zIndex: 10000,
                connectWith: '.widget-form .form_items',
                items: '.form-group',
                helper: 'original',
                cursor: 'default',
                handle: '.text-capitalize',
                revert: 100,
                //containment: '.widget-form .form_items',
                containment: '.content-wrapper',
                forceHelperSize: true,
                placeholder: 'sortable-placeholder',
                forcePlaceholderSize: true,
                tolerance: 'pointer',
                opacity: 0.8,
                dropOnEmpty: true,
            });

            $('.form-element-use').on('change', function() {
                var key = $(this).data('key');
                if(this.checked) {
                    var html = '';
                    html += '<div class="form-group">';
                    html +=  '<label class="text-capitalize ui-sortable-handle">'+$(this).data('title')+' <i class="fa fa-arrows pull-right" aria-hidden="true"></i></label>';
                    html +=     '<div class="input-group">'
                    html +=         '<input class="form-control '+key+'" placeholder="Nhập để sửa tiêu đề cho field này" name="form_item['+key+']" type="text"><span class="help-block"></span>';
                    html +=         '<span class="input-group-addon">';
                    html +=             '<input type="checkbox" name="form_item_required['+key+']" value="1" checked="checked"> Bắt buộc</span>';
                    html +=     '</div>';
                    html += '</div>';
                    $(form_widget).find('.form_items').append(html);
                    $(document).find('#widgets-right input[type="checkbox"]').uniform('refresh');
                }else{
                    $(form_widget).find('.'+key).parents('.form-group').remove();
                }
            });

            if(window.location.hash) {
                var explainWidget = function() {
                    $(window.location.hash).find('.heading-elements .icons-list a.expand').click();
                }
                setTimeout(explainWidget, 2000);
            }

        })(jQuery)
    </script>
@endsection

@section('stylesheet')
    <style>
        .banner_img {
            max-height: 200px;
        }
        .widget_background, .subtitle{display: none}
        #block_homepage_1 .widget_background, #block_homepage_1 .subtitle{display: block}
    </style>
@endsection