jQuery(document).ready(function () {
    jQuery(document).keyup(function (e) {
        if (e.keyCode === 27) {
            jQuery(".box-product-modal").fadeOut();
            jQuery("body").css("overflow", "auto");
        }
    });

    populateCart();
})

var closeModalProduct = function (e) {
    jQuery(".box-product-modal").fadeOut();
    jQuery("body").css("overflow", "auto");
}

var openModalProduct = function (e, productId) {
    jQuery(".loading-modal-product").show(); //Loading
    jQuery(".box-product-modal").fadeIn();
    jQuery("body").css("overflow", "hidden");
    getProductItem(jQuery(e).data("address"), productId)
}

var getProductItem = function (url, productId) {
    jQuery.get(url, function (data) {
        var pageScript = jQuery(data);
        var contentInfosHTML = jQuery('#product-container .divnomeproduto', pageScript).html() != undefined ? jQuery('#product-container .divnomeproduto', pageScript).html() : '';
        // contentInfosHTML += jQuery('#product-container .medidas', pageScript).html() != undefined ? "<button class='medidas'>" + jQuery('#product-container .medidas', pageScript).html() + "</button>" : '';
        contentInfosHTML += jQuery('#product-container #menuVars', pageScript).html() != undefined ? jQuery('#product-container #menuVars', pageScript).html() : '';
        contentInfosHTML += jQuery("#product-container .bordaPrecoBot", pageScript).html() != undefined ? jQuery("#product-container .bordaPrecoBot", pageScript).html() : '';
        contentInfosHTML += '<div class="footer-modal"><a href="' + url + '" class="view-all-details">Visualizar todos os detalhes do produto</a></div>';

        var contentImage = jQuery('#product-container .container-imagem figure', pageScript).html() != undefined ? jQuery('#product-container .container-imagem figure', pageScript).html() : '';

        var thumbs = jQuery('#product-container .thumbs-vertical', pageScript).html() != undefined ? jQuery('#product-container .thumbs-vertical', pageScript).html() : '';

        jQuery(".content-infos-modal").html(contentInfosHTML);
        jQuery(".product-box-apresentation").html(contentImage);
        jQuery(".vertical-thumbs").html(thumbs);

        var settings = {
            "url": "https://www.cnshop.com.br/web_api/variants?product_id=" + productId,
            "method": "GET",
            "timeout": 0,
        };

        jQuery.ajax(settings).done(function (data) {
            var list = "";
            data.Variants.forEach(function (obj, index) {
                if (obj.Variant.available == '1') {
                    list += `<li class="">
                            <label class="lista-radios-input modal-input">
                                <input required name="radioVariant1" type="radio" value="${obj.Variant.id}" data-preco="${obj.Variant.price}" data-parcela="${obj.Variant.payment_option}">
                                <span>${obj.Variant.Sku[0].value}</span>
                            </label>
                        </li>`

                }
            });
            jQuery(".content-infos-modal .lista_cor_variacao").html(list);

            jQuery(".content-infos-modal .lista_cor_variacao input[type=radio]").change(function (e) {
                e.preventDefault();
                let valor = toReal(parseFloat(jQuery(this).data("preco")), "");
                let parcela = jQuery(this).data("parcela");
                jQuery(".content-infos-modal .lista_cor_variacao input[type=radio]:not(:checked)").closest("li").removeClass("selecionada");
                jQuery(this).closest("li").toggleClass("selecionada");
                let boxpreco = `<div id="produto_preco">
                                    <br>
                                    <span class="PrecoPrincipal color-tone-2 d-block">
                                        <abbr class="currency" title="BRL"> R$ </abbr> 
                                        <span data-app="product.price" id="variacaoPreco" data-tray-tst="price_product">${valor}</span>
                                        <input type="hidden" value="${valor}" id="preco_atual">
                                    </span>
                                    <span id="info_preco" class="d-block my-1">${parcela}</span>
                                </div>`;
                jQuery(".content-infos-modal .produto-preco").html(boxpreco);
            });
        });

        jQuery(".loading-modal-product").hide();

        jQuery("#lista-vertical-modal .carousel-gallery").slick({
            dots: false,
            vertical: true,
            slidesToShow: 3,
            infinite: false,
            adaptiveHeight: true,
            slidesToScroll: 1,
            verticalSwiping: true,
            nextArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button" aria-disabled="true" style="display: inline-block;"><i class="fa fa-angle-down" aria-hidden="true"></i></button>',
            prevArrow: '<button class="slick-prev slick-arrow" aria-label="Previous" type="button" aria-disabled="true" style="display: inline-block;"><i class="fa fa-angle-up" aria-hidden="true"></i></button>'
        });

        jQuery("#lista-vertical-modal .carousel-gallery").slick('resize');

        jQuery('<input class="qtminus" type="button" id="plus" value="-" onclick="processModal(-1)">').insertBefore('.box-product-modal #quant');
        jQuery('<input class="qtplus" type="button" id="minus" value="+" onclick="processModal(1)">').insertAfter('.box-product-modal #quant');

        jQuery("#lista-vertical-modal .carousel-gallery a").click(function (e) {
            e.preventDefault();
            var img = jQuery(this).data("zoomImage");
            jQuery(".product-box-apresentation img").attr("src", img);
            return false;
        });

        jQuery(".box-product-modal #button-buy").click(function (e) {
            e.preventDefault();
            addCarrinho(this);
        });

        /*jQuery(".medidas").click(function (e) {
            e.preventDefault();
            jQuery(".box-modal").fadeIn();
            jQuery("html").css("overflow-y", "hidden");
            setTimeout(function () {
                jQuery(".content-modal").css("width", "100%").css("height", "100%").css("overflow", "auto");
            }, 200)
        });*/
    });
}

