$(document).on("focusin", ".product-input", function () {
    $(".product-input").val("");
});

$(document).on("click", "#models option", function () {});

$(".product-input").bind("input", function () {
    let value = $(this).val();
    let href = $(
        "#models option[value='" + $("[list='models']").val() + "']"
    ).attr("href");
    $(".product-input").attr("placeholder", value);

    if (typeof href !== "undefined") window.location = href;
});

$(document).on("click", ".small-image", function () {
    $(".small-image").css("border", "none");
    $(this).css("border", "2px solid black");
    $(".large-image img").attr("src", $(this).attr("image"));

    if ($(this).hasClass("isvideo")) {
        $(".video-url").attr("src", $(this).attr("image"));
        $(".large-video").show();
        $(".large-video").trigger("play");
        document.getElementById("large-video").load();
    } else {
        $(".large-video").hide();
    }
});

$(document).on("click touchstart", ".phone-color-button", function () {
    // set image
    let image = $(this).attr("image");
    $(".slider .large-image img").attr("src", image);

    $(".large-video").hide();

    $(".slider-mobile #slick-slide00 img").attr("src", image);
    // change active state
    $(".phone-color-button").removeClass("button-active");
    $(this).addClass("button-active");
});

$(document).on(
    "change",
    "#model-dropdown, #product-dropdown, #variation-dropdown",
    function () {
        window.location = $(this).val();
    }
);

$(".cc-slider").slick({
    nextArrow:
        '<button type="button" class="slick-next-custom">&#8250;</button>',
    prevArrow:
        '<button type="button" class="slick-prev-custom">&#8249;</button>',
    dots: true,
});

$(document).on("touchstart, click", ".title-description", function () {
    doProductDescription();
});
$(document).on("touchstart, click", ".title-artist", function () {
    doArtistDescription();
});

function doProductDescription() {
    if (window.innerWidth <= 900) {
        if ($(".product-description").css("display") == "none") {
            $(".product-description").show();
            $(".plus-product").text("");
        } else {
            //$('.product-description').hide();
            //$('.plus-product').text('+');
        }
    }
}

function doArtistDescription() {
    if (window.innerWidth <= 900) {
        if ($(".artist-description").css("display") == "none") {
            $(".artist-description").show();
            $(".plus-artist").text("");
        } else {
            //$('.artist-description').hide();
            //$('.plus-artist').text('+');
        }
    }
}

$(window).resize(function () {
    if (window.innerWidth > 900) {
        $(".product-description").show();
        $(".plus-product").text("+");
        $(".artist-description").show();
        $(".plus-artist").text("+");
    } else {
        /*
		$('.product-description').hide();
		$('.plus-product').text('+');
		$('.artist-description').hide();
		$('.plus-artist').text('+');
		*/
    }
});

/*************************************************************************
 *
 *						POPUPS
 *
 **************************************************************************/
function checkCustomDesignInputs() {
    var returnValue = true;

    if (typeof custom_design !== "undefined") {
        // check txt inputs
        $(".checkValue").each(function (i, l) {
            var value = $(l).val();
            if (!value && value.length == 0 && $(l).is(":visible")) {
                showEmptyValuePopup();
                returnValue = false;
            }
        });

        // check uploads
        $(".ex-img").each(function (i, l) {
            if ($(l).attr("uploaded") == 0) {
                showEmptyUploadPopup();
                returnValue = false;
            }
        });

        return returnValue;
    } else {
        return returnValue;
    }
}

function showEmptyValuePopup() {
    $([document.documentElement, document.body]).animate(
        {
            scrollTop: $("body").offset().top,
        },
        200
    );

    $(".overlay-popup").show();
    $(".popup-empty-value").show();
}

function showEmptyUploadPopup() {
    $([document.documentElement, document.body]).animate(
        {
            scrollTop: $("body").offset().top,
        },
        200
    );

    $(".overlay-popup").show();
    $(".popup-empty-upload").show();
}

$(".btn-ok").on("click", function (e) {
    e.preventDefault();

    $(".overlay-popup").hide();
    $(".pp-overlay").hide();
    $(".popup-empty-value").hide();
    $(".popup-empty-upload").hide();
    $(".popup-empty-image").hide();
});

