{#
<form data-request="onAddToCart"
      data-request-success="data.added && $.publish('mall.cart.productAdded', data)"
      data-request-validate
      data-request-flash
      id="mall-add-to-cart">
    {% if variants.count > 0 %}
        <h5 class="mall-product__variants-heading">{{ 'offline.mall::frontend.variants' | trans }}</h5>
        <div class="mall-product__variants">
            {% for value, variant in variants %}
                {% set variant = variant.first() %}
                <div class="mall-product__variant">
                    <a href="{{ this.page.fileName|page({slug: this.param.slug, variant: variant.hashId}) }}"
                       title="{{ variant.name }}">
                        <img src="{{ variant.main_image.thumb(80, auto) }}" alt="{{ variant.name }}"/>
                    </a>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    {% if props.count > 0 and item.inventory_management_method == 'variant' %}
        <div class="mall-product__variant-properties">
            {% partial __SELF__ ~ '::properties' props=props %}
        </div>
    {% endif %}

    {% if item.custom_fields.count > 0 %}
        <div class="mall-product__custom-fields">
            {% partial __SELF__ ~ '::customfields' fields=item.custom_fields %}
        </div>
    {% endif %}

    <div class="mall-product__price">
        {% partial __SELF__ ~ '::price' item=item %}
    </div>

    <div class="mall-product__tax-info">
        {% partial __SELF__ ~ '::tax-info' item=item %}
    </div>

    <div class="mall-product__add-to-cart">
        {% if item.allow_out_of_stock_purchases %}
            {% partial __SELF__ ~ '::addtocart.htm' item=item %}
        {% else %}
            <div class="mall-product__property-stock mall-product__property-stock--checking">
                {{ 'offline.mall::frontend.stock.checking' | trans }}
            </div>
        {% endif %}
    </div>
</form>#}

<form data-request="onAddToCart"
      data-request-success="data.added && $('.mall-add-to-cart-button').prop('disabled', false) && $('#submitSuccessTwo').show() && setTimeout(()=>{ $('#submitSuccessTwo').hide();},5000) && $.publish('mall.cart.productAdded', data)"
      data-request-validate
      data-request-flash
      id="mall-add-to-cart">
<div class="praction">
    <div class="practioncard">
        {% partial __SELF__ ~ '::images' images=item.all_images %}
        <div class="practn flexcol24">
            <h2 class="pageheading">
                <span class="yellow">{{ item.name }}</span>
            </h2>
            <div class="flexcol12">
                <div class="prprice">
                    <p class="pricevalue heading36" id="changeCustomPrice"></p>
                    <!--                    <p class="ogprice p16">₹120</p>-->
                    <!--                    <span class="discountpercentage">SAVE 26 %</span>-->
                </div>
                <p class="p12">Excl. local Tax & Shipping.</p>
            </div>
            <div class="flexcol12">
                <div class="prprice">
                    {% if item.custom_fields.count > 0 %}
                    <div class="mall-product__custom-fields">
                       {# {% partial __SELF__ ~ '::customfields' fields=item.custom_fields %} #}
                        {% set fields = item.custom_fields %}
                        {% for field in fields %}
                        <div class="flexcol12">
                            <p class="p16">{{ field.name }}</p>
                        <div class="quantityselector">
                            {% for option in field.custom_field_options %}
                            {% if option.price.INR == '₹ 0.00' %}
                            <a href="javascript:;" onclick="productDropdownValueSet('{{ option.hashId }}','{{ field.hashId }}');" class="active">
                                <p class="p16">{{ option.name }}</p>
                                <span class="p12">Normal</span>
<!--                                <span class="p12">&nbsp;</span>-->
                            </a>
                            {% else %}
                            <a href="javascript:;"  onclick="productDropdownValueSet('{{ option.hashId }}','{{ field.hashId }}');">
                                <p class="p16">{{ option.name }}</p>
                                <span class="p12">Normal</span>
<!--                                <span class="p12">&nbsp;</span>-->
                            </a>
                            {% endif %}
                            {% endfor %}
<!--                            <input type="hidden" id="field-{{ field.hashId }}"-->
<!--                                   name="fields[{{ field.hashId }}]"-->
<!--                                   data-id="{{ item.property.hashId }}"-->
<!--                                   data-mall-custom-field>-->
                        <div class="mall-form-control" style="display: none">
                            <label for="field-{{ field.hashId }}" class="mall-label">{{ field.name }}</label>
                            <select class="mall-input" id="field-{{ field.hashId }}"
                                    name="fields[{{ field.hashId }}]"
                                    data-id="{{ item.property.hashId }}"
                                    data-mall-custom-field>
                                <option value="">{{ 'offline.mall::frontend.select' | trans }}</option>
                                {% for option in field.custom_field_options %}
                                {% if option.price.INR == '₹ 0.00' %}
                                <option value="{{ option.hashId }}" selected>{{ option.name }}</option>
                                {% else %}
                                <option value="{{ option.hashId }}">{{ option.name }}</option>
                                {% endif %}

                                {% endfor %}
                            </select>
                            <div data-validate-for="{{ field.hashId }}"></div>
                        </div>

                        </div>
                     </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% set price = price|default(item.price()) %}

                    {% if price.official or item.oldPrice().integer %}
                    <div class="mall-product__old-price">
                        {% if price.official %}
                        {{ price.official.string | raw }}
                        {% else %}
                        {{ item.oldPrice().string | raw }}
                        {% endif %}
                    </div>
                    {% endif %}
                    <div class="mall-product__current-price" style="display: none">
                        {% partial __SELF__ ~ '::currentprice' price=price.string %}
                    </div>

<!--                    <p class="ogprice p16">₹120</p>-->
<!--                    <span class="discountpercentage">SAVE 26 %</span>-->
                </div>
            </div>
<!--            <div class="flexcol12">-->
<!--                <p class="p16">Please select a quantity</p>-->
<!--                <div class="quantityselector">-->
<!--                    <button class="active">-->
<!--                        <p class="p16">100 boxes</p>-->
<!--                        <span class="p12">Normal</span>-->
<!--                    </button>-->
<!--                    <button>-->
<!--                        <p class="p16">200 boxes</p>-->
<!--                        <span class="p12">Large</span>-->
<!--                    </button>-->
<!--                    <button>-->
<!--                        <p class="p16">500 boxes</p>-->
<!--                        <span class="p12">Extra large</span>-->
<!--                    </button>-->
<!--                </div>-->
<!--            </div>-->
            <p class="p12">Excl. local Tax & Shipping.</p>
            <span class="p12">Quantity : 1</span>
            <div class="mall-product__property-stock mall-product__property-stock--checking" style="width: 100%;">
                <div class="mall-product__add-to-cart">
                    {% if item.allow_out_of_stock_purchases %}
                    {% partial __SELF__ ~ '::addtocart.htm' item=item %}
                    {% else %}
                    <div class="mall-product__property-stock mall-product__property-stock--checking" style="width: 100%;">
                        {{ 'offline.mall::frontend.stock.checking' | trans }}
                    </div>
                    {% endif %}
                </div>
            </div>
<!--            <a href="javascript:void(0)" class="button buttonprimary full"><img-->
<!--                    src="{{'assets/images/cart.svg' | theme}}" /> Add to cart</a>-->
            <div class="successmessage" id="submitSuccessTwo" style="display: none">
                <img src="{{'assets/images/approved.svg' | theme}}" />
                <p>Thank you! Added product to cart</p>
            </div>
            <div class="inlinebuttons">

                <a href="{{'cart' | page}}" class="button buttonsecondaryborder full">Go to cart</a>
                <a href="tel:+916292289150" class="button buttonsecondaryborder full">Call</a>
            </div>
        </div>
    </div>
</div>
</form>