;(function ($) {
    if ($("#picSlides .picItem").length > 1) {
        $("#picSlides").owlCarousel({
            loop: true,
            items: 1,
            nav: true,
            autoplay: true,
            autoplayTimeout: 5000,
            dots: false,
            navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
        });
    }
})($)

;(function ($) {
    const slideWrapper = $(".user-orderBox")
    $('body').on('click', '.orderBox-toggle', function (e) {
        e.preventDefault();

        if ($(window).width() < 768) {
            slideWrapper.toggleClass('in-active');
        }
    });

    setTimeout(function () {
        slideWrapper.removeClass('in-active')
    }, 1000)
})($)


$(function () {
    const owl6 = $(".user-list6 .orderSlide");

    owl6.owlCarousel({
        nav: true,
        dots: false,
        navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
        margin: 10,
        responsive: {
            0: {
                autoWidth: true,
            },
            768: {
                items: 4,
            },
            992: {
                items: 5,
            },
            1200: {
                items: 6
            },
        },

    });

    var owl5 = $(".user-list5 .orderSlide");
    owl5.owlCarousel({
        nav: true,
        dots: false,
        navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
        margin: 10,
        responsive: {
            0: {
                autoWidth: true,
            },
            768: {
                items: 3,
            },
            992: {
                items: 4,
            },
            1200: {
                items: 5,
            },
        },
    });
    var addowl = $(".userBox .addBox");
    addowl.owlCarousel({
        nav: true,
        dots: false,
        navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
        margin: 10,
        responsive: {
            0: {
                autoWidth: true,
            },
            768: {
                items: 1,
            },
        },
    });

    $('article > .combosBox ').on('click', '.button1', function (e) {
        if ($(this).attr("class").indexOf('add_to_cart') != -1) {
            return false;
        }
        const add_array = new Array()
        const addBoxRegex = /\b[a-z]+?02\b/gi
        let img = $(this).parents('.productBox')
        let img_src = img.find('img').attr('src')
        let img_title = img.find('.title').text()
        let img_price = _jsLang.Language_Currency + img.find('.price-digit').text()
        let img_spec = img.find('.color-select').find('option:selected').text();
        let img_amount = img.find('.num-select').val()
        let img_act = img.find('.btn').attr('act')
        let img_index = 0
        let add_type = null
        let addHtml = ''

        function makeHtml(i, add_type) {
            const returnString = `
				<div class="orderProduct">
					<img src="${img_src}">
					<div class="title">
						<div class="name">${img_title}</div>
						<div class="spec">${img_spec ? img_spec : _jsLang.單一規格}</div>
						<div class="pricebox font-danger">${img_price}</div>
					</div>
					<button class="delete" del_id="${img_index + 1 + i}" add_type="${add_type}"><i class="fa fa-times"></i></button>
				</div>
				`
            return returnString
        }

        add_array[0] = 0;

        if ($(this).parents('.combosBox').attr('class').match(addBoxRegex)) {
            add_type = 2
        } else {
            add_type = 1
        }
        $(".delete[add_type=" + add_type + "]").each(function () {
            add_array.push(parseInt($(this).attr("del_id")));
        })
        img_index = Math.max.apply(null, add_array);

        //避免A7點選加購時顯示兩次的BUG
        if (img_act == 'activities7-detail') {
            return false;
        }

        if ($(this).parents('.combosBox').attr('class').match(addBoxRegex)) {
            if ($('.addBox .pic-bg').length == 1) {
                addowl.trigger('remove.owl.carousel', $('.addBox .pic-bg').parents('.owl-item').index())
                    .trigger('refresh.owl.carousel');
            }

            var smailBox = $('.user-orderBox .addBox'),
                smailBox_top = smailBox.offset().top,
                smailBox_left = smailBox.offset().left,
                smailBox_width = smailBox.width() / 6,
                smailBox_height = smailBox.height() - 20;
            for ($i = 0; $i < img_amount; $i++) {
                addHtml = makeHtml($i, add_type)
                addowl.trigger('to.owl.carousel', [0, 0, true])
                    .trigger('add.owl.carousel', [$(addHtml), 0])
                    .trigger('refresh.owl.carousel');
            }
            var choseImg = $(this).parents('.productBox').find('.productImg'),
                Img_html = choseImg.clone().addClass('moveImg'),
                choseImg_top = choseImg.offset().top,
                choseImg_left = choseImg.offset().left,
                choseImg_width = choseImg.width(),
                choseImg_height = choseImg.height();

            const slideWrapper = $('.user-orderBox')
            slideWrapper.addClass('in-active')
            setTimeout(function () {
                slideWrapper.removeClass('in-active')
            }, 1000)
            $('body').append(Img_html);
            $('.moveImg').css({
                'top': choseImg_top,
                'left': choseImg_left,
                'width': choseImg_width,
                'height': choseImg_height
            })
                .animate({
                    'top': smailBox_top,
                    'left': smailBox_left,
                    'width': smailBox_width,
                    'height': smailBox_height
                }, 350, function () {
                    $(this).remove();
                });
        } else {
            if ($('.user-list5 > .orderSlide .pic-bg').length == 1) {
                owl5.trigger('remove.owl.carousel', $('.user-list5 > .orderSlide .pic-bg').parents('.owl-item').index())
                    .trigger('refresh.owl.carousel');
            }
            var smailBox = $('.user-orderBox'),
                smailBox_top = smailBox.offset().top,
                smailBox_left = smailBox.offset().left,
                smailBox_width = smailBox.width() / 6,
                smailBox_height = smailBox.height() - 20;
            for ($i = 0; $i < img_amount; $i++) {
                addHtml = makeHtml($i, add_type)
                owl6.trigger('to.owl.carousel', [0, 0, true])
                    .trigger('add.owl.carousel', [$(addHtml), 0])
                    .trigger('refresh.owl.carousel');
                owl5.trigger('to.owl.carousel', [0, 0, true])
                    .trigger('add.owl.carousel', [$(addHtml), 0])
                    .trigger('refresh.owl.carousel');
            }
            var choseImg = $(this).parents('.productBox').find('.productImg'),
                Img_html = choseImg.clone().addClass('moveImg'),
                choseImg_top = choseImg.offset().top,
                choseImg_left = choseImg.offset().left,
                choseImg_width = choseImg.width(),
                choseImg_height = choseImg.height();

            const slideWrapper = $('.user-orderBox')
            slideWrapper.addClass('in-active')
            setTimeout(function () {
                slideWrapper.removeClass('in-active')
            }, 1000)
            $('body').append(Img_html);
            $('.moveImg').css({
                'top': choseImg_top,
                'left': choseImg_left,
                'width': choseImg_width,
                'height': choseImg_height
            })
                .animate({
                    'top': smailBox_top,
                    'left': smailBox_left,
                    'width': smailBox_width,
                    'height': smailBox_height
                }, 350, function () {
                    $(this).remove();
                });
        }

    });

    owl6.on('click', '.delete', function (e) {
        e.preventDefault()

        if (!$(this).attr('group')) {
            var delitem = $(this).parents('.owl-item');
            delitem.find('.title').remove();
            delitem.animate({'opacity': 0}, 300).animate({'width': 0}, 300);
            setTimeout(function () {
                owl6.trigger('remove.owl.carousel', delitem.index())
                    .trigger('refresh.owl.carousel');
            }, 700);
        }
    });
    owl5.on('click', '.delete', function () {
        var delitem = $(this).parents('.owl-item');
        delitem.find('.title').remove();
        delitem.animate({'opacity': 0}, 300).animate({'width': 0}, 300);
        setTimeout(function () {
            owl5.trigger('remove.owl.carousel', delitem.index())
                .trigger('refresh.owl.carousel');
            if (owl5.find('.owl-item').length == 0) {
                var html = '<div class="pic-bg"></div>';
                owl5.trigger('to.owl.carousel', [0, 0, true])
                    .trigger('add.owl.carousel', [$(html), 0])
                    .trigger('refresh.owl.carousel');
            }
        }, 700);
    });
    addowl.on('click', '.delete', function () {
        var delitem = $(this).parents('.owl-item');
        delitem.find('.title').remove();
        delitem.animate({'opacity': 0}, 300).animate({'width': 0}, 300);
        setTimeout(function () {
            addowl.trigger('remove.owl.carousel', delitem.index())
                .trigger('refresh.owl.carousel');
            if (addowl.find('.owl-item').length == 0) {
                var html = '<div class="pic-bg"></div>';
                addowl.trigger('to.owl.carousel', [0, 0, true])
                    .trigger('add.owl.carousel', [$(html), 0])
                    .trigger('refresh.owl.carousel');
            }
        }, 700);
    });
});