$(document).on("click", ".btn-cart", function (e) {
    e.preventDefault();

    var continueFlow = checkCustomDesignInputs();

    if (continueFlow) {
        // popup open?
        if (!$(".popup-sg").is(":visible") && !$(".popup-gft").is(":visible")) {
            let canglass = $(".popup-sg").attr("can-glass");
            let cangift = $(".popup-gft").attr("can-gift");

            if (
                (canglass == 0 && cangift == 0) ||
                typeof canglass === "undefined"
            ) {
                $(".overlay-popup").hide();
                doRedirect();
            } else if (canglass == 1) {
                $(".popup-sg").show();
                $(".overlay-popup").show();
            } else if (cangift == 1) {
                $(".popup-gft").show();
                $(".overlay-popup").show();
                $(
                    "div.popup.popup-gft > div.right > div > div:nth-child(1)"
                ).click();
                //$('div.popup.popup-gft > div.right > div > div:nth-child(3)').click();
            }
        }
    }
});

// YES GLASS
$(document).on("click", ".popup-sg .btn-cart", function (e) {
    let cangift = $(".popup-gft").attr("can-gift");
    $(".btn-cart").attr("glass", "yes");

    if (cangift == 0) {
        //doRedirect();
    } else {
        $(".popup-sg").hide();
        $(".popup-gft").show();
        $("div.popup.popup-gft > div.right > div > div:nth-child(1)").click();
        //$('div.popup.popup-gft > div.right > div > div:nth-child(3)').click();
    }
});

// YES GIFT
$(document).on("click", ".popup-gft .btn-cart", function (e) {
    // get the selected gift
    let gift_type = $(".selected-gift-choice").attr("gift-type");
    $(".btn-cart").attr("gift", gift_type);
    //doRedirect();
});

// NO THANKS
$(document).on("click", ".popup-sg .btn-no-thanks", function (e) {
    e.preventDefault();

    let cangift = $(".popup-gft").attr("can-gift");

    if (cangift == 1) {
        $(".popup-sg").hide();
        $(".popup-gft").show();
        $("div.popup.popup-gft > div.right > div > div:nth-child(1)").click();
        //$('div.popup.popup-gft > div.right > div > div:nth-child(3)').click();
    } else {
        // redirect
        doRedirect();
    }
});

// NO THANKS
$(document).on("click", ".popup-gft .btn-no-thanks", function (e) {
    e.preventDefault();
    $(".popup-gft").hide();

    // redirect
    doRedirect();
});

$(document).on("click", ".gift-choice", function () {
    $(".gift-choice").css("border", "1px solid #d2d2d2");
    $(".gift-choice").css("background-color", "white");
    $(".gift-choice").removeClass("selected-gift-choice");

    $(this).css("border", "1px solid rgba(105,196,238,1)");
    $(this).css("background-color", "rgba(105,196,238,.1)");
    $(".popup-gft .btn-cart").css("background-color", "rgba(105,196,238,1)");
    $(".popup-gft .btn-cart").css("pointer-events", "all");
    $(this).addClass("selected-gift-choice");

    // change the image
    $(".popup-gft .left").css(
        "background-image",
        "url(" + $(this).attr("image") + ")"
    );
});

function disableGiftPopup() {
    $(".gift-choice").css("border", "1px solid #d2d2d2");
    $(".gift-choice").css("background-color", "white");
    $(".popup-gft .btn-cart").css("pointer-events", "none");
    $(".popup-gft .btn-cart").css("background-color", "#b7b7b7");
}

function closePopup() {
    $(".popup").hide();
    $(".overlay-popup").hide();
    $(".popup-empty-value").hide();
    $(".popup-empty-upload").hide();
    disableGiftPopup();
}

$(document).on("click", ".overlay-popup", function () {
    closePopup();
});

function doRedirect() {
    let product_id = $(".js-btn-cart").attr("product-id");
    let variation_id = $(".js-btn-cart").attr("variation-id");
    let color_id = $(".js-btn-cart").attr("color-id");
    let collection_image_id = $(".js-btn-cart").attr("collection-image-id");
    let glass = $(".js-btn-cart").attr("glass");
    let gift = $(".js-btn-cart").attr("gift");
    let phone_color = $(".js-btn-cart").attr("phone_color");
    let nametext = $(".js-btn-cart").attr("nametext");
    let font_color = $(".js-btn-cart").attr("font_color");
    let font = $(".js-btn-cart").attr("font");

    let ext = $(".js-btn-cart").attr("url-ext");

    // monogram
    if (!collection_image_id) {
        let style = $(".js-btn-cart").attr("m-style");
        let letter = $("#select-letter").val();
        let text = $("#input-name").val();

        var url =
            "/add-to-cart/product_id=" +
            product_id +
            "&variation_id=" +
            variation_id +
            "&color_id=" +
            color_id +
            "&monogram_style=" +
            style +
            "&letter=" +
            letter +
            "&monogram_style=" +
            style +
            "&name=" +
            text;
        if (glass !== "no") url += "&glass=yes";
        if (gift !== "no") {
            url += "&gift_type=" + gift;
            url += "&gift_add=yes";
        }
        url += "/" + ext;
        addItemToCart(url);
    } else {
        if (typeof settings !== "undefined") {
            if (!phone_color || typeof (phone_color === "undefined")) {
                phone_color = $(".phone-color-button.button-active").attr(
                    "color"
                );
                settings.phone_color = phone_color;
            }

            $.ajax({
                type: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                        "content"
                    ),
                },
                date: { _token: "{{ csrf_token() }}" },
                url: "/storeCustomDesign",
                data: {
                    settings: settings,
                    color_id: color_id,
                },
            }).done(function (resp) {
                var url =
                    "/add-to-cart/product_id=" +
                    product_id +
                    "&variation_id=" +
                    variation_id +
                    "&color_id=" +
                    color_id +
                    "&collection_image_id=" +
                    collection_image_id +
                    "&custom_design=" +
                    resp;
                addItemToCart(url);
            });
        } else {
            var url =
                "/add-to-cart/product_id=" +
                product_id +
                "&variation_id=" +
                variation_id +
                "&color_id=" +
                color_id +
                "&collection_image_id=" +
                collection_image_id;
            addItemToCart(url);
        }
    }

    $(".overlay-popup").hide();

}

function addItemToCart(url) {
    $(".loading-panel").show();

    let glass = $(".js-btn-cart").attr("glass");
    let gift = $(".js-btn-cart").attr("gift");
    let phone_color = $(".js-btn-cart").attr("phone_color");
    let nametext = $(".js-btn-cart").attr("nametext");
    let font_color = $(".js-btn-cart").attr("font_color");
    let ext = $(".js-btn-cart").attr("url-ext");

    // phone color?
    if (!phone_color || typeof phone_color === "undefined") {
        phone_color = $(".phone-color-button.button-active").attr("color");
    }

    if (nametext && typeof nametext !== "undefined") {
        font_color = font_color.replace("#", "");

        let canvasWidth = $(".nametext_info").attr("cwidth");
        let fontsize = $(".nametext_info").attr("cfontsize");
        let offset = $(".nametext_info").attr("coffset");
        let font = $(".nametext_info").attr("cfont");
        let stroke = $(".nametext_info").attr("cstroke");

        nametext = nametext.replace("&", "eamp;");

        url +=
            "&nametext=" +
            nametext +
            "&phone_color=" +
            phone_color +
            "&font_color=" +
            font_color +
            "&cfont=" +
            font +
            "&cwidth=" +
            canvasWidth +
            "&cfontsize=" +
            fontsize +
            "&coffset=" +
            offset +
            "&cstroke=" +
            stroke;
    } else if (phone_color && typeof phone_color !== "undefined") {
        url += "&phone_color=" + phone_color;
    }

    if (glass !== "no") url += "&glass=yes";
    if (gift !== "no") {
        url += "&gift_type=" + gift;
        url += "&gift_add=yes";
    }
    url += "/" + ext;

    $(".overlay-popup").hide();

    window.location = url;
}

document.addEventListener("keydown", function (e) {
    if (e.keyCode == 27) {
        e.preventDefault();
        $(".cutout-popup").hide();
        $(".overlay").hide();
    }
});