{{#each products}}
<li class="plp_content_right_bottom_product product_default" product-id="{{this.id}}" product-type="Simple">
    <div class="product_img">
        {{#if this.image}}
            <a href="{{this.url}}"
            class="listItem-figure__link"
            aria-label="{{name}},{{> components/products/product-aria-label}}"
            {{#if settings.data_tag_enabled}}
            data-event-type="product-click"
            {{/if}}
            >
            {{> components/common/responsive-img
                image=this.image
                class="listItem-image"
                fallback_size=theme_settings.productgallery_size
                lazyload=theme_settings.lazyload_mode
                default_image=theme_settings.default_image_product
            }}
            </a>
        {{else}}
        <a href="{{this.url}}"
            class="listItem-figure__link"
            aria-label="{{name}},{{> components/products/product-aria-label}}"
            {{#if settings.data_tag_enabled}}
            data-event-type="product-click"
            {{/if}}
            >
            <img src="{{cdn  'assets/img/ProductDefault.gif'}}">
        </a>
        {{/if}}

    </div>
    <div class="product_content_body">
        <div class="product_content">
            {{#filter custom_fields '_is_new' property="name"}}
            {{#or value '==' 'Yes' value '==' 'yes'}}
            <div class="product_title_top">
                <span style="color: #f88d34;font-weight: 900;">NEW</span>
            </div>
            {{/or}}
            {{/filter}}

            <div class="product_title">
                <a href="{{this.url}}"
                    aria-label="{{name}},{{> components/products/product-aria-label}}"
                    {{#if settings.data_tag_enabled}}
                    data-event-type="product-click"
                    {{/if}}
                    >
                    {{!--
                    <span style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
                        {{this.name}}
                    </span>
                    --}}
                    {{#filter this.custom_fields 'Display name' property="name"}}
                    <span style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 1;" title="{{value}}">{{value}}</span>
                    {{else}}
                    <span style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 1;" title="{{#if this.brand.name}}{{this.brand.name}} {{/if}}{{this.name}}">{{#if this.brand.name}}{{this.brand.name}} {{/if}}{{this.name}}</span>
                    {{/filter}}
                </a>
            </div>
            <div class="product_dec">
                <span class="product_dec_span" style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
                    <!-- {{this.summary}} -->
                    {{#each this.custom_fields}}
                        {{#if name '===' 'Description'}}
                            {{value}}
                        {{/if}}
                    {{/each}}
                </span>
            </div>
        </div>
        <div class="product_stock-info">
            <span class="operation_first">

                {{!--
                    {{#if this.stock_level '===' null}}
                        <label class="instock">IN STOCK</label>
                    {{else}}
                        {{#if this.stock_level '>' 0}}
                        <label class="instock">IN STOCK: {{this.stock_level}} Units</label>
                        {{else}}
                            {{#filter this.custom_fields 'On order' property="name"}}
                                {{#unless value '<' '1'}}
                                    <label class="outstock" style="display: none">OUT STOCK</label>
                                {{/unless}}
                            {{/filter}}
                        {{/if}}
                    {{/if}}
                --}}

                {{#if this.availability '===' ''}}
                {{else if this.availability '===' '0'}}
                {{else}}
                    <span class="onespan">{{lang 'pdp.instock' value=this.availability}}</span>
                {{/if}}
                {{#filter this.custom_fields 'On order' property="name"}}
                    {{#if value '>' '0'}}
                        <span>{{lang 'pdp.onorder' value=value}}</span>
                        {{#filter ../this.custom_fields 'On order message' property="name"}}
                        <span>{{value}}</span>
                        {{/filter}}
                    {{/if}}
                {{/filter}}


                {{!--
                {{#if this.stock_level '<' '1'}}
                    {{#filter this.custom_fields 'On order' property="name"}}
                        {{#if value '<' '1'}}
                            <span class="0_0_msg" title="Contact Us for availability or possible alternatives "><a href="#">Contact Us</a></span>
                        {{/if}}
                    {{/filter}}
                {{/if}}
                --}}
            </span>
        </div>
        <div class="product_operation" style="opacity: 0;">

            <span class="operation_second operation_price">
                {{this.price.without_tax.formatted}}
            </span>
            <!-- <input type="button" class="operation_add_card" value="ADD TO CART"> -->

            <a  href="javascript:void(0)" onclick="plpaddcart('{{this.id}}',this)" class="button button--primary  btn_add_to_card" data-wait-message="{{lang 'products.adding_to_cart'}}" value="ADD TO CART" >ADD TO CART</a>

            {{!--
            <a href="{{this.url}}" class="operation_search"><i class="iconfont iconsousuo btn_search"></i></a>
            <!-- <input type="button" class="operation_search " value=""> -->
            --}}

        </div>
        <div class="right_icon right_icon_hide">
            {{#if ../show_compare}}
                <label class="button button--small compare-btn" for="compare-{{id}}">
                    <i class="iconfont iconxiangxi" title="{{lang "products.compare"}}"></i> <input type="checkbox" name="products[]" value="{{id}}" id="compare-{{id}}" data-compare-id="{{id}}">
                </label>
            {{/if}}
            {{!--
            <form class="add_to_project_list" id="{{this.id}}" action="{{this.add_to_wishlist_url}}"  target="myframe">
                <span class="right_icon_span_collection" onclick="$(this).next().click()">
                    <i class="iconfont iconshoucang-solid"></i>
                </span>
                <input  class="button" type="submit" value="123" style="display: none;">
            </form>
            --}}
            <!-- <a href="{{this.add_to_wishlist_url}}">
                onsubmit="return saveWish('{{this.id}}');"
            <span class="right_icon_span_collection" onclick="wishadd('{{this.id}}',this)">
                    <i class="iconfont iconshoucang-solid"></i>
            </span>
        </a> -->
        </div>
    </div>

</li>

{{/each}}
<script type="text/javascript">
    $(function () {
        var productIds="";
        $(".plp_div .products>li").each(function(index,ele){
          productIds += $(ele).attr('product-id') + ",";
        });
        fetch('/graphql', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer {{ settings.storefront_api.token }}'
            },
            body: JSON.stringify({
                query: `
            query MyFirstQuery {
                site {
                products (entityIds: [` + productIds.substring(0,productIds.length-1) + `], first: 50) {
                  edges {
                    node {
                      id
                      entityId
                      name
                      description
                      path
                      productOptions {
                          edges {
                              node {
                                  entityId
                                  displayName
                                  isRequired
                                  __typename
                                  ... on MultipleChoiceOption {
                                      values {
                                        edges {
                                          node {
                                            entityId
                                            label
                                            __typename
                                            ... on ProductPickListOptionValue {
                                                entityId
                                                productId
                                            }
                                          }
                                        }
                                      }
                                  }
                              }
                          }
                      }
                      prices {
                        price {
                          value
                          currencyCode
                        }
                      }
                    }
                  }
                }
              }
            }
            `
            }),
        })
        .then(res => res.json())
        .then(json => {
            console.log('plp',json);
            var products = json.data.site.products.edges;
            $(products).each(async function(key, value){
                var productId = value.node.entityId;
                var productUrl = value.node.path
                //console.log(productId)
                let getProductsIdBySku = [];
                let childIds = [];

                if($(value.node.productOptions.edges).length > 0) {
                    $(value.node.productOptions.edges).each(function(key,option){
                        if(option.node.displayName == 'Group') {
                            $(`.plp_div .products>li[product-id="${productId}"]`).attr('product-type','Group')
                            //console.log(productId);
                            // $('.product_operation').css({
                            //     'opacity':'1',
                            //     'visibility':'visible'
                            // });
                            // $(`.plp_div .products>li[product-id="${productId}"] .operation_price`).css({
                            //     'opacity':'0',
                            //     'visibility':'hidden'
                            // })
                            $(`.plp_div .products>li[product-id="${productId}"] .btn_add_to_card`).removeAttr("onclick").attr('href', productUrl).attr("data-value", "view").text('VIEW PRODUCT')

                            if (option.node.__typename == 'MultipleChoiceOption') {
                                let optionValues = option.node.values.edges;
                                for (let edge of optionValues) {
                                    if (edge.node.__typename == "ProductPickListOptionValue") {
                                        childIds.push(edge.node.productId)
                                    }
                                    if (edge.node.__typename == "MultipleChoiceOptionValue") {

                                        if (edge.node.label && isNaN(edge.node.label)) {
                                            getProductsIdBySku.push(
                                                fetch('/graphql', {
                                                    method: 'POST',
                                                    credentials: 'same-origin',
                                                    headers: {
                                                        'Content-Type': 'application/json',
                                                        'Authorization': 'Bearer {{ settings.storefront_api.token }}'
                                                    },
                                                    body: JSON.stringify({
                                                        query: `
                                                    query MyFirstQuery {
                                                        site {
                                                        product (sku: \"` + edge.node.label + `\") {
                                                            entityId
                                                        }
                                                      }
                                                    }
                                                    `
                                                    }),
                                                })
                                                .then(res => res.json())
                                                .then(json => {
                                                    if (json.data.site.product) {
                                                        childIds.push(json.data.site.product.entityId)
                                                    }
                                                })
                                            );
                                        }

                                    }
                                }
                            }
                        } else if (option.node.displayName.startsWith('Configurable Product^')) {
                            $(`.plp_div .products>li[product-id="${productId}"]`).attr('product-type', 'Configurable')
                            $(`.plp_div .products>li[product-id="${productId}"] .btn_add_to_card`).removeAttr("onclick").attr('href', productUrl).attr("data-value", "view").text('VIEW PRODUCT')

                            if (option.node.__typename == 'MultipleChoiceOption') {
                                let optionValues = option.node.values.edges;
                                for (let edge of optionValues) {
                                    if (edge.node.__typename == "ProductPickListOptionValue") {
                                        childIds.push(edge.node.productId)
                                    }
                                    if (edge.node.__typename == "MultipleChoiceOptionValue") {

                                        if (edge.node.label && isNaN(edge.node.label)) {
                                            getProductsIdBySku.push(
                                                fetch('/graphql', {
                                                    method: 'POST',
                                                    credentials: 'same-origin',
                                                    headers: {
                                                        'Content-Type': 'application/json',
                                                        'Authorization': 'Bearer {{ settings.storefront_api.token }}'
                                                    },
                                                    body: JSON.stringify({
                                                        query: `
                                                    query MyFirstQuery {
                                                        site {
                                                        product (sku: \"` + edge.node.label + `\") {
                                                            entityId
                                                        }
                                                      }
                                                    }
                                                    `
                                                    }),
                                                })
                                                .then(res => res.json())
                                                .then(json => {
                                                    if (json.data.site.product) {
                                                        childIds.push(json.data.site.product.entityId)
                                                    }
                                                })
                                            );
                                        }

                                    }
                                }
                            }
                        } else {
                            $('.product_operation').css({
                                'opacity':'1',
                                'visibility':'visible'
                            });
                        }

                    })

                    await Promise.all(getProductsIdBySku);

                    if (childIds.length > 0) {
                        // fetch prices
                        fetch('/graphql', {
                            method: 'POST',
                            credentials: 'same-origin',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': 'Bearer {{ settings.storefront_api.token }}'
                            },
                            body: JSON.stringify({
                                query: `
                                query ProductsPrice {
                                    site {
                                    products (entityIds: [` + childIds + `], first: 50) {
                                      edges {
                                        node {
                                          id
                                          entityId
                                          prices {
                                            price {
                                              value
                                            }
                                          }
                                        }
                                      }
                                    }
                                  }
                                }
                                `
                            }),
                        })
                        .then(res => res.json())
                        .then(json => {
                            if (json.data) {
                                let minPrice = Number.MAX_VALUE;
                                let maxPrice = 0;

                                let edges = json.data.site.products.edges;
                                for (let edge of edges) {
                                    minPrice = Math.min(minPrice, edge.node.prices.price.value)
                                    maxPrice = Math.max(maxPrice, edge.node.prices.price.value)
                                }

                                if (minPrice > 0) {
                                    $(`.plp_div .products > li[product-id="${productId}"] .product_operation`).css({'opacity':'1', 'visibility':'visible'});
                                    $(`.plp_div .products > li[product-id="${productId}"] .operation_price`).html(`<span style="font-size: 14px;">Starting from</span> $${minPrice.toFixed(2)}`);
                                } else {
                                    $(`.plp_div .products > li[product-id="${productId}"] .operation_price`).css({'opacity': 0, 'visibility': 'hidden'});
                                    $(`.plp_div .products > li[product-id="${productId}"] .product_operation`).css({'opacity':'1', 'visibility':'visible'});
                                }
                            } else {
                                $(`.plp_div .products > li[product-id="${productId}"] .operation_price`).css({'opacity': 0, 'visibility': 'hidden'});
                                $(`.plp_div .products > li[product-id="${productId}"] .product_operation`).css({'opacity':'1', 'visibility':'visible'});
                            }
                        });
                    } else { // has options, but no option values
                        $(`.plp_div .products > li[product-id="${productId}"] .operation_price`).css({'opacity': 0, 'visibility': 'hidden'});
                        $(`.plp_div .products > li[product-id="${productId}"] .product_operation`).css({'opacity':'1', 'visibility':'visible'});
                    }

                } else { // no options
                    $('.product_operation').css({
                        'opacity':'1',
                        'visibility':'visible'
                    });
                    if (value.node.prices.price.value == 0) {
                        $(`.plp_div .products > li[product-id="${productId}"] .operation_price`).css({'opacity': 0, 'visibility': 'hidden'});
                        $(`.plp_div .products>li[product-id="${productId}"] .btn_add_to_card`).removeAttr("onclick").attr('href', productUrl).attr("data-value", "view").text('VIEW PRODUCT')
                    }
                }
            })
        })

    })

</script>
<style media="screen">
    .product_operation{
        opacity: 0;
        transition: all ease 0.3s;
    }
</style>