// ==========================================================
// 	排序展開
// ==========================================================
;(function ($) {
    $(document).on("click", ".dropdown-btn", function () {
        let box = $(this).parents(".select-dropdown")
        if (box.hasClass("in-open")) {
            box.removeClass("in-open")
            $(document).off("click.closeDropdown")
        } else {
            box.addClass("in-open")
            $(document).on("click.closeDropdown", function (e) {
                let target = $(e.target)
                if (target.closest(".select-dropdown").length <= 0) {
                    box.removeClass("in-open")
                    $(document).off("click.closeDropdown")
                }
            })
        }
    })
    $(document).on("click", ".dropdown-item", function () {
        let _this = $(this)
        let target = _this.parents(".select-dropdown").data("target")
        if (_this.hasClass("selected")) {
            $(target).val("").trigger("change")
            _this.removeClass("selected")
        } else {
            $(target).val(_this.data("value")).trigger("change")
            _this.siblings().removeClass("selected")
            _this.addClass("selected")
        }
    })
})($)

// ==========================================================
// 	活動商品添加
// ==========================================================
;(function ($) {

    let updateTimer = null
    let updateTimerSub = null
    $(document).on("amountChange", ".activities-product-amount", function () {
        clearTimeout(updateTimer)
        let box = $(this)
        updateTimer = setTimeout(function () {
            let input = box.find(".quick-input")
            let val = parseInt(input.val())
            let origin = parseInt(input.data("before-change")) || 0
            let amount = val
            let type = ""
            if (amount >= 0) {
                type = "add"
            } else {
                type = "del"
            }

            if (box.hasClass("activities-call-origin")) {
                updateCartAmount(input, $.extend({}, box.data(), {
                    sid: input.attr("sid"),
                    prodType: input.attr("prodType"),
                    type: input.attr("addType") || 'normal',
                    value: input.val()
                }), function () {
                    clearTimeout(updateTimerSub)
                    updateTimerSub = setTimeout(function () {
                        setActProd()
                    }, 500)
                })
            } else {
                setActProd()
            }

            function setActProd() {
                $.ajax({
                    url: Project_Country + 'activities/ajax/act' + box.data("act-type") + '/ajax_set_cart.php',
                    type: "POST",
                    cache: false,
                    data: $.extend({}, box.data(), {
                        type: type,
                        Prod_Sell_ID: input.attr("sid"),
                        sid: input.attr("sid"),
                        Amount: Math.abs(amount)
                    })
                }).done(function (d) {
                    updateAmountBox(box, val)
                    $("#Act_Title_Box").html(d);

                    //a6加購
                    if ($("#Act_Title_Box").find("#Add_Num").length && $(".Add_Num").length) {
                        $(".Add_Num").html($("#Add_Num").val());
                    }
                }).fail(function (d) {
                    if (input.data("before-change")) {
                        input.val(input.data("before-change"))
                    } else {
                        input.val(0)
                    }
                    alert('網路連線過慢，網頁請重新整理');
                }).always(function () {
                    input.parents(".quick-product-amount, .common-amount-box").find(".in-loading").removeClass("in-loading")
                })
            }

        }, 500)
    })
})($)
// ==========================================================
// 	手機側欄
// ==========================================================
;(function ($) {
    $(document).on("click", ".panel-toggle", function () {
        let _this = $(this)
        let panel = $(_this.data("panel"))
        if (panel.length) {
            if (panel.hasClass("in-active")) {
                $(panel).removeClass("in-active")
                $("body").removeClass("overflow-hidden")
            } else {
                $(panel).addClass("in-active")
                if ($(window).width() < 1200) {
                    $("body").addClass("overflow-hidden")
                }
            }
        }
    })
    $(document).on("click", ".aside-panel", function (e) {
        if ($(e.target).hasClass("aside-panel") || $(e.target).closest(".panel-close-btn").length) {
            $(this).removeClass("in-active")
            $("body").removeClass("overflow-hidden")
        }
    })
})($)

//手機活動指引折疊
;(function ($) {
    $(document).on("click", ".userBox-toggle", function () {
        $(this).parents(".userBox").toggleClass("in-collapse")
    })
})($)