var product_brands;
var category_ids;
var price_min;
var price_max;
var keyword_search;
var paging = 1;
$("#animat_loading").hide();



function overlay(isShow) {
    var elm = document.getElementById('overlay')
    if (isShow) {
        elm.style.display = 'block';
    } else {
        elm.style.display = 'none';
    }
}

function openNav() {
    overlay(true);
}

function closeNav() {
    overlay(false);
    //document.getElementById('mySidenav').style.width="0"
    $('#responsive-nav').removeClass("active");
    $('#aside').removeClass("active");
}

function getdata_ads_product(paging = 1) {
    event.preventDefault();
    $("#animat_loading").show();
    $("#show-more-products").hide();

    price_min = $("#price-min").val();
    price_max = $("#price-max").val();
    keyword_search = $("#keyword_search").val();
    sort_by = $('#sort_by option:selected').val();

    var data = {
        "product_brands": product_brands,
        "category_ids": category_ids,
        "price_min": price_min,
        "price_max": price_max,
        "keyword_search": keyword_search,
        "paging": paging,
        "sort_by": sort_by,
    };

    //console.log($.cookie("paging"));

    data[csfr_token_name] = $.cookie(csfr_cookie_name);
    $.ajax({
        type: "POST",
        url: base_url + "service/get_ads_products",
        data: data,
        success: function (response) {
            $("#ads-product-list").append(response.list);
            $("#animat_loading").fadeOut(500);
            //console.log(Object.keys(response.list).length);
            if (Object.keys(response.list).length < 30) {
                $("#show-more-products").hide();
            } else {
                $("#show-more-products").fadeIn(500);
            }

//            var pjaxElements = $('.lazy-update');
//            instance.addItems(pjaxElements);
//            instance.update();

            $('.lazy-update').Lazy();

        }
    });
}

(function ($) {
    "use strict"

    $('.lazy').Lazy();



    // Mobile Nav toggle
    $('.menu-toggle > a').on('click', function (e) {
        e.preventDefault();
        openNav();
        $('#responsive-nav').toggleClass('active');
    })


    // Mobile filer toggle
    $('.filter-toggle > a').on('click', function (e) {
        e.preventDefault();
        openNav();
        $('#aside').toggleClass('active');
    })

    $('#keyword_search').bind("enterKey", function (e) {
        paging = 1;
        getdata_ads_product();
        $("#ads-product-list").html("");
    });

    $('#keyword_search').keyup(function (e) {
        if (e.keyCode == 13)
        {
            $(this).trigger("enterKey");
        }
    });


    $("#show-more-products").on("click", function () {
        paging = paging + 1;
        getdata_ads_product(paging);
    });


    $(".search-btn").on("click", function () {
        paging = 1;
        getdata_ads_product();
        $("#ads-product-list").html("");
    });



    $("input[name=product_brand]").change(function () {
        product_brands = $("input[name=product_brand]:checked").map(function () {
            return $(this).val();
        }).get();
        paging = 1;
        getdata_ads_product();
        $("#ads-product-list").html("");
    });

    $("input[name=category_id]").change(function () {
        category_ids = $("input[name=category_id]:checked").map(function () {
            return $(this).val();
        }).get();
        paging = 1;
        getdata_ads_product();
        $("#ads-product-list").html("");
    });

    $("#sort_by,#price-max,#price-min").on("change", function () {
        paging = 1;
        getdata_ads_product();
        $("#ads-product-list").html("");
    });



















    // Fix cart dropdown from closing
    $('.cart-dropdown').on('click', function (e) {
        e.stopPropagation();
    });

    /////////////////////////////////////////

    // Products Slick
    $('.products-slick').each(function () {
        var $this = $(this),
                $nav = $this.attr('data-nav');

        $this.slick({
            slidesToShow: 4,
            slidesToScroll: 1,
            autoplay: true,
            infinite: true,
            speed: 300,
            dots: false,
            arrows: true,
            appendArrows: $nav ? $nav : false,
            responsive: [{
                    breakpoint: 991,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                    }
                },
            ]
        });
    });

    // Products Widget Slick
    $('.products-widget-slick').each(function () {
        var $this = $(this),
                $nav = $this.attr('data-nav');

        $this.slick({
            infinite: true,
            autoplay: true,
            speed: 300,
            dots: false,
            arrows: true,
            appendArrows: $nav ? $nav : false,
        });
    });

    /////////////////////////////////////////

    // Product Main img Slick
    $('#product-main-img').slick({
        infinite: true,
        speed: 300,
        dots: false,
        arrows: true,
        fade: true,
        asNavFor: '#product-imgs',
    });

    // Product imgs Slick
    $('#product-imgs').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: true,
        centerMode: true,
        focusOnSelect: true,
        centerPadding: 0,
        vertical: true,
        asNavFor: '#product-main-img',
        responsive: [{
                breakpoint: 991,
                settings: {
                    vertical: false,
                    arrows: false,
                    dots: true,
                }
            },
        ]
    });

    // Product img zoom
    var zoomMainProduct = document.getElementById('product-main-img');
    if (zoomMainProduct) {
        $('#product-main-img .product-preview').zoom();
    }

    /////////////////////////////////////////

    // Input number
    $('.input-number').each(function () {
        var $this = $(this),
                $input = $this.find('input[type="number"]'),
                up = $this.find('.qty-up'),
                down = $this.find('.qty-down');

        down.on('click', function () {
            var value = parseInt($input.val()) - 1;
            value = value < 1 ? 1 : value;
            $input.val(value);
            $input.change();
            updatePriceSlider($this, value)
        })

        up.on('click', function () {
            var value = parseInt($input.val()) + 1;
            $input.val(value);
            $input.change();
            updatePriceSlider($this, value)
        })
    });

    var priceInputMax = document.getElementById('price-max'), priceInputMin = document.getElementById('price-min');

    priceInputMax.addEventListener('change', function () {
        updatePriceSlider($(this).parent(), this.value);
    });

    priceInputMin.addEventListener('change', function () {
        updatePriceSlider($(this).parent(), this.value)

    });

    function updatePriceSlider(elem, value) {
        if (elem.hasClass('price-min')) {
            console.log('min')
            priceSlider.noUiSlider.set([value, null]);
            //$('#price-min').trigger('change');
        } else if (elem.hasClass('price-max')) {
            console.log('max')
            priceSlider.noUiSlider.set([null, value]);
            //$('#price-max').trigger('change');
        }

    }

    // Price Slider
    var priceSlider = document.getElementById('price-slider');
    if (priceSlider) {
        noUiSlider.create(priceSlider, {
            start: [1, 100000],
            connect: true,
            step: 1,
            range: {
                'min': 1,
                'max': 100000
            }
        });

        priceSlider.noUiSlider.on('update', function (values, handle) {
            var value = values[handle];
            handle ? priceInputMax.value = value : priceInputMin.value = value;

        });

        priceSlider.noUiSlider.on('change', function (values, handle) {

            $('#price-min').trigger('change');
//                
//                $('#price-max').trigger('change');
        });



    }

})(jQuery);