/*jshint esversion: 6 */
let subsClicked = false;
$('.code-color span').each(function () {
    $(this).css({
        "background": $(this).text()
    }).text("");
});

$(document).ready(function () {

    // ! Slide Show
    let slideIndex = 1;
    let slides = $(".mySlides");
    let dots = $(".dot");
    showSlides(slideIndex);

    $(document).on("click", '.next', function () {

        showSlides(slideIndex += 1);
    });

    $(document).on("click", '.prev', function () {
        showSlides(slideIndex -= 1);
    });

    $(document).on("click", '.dot', function () {
        showSlides(slideIndex = parseInt($(this).attr('class').split(' ')[1]));
    });

    function showSlides(n) {
        $('.magnify').hide();
        if ($(".slideshow-container .mySlides").length > 0) {
            if (n === undefined && $(".product_page").length === 0) {
                return showSlides(slideIndex += 1);
            }
            let i;
            if (n > slides.length) {
                slideIndex = 1;
            }
            if (n < 1) {
                slideIndex = slides.length;
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides.eq(slideIndex - 2).find("img").addClass('lazypreload');
            slides.eq(slideIndex - 1).css("display", "block");
            dots.eq(slideIndex - 1).addClass("active");
        }
    }
    let timer = setInterval(showSlides, 3500);

    $('.slideshow-container').hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval(showSlides, 3500);
    });

    // ! Adding products
    $(document).on("click", '.add-to-cart', function (event) {
        event.preventDefault();
        // Get product name to add
        $clickedBtn = $(this).attr('class').split(' ')[0];
        $(this).parent().find(".operator").val($clickedBtn);
        $clickedForm = $(this).parent().attr('class').split(' ')[1];
        $clickedFormTag = $(this);
        $(this).empty().append("<i class='fas fa-spinner fa-spin'></i>");
        // Start form submission
        $(this).parent().trigger("submit");

    });

    // ! Select related image base on variant
    $(document).on("change", '.variant_id, .variant_size', function (e) {

        if ($(this).hasClass("variant_size")) {
            $(this).closest("form").find(".variant_id").css("display", "none");
            colorClass = "." + $(this).children(":selected").attr('class');
            $(this).closest("form").find(".code-color").css("display", "flex");
            $(this).closest("form").find(".select-color").css("display", "block");
            $(this).closest("form").find(colorClass).css("display", "flex");

            if (e.type == "change") {
                $("#variant-color").val("");
            }

            $(this).closest("form").find(".code-color " + colorClass).trigger("click");
            if ($(this).children(":selected").attr("price") !== undefined) {
                $(".product-price strong:eq(1)").text($(this).children(":selected").attr("price") + " ");
            }
            if ($(this).children(":selected").attr("old-price") !== undefined) {
                if ($(this).children(":selected").attr("old-price") !== "0") {
                    $(".product-price del").text($(this).children(":selected").attr("old-price") + " ")
                } else {
                    $(".product-price del").text("")
                }
            }


        }
        imageClass = "." + $(this).children(":selected").attr('class').split(' ').pop();
        $(".slideshow-points " + imageClass).trigger("click");
        sumItems();
    });

    $(document).on("click", '.variant_id', function () {
        $(this).closest("form").find(".variant_id").css("border", "0");
        $(this).css("border", "4px solid rgb(57 57 57)");
        imageClass = "." + $(this).attr('class').split(' ').pop();
        $("#variant-color").val($(this).attr('variant'));

        $(".product-price strong:eq(1)").text($(this).attr("price") + " ");
        if ($(this).attr("old-price") !== "0") {
            $(".product-price del").text($(this).attr("old-price") + " ")
        } else {
            $(".product-price del").text("")
        }
        $(".slideshow-points " + imageClass).trigger("click");
        sumItems();
    });


    if ($(".variant_size").length === 0) {
        $(".code-color div:eq(0)").trigger("click");
    }

    if ($(".variant_size").val() !== null) {
        $(".variant_size").trigger("change");
    }


    let $indexClicked = false;
    $(document).on("click", '.load-more', function (e) {
        e.preventDefault();
        $(this).prop("disabled", true);
        if ($indexClicked === false) {
            $("#id_current_index").val($(".product--blue").length);
            $(".load-more button").append("<i class='fas fa-sync fa-spin'></i>");
            $indexClicked = true;
        }
        $("#id_gender").trigger('change');
    });

    $(document).on("change", '.filter form select', function (e) {
        e.preventDefault();
        $(".filter button").attr("disabled", true);
        if ($indexClicked === false) {
            $(".products-page .row").empty();
            $("#id_current_index").val("0");
            $(".products-page .row").append("<div class='fa-3x'><i class='fas fa-sync fa-spin'></i><div>");
        }

        filter_form = $(this).parent().parent();
        filter_url = filter_form.attr('action');

        $.ajax({
            type: "POST",
            url: filter_url,
            data: filter_form.serialize(),
            dataType: 'html',
            success: function (html) {
                $(".load-more").remove();
                if ($indexClicked === false) {
                    $(".products-page .row").empty();
                } else {
                    $(".fa-spin").remove();
                }
                $(".products-page .row").append(html);
                $(".filter button").attr("disabled", false);
                $(".product--blue").css({
                    "flex": ""
                });

                $indexClicked = false;

                if (viewControls === true) {
                    $(".product--blue").css({
                        "flex": "1 36%"
                    });
                    $(".view-controls .fa-square").removeClass("active-view-control");
                    $(".view-controls .fa-th").addClass("active-view-control");

                } else {
                    $(".view-controls .fa-th").removeClass("active-view-control");
                    $(".view-controls .fa-square").addClass("active-view-control");
                }

                $(".load-more").prop("disabled", false);
                subsClicked = false;
            }
        });
    });



    $(document).on("click", '.shop-by .subs', function (e) {
        e.stopPropagation();
        if (subsClicked === false) {
            subsClicked = true;
            $(this).parent().children().removeClass("focus-tab");
            $(this).addClass("focus-tab");
            $(".filter form .full-input").eq($(this).parent().parent().index()).find("select option").eq($(this).index()).prop('selected', true);
            // $("#product__").val($("#product__ option").eq($(this).index()).text());
            $(".filter form select:eq(0)").trigger('change');
            if ($(this).parent().parent().index() === 0) {
                $(".products-main h1").text($(this).text());
            }
        }
    });

    // ! Filter controls
    let filterButton = false;
    $(document).on("click", '#filter-controls, .fa-times-circle', function (e) {
        e.preventDefault();

        if (window.innerWidth <= 1051) {
            if (filterButton === false) {
                $(".filter").css({
                    "display": "grid",
                    "left": "0"
                });
                filterButton = true;
            } else {
                $(".filter").css({
                    "display": "",
                    "left": ""
                });
                filterButton = false;
            }
        }
    });

    let viewControls = false;
    $(document).on("click", '.view-controls i', function (e) {
        e.preventDefault();

        if (window.innerWidth < 1051) {
            if ($(this).hasClass("fa-th")) {
                $(".product--blue").css({
                    "flex": "1 36%"
                });
                $(".view-controls .fa-square").removeClass("active-view-control");
                $(this).addClass("active-view-control");

                viewControls = true;
            } else {
                $(".product--blue").css({
                    "flex": "1 1 50%"
                });
                $(".view-controls .fa-th").removeClass("active-view-control");
                $(this).addClass("active-view-control");

                viewControls = false;
            }
        }
    });


    if (window.innerWidth < 1051) {
        $(".fa-th").trigger("click");
    }
});