{{assignVar 'isConfigurableProduct' 0 }}
{{#each product.options}}
    {{#contains display_name 'Configurable Product'}}
        {{assignVar 'isConfigurableProduct' 1 }}
    {{/contains}}
{{/each}}
{{assignVar 'hasDatasheet' 0}}
{{assignVar 'hasProtips' 0}}
{{#each product.custom_fields}}
    {{#contains name 'DATASHEET'}}
        {{assignVar 'hasDatasheet' 1}}
    {{/contains}}
    {{#contains name 'PROTIP'}}
        {{assignVar 'hasProtips' 1}}
    {{/contains}}
{{/each}}
<div class="pdponediv">
    {{!-- <span style="margin-left: 0px;" class="product_span_1">{{#filter product.custom_fields  '_tag_third'  property='name'}}{{value}}{{/filter}}</span> --}}
    {{!-- <span class="pdpspanone">{{product.title}}</span> --}}

    {{#filter product.custom_fields 'Display name' property="name"}}
    <span class="pdpspanone">{{value}}{{#filter product.custom_fields 'Parent' property="name"}}<a class="parent_link" href="#" data-pdpparent="{{value}}"><span>{{value}}</span></a>{{/filter}}</span>
    {{else}}
    <span class="pdpspanone">
        {{#if product.brand.name}}{{product.brand.name}} {{/if}}{{product.title}}
        {{#filter product.custom_fields 'Parent' property="name"}}<a class="parent_link" href="#" data-pdpparent="{{value}}"><span>{{value}}</span></a>{{/filter}}
    </span>
    <div class="pdp-custom_desc">{{#filter product.custom_fields 'Description' property="name"}} {{value}}{{/filter}}</div>
    {{/filter}}

    <span class="pdpspantwo">{{#if product.mpn}}{{lang 'pdp.sku' sku=product.mpn}}{{/if}}</span>

    <div class="leftdiv">
        {{#filter product.custom_fields '_is_new' property="name"}}
            {{#if value '===' 'Yes'}}
            <span class="product-badge_new product-badge" {{value}}>NEW</span>
            {{/if}}
        {{/filter}}
        <div class="main-img_enlarge" style="">
            <a
            href="{{getImageSrcset product.main_image (cdn theme_settings.default_image_product) 1x=theme_settings.zoom_size }}"
            data-lightbox="img-3">
            <div class="svg-icon_wrapper">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
                  <g>
                    <g>
                      <path d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z"/>
                      <path d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z"/>
                    </g>
                  </g>
                </svg>
            </div>
           
        </a>
        {{#each product.images}}
            {{#unless ../product.main_image.data '===' data}}
                <a style="display:none;" 
                href="{{getImageSrcset this (cdn ../theme_settings.default_image_product) 1x=../theme_settings.zoom_size}}"
                data-lightbox="img-3"></a>
            {{/unless}}
        {{/each}}
        <style>
           
            .lb-nav a.lb-next,  .lb-nav a.lb-prev{
                opacity: 1 !important;
                outline: none !important;
            }
        </style>
              
            
        </div>
        <div class="productView onediv">
            <section class="productView-images" data-image-gallery>
                {{!--
                    Note that these image sizes are coupled to image sizes used in /assets/js/theme/common/product-details.js
                    for variant/rule image replacement
                --}}
                <figure class="productView-image"
                        data-image-gallery-main
                        {{#if product.main_image}}
                        data-zoom-image="{{getImageSrcset product.main_image (cdn theme_settings.default_image_product) 1x=theme_settings.zoom_size }}"
                        {{/if}}
                        >
                    <div class="productView-img-container">
                        {{!-- Remove the surrounding a-element if there is no main image. --}}
                        {{#if product.main_image}}
                            <a href="{{getImageSrcset product.main_image (cdn theme_settings.default_image_product) 1x=theme_settings.zoom_size}}"
                                target="_blank"{{#if schema}} itemprop="image"{{/if}}>
                        {{/if}}
                        <img {{#if product.main_image}}src="{{getImageSrcset product.main_image use_default_sizes=true}}" alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-sizes="auto" {{#unless theme_settings.lazyload_mode '==' 'disabled'}}data-{{/unless}}srcset="{{getImageSrcset product.main_image 1x='1280w' }}"
                        {{else if theme_settings.default_image_product}}src="{{cdn theme_settings.default_image_product}}" alt="{{lang 'products.card_default_image_alt'}}"{{/if}}
                        class="{{#unless theme_settings.lazyload_mode '==' 'disabled'}}lazyload{{/unless}} productView-image--default"
                        {{#if theme_settings.lazyload_mode '==' 'lazyload'}}loading="lazy"{{/if}} data-main-image />
                        {{!-- Remove the surrounding a-element if there is no main image. --}}
                        {{#if product.main_image}}
                            </a>
                        {{/if}}
                    </div>
                </figure>
                <ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
                        "infinite": false,
                        "mobileFirst": true,
                        "slidesToShow": 5,
                        "slidesToScroll": 1,
                        "dots": false
                    }'{{/gt}}>
                    {{#each product.images}}
                        <li class="productView-thumbnail">
                            <a
                                class="productView-thumbnail-link"
                                href="{{getImageSrcset this (cdn ../theme_settings.default_image_product) 1x=../theme_settings.zoom_size}}"
                                data-image-gallery-item
                                data-image-gallery-new-image-url="{{getImageSrcset this (cdn ../theme_settings.default_image_product) 1x=../theme_settings.product_size}}"
                                data-image-gallery-new-image-srcset="{{getImageSrcset this use_default_sizes=true}}"
                                data-image-gallery-zoom-image-url="{{getImageSrcset this (cdn ../theme_settings.default_image_product) 1x=../theme_settings.zoom_size}}"
                            >
                            <img {{#if this}}src="{{getImageSrcset this use_default_sizes=true}}" alt="{{this.alt}}" title="{{this.alt}}" data-sizes="auto" {{#unless ../theme_settings.lazyload_mode '==' 'disabled'}}data-{{/unless}}srcset="{{getImageSrcset this 1x='1280w' }}"
                            {{else if ../theme_settings.default_image_product}}src="{{cdn ../theme_settings.default_image_product}}" alt="{{lang 'products.card_default_image_alt'}}"{{/if}}
                            class="{{#unless ../theme_settings.lazyload_mode '==' 'disabled'}}lazyload{{/unless}} productView-image--default"
                            {{#if ../theme_settings.lazyload_mode '==' 'lazyload'}}loading="lazy"{{/if}} />
                            </a>
                        </li>
                    {{/each}}
                </ul>
            </section>
        </div>
        <div class="twodiv" style="background-color: white;text-align: left;">
            <span class="fourspan" >Free shipping on orders over $99</span>
            {{#filter product.options  'Group'  property='display_name'}}
                {{#if values}}
                    <span class="twospan" style="color: black; margin-top: -10px;"></span>
                {{else}}
                    <span class="twospan"> {{product.price.without_tax.formatted}}</span>
                {{/if}}
            {{else}}
                <span class="twospan"> {{product.price.without_tax.formatted}}</span>
            {{/filter}}

            {{#if settings.bulk_discount_enabled}}
                <div class="productView-info-bulkPricing">
                    {{> components/products/bulk-discount-rates bulk_discount_rates=product.bulk_discount_rates}}
                </div>
            {{/if}}

            {{!--
            <span class="thirdspan"><a target="_blank" href="{{urls.auth.login}}">Sign in</a> or <a target="_blank" href="{{urls.auth.create_account}}">Register</a> for Special Pricing</span>
            --}}
            {{#filter product.options  'Group'  property='display_name'}}
                {{#or values prefill}}
                <a href="#tableproduct" class="pdp-view-product"><div class="buttondivs">{{uppercase "View Models"}}</div></a>
                {{/or}}
            {{else if (getVar 'isConfigurableProduct') '!=' '0'}}
                <div style="margin-top: 30px; display: inline-block; min-width: 200px; background-color: {{theme_settings.theme-color-blue}}; padding: 15px;"><a href="#configurable-section" style="display: block; color: #fff; font-size: 15px;">{{uppercase 'Customize and add to cart'}}</a></div>
            {{else}}
                <div class="cart-item-qu" style="display: inline-block;vertical-align: top;margin-top: 20px;    min-width: 130px;">
                    <div class="form-increment">

                        <button class="button button--icon" onclick="buttondown(this)" data-action="dec">
                            <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-keyboard-arrow-down" /></svg></i>
                        </button>
                        <input class="form-input form-input--incrementTotal cart-item-qty-input"
                               id="cartid"
                               name="qty-{{product.id}}"
                               type="tel"
                               value="1"
                               min="1"
                               pattern="[0-9]*"
                               aria-live="polite" disabled>
                        <button class="button button--icon" onclick="buttonup(this)" data-action="inc">
                            <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-keyboard-arrow-up" /></svg></i>
                        </button>
                    </div>
                </div>

                <div id="add-to-cart-button" onclick="pageScroll()" style="display: inline-block;width: 50%;cursor: pointer;" class="buttondivs" data-id="{{product.id}}">ADD TO CART</div>

            {{/filter}}
            {{#filter product.custom_fields 'evaluation_text' property="name"}}
                <div class="evaluationPromo">
                    {{value}}
                </div>
            {{/filter}}
            {{!--
            <span style="margin-top: 20px;" class="fourspan">Have a question?<a href="/contact-us/" style="cursor: pointer;color: {{theme_settings.theme-color-blue}};">Contact us</a></span>
            --}}

            {{!--
                <span class="choosespan" style="height: 0px;width: 90%;">
                    Need it on March 07? Choose 1-Day Shipping before 4:00 p.m.E.S.T at Checkout
                </span>
            --}}

            {{!-- <span   class="firdspan">ADD TO PROJECT LIST</span> --}}
            {{!--
            {{#filter product.custom_fields 'In stock' property="name"}}
                {{#if value '>' '0'}}
                    <span class="onespan">{{lang 'pdp.instock' value=value}}</span>
                    <div  class="needdiv">{{lang 'pdp.fast_shipping'}}</div>
                {{/if}}
            {{/filter}}
            --}}

            {{#if product.availability '===' ''}}
            {{else if product.availability '===' '0'}}
            {{else}}
            <span class="onespan">{{lang 'pdp.instock' value=product.availability}}</span>
            <div  class="needdiv">{{lang 'pdp.fast_shipping'}}</div>

            {{/if}}
            {{#filter product.custom_fields 'On order' property="name"}}
                {{#if value '>' 0}}
                <span class="fivespan">{{lang 'pdp.onorder' value=value}}</span>

                    {{#filter ../product.custom_fields 'On order message' property="name"}}
                    <span class="sixspan">{{value}}</span>

                    {{/filter}}
                {{/if}}
            {{/filter}}
            {{#if product.availability '===' ''}}
                {{#filter product.custom_fields 'On order' property="name"}}
                    {{#if value '<' '1'}}
                        <span class="0_0_msg"><a href="#" style="text-decoration: underline; color: {{../theme_settings.theme-color-green}};">Contact Us</a> for availability or possible alternatives</span>
                    {{/if}}
                {{/filter}}
            {{else if product.availability '===' '0'}}
                {{#filter product.custom_fields 'On order' property="name"}}
                    {{#if value '<' '1'}}
                        <span class="0_0_msg"><a href="#" style="text-decoration: underline; color: {{../theme_settings.theme-color-green}};">Contact Us</a> for availability or possible alternatives</span>
                    {{/if}}
                {{/filter}}
            {{/if}}

            <div class="wishdiv u-hidden">
                {{#if settings.show_wishlist}}
                    {{> components/common/wishlist-dropdown}}
                {{/if}}
            </div>

            {{#if (getVar 'hasProtips') '===' 1}}
                <div class="protip-container">
                    <div class="protio-wrapper">
                        <div class="protip-logo">
                            <img src="https://cdn11.bigcommerce.com/s-exhcjslbho/product_images/uploaded_images/neteon-protips.png" alt="PRO TIPS" style="width: 78px">
                        </div>
                        <div class="protip-content">
                            <ul>
                            {{#each product.custom_fields}}
                                {{#contains name 'PROTIP'}}
                                <li>{{value}}</li>
                                {{/contains}}
                            {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>
            {{else}}
                {{#if product.warranty}}
                    {{#JSONparse product.warranty}}
                        {{#if protips}}
                        <div class="protip-container">
                            <div class="protio-wrapper">
                                <div class="protip-logo">
                                    <img src="https://cdn11.bigcommerce.com/s-exhcjslbho/product_images/uploaded_images/neteon-protips.png" alt="PRO TIPS" style="width: 78px">
                                </div>
                                <div class="protip-content">{{{protips}}}</div>
                            </div>
                        </div>
                        {{/if}}
                    {{/JSONparse}}
                {{/if}}
            {{/if}}


        </div>

    </div>
    <div class="rightdiv">
        {{#if (getVar 'hasDatasheet') '===' 1}}
            <div class="ronediv">{{capitalizeAll "Datasheet"}}</div>
            {{#each product.custom_fields}}
                {{#contains name 'DATASHEET'}}
                <a class="datasheet_download" href="/content/pdf/{{value}}" download title="download">{{value}}</a>
                {{/contains}}
            {{/each}}
        {{/if}}
        {{#if product.description}}
            <div class="ronediv" id="ronediv">Features and Benefits</div>
            <div class="rthirddiv">
                <div id="featuresul">
                    {{{product.description}}}
                </div>
                <div onclick="view(this)" id="viewmore" class="onesdiv">VIEW MORE</div>
            </div>
        {{/if}}
    </div>
</div>

{{#if (getVar 'isConfigurableProduct') '!=' '0'}}
<div class="firstdiv configurable-section" id="configurable-section">
    <section class="config-list">
        <div class="section-title"><span>Customize {{product.title}}</span></div>
        {{#each product.options}}

            {{#if (first (split display_name "^")) '==' 'Configurable Product'}}

            <div class="display_item">
                <div class="display_name">{{last (split display_name "^")}}{{#if required '==' true}}<span style="color: red">*</span>{{/if}}
                </div>
                <div class="display_value">
                    <div class="display_select">
                        <select class="customselectclass" onchange="configurableUpdatePrice();" id="{{dashcase (last (split display_name '^'))}}" data-type="{{type}}" data-prefill="{{prefill}}">
                            <option value="">Choose a selection...</option>
                            {{#each values}}
                            <option value="{{data}}">{{label}}</option>
                            {{/each}}
                        </select>
                    </div>
                    <div class="display_qty">
                        <span class="qty_num qty_minus" onclick="buttondown(this);configurableUpdatePrice();"><i class="fa fa-minus"></i></span>
                        <input type="number" class="qty_qty" value="0" min="0" pattern="[0-9]*" disabled />
                        <span class="qty_num qty_plus" onclick="buttonup(this);configurableUpdatePrice();"><i class="fa fa-plus"></i></span>
                    </div>
                </div>
            </div>
            {{/if}}
        {{/each}}
        <span style="color: red">*Required Fields</span>
    </section>
    <div class="config-cart">
    <div class="cart-title"><span>Your Customization</span></div>
    <div class="cart-product-content">
        <div class="cart-product-image">
        {{> components/common/responsive-img
            image=product.main_image
            class="productView-image--default"
            fallback_size=theme_settings.product_size
            lazyload=theme_settings.lazyload_mode
            default_image=theme_settings.default_image_product
            otherAttributes="data-main-image"
        }}
        </div>
        <div class="cart-product-title"><span>{{product.title}}</span></div>
        <div id="carprice" class="cart-product-title"><span>$0</span></div>
        <div id="customcartid" onclick="pageScroll()" class="customdiv" data-product-id="{{product.id}}">ADD TO CART</div>
        <div class="cart-product-overview"><span class="overview-title">Overview</span>
        <span class="carspan" id="carspanid">
        </span>
      </div>
    </div>
    </div>
</div>
{{/if}}
{{!--
{{#filter product.options  'Group'  property='display_name'}}
{{#or values prefill}}
    <a name="tableproduct"></a>
    <div class="seconddiv" name="tableproduct">
        <table class="pdptable">
            <thead class="tablethead">
                <tr>
                    <th class="zeroth"></th>
                    <th class="oneth" >Product ID</th>
                    <th class="twoth" >Product Description</th>
                    <th class="fifth">Stock</th>
                    <th class="thirth" >Price</th>
                    <th class="fourth" >Qty</th>
                </tr>
            </thead>
            <tbody id="products">
            </tbody>
        </table>
    </div>
{{/or}}
{{/filter}}
--}}
{{#if (getVar 'isConfigurableProduct') '===' 0}}
    {{#filter product.options  'Group'  property='display_name'}}
        {{#or values prefill}}
        <div class="probuttondiv">
            <span class="prospanone">{{#if ../product.brand.name}}{{../product.brand.name}} {{/if}}{{../product.title}}</span>
            <span class="prospantwo" id="prospantwo"></span>
            <span id='totleid' class="prospanthr">$0</span>
            <div id="proaddcart" productid="{{../product.id}}" onclick="pageScroll()" class="prodivone">ADD TO CART</div>
        </div>
        <script>
          $(document).ready(function() {
              $('body').addClass('group-product-pdp')
              $('#hubspot-messages-iframe-container').css({
                  "bottom": "80px !important"
              })
            });
        </script>
        <style media="screen">
            #hubspot-messages-iframe-container {
                bottom: 80px !important;
            }
        </style>
        {{/or}}
    {{/filter}}
{{/if}}


{{#if (getVar 'isConfigurableProduct') '===' 1}}
<script>
    $(async () => {
        let ids = [];
        let getProductsIdBySku = [];
        const productSelect = $('#configurable-section .display_item .customselectclass');
        $(productSelect).each((index, item) => {
            if ($(item).data('type') == 'Configurable_PickList_Product') {
                $(item).find('option').each((i, option) => {
                    if (option.value) {
                        ids.push(option.value);
                    }
                })
            }
            if ($(item).data('type') == 'Configurable_PickList_Set') {
                $(item).find('option').each((i, option) => {
                    if (option.value && isNaN(option.value)) {
                        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 getIdBySku {
                                    site {
                                    product (sku: \"` + option.value + `\") {
                                        entityId
                                        name
                                    }
                                  }
                                }
                                `
                                }),
                            })
                            .then(res => res.json())
                            .then(json => {
                                if (json.data.site.product) {
                                    ids.push(json.data.site.product.entityId);
                                    $(option).val(json.data.site.product.entityId);
                                }
                            })
                        );
                    }
                    if (option.value && !isNaN(option.value)) {
                        ids.push(option.value);
                    }
                })
            }
            if ($(item).data('type') == 'Configurable_Entry_Text') {
                let prefill = $(item).data('prefill')
                let skus = prefill.split(",");

                for (let i = 0; i < skus.length; i++) {
                    if (skus[i] && isNaN(skus[i])) {
                        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: \"` + skus[i] + `\") {
                                        entityId
                                        name
                                    }
                                  }
                                }
                                `
                                }),
                            })
                            .then(res => res.json())
                            .then(json => {
                                if (json.data.site.product) {
                                    skus[i] = json.data.site.product.entityId;
                                    ids.push(json.data.site.product.entityId);
                                    $(item).append($('<option>', {value: json.data.site.product.entityId, text: json.data.site.product.name}));
                                }
                            })
                        );
                    }
                }

            }
        })
        await Promise.all(getProductsIdBySku);

        if (ids.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: [` + ids + `], first: 50) {
                          edges {
                            node {
                              id
                              entityId
                              name
                              prices {
                                price {
                                  value
                                  currencyCode
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                    `
                }),
            })
            .then(res => res.json())
            .then(json => {
                console.log('customselect', json);

                if (json.data) {
                    window.pricelist = {};
                    let minPrice = Number.MAX_VALUE;
                    let maxPrice = 0;

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

                    var visib = [];
                    $(edges).each(function(index, ele) {
                        if (ele != null) {
                            visib.push(ele.node.entityId);
                        }
                    });
                    $(".customselectclass").children().each(function(i, e) {
                        var hidden = true;
                        $(visib).each(function(index, ele) {
                            $(edges).each(function(key, value) {
                                var vid = value.node.entityId;
                                var vprice = priceFormat(value.node.prices.price.value);
                                var vname = value.node.name;
                                $(`.customselectclass option[value="${vid}"]`).attr('data-price', vprice);
                                $(`.customselectclass option[value="${vid}"]`).attr('data-name', vname);
                                $(`.customselectclass option[value="${vid}"]`).text(`${vname} + $${vprice}`)
                            })

                            if (ele == e.value || e.value == "") {
                                hidden = false;
                            }
                        });
                        if (hidden) {
                            e.remove();
                        }
                    });

                    if (maxPrice > minPrice) {
                        $('.pdponediv .leftdiv .twodiv .twospan').text(`$${minPrice.toFixed(2)} - $${maxPrice.toFixed(2)}`);
                    } else {
                        $('.pdponediv .leftdiv .twodiv .twospan').text(`$${minPrice.toFixed(2)}`);
                    }
                } else {
                    $('.pdponediv .leftdiv .twodiv .twospan').text();
                }
            });
        }
    })
</script>
{{/if}}
<script>

function pageScroll() {

    window.scrollBy(0, -100);

    scrolldelay = setTimeout('pageScroll()', 100);

    var sTop = document.documentElement.scrollTop + document.body.scrollTop;

    if (sTop == 0) clearTimeout(scrolldelay);
}



// function view(e) {
//     if ($(e).parent().attr("scroll") == "true") {
//         $(e).parent().removeAttr("style");
//         $(e).parent().attr("scroll", false);
//     } else {
//         $(e).parent().css("height", $(e).prev()[0].scrollHeight + 55);
//         $(e).parent().attr("scroll", true);
//     }
// }
function view(e) {
    $(e).parent().find('#featuresul').toggleClass('allshow');
    if($(e).hasClass('open')){
        $(e).text('VIEW MORE').removeClass('open');
    }else {
        $(e).text('VIEW LESS').addClass('open')
    }
}


function buttonup(e) {
    $($(e).prev()[0]).val(parseInt($($(e).prev()[0]).val()) + 1);
}

function buttondown(e) {
    if (parseInt($($(e).next()[0]).val()) >= 1) {
        $($(e).next()[0]).val(parseInt($($(e).next()[0]).val()) - 1);
    }

}

function compare() {
    var childchecks = $(".childcheck");
    var str = "";
    for (var i = 0; i < childchecks.length; i++) {
        if (childchecks[i].checked) {
            str += "/" + $(childchecks[i]).attr("productid");
        }
    }
    window.location.href = "/compare" + str;
}
function priceFormat(x) {
    return Number.parseFloat(x).toFixed(2);
}
$(function() {
    $('.pdp_tab').click(function(){
        var tabIndex = $(this).attr('data-pdptab')
        $('.pdp_tab').removeClass('--active');
        $('.pdp_content').removeClass('--show');
        $(this).addClass('--active');
        $(`.pdp_content[data-pdpdiv="${tabIndex}"]`).addClass('--show')
    })
    var go = true;
    setTimeout(function(){
        $('.pdp_tab').each(function(){
            var tabIndex = $(this).attr('data-pdptab');
            var tabStatus = $(this).attr('tab-status')

            if(go == true){
                if(tabStatus == 'enabled'){
                    $(this).addClass('--active');
                    $(`[data-pdpdiv="${tabIndex}"]`).addClass('--show');

                    go = false;
                }
            }
        })
        $('.pdp_div_0').removeClass('--loading');
    },2000)

    $('.pdp-view-product').click(() => {
        document.getElementById("models_tab").scrollIntoView();
        $('.pdp_tab').removeClass('--active');
        $('.pdp_content').removeClass('--show');
        $('.pdp_tab[data-pdptab="models"]').addClass('--active');
        $(`.pdp_content[data-pdpdiv="models"]`).addClass('--show')
    })
})
$(async () => {

    if($("#featuresul")[0] && $("#featuresul")[0].scrollHeight > 250){
        $("#featuresul").height(250);
        $("#viewmore").show();
    }

    var groupValues = ""
    var productslist = []

    var groupType = "{{#filter product.options  'Group'  property='display_name'}}{{type}}{{/filter}}";
    if (groupType == 'Configurable_PickList_Product' || groupType == 'Configurable_PickList_Set') {
        groupValues = "{{#filter product.options  'Group'  property='display_name'}}{{#each values}}{{data}},{{/each}}{{/filter}}";
        groupValues = groupValues.slice(0, groupValues.length - 1);
    }
    if (groupType == 'Configurable_Entry_Text') {
        groupValues = "{{#filter product.options  'Group'  property='display_name'}}{{prefill}}{{/filter}}";
    }

    if (groupValues != "") {
        productslist = groupValues.split(",");
        let getProductsIdBySku = [];

        for (let i = 0; i < productslist.length; i++) {
            if (productslist[i] && isNaN(productslist[i])) {
                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 getIdBySku {
                            site {
                            product (sku: \"` + productslist[i] + `\") {
                                entityId
                            }
                          }
                        }
                        `
                        }),
                    })
                    .then(res => res.json())
                    .then(json => {
                        if (json.data.site.product) {
                            productslist[i] = json.data.site.product.entityId;
                        }
                    })
                );
            }
        }

        await Promise.all(getProductsIdBySku);
        productslist = productslist.filter(value => !isNaN(value)).map(value => +value)
        // console.log(productslist)

        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: [` + productslist.join(',') + `], first: 50) {
                      edges {
                        node {
                          id
                          entityId
                          name
                          description
                          path
                          brand{
                              name
                          }
                          inventory{
                            isInStock
                            hasVariantInventory
                            aggregated{
                              availableToSell
                              warningLevel
                            }
                          }
                          availabilityV2 {
                            status
                            description
                          }
                          customFields {
                              edges {
                                  node {
                                      name
                                      value
                                  }
                              }
                          }
                          inventory{
                            isInStock
                          }
                          prices {
                            price {
                              value
                              currencyCode
                            }
                          }
                          images(first:1){
                            edges{
                              node{
                                url(width:200)
                                altText
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
                `
            }),
        })
        .then(res => res.json())
        .then(json => {
            console.log('productslist', json);
            var products = json.data.site.products.edges;
            products.sort((a, b) => {
                return productslist.indexOf(a.node.entityId) - productslist.indexOf(b.node.entityId)
            })

            var productshtml = "";
            let minPrice = Number.MAX_VALUE;
            let maxPrice = 0;
            for (var i = 0; i < products.length; i++) {
                //products
                for (var j = 0; j < productslist.length; j++) {
                    if (productslist[j] == products[i].node.entityId) {
                        var desc = '';
                        var stock = ''
                        if(products[i].node.availabilityV2.status == "Available"){
                            var stockValue = products[i].node.availabilityV2.description;
                            if(stockValue > 0){
                                stock += `<span class="instock">IN STOCK: ${stockValue} Units</span>`;
                            }
                        }
                        minPrice = Math.min(minPrice, products[i].node.prices.price.value)
                        maxPrice = Math.max(maxPrice, products[i].node.prices.price.value)

                        var pName = '';
                        var brand = products[i].node.brand;
                        if(brand != null) {
                            pName += `${brand.name} `;
                        }
                        pName += products[i].node.name;

                        $(products[i].node.customFields.edges).each(function(key,value){
                            var c = false;

                            if(value.node.name == 'Description') {
                                //console.log('111', value.node.value)
                                desc += `${value.node.value}`;
                                //pName += ` ${value.node.value}`;
                            }
                            // if(value.node.name == 'In stock') {
                            //     if(value.node.value > 0) {
                            //         stock += `<span class="instock">IN STOCK: ${value.node.value} Units</span>`;
                            //     }
                            // }
                            if(value.node.name == 'On order') {
                                if(value.node.value > 0) {
                                    stock += `<span class="onorder">ON ORDER: ${value.node.value} Units</span>`;
                                }
                            }

                            if(value.node.name == 'On order message') {
                                stock += `<span class="onorder_msg">${value.node.value}</span>`
                            }
                            if(value.node.name == 'Display name') {
                                pName = value.node.value;
                            }

                        })
                        productshtml += '<tr class="tabletr">';
                        productshtml += '<td class="item-pimg"><img src="' + (products[i].node.images.edges.length > 0 ? products[i].node.images.edges[0].node.url : "/{{theme_settings.default_image_product}}") + '" alt="' + (products[i].node.images.edges.length > 0 ? products[i].node.images.edges[0].node.altText : "") + '"></td>'
                        productshtml += `<td class="item-pid"><span class="item-label">{{lang 'pdp.product_list.name'}}:</span><span class="item-value"><a href="${products[i].node.path}" style="color: {{theme_settings.theme-color-blue}}">${pName}</span></td>`

                        productshtml += `<td class="item-pdes"><span class="item-label">{{lang 'pdp.product_list.desc'}}:</span><div class="tablediv item-value">${desc}</div></td>`

                        productshtml += `<td class="item-stocks"><span class="item-label">{{lang 'pdp.product_list.stock'}}:</span><div class="tablediv item-value stock_info-value">${stock}</div></td>`
                        productshtml += '<td class="item-price"><span class="item-label">{{lang "pdp.product_list.price"}}:</span><span class="item-value">$' + priceFormat(products[i].node.prices.price.value) + '</span></td>';

                        productshtml += ' <td class="item-qty"><span class="item-label">{{lang "pdp.product_list.qty"}}:</span><div class="form-increment product-qty">\
                        <button class="button button--icon" onclick="buttondown(this)" data-action="dec"> <span class="is-srOnly">{{lang "products.quantity_decrease"}}</span><i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-keyboard-arrow-down" /></svg></i> </button>\
                        <input style="color: black;" class="form-input form-input--incrementTotal product-qty-input" name="qty-' + products[i].node.entityId + '" type="tel" value="1" min="1" pattern="[0-9]*" data-product-id="' + products[i].node.entityId + '" aria-live="polite" disabled />\
                        <button class="button button--icon" onclick="buttonup(this)"  data-action="inc">\
                        <span class="is-srOnly">{{lang "products.quantity_increase"}}</span><i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-keyboard-arrow-up" /></svg></i></button></div>';
                        productshtml += '<label for="compare-'+ products[i].node.entityId +'">';
                            productshtml += '<i class="pdp_compare-icon iconfont iconxiangxi"></i>';
                            productshtml += '<input type="checkbox" name="products[]" value="' + products[i].node.entityId + '" id="compare-'+ products[i].node.entityId +'" data-compare-id="'+ products[i].node.entityId +'">'
                        productshtml += '</label>'

                        if (products[i].node.prices.price.value > 0) {
                            productshtml += '<svg class="cart_svg-icon" width="30" height="24" viewBox="0 -31 512.00033 512" onclick="cartclick(' + products[i].node.prices.price.value + ',\'' + products[i].node.name + '\',' + products[i].node.entityId + ',this)"  style="cursor: pointer;"  xmlns="http://www.w3.org/2000/svg"><path d="m166 300.003906h271.003906c6.710938 0 12.597656-4.4375 14.414063-10.882812l60.003906-210.003906c1.289063-4.527344.40625-9.390626-2.433594-13.152344-2.84375-3.75-7.265625-5.964844-11.984375-5.964844h-365.632812l-10.722656-48.25c-1.523438-6.871094-7.617188-11.75-14.648438-11.75h-91c-8.289062 0-15 6.710938-15 15 0 8.292969 6.710938 15 15 15h78.960938l54.167968 243.75c-15.9375 6.929688-27.128906 22.792969-27.128906 41.253906 0 24.8125 20.1875 45 45 45h271.003906c8.292969 0 15-6.707031 15-15 0-8.289062-6.707031-15-15-15h-271.003906c-8.261719 0-15-6.722656-15-15s6.738281-15 15-15zm0 0"/><path d="m151 405.003906c0 24.816406 20.1875 45 45.003906 45 24.8125 0 45-20.183594 45-45 0-24.8125-20.1875-45-45-45-24.816406 0-45.003906 20.1875-45.003906 45zm0 0"/><path d="m362.003906 405.003906c0 24.816406 20.1875 45 45 45 24.816406 0 45-20.183594 45-45 0-24.8125-20.183594-45-45-45-24.8125 0-45 20.1875-45 45zm0 0"/></svg>'
                        }

                    }
                }
            }

            $("#products").html(productshtml);
            if (products.length > 1) {
                if (maxPrice > minPrice) {
                    $('.pdponediv .leftdiv .twodiv .twospan').text(`$${minPrice.toFixed(2)} - $${maxPrice.toFixed(2)}`);
                } else {
                    $('.pdponediv .leftdiv .twodiv .twospan').text(`$${minPrice.toFixed(2)}`);
                }
            } else if (products.length === 1) {
                $('.pdponediv .leftdiv .twodiv .twospan').text(`$${minPrice.toFixed(2)}`);
            } else {
                $('.pdponediv .leftdiv .twodiv .twospan').text();
            }
        });
    }


});

window.addEventListener("resize", function() {
    if($("#featuresul")[0] && $("#featuresul")[0].scrollHeight > 340){
        $("#viewmore").show();
    } else {
        $("#viewmore").hide();
    }

}, false);

function cartclick(price, productname, productid, e) {
    $(e).attr("fill", "#0071c5");
    $(e).parent().parent().attr("productid", productid);
    $(e).parent().parent().attr("price", price);
    $(e).parent().parent().attr("addcart", true);

    let totals = 0.0;
    let text = '';
    let firstValue = true;
    const products = $('#products .tabletr');
    $.each(products, (index, tr) => {
        let price = $(tr).attr('price');
        let productId = $(tr).attr('productid');
        let addcart = $(tr).attr('addcart');

        if (addcart) {
            let name = $(tr).find('.item-pid .item-value a').text();
            let qty = +$(tr).find('.product-qty .product-qty-input').val();
            text += (firstValue) ? qty + "*" + name : ", " + qty + "*" + name;
            totals += qty * parseFloat(price);
            firstValue = false;
        }
    })

    $("#prospantwo").text(text);
    $("#totleid").text("$" + parseFloat(totals).toFixed(2));
}

function compare(id, e) {
    var compare = $("#compare-a");
    if ($(e).attr("compare") == "true") {
        $(e).attr("compare", "false");
        $(e).attr("fill", "black");
        var str = compare.attr("href").substr(compare.attr("href").indexOf("/" + id), id.length + 1);
        compare.attr("href", compare.attr("href").replace(str, ""));
        $(compare.children()[1]).text(parseInt($(compare.children()[1]).text()) - 1);
    } else {
        $(e).attr("compare", "true");
        $(e).attr("fill", "#0071c5");
        compare.attr("href", compare.attr("href") + "/" + id);
        $(compare.children()[1]).text(parseInt($(compare.children()[1]).text()) + 1);
    }
}

function addtocart(productid, e) {
    $(e).text("adding to cart...");
    var data = {
        'action': 'add',
        'product_id': productid,
        'qty[]': $("#cartid").val(),
    };
    $.post("/remote/v1/cart/add", data, function(response) {
        if ($(".cart-quantity").length == 2) {
            $(".cart-quantity")[1].text(parseInt($(".cart-quantity")[1].innerText) + parseInt($("#cartid").val()))
        } else {
            $(".cart-quantity").text(parseInt($(".cart-quantity")[0].innerText) + parseInt($("#cartid").val()))
        }
        $(".cart-quantity").addClass('countPill--positive')
        setTimeout(function() {
            $(e).text("+ ADD TO CART");
        }, 1000);
        console.log(response);
    });
}

function configurableUpdatePrice() {
    const configItems = $('#configurable-section .display_item');
    let summary = '';
    let total = 0;
    $(configItems).each((index, item) => {
        let selected = $(item).find('.customselectclass');
        let optionTitle = $(item).find('.display_name').text();
        let qty = +$(item).find('.display_qty .qty_qty').val();

        if ($(selected).val() != '' && qty > 0) {
            let id = $(selected).val();
            let name = $(selected).find('option:selected').data('name');
            let price = window.pricelist[id];
            total += parseFloat(price * qty);

            summary += `<strong class="summary-title">${optionTitle} :</strong>`;
            summary += `<p class="summary-row">${qty} x ${name} <span class="summary-price">$${price.toFixed(2)}</span></p>`;
        }
    });

    $("#carprice").text("$" + total.toFixed(2));
    $('#carspanid').html(summary);
}
</script>

{{#filter product.custom_fields 'Parent' property="name"}}
<script type="text/javascript">
    //product parent
    fetch('/graphql', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer {{ ../settings.storefront_api.token }}'
        },
        body: JSON.stringify({
            query: `
                query parent {
                    site {
                        product(sku: \"{{value}}\") {
                            name
                            sku
                            path
                        }
                    }
                }
            `
        })
    })
    .then(res => res.json())
    .then(json=>{
        console.log('parent',json);
        if (json.data.site.product) {
            var parentURL = json.data.site.product.path;
            $('.parent_link').attr('href', parentURL);
        }
    })
</script>
{{/filter}}

{{!--//main image popup--}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
    lightbox.option({
        'resizeDuration': 200
    })

    var mainImageSize = $('.productView-img-container img').width();
    $('.main-img_enlarge').css({
        "width": mainImageSize,
        "height": mainImageSize
    })
    $(window).resize(function(){
        var mainImageSize = $('.productView-img-container img').width();
        $('.main-img_enlarge').css({
            "width": mainImageSize,
            "height": mainImageSize
        })
    })
</script>

<script>
  jQuery(document).ready(function(){
    jQuery(".icon-info").mouseenter(function(){
      // console.log('hovered');
      $(this).parent().find(".module-block__bubble").addClass('module-block__bubble--shown');
    })
    jQuery(".icon-info").mouseleave(function(){
      // console.log('hovered');
      $(this).parent().find(".module-block__bubble").removeClass('module-block__bubble--shown');
    })


    // jQuery(".icon-info").click(function(){
    //   // console.log('hovered');
    //   $(this).parent().find(".module-block__bubble").toggleClass('module-block__bubble--shownClick');


    // })
    // jQuery(this).click(function(){
    //   $(".module-block__bubble").removeClass('module-block__bubble--shownClick');
    // })
  })

</script>


<!--    if is not feature and benefit-->
<script>
    jQuery(document).ready(function(){
      let fnb = jQuery('#featuresul').html();
      if(fnb.includes('@@PCL@@')){
        jQuery("#ronediv").text('Package List');
        fnb = fnb.replace('@@PCL@@' , '');
        jQuery('#featuresul').html(fnb);
        jQuery("#featuresul li").each(function(){
            if ((jQuery(this).text() == "")||( (jQuery(this).find("p").length > 0)&&(jQuery(this).find("p").text() == ""))){ 
                jQuery(this).remove();
            } 
        });
      }
    });
</script>

<!-- if the datasheet is a zip-->
<script>
  jQuery(document).ready(function(){
    $('.datasheet_download').each(function(){
      let fileType = ($(this).text());
      fileType = fileType.substr(fileType.length -4,4);
      if (fileType == ".zip"){
        $(this).removeClass('datasheet_download');
        $(this).addClass('datasheet_download_zip');
      }
    })
  })
</script>