function toReal(value, str_cifrao) {
    return str_cifrao + value.formatMoney(2, ',', '.');
}

Number.prototype.formatMoney = function (c, d, t) {
    var n = this
        , c = isNaN(c = Math.abs(c)) ? 2 : c
        , d = d == undefined ? "." : d
        , t = t == undefined ? "," : t
        , s = n < 0 ? "-" : ""
        , i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + ""
        , j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(d{3})(?=d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}

function processModal(quant) {
    var value = parseInt(jQuery(".box-product-modal #quant").val());
    value = (value == 1 && quant < 0) ? value : value + quant;
    jQuery(".box-product-modal #quant").val(value);
}

function addCarrinho(obj) {
    var dataSession = jQuery("html").attr("data-session");
    var dataProductId = jQuery(obj).attr('data-id');
    var dataQuant = jQuery("#quant").val();
    var dataVariantId, data;
    var send = false;

    if (jQuery('.content-infos-modal ul li input[type="radio"]').length > 0) {
        if (jQuery('.content-infos-modal ul li input[type="radio"]:checked').val()) {
            var dataVariantId = jQuery('.content-infos-modal ul li input[type="radio"]:checked').val();
            send = true;
            data = '{"Cart":{"session_id":"' + dataSession + '","product_id":"' + dataProductId + '","quantity":"' + dataQuant + '" ,"variant_id":"' + dataVariantId + '"}}';
        }
    } else {
        send = true;
        data = '{"Cart":{"session_id":"' + dataSession + '","product_id":"' + dataProductId + '","quantity":"1"}}';
    }

    if (send) {
        jQuery.ajax({
            method: "POST",
            url: "/web_api/cart/",
            contentType: "application/json; charset=utf-8",
            data: data
        }).done(function (response, textStatus, jqXHR) {
            jQuery(".cart .list ul").empty();
            jQuery.getJSON("/mvc/store/cart/count?loja=906555", function (e) {
                var t, s = [],
                    r = e.cart.Products.length;
                jQuery("span[data-cart=amount]").html(e.cart.amount);

                for (t = 0; t < r; t++) {
                    var name = e.cart.Products[t].Variant != "" ? e.cart.Products[t].name + "<br>" + e.cart.Products[t].Variant.name.replace("Modelo:", "").trim() : e.cart.Products[t].name;
                    // subtotal += parseFloat(e.cart.Products[t].price.replace(",", ".")).toFixed(2) * parseFloat(e.cart.Products[t].quantity).toFixed(2);
                    s.push(`<tr>
                        <td class="image">
                            <img src="`+ e.cart.Products[t].ProductImage[0].thumbs[90].https + `" alt="` + e.cart.Products[t].name + `">
                        </td>
                        <td class="name">
                            ` + name + `
                            <p>
                                <span class="quantity">` + e.cart.Products[t].quantity + ` x</span>
                                <span class="total">
                                    <span class="money" data-currency="R$">R$ ` + e.cart.Products[t].price + `</span>
                                </span>
                            </p>
                        </td>
                        <td class="remove">
                            <a href="javascript:removeItemCart(` + e.cart.Products[t].id + `, ` + e.cart.Products[t].Variant.id + `)" data-id="` + e.cart.Products[t].id + `" data-variante="` + e.cart.Products[t].Variant.id + `" title="Remover este item">x</a>
                        </td>
                    </tr>`);
                }

                if (e.cart.Products.length > 0) {
                    jQuery(".mini-cart-total").removeClass("d-none");
                } else {
                    jQuery(".mini-cart-total").addClass("d-none");
                    jQuery(".list .table-cart tbody").empty();
                    jQuery(".list .table-cart tbody").append(`<p class="text-center my-5 text-empty">Nenhum produto encontrado</p></td></tr>`);
                    return false
                }

                jQuery(".mini-cart-total .money").text("R$ " + e.cart.price);

                jQuery(".list .table-cart tbody").empty();
                //Array elementos capturados no json
                s.forEach(function (obj, i) {
                    jQuery(".list .table-cart tbody").append(obj);
                })
                // --------------------
                // var t, s = "",
                //     r = e.cart.Products.length;
                // jQuery("span[data-cart=amount]").html(e.cart.Products.length);
                // for (t = 0; t < r; t++) {
                //     s += '<li><span onclick="removerCarrinho(this)" class="delete-product" data-product="' + e.cart.Products[t].id + '" data-variant="' + e.cart.Products[t].Variant.id + '" ><i class="fa fa-trash-o" aria-hidden="true"></i></span><img class="item-image" src="' + e.cart.Products[t].ProductImage[0].https + '"><span class="item-name">' + e.cart.Products[t].name + '</span><span class="item-price">R$ ' + e.cart.Products[t].price + "</span></li>"
                // }
                // jQuery(".cart .list ul").prepend(s)
                // jQuery(".box-product-modal").fadeOut();
                closeModalProduct();
            });
            jQuery(".customer-menu .link-carrinho:visible").addClass("active").delay(3000).queue(function () {
                jQuery(this).removeClass("active").dequeue();
            });
            send = false;
        }).fail(function (jqXHR, status, errorThrown) {
            var response = jQuery.parseJSON(jqXHR.responseText);
            send = false;
        });
    } else {
        var elementAlert = '<span class="tooltip-custom" data-toggle="tooltip">Selecione uma varia��o</span>';
        jQuery(".lista_radios:first-child").append(elementAlert);
        jQuery(".tooltip-custom").show('fast').delay(3000).hide('fast', function () {
            jQuery(this).remove();
        });
    }

    return false;
}

function clearCarrinho() {
    jQuery.getJSON("/mvc/store/cart/count?loja=906555", function (e) {
        jQuery(".cart .list ul").empty();
        var t, s = "",
            r = e.cart.Products.length;
        jQuery("span[data-cart=amount]").html(e.cart.Products.length);
        for (t = 0; t < r; t++) {
            s += '<li><span onclick="removerCarrinho(this)" class="delete-product" data-product="' + e.cart.Products[t].id + '" data-variant="' + e.cart.Products[t].Variant.id + '" ><i class="fa fa-trash-o" aria-hidden="true"></i></span><img class="item-image" src="' + e.cart.Products[t].ProductImage[0].https + '"><span class="item-name">' + e.cart.Products[t].name + '</span><span class="item-price">R$ ' + e.cart.Products[t].price + "</span></li>"
        }
        jQuery(".cart .list ul").prepend(s)
        // jQuery(".box-product-modal").fadeOut();
        closeModalProduct();
    });
}

function removerCarrinho(obj) {
    var dataSession = jQuery("html").attr("data-session");
    var dataProductId = jQuery(obj).attr('data-product');
    var dataVariantId = jQuery(obj).attr('data-variant');
    var send = dataProductId && dataVariantId && dataSession ? true : false;

    if (send) {
        $.ajax({
            method: "DELETE",
            url: "/web_api/carts/" + dataSession + "/" + dataProductId + "/" + dataVariantId,
            contentType: "application/json; charset=utf-8",
        }).done(function (response, textStatus, jqXHR) {
            clearCarrinho();
        }).fail(function (jqXHR, status, errorThrown) {
            var response = $.parseJSON(jqXHR.responseText);
        });
    }

    return false;
}

function removeItemCart(productID, productVariant) {
    let dataSession = jQuery("html").attr("data-session");
    let dataProductId = productID;
    let dataVariantId = productVariant == undefined ? "" : productVariant;
    let send = dataProductId && dataSession ? true : false;

    if (send) {
        jQuery.ajax({
            method: "DELETE",
            url: "/web_api/carts/" + dataSession + "/" + dataProductId + "/" + dataVariantId,
            contentType: "application/json; charset=utf-8",
        }).done(function (response, textStatus, jqXHR) {
            populateCart();
        }).fail(function (jqXHR, status, errorThrown) {
            let response = jQuery.parseJSON(jqXHR.responseText);
            console.log(response);
        });
    }

    return false;
}

function populateCart() {
    // showLoadingCart();
    jQuery.getJSON("/mvc/store/cart/count?loja=906555", function (e) {
        var t, s = [],
            r = e.cart.Products.length;
        jQuery("span[data-cart=amount]").html(e.cart.amount);
        jQuery(".list .table-cart tbody").empty();

        jQuery(".mini-cart-total .money").text("R$ " + e.cart.price);

        for (t = 0; t < r; t++) {
            var name = e.cart.Products[t].Variant != "" ? e.cart.Products[t].name + "<br>" + e.cart.Products[t].Variant.name.replace("Modelo:", "").trim() : e.cart.Products[t].name;
            // subtotal += parseFloat(e.cart.Products[t].price.replace(",", ".")).toFixed(2) * parseFloat(e.cart.Products[t].quantity).toFixed(2);
            s.push(`<tr>
                <td class="image">
                    <img src="`+ e.cart.Products[t].ProductImage[0].thumbs[90].https + `" alt="` + e.cart.Products[t].name + `">
                </td>
                <td class="name">
                    ` + name + `
                    <p>
                        <span class="quantity">` + e.cart.Products[t].quantity + ` x</span>
                        <span class="total">
                            <span class="money" data-currency="R$">R$ ` + e.cart.Products[t].price + `</span>
                        </span>
                    </p>
                </td>
                <td class="remove">
                    <a href="javascript:removeItemCart(` + e.cart.Products[t].id + `, ` + e.cart.Products[t].Variant.id + `)" data-id="` + e.cart.Products[t].id + `" data-variante="` + e.cart.Products[t].Variant.id + `" title="Remover este item">x</a>
                </td>
            </tr>`);
        }

        if (e.cart.Products.length > 0) {
            jQuery(".mini-cart-total").removeClass("d-none");
        } else {
            jQuery(".mini-cart-total").addClass("d-none");
            jQuery(".list .table-cart tbody").empty();
            jQuery(".list .table-cart tbody").append(`<p class="text-center my-5 text-empty">Nenhum produto encontrado</p></td></tr>`);
        }

        // if (jQuery(".list .table-cart tbody").find(".image").length)
        // jQuery(".list .table-cart tbody").empty();
        //Array elementos capturados no json
        s.forEach(function (obj, i) {
            jQuery(".list .table-cart tbody").append(obj);
        })
    });
}