;(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([1,2,3,4,6,7,8].includes(box.data("act-type"))){
                setActProd()
                function setActProd() {
                    $.ajax({
                        url: Project_Country + 'activities/ajax/act' + box.data("act-type") + '/ajax_set_cart.php',
                        type: "POST",
                        cache: false,
                        dataType:"JSON",
                        data: $.extend({}, box.data(), {
                            type: type,
                            Prod_Sell_ID: input.attr("sid"),
                            sid: input.attr("sid"),
                            Amount: Math.abs(amount)
                        })
                    }).done(function (res) {
                        updateCartTotal()
                        updateAmountBox(box, val)
                        if(res?.calc){
                            $(".activities-calc").html(res.calc)
                        }
                        if(res?.progress){
                            $.each(res.progress, function(key, val){
                                $(".group-progress[data-group='" + key + "']").html(val)
                            })
                        }
                        if(res?.updateLeft){
                            $.each(res.updateLeft, function(key, val){
                                let inputArray = $(".group-box[data-group='" + key + "'] .quick-product-amount .quick-input")
                                let updateLeft = parseInt(val)
                                inputArray.each(function(){
                                    let input = $(this)
                                    let max = parseInt(input.data("origin-max"))
                                    let val = parseInt(input.val())
                                    let newMax = null;
                                    if(max == 0){
                                        newMax = Math.max(max, updateLeft + val)
                                    } else {
                                        newMax = Math.min(max, updateLeft + val)
                                    }

                                    input.attr("max", newMax)
                                    // console.log({
                                    //     "max":max,
                                    //     "updateLeft":updateLeft,
                                    //     "val":val
                                    // })
                                    if(newMax > val){
                                        input.siblings(".quick-plus").removeClass("in-disabled")
                                    }else{
                                        input.siblings(".quick-plus").addClass("in-disabled")
                                    }
                                })
                            })
                        }
                        if(res && ( 'setNum' in res)){
                            $(".setnum-input").val(res.setNum)
                        }
                    }).fail(function (d) {
                        if (input.data("before-change")) {
                            input.val(input.data("before-change"))
                        } else {
                            input.val(0)
                        }
                        alert('網路連線過慢，網頁請重新整理');
                    }).always(function (res) {
                        if(res.alert){
                            alert(res.alert)
                        }
                        input.removeClass("change-recording")
                        input.parents(".quick-product-amount, .common-amount-box").find(".in-loading").removeClass("in-loading")
                    })
                }
            }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) {

                        if(box.data("act-type") != '7' && box.data("act-type") != '8')
                        {
                            updateCartTotal();
                        }

                        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());
                        }
                        //若有限制購買數量ajax後修改最大值(a7 a8)
                        if($(".update-left-input").length){
                            $(".update-left-input").each(function(){
                                let _this = $(this)
                                let inputArray = $("." + _this.attr("name") + " .quick-product-amount .quick-input")
                                let updateLeft = parseInt(_this.val())
                                inputArray.each(function(){
                                    let input = $(this)
                                    let max = parseInt(input.data("origin-max"))
                                    let val = parseInt(input.val())
                                    let newMax = Math.min(max, updateLeft + val)
                                    input.attr("max", newMax)
                                    if(newMax > val){
                                        input.siblings(".quick-plus").removeClass("in-disabled")
                                    }else{
                                        input.siblings(".quick-plus").addClass("in-disabled")
                                    }
                                })
                            })
                        }

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


        }, 250)
    })

})($)
// ==========================================================
// 	手機側欄
// ==========================================================
;(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")
    })
})($)

//商品分組輪播
;(function ($) {
    function actPageSlide(list){
        if($(window).width() > 1199 && list.find(".group-page").length > 1){
            list.owlCarousel({
                nav: true,
                loop: false,
                margin: 20,
                dots: false,
                smartSpeed: 0,
                animateIn: false,
                animateOut: false,
                mouseDrag: false,
                items: 1,
                navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
            })
        }else{
            list.trigger("destroy.owl.carousel")
        }
    }
    const list = $(".act-group .group-box")

    if(list.length){
        actPageSlide(list)
        $(window).on("resize", function(){
            actPageSlide(list)
        })
    }

})($)