$(document).ready(function () {
    let updateText;
    let colorClass;
    let local_cities = undefined;

    $('.code-color span').each(function () {
        $(this).css({
            "background": $(this).text()
        }).text("");
    });


    // $('.offer_form .variant_size').each(function () {
    //     if ($(this).children().length === 1) {
    //         $(this).css("background", "red");
    //         $(this).parent().find(".add-product").text(outOfStock).prop("disabled", true).addClass("disabled");
    //         $(this).parent().find(".select-color, .variant_size, .quantity-div").remove();
    //     }
    // });

    $(document).on("click", '.update-button', function () {
        updateText = $(this).parent().find(".update").text();
        $(this).parent().find(".operator").val($(this).attr('name').split(" ")[0]);
        $(this).html("<i class='fas fa-spinner fa-spin'></i>");

    });

    $(document).on("change", '#id_local_cities', function () {
        $(".delivery-fee").html("<i class='fas fa-spinner fa-spin'></i>");
        $.ajax({
            method: "POST",
            url: path + "delivery_fee/",
            data: {
                csrfmiddlewaretoken: $('meta[name=csrfmiddlewaretoken]').attr("content"),
                country: $("#id_country").val(),
                local_cities: $(this).val()
            },
            dataType: 'json',

            success: function (data) {
                if (data.success === 0) {
                    $(".delivery-fee").text(free);
                } else {
                    $(".delivery-fee").text(data.success.toFixed(3));
                }

                sumPrices();
                local_cities = undefined;
            }
        });
    });

    $(document).on("change", '#id_city', function () {
        if ($("#id_country").val() === "KW") {
            $("option[governorate='" + $('#id_city option:selected').text() + "']").css("display", "block");
            $("option[governorate='" + $('#id_city option:selected').text() + "']:eq(0)").prop("selected", true);
            $("#id_local_cities").trigger("change");
        }
    });


    // Delivery fee feedback
    $(document).on("change", '#id_country', function () {
        $("#id_local_cities").children("option").prop("selected", false).css("display", "none");
        if ($(this).val() !== "KW") {
            $("#id_payment_method_4").prop('checked', false).parent().css("display", "none").removeAttr('checked');
            $(".input-label:eq(4)").css("display", "none");
        } else {
            $(".input-label:eq(4)").css("display", "block");
            $("#id_payment_method_4").parent().css("display", "flex");
        }
        $("#id_city").empty().css("background-color", "#cacaca");
        $("<i class='fas fa-spinner fa-spin'></i>").prependTo(".input-label:eq(4)");
        $(".delivery-fee").html("<i class='fas fa-spinner fa-spin'></i>");

        if ($("#id_local_cities").val() === "-------------" && $(this).val() !== "KW") {

            $.ajax({
                method: "POST",
                url: path + "delivery_fee/",
                data: {
                    csrfmiddlewaretoken: $('meta[name=csrfmiddlewaretoken]').attr("content"),
                    country: $(this).val(),
                    local_cities: $("#id_local_cities").val()
                },
                dataType: 'json',

                success: function (data) {

                    if (data.success === 0) {
                        $(".delivery-fee").text(free);
                    } else if (data.success > 0) {
                        $(".delivery-fee").text(data.success.toFixed(3));
                    } else {
                        console.log("not sure if we can deliver to this area")
                    }
                    sumPrices();
                    local_cities = undefined;
                }
            });
        }

        $.ajax({
            method: "POST",
            url: "/states/",
            data: {
                country: $(this).val(),
                csrfmiddlewaretoken: $('meta[name=csrfmiddlewaretoken]').attr("content")
            },
            dataType: 'json',

            success: function (data) {
                $(".input-label:eq(4) .fa-spin").remove();
                $("#id_city").css("background-color", "#fff");
                $.each(data, function (key, item) {
                    $("#id_city").append("<option value='" + key + "'>" + item + "</option>");
                });

                $("#id_city").prepend("<option value='-------------' selected>-------------</option>");
                $("#id_city option:eq(1)").prop("selected", true);
                $("#id_city").trigger("change");
            }
        });
    });


    if ($("#id_country").val() !== "") {
        $("#id_country").change();
    };


    $(document).on("submit", '.offer_form, .update_form', function (event) {
        // Starts form submission and continue in other function
        event.preventDefault();
        let selectedCard = $(this);
        $(".error").remove();
        $("input, select, .code-color").removeClass("red-border");
        addProduct = "<i class='fas fa-cart-plus'></i>";
        $(this).find(".add-product").html("<i class='fas fa-spinner fa-spin'></i>");

        if ($(this).hasClass("update_form")) {
            offerURL = path + "update_offer/";
        } else {
            offerURL = path + "offers/"
        }
        $.ajax({
            method: "POST",
            url: offerURL,
            data: $(this).serializeArray(),
            dataType: 'json',

            success: function (data) {
                if (data.success) {
                    $(".cart-items").load(path + "cart-items/", function () {
                        if ($('.cart-items').children().length < 1) {
                            window.location.reload();
                        }
                    });
                    if (data.quantity > 0) {
                        $("h2 del").text(data.quantity);
                        $(".offers").css("display", "flex");
                        $("h2").css("display", "block");
                    } else {
                        $(".offers, h2").css("display", "none");
                    }

                } else {

                    let json;
                    let headerHeight = $("header").height();
                    $.each(data, function (key, item) {
                        json = $.parseJSON(item);
                        if (!json.hasOwnProperty('__all__') && !json.hasOwnProperty('sku')) {
                            // Add-ons input error
                            $(selectedCard).prepend(
                                "<span class='error'>* " + json[Object.keys(json)[0]][0].message +
                                "</span>");
                            $(selectedCard).find('[name=' + Object.keys(json)[0] + ']').addClass("red-border");
                        }
                    });

                    if ($(selectedCard).hasClass("offer_form")) {
                        $([document.documentElement, document.body]).animate({
                            scrollTop: $(".container").offset().top - (headerHeight)
                        }, 1000);
                    }

                    // Form error
                    if (json.hasOwnProperty('__all__')) {

                        $(selectedCard).prepend(
                            "<span class='error'>* " + json
                            .__all__[0]
                            .message +
                            "</span>");
                    }
                    // Product color or size error
                    if (json.hasOwnProperty('sku')) {
                        $(selectedCard).prepend(
                            "<span class='error'>* " + json
                            .sku[0]
                            .message +
                            "</span>");

                        // Red borders for empty selections
                        if ($(selectedCard).find(".variant_size").val() === null) {
                            $(selectedCard).find(".variant_size").addClass("red-border");
                        }
                        if ($(selectedCard).find(".variant-color").val() === "") {
                            $(selectedCard).find(".code-color").addClass("red-border");
                        }
                    }

                    // Show success animation for Update/Remove button
                    $(selectedCard).find(".update").html("<i class='fas fa-times'></i>").css({
                        "min-width": "110px",
                        "background": "var(--error-color)"

                    }).delay(800).queue(
                        function () {

                            // Return to previous css state
                            $(this).css({
                                "background": "rgb(42 162 117)",
                                "visibility": "hidden",
                                "display": "none",
                            }).text(updateText);

                            $(this).dequeue();
                        });
                }
                $(selectedCard).parent().find(".add-product").html(addProduct);
            }
        });
    });

    // ! 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");
            $(this).closest("form").find($(".variant-color")).val("");
            $(this).closest("form").find(".code-color " + colorClass).trigger("click");


            if ($(this).closest("form").find(".code-color " + colorClass).length === 1) {
                $(this).closest("form").find(".code-color " + colorClass).trigger("click");
            }
        }

        imageClass = "." + $(this).children(":selected").attr('class').split(' ').pop();
        $(".slideshow-points " + imageClass).trigger("click");
        if ($(this).children(":selected").attr("price") !== undefined) {
            $(this).closest('form').parent().parent().find('.full-price .price').text($(this).children(":selected").attr("price") + " " + currencyLang);
        }
        if ($(this).children(":selected").attr("old-price") !== undefined) {
            if ($(this).children(":selected").attr("old-price") !== "0") {
                $(this).closest('form').parent().parent().find('.full-price .old-price').text($(this).children(":selected").attr("old-price") + " ")
            } else {
                $(this).closest('form').parent().parent().find('.full-price .old-price').text("")
            }
        }

    });

    $(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();
        $(this).closest("form").find($(".variant-color")).val($(this).attr('variant'));
        $(this).closest('form').parent().parent().find('.full-price .price').text($(this).attr("price") + " " + currencyLang);
        if ($(this).attr("old-price") !== "0") {
            $(this).closest('form').parent().parent().find('.full-price .old-price').text($(this).attr("old-price") + " ")
        } else {
            $(this).closest('form').parent().parent().find('.full-price .old-price').text("")
        }
        $(".slideshow-points " + imageClass).trigger("click");

    });

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

    $(".variant_size").trigger("click");

    // ! Sync Quantity and Price
    let syncCartItemsPrice = function () {
        sumPrice = 0.0;
        sumQuantity = 0;
        $('.cartitem-totals').each(function () {
            sumPrice += Number(parseFloat($(this).text()));

        });
        $(".totals").text(sumPrice.toFixed(3) + " " + currencyLang);

    };

    syncCartItemsPrice();

    let sumPrices = function () {
        sumPrice = 0.0;
        sumDiscount = 0.0;
        $('.item-totals').each(function () {
            sumPrice += Number(parseFloat($(this).text()));
        });
        $('.item-discounts').each(function () {
            sumDiscount += Number(parseFloat($(this).text())) - Number(parseFloat($(this).parent().text()));

        });
        if (Number(parseFloat($(".delivery-fee").text()))) {

            sumPrice += Number(parseFloat($(".delivery-fee").text()));
        }
        $(".discount-price").text("- " + sumDiscount);
        $(".final-price").text(sumPrice.toFixed(3) + " " + q8Currency);
        if (sumDiscount === 0.0) {
            $(".discount-price").parent().css("display", "none");
        } else {
            $(".discount-price").parent().css("display", "table-row");
        }
    }

    sumPrices();

    // ! If input label click
    $('.input-label:not(.mobile)').click(function () {
        $(this).children('input').trigger('focus');
    });



    // {# Checkout Form Ajax #}
    const $checkoutForm = $("#checkout_form")
    $checkoutForm.submit(function (event) {
        event.preventDefault()
        const $checkoutForm_data = $(this).serialize()

        // {#  Remove repeated icon and text #}
        $("input, select").removeClass("red-border");
        $("#submit_order").empty().addClass("active_button").attr("disabled", true);
        $(".error, .success").remove();
        $.ajax({
            method: "POST",
            url: "",
            data: $checkoutForm_data,
            dataType: 'json',

            success: function (data) {


                if (data.page) {
                    setTimeout(function () {
                        $("#submit_order").empty().css("background-color", "#5CB85C").append(
                            "<i class='fas fa-check'></i>").addClass("success_button");


                        setTimeout(function () {
                            // {# Empty both div and add head titles #}
                            $(".order-details-wrapper").html(
                                "<h3>Order details:</h3>"
                            ).css(
                                "place-items", "normal");

                            $(".order-details-wrapper").css("display", "none");
                            $(".center-two-col").css("grid-template-columns", "unset");
                            $(".order-wrapper").html(data.page);
                            $(".cart-items-number-overlay").text("0");


                            // Remove Checkout step highlight to Order Complete step
                            $(".active_cart_step_icon").removeClass(
                                "active_cart_step_icon");
                            $(".active_cart_step_anchor").removeClass(
                                "active_cart_step_anchor");
                            $(".cart-title li:eq(2) i").addClass(
                                "active_cart_step_icon")
                            $(".cart-title li:eq(2) a").addClass(
                                "active_cart_step_anchor")
                        }, 1000)
                    }, 1000)


                } else if (data.payment) {
                    window.location.replace(data.payment);
                } else {
                    let $scroll = false;
                    setTimeout(function () {
                        $("#submit_order").css("background-color",
                            "var(--error-color)").html(
                            "<i class='fas fa-times'></i>").addClass("success_button");

                        setTimeout(function () {
                            $(".fa-times").remove()
                            $("#submit_order").removeClass(
                                "active_button success_button").css(
                                "background-color",
                                "transparent").append(
                                "Place order").attr("disabled",
                                false);

                        }, 2000)

                        let json;
                        $.each(data, function (key, item) {
                            json = $.parseJSON(item);
                        });
                        let headerHeight = $("header").height();
                        if (json.hasOwnProperty('name')) {
                            $('.order-details-wrapper .input-label:eq(0) .label-inside')
                                .after(
                                    "<span class='error form_error'>* " + json
                                    .name[
                                        0]
                                    .message +
                                    "</span>");

                            $("#id_name").addClass("red-border");

                            $([document.documentElement, document.body]).animate({
                                scrollTop: $("#id_name").offset().top - (headerHeight + 100)
                            }, 1000);
                            $scroll = true;
                        }


                        if (json.hasOwnProperty('email')) {
                            $('.order-details-wrapper .input-label:eq(1) .label-inside')
                                .after(
                                    "<span class='error form_error'>* " + json
                                    .email[
                                        0]
                                    .message +
                                    "</span>");
                            $("#checkout_email").addClass("red-border");
                            if ($scroll === false) {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#checkout_email").offset().top - (headerHeight + 100)
                                }, 1000);
                                $scroll = true;
                            }
                        }

                        if (json.hasOwnProperty('country')) {
                            $('.order-details-wrapper .input-label:eq(2) .label-inside')
                                .after(
                                    "<span class='error form_error'>* " + json
                                    .country[0]
                                    .message +
                                    "</span>");
                            $("#id_country").addClass("red-border");
                            if ($scroll === false) {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#id_country").offset().top - (headerHeight + 100)
                                }, 1000);
                                $scroll = true;
                            }
                        }


                        if (json.hasOwnProperty('city')) {
                            $('.order-details-wrapper .input-label:eq(3) .label-inside')
                                .after(
                                    "<span class='error form_error'>* " + json
                                    .city[0]
                                    .message +
                                    "</span>");
                            $("#id_city").addClass("red-border");
                            if ($scroll === false) {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#id_city").offset().top - (headerHeight + 100)
                                }, 1000);
                            }
                            $scroll = true;
                        }

                        if (json.hasOwnProperty('local_cities')) {
                            $('.order-details-wrapper .input-label:eq(4) .label-inside')
                                .after(
                                    "<span class='error form_error'>* " + json
                                    .local_cities[0]
                                    .message +
                                    "</span>");
                            $("#id_local_cities").addClass("red-border");
                            if ($scroll === false) {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#id_local_cities").offset().top - (headerHeight + 100)
                                }, 1000);
                            }
                            $scroll = true;
                        }

                        if (json.hasOwnProperty('address1')) {
                            $('.order-details-wrapper .input-label:eq(5) .label-inside')
                                .after(
                                    "<span class='error form_error'>* " + json
                                    .address1[
                                        0]
                                    .message +
                                    "</span>");
                            $(".order-details-wrapper .input-label:eq(5) input").addClass("red-border");
                            if ($scroll === false) {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#id_address1").offset().top - (headerHeight + 100)
                                }, 1000);
                                $scroll = true;
                            }
                        }
                        if (json.hasOwnProperty('address2')) {
                            $('.order-details-wrapper .input-label:eq(6) .label-inside')
                                .after(
                                    "<span class='error form_error'>* " + json
                                    .address2[
                                        0]
                                    .message +
                                    "</span>");
                            $(".order-details-wrapper .input-label:eq(6) input").addClass("red-border");
                            if ($scroll === false) {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#id_address2").offset().top - (headerHeight + 100)
                                }, 1000);
                                $scroll = true;
                            }
                        }

                        if (json.hasOwnProperty('phone')) {
                            $('.order-details-wrapper .input-label:eq(7) .label-inside')
                                .after(
                                    "<span class='error form_error'>* " + json
                                    .phone[0]
                                    .message +
                                    "</span>");
                            $("#id_phone_1").addClass("red-border");
                            if ($scroll === false) {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#id_phone_1").offset().top - (headerHeight + 100)
                                }, 1000);
                                $scroll = true;
                            }
                        }

                        if (json.hasOwnProperty('notes')) {
                            $('#id_notes')
                                .before(
                                    "<span class='error'>* " + json
                                    .notes[0]
                                    .message +
                                    "</span>");
                            $(".order-details-wrapper .input-label:eq(8) input").addClass("red-border");
                            if ($scroll === false) {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#id_notes").offset().top - (headerHeight + 100)
                                }, 1000);
                                $scroll = true;
                            }
                        }

                        if (json.hasOwnProperty('payment_method')) {
                            $('.order-wrapper .payment-method-options')
                                .before(
                                    "<span class='error'>* " + json
                                    .payment_method[0]
                                    .message +
                                    "</span>");
                        }

                        if (json.hasOwnProperty('terms_agreement')) {
                            $('.order-wrapper .check-terms')
                                .before(
                                    "<span class='error'>* " + json
                                    .terms_agreement[0]
                                    .message +
                                    "</span>");
                        }

                        if (json.hasOwnProperty('__all__')) {
                            $('.order-wrapper .check-terms')
                                .before(
                                    "<span class='error'>* " + json
                                    .__all__[0]
                                    .message +
                                    "</span>");
                        }
                    }, 1000)
                }
            }
        })
    })

    $(document).ajaxComplete(function () {
        syncCartItemsPrice();
    });
});