{{#data}}
<input type="hidden" id="countcart" data-countval="{{count}}" />
<input type="hidden" id="valSubtotal" value="{{subtotal}}" />
{{#cart}}{{^IsRFQ}}<input type="hidden" class="PriceId" value="{{SKUFilterPriceId}}" />{{/IsRFQ}} {{/cart}}

{{#isviewcartshow}}
<input type="hidden" id="iscartshow" data-cartval="{{iscartshow}}" />
<input type="hidden" id="isrfqshow" data-rfqval="{{isrfqshow}}" />

{{#iscartshow}}
<style>
    .table td {
        padding: .15rem 0.75rem !important;
        height: 60px !important;
    }

        .table td img {
            max-width: 50px !important;
            padding: 0px !important;
            border: none !important;
            max-height: 50px !important;
            height: 52px !important;
            width: 52px !important;
        }

    .shopping-cart-wrapper .table button {
        height: 18px;
    }

    .btn-remove {
        cursor: pointer;
    }

    @media (max-width: 800000px) and (min-width: 992px) {
        .table .td-quantity {
            width: 153px;
        }
    }

    b, strong {
        font-weight: bold;
    }
</style>
<table class="table table-bordered" id="tblProducts">
    <thead>
        <tr>
            <th>Product Image</th>
            <!--<td></td>-->
            <th id="amountcolumn2" style="text-align:left">Product Name &ensp;<i class="fa fa-sort" aria-hidden="true"></i></th>
            <th>Pack Size</th>
            <th id="amountcolumn" style="text-align:right">Unit Price ({{currencySymbol}})&ensp; <i class="fa fa-sort" aria-hidden="true"></i></th>
            <th>Quantity</th>
            <th id="amountcolumn1" style="text-align:right">Total ({{currencySymbol}})&ensp; <i class="fa fa-sort" aria-hidden="true"></i></th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody>
        {{#cart}}
        {{#cart}}
        {{^IsRFQ}}
        <tr class="pr-block item">
            <td>
                <input type="hidden" class="PriceId" value="{{SKUFilterPriceId}}" />
                <a href="{{UrlPrefix}}/{{SkuLink}}">
                    <img src="~/assets/images/loading_icon.gif"
                         data-src="{{ListingImage}}" data-height="150" data-width="150"
                         alt="{{DisplayName}}" class="img-thumbnail lazy">
                </a>

                <!--<br>

                {{#IsPackage}}
                <strong><a href="/package/{{SkuLink}}">{{SkuCode}}</a> </strong>
                {{/IsPackage}}
                {{#IsBasic}}
                            <strong><a href="{{UrlPrefix}}/{{SkuLink}}">{{SkuCode}}</a> </strong>
                            {{/IsBasic}}
                            {{#IsAssemble}}
                            <strong><a href="/assemble/{{SkuLink}}">{{SkuCode}}</a> </strong>
                            {{/IsAssemble}}-->
                

            </td>
            {{#IsActive}}
            <!--<td>
                {{#IsPackage}}
                <strong><a href="/package/{{SkuLink}}">{{SkuCode}}</a> </strong>
                {{/IsPackage}}
                {{#IsBasic}}

                <strong><a href="{{UrlPrefix}}/{{SkuLink}}">{{SkuCode}}</a> </strong>
                {{/IsBasic}}
                {{#IsAssemble}}
                <strong><a href="/assemble/{{SkuLink}}">{{SkuCode}}</a> </strong>
                {{/IsAssemble}}
            </td>-->
            <td class="text-left">
                <p><strong><a href="{{UrlPrefix}}/{{SkuLink}}">{{DisplayName}}</a> </strong></p>

                {{#packageSkus}}
                <div style="font-size:11px">
                    {{SkuCode}} ( Qty:{{skuquantity}} , Cost: {{currencySymbol}} {{#formatnumber}}{{SellingPrice}}{{/formatnumber}} )
                </div>
                {{/packageSkus}}
                {{#assembleSkus}}
                <div style="font-size:11px">
                    {{SkuCode}} ( Qty:{{Quantity}} , Cost: {{currencySymbol}} {{#formatnumber}}{{sellingprice}}{{/formatnumber}} )
                </div>
                {{/assembleSkus}}
            </td>
            {{#ListItem}}
            <td>{{ListItem}}</td>
            {{/ListItem}}
            {{^ListItem}}
            <td>NA</td>
            {{/ListItem}}
            <td style="text-align:right;"> {{currencySymbol}} {{#formatnumber}}{{sellingprice}}{{/formatnumber}}</td>
            <td class="td-quantity">
                <div class="input-group btn-block">
                    {{^IsAssemble}}
                    <!--<div class="product-qty mr-3">
                        <input type="number" value="{{Quantity}}" id="qty{{SKUFilterPriceId}}" min="1" maxlength="3" max="100" onkeypress='validate(event)' onkeyup="validateValue({{SkuId}})">
                    </div>-->
                    <div class="product-qty mr-3">
                        <!--<input type="button" value="{{Quantity}} in Cart" id="AddUpdateqty{{SKUFilterPriceId}}">-->
                        <input type="button" class="IncDecQty AddUpdateqty{{SKUFilterPriceId}}" value="{{Quantity}} in Cart">

                        <span id="btnUpdate{{SkuId}}" class="dec qtybtn btn btn-primary" data-productid="{{SkuId}}" onclick="IncrementDecrementQuantityCart('dec',this,'.AddUpdateqty{{SKUFilterPriceId}}',null,null,false,true)">
                            <i class="fa fa-minus"></i>
                        </span>
                        <span id="btnUpdate{{SkuId}}" class="inc qtybtn btn btn-primary" data-productid="{{SkuId}}" onclick="IncrementDecrementQuantityCart('inc',this,'.AddUpdateqty{{SKUFilterPriceId}}',null,null,false,true)">
                            <i class="fa fa-plus"></i>
                        </span>
                    </div>
                    {{/IsAssemble}}
                    {{#IsAssemble}}
                    <div class="product-qty mr-3">
                        <input type="button" class="IncDecQty AddUpdateqty{{SKUFilterPriceId}}" value="{{Quantity}} in Cart">
                        <span id="btnUpdate{{SkuId}}" class="dec qtybtn btn btn-primary" data-productid="{{SkuId}}" onclick="IncrementDecrementQuantityCart('dec',this,'.AddUpdateqty{{SKUFilterPriceId}}',null,null,false,true)">
                            <i class="fa fa-minus"></i>
                        </span>
                        <span id="btnUpdate{{SkuId}}" class="inc qtybtn btn btn-primary" data-productid="{{SkuId}}" onclick="IncrementDecrementQuantityCart('inc',this,'.AddUpdateqty{{SKUFilterPriceId}}',null,null,false,true)">
                            <i class="fa fa-plus"></i>
                        </span>
                    </div>
                    {{/IsAssemble}}
                    <span class="input-group-btn">
                        {{^IsAssemble}}
                        <!--<button type="submit" class="btn btn-secondary mr-1" data-isupdate="false" data-productid="{{SkuId}}" id="btnUpdate{{SkuId}}" onclick="AddCart(this,'#qty{{SKUFilterPriceId}}')" title="Update Quantity"><i class="fa fa-refresh"></i></button>-->
                        {{/IsAssemble}}
                        <!--<button type="button" class="btn btn-secondary pull-right" onclick="RemoveFromCart(this, function () {})" data-isRFQ="{{IsRFQ}}" data-productid="{{SkuId}}" data-cartid="{{CartId}}" title="Remove"><i class="fa fa-trash"></i></button>-->
                    </span>
                </div>
            </td>
            <td style="text-align:right;"> {{currencySymbol}} {{#formatnumber}}{{SubTotal}}{{/formatnumber}}</td>
            {{/IsActive}}


            {{^IsActive}}
            <td colspan="5">
                {{#IsBasic}}
                <!--<strong><a href="{{UrlPrefix}}/{{CategoryUrl}}/{{SkuLink}}">{{SkuCode}}</a> </strong>-->
                <div style="margin-bottom: 0rem !important;" class="alert alert-primary" role="alert">
                    <strong><a href="{{UrlPrefix}}/{{SkuLink}}">{{SkuCode}}</a> </strong>
                    {{/IsBasic}}
                    ({{ListItem}}) is currently unavailable.
                    {{#IsNotified}}
                    <button class="btn" style="border-radius: 25px;cursor: pointer;font-size: 14px;height: 30px;text-transform: capitalize;right: 10px;color: #fff;background-color: #FF7060;padding: 0 16px;" type="button" href="#.">Notified</button>
                    {{/IsNotified}}
                    {{^IsNotified}}
                    <button class="btn" style="border-radius: 25px;cursor: pointer;font-size: 14px;height: 30px;text-transform: capitalize;right: 10px;color: #fff;background-color: #FF7060;padding: 0 16px;" data-productid="{{SkuId}}" type="button" onclick="NotifyMe(this)" href="#.">Notify Me</button>
                    {{/IsNotified}}
                </div>
            </td>
            {{/IsActive}}
            <td align="center">
                <i class="fa fa-trash btn-remove" onclick="RemoveFromCartForFloatingCart(this, false, function () { })" data-isRFQ="{{IsRFQ}}" data-productid="{{SkuId}}" data-cartid="{{CartId}}" title="Remove"></i>
            </td>
        </tr>
        {{/IsRFQ}}
        {{/cart}}
        {{/cart}}
        <tr class="total-tr">
            <td colspan="6" style="text-align:right;padding: 0.75rem !important;"><b><strong>Total&nbsp;&nbsp;:&nbsp;&nbsp;<strong> {{currencySymbol}} {{#formatnumber}}{{subtotal}}{{/formatnumber}}</strong></strong></b></td>
            <td style="text-align:center;padding: 0.75rem !important;">
                {{#cart.0}}
                {{#cart.0}}

                <a href="#" class="btn btn-secondary empty-cart" onclick="EmptyCart('{{CartId}}', function () {})">Empty Cart</a>

                {{/cart.0}}
                {{/cart.0}}
            </td>
        </tr>
        {{^cart.0}}
        <tr>
            <td colspan="6">
                <center>
                    <i>Your Shopping Cart Is Empty</i>
                </center>
            </td>
        </tr>
        {{/cart.0}}
    </tbody>
</table>
{{/iscartshow}}
{{#isrfqshow}}
<div class="section-title">
    <h3>RFQ Cart</h3>
</div>
<table class="table table-bordered" id="rfq-list">
    <thead>
        <tr>
            <td>Image</td>
            <td>Product ID</td>
            <td>Product Name</td>
            <td>Quantity</td>
        </tr>
    </thead>
    <tbody>
        {{#cart}}
        {{#cart}}
        {{#IsRFQ}}
        <tr>
            <td>
                <img src="~/assets/images/loading_icon.gif"
                     data-src="{{ListingImage}}" data-height="150" data-width="150"
                     style="max-width:139px;max-height:78px;border:none!important;"
                     alt="{{DisplayName}}" class="img-thumbnail lazy">
            </td>
            <td>
                <!--<strong><a href="{{UrlPrefix}}/{{CategoryUrl}}/{{SkuLink}}">{{SkuCode}}</a> </strong>-->
                <strong><a href="{{UrlPrefix}}/{{SkuLink}}">{{SkuCode}}</a> </strong>
            </td>
            <td> <p>{{DisplayName}}</p> </td>
            <td>
                <div class="input-group btn-block">
                    <!--<div class="product-qty mr-3">
                        <input type="number" value="{{Quantity}}" id="rfqqty{{SkuId}}" min="1" maxlength="6" max="999999" onkeypress='validate(event)'>
                    </div>-->
                    <div class="product-qty mr-3">
                        <!--<input type="button" value="{{Quantity}} in Cart" id="AddUpdateqty{{SKUFilterPriceId}}">-->
                        <input type="button" class="IncDecQty AddUpdateqty{{SKUFilterPriceId}}" value="{{Quantity}} in Cart">

                        <span id="btnUpdate{{SkuId}}" class="dec qtybtn btn btn-primary" data-productid="{{SkuId}}" onclick="IncrementDecrementQuantityCart('dec',this,'.AddUpdateqty{{SKUFilterPriceId}}',null,null,false,true)')">
                            <i class="fa fa-minus"></i>
                        </span>
                        <span id="btnUpdate{{SkuId}}" class="inc qtybtn btn btn-primary" data-productid="{{SkuId}}" onclick="IncrementDecrementQuantityCart('inc',this,'.AddUpdateqty{{SKUFilterPriceId}}',null,null,false,true)')">
                            <i class="fa fa-plus"></i>
                        </span>
                    </div>
                    <span class="input-group-btn">
                        <!--<button type="submit" class="btn btn-secondary" data-isupdate="false" data-productid="{{SkuId}}" id="btnUpdate{{SkuId}}" onclick="AddRFQCart(this,'#rfqqty{{SkuId}}')"><i class="fa fa-refresh"></i></button>-->
                        <!--<button type="button" class="btn btn-danger pull-right" onclick="RemoveFromCart(this, function () {})" data-isRFQ="{{IsRFQ}}" data-productid="{{SkuId}}" data-cartid="{{CartId}}"><i class="fa fa-trash"></i></button>-->
                    </span>
                </div>
            </td>
            <!--<td>
                <button type="button" class="btn btn-secondary pull-right" onclick="RemoveFromCart(this, function () {})" data-isRFQ="{{IsRFQ}}" data-productid="{{SkuId}}" data-cartid="{{CartId}}" title="Remove"><i class="fa fa-trash"></i></button>
            </td>-->
        </tr>
        {{/IsRFQ}}
        {{/cart}}
        {{/cart}}
        {{^cart.0}}
        {{/cart.0}}
    </tbody>
</table>
{{/isrfqshow}}
<script>
    $(function () {
        var count = $("#countcart").attr("data-countval");
        if (count == 0) {
            $("#checkouthide").hide();
        }
    });
</script>
{{/isviewcartshow}}
{{^isviewcartshow}}
<table class="table table-bordered">
    <tbody>
        <tr>
            <td colspan="6">
                <div class="col-md-12" style="padding:5%">
                    <div class="alert alert-warning"><strong>Empty Cart </strong> <br />Your cart is empty. Start adding!</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
{{/isviewcartshow}}
<script>
    //$(function () {
    //    if ($("#countcart").attr("data-countval") == 0) {
    //        $("#checkouthide").hide();
    //    }
    //    if ($("#iscartshow").attr("data-cartval") == "false" && $("#isrfqshow").attr("data-rfqval") == "true") {
    //        $("#shoppicartheading").hide();
    //    }
    //});
    $(function () { 0 == $("#countcart").attr("data-countval") && $("#checkouthide").hide(), "false" == $("#iscartshow").attr("data-cartval") && "true" == $("#isrfqshow").attr("data-rfqval") && $("#shoppicartheading").hide() });




    $(document).ready(function ()
    {
        //makeAllSortable();
        $(".example1").tooltip({ placement: 'bottom', title: 'Click Here', delay: { hide: 50 } });

        $(".example1").click(function () {
            $('.example1').tooltip('hide');
        });

        $('th').click(function () {

            if ($(this).text().trim() != 'Pack Size' && $(this).text().trim() != 'Product Image' && $(this).text().trim() != 'Quantity') {

                var table = $(this).parents('table').eq(0);
                var totalamounttr = table.find('.total-tr').html();

                table.find('.total-tr').remove();

                var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));

                this.asc = !this.asc
                if (!this.asc) { rows = rows.reverse(); }

                for (var i = 0; i < rows.length; i++) {
                    table.append(rows[i]);
                }

                table.append(totalamounttr);


            }

        });

        function comparer(index) {
            return function (a, b) {
                var valA = getCellValue(a, index), valB = getCellValue(b, index);
                return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB);
            }
        }
        function getCellValue(row, index) { return $(row).children('td').eq(index).text(); }
    });




    function sortOrderTable(f, n, isNum) {


        var rows = $('#tblProducts tbody tr.pr-block.item').get();


        rows.sort(function (a, b) {

            var A = getVal(a, isNum);
            var B = getVal(b, isNum);
            if (A < B) {
                return -1 * f;
            }
            if (A > B) {
                return 1 * f;
            }

            return 0;
        });



        function getVal(elm, isNum) {

            var v = $(elm).children('td').eq(n).text().toUpperCase();
            //var v = trimChar(v1,'₹');
            //trimChar(x, "|");
            //var v = v1.substring(1);

            if (isNum) {
                //v = v.replace(v.substring(0, 1), "");
                v = v.replace(v.trim().substring(0, 1), "");
                //if($.isNumeric(v)){
                v = parseInt(v, 10);
                //}

            }
            return v;
        }

        $.each(rows, function (index, row) {

            $('#tblProducts').children('tbody').append(row);

        });
    }
    var f_sl = 1;
    var f_nm = 1;

    $("#amountcolumn").click(function () {

        f_sl *= -1;
        var n = $(this).prevAll().length;
        sortOrderTable(f_sl, n, true);
    });


    $("#amountcolumn1").click(function () {

        f_sl *= -1;
        var n = $(this).prevAll().length;
        sortOrderTable(f_sl, n, true);
    });

    $("#amountcolumn2").click(function () {
        f_sl *= -1;
        var n = $(this).prevAll().length;
        sortOrderTable(f_sl, n, true);
    });

</script>
{{/data}}
<!--{{#data}}
<input type="hidden" id="countcart" data-countval="{{count}}" />
<input type="hidden" id="hdnCouponCode" value="{{couponcode}}" />
<input type="hidden" id="hdnCouponValue" value="{{couponvalue}}" />
{{#isviewcartshow}}
<input type="hidden" id="iscartshow" data-cartval="{{iscartshow}}" />
<input type="hidden" id="isrfqshow" data-rfqval="{{isrfqshow}}" />
{{#iscartshow}}
<table class="table table-bordered">
    <thead>
        <tr>
            <td>Image</td>
            <td>Product Description</td>
            <td>Quantity</td>
            <td>Unit Price</td>
            <td>Total</td>
        </tr>
    </thead>
    <tbody>
        {{#cart}}
        {{#cart}}
        {{^IsRFQ}}
        <tr>
            <td>
                <img src="~/assets/images/loading_icon.gif"
                     data-src="{{ListingImage}}" data-height="118" data-width="118"
                     style="max-width:118px;max-height:118px; border:none!important;"
                     alt="{{DisplayName}}" class="img-thumbnail lazy">
            </td>
            <td>
                <a href="{{UrlPrefix}}/{{CategoryUrl}}/{{SkuLink}}">{{DisplayName}}</a>
                <span>Item #:{{SkuCode}}</span>
                <span>Weight #: {{weight}} lbs</span>

                {{#packageSkusnew}}
                <div style="font-size:11px">
                    {{SkuCode}} ( Qty:{{skuquantity}} , Cost:{{currencySymbol}} {{#formatnumber}}{{sellingprice}}{{/formatnumber}} )
                </div>
                {{/packageSkusnew}}
                {{#assembleSkusnew}}
                <div style="font-size:11px">
                    {{SkuCode}} ( Qty:{{Quantity}} , Cost: {{currencySymbol}} {{#formatnumber}}{{sellingprice}}{{/formatnumber}} )
                </div>
                {{/assembleSkusnew}}
            </td>
            <td>
                <div class="btn-block quantity-sec">
                    {{^IsAssemble}}
                    <input class="form-control" type="number" value="{{Quantity}}" id="qty{{SkuId}}" min="1" maxlength="6" onkeypress='validate(event)'>
                    {{/IsAssemble}}
                    {{#IsAssemble}}
                    <input class="form-control" readonly disabled type="number" value="{{Quantity}}" id="qty{{SkuId}}" min="1" maxlength="6" onkeypress='validate(event)'>
                    {{/IsAssemble}}
                    <span class="input-group-btn mt-10 item-action">
                        {{^IsAssemble}}
                        <button type="submit" class="btn btn-secondary" data-isupdate="true" data-minsaleqty="{{MinSellQty}}" data-productid="{{SkuId}}" id="btnUpdate{{SkuId}}" onclick="AddCart(this,'#qty{{SkuId}}')" title="Update Quantity"><i class="fa fa-refresh"></i></button>
                        {{/IsAssemble}}
                        <button type="button" class="btn btn-danger" onclick="RemoveFromCart(this, function () {})" data-isRFQ="{{IsRFQ}}" data-productid="{{SkuId}}" data-cartid="{{CartId}}" title="Remove"><i class="fa fa-times-circle"></i></button>
                    </span>
                </div>
            </td>
            <td>{{currencySymbol}}{{#formatnumber}}{{sellingprice}}{{/formatnumber}}</td>
            <td>{{currencySymbol}}{{#formatnumber}}{{SubTotal}}{{/formatnumber}}</td>
        </tr>
        {{/IsRFQ}}
        {{/cart}}
        {{/cart}}
        <tr style="display:none">
            <td colspan="4" style="text-align:right;"><strong>Total </strong></td>
            <td style="text-align:right;">
                <strong data-cartitemtotal="{{total}}" id="cartitemtotal"> {{currencySymbol}} {{#formatnumber}}{{total}}{{/formatnumber}}</strong>
            </td>
        </tr>
        {{^cart.0}}
        <tr>
            <td colspan="6">
                <center>
                    <i>Your Shopping Cart Is Empty</i>
                </center>
            </td>
        </tr>
        {{/cart.0}}
    </tbody>
</table>
{{/iscartshow}}
{{#isrfqshow}}
<div class="section-title">
    <h3>RFQ Cart</h3>
</div>
<table class="table table-bordered" id="rfq-list">
    <thead>
        <tr>
            <td>Image</td>
            <td>Product ID</td>
            <td>Product Name</td>
            <td>Quantity</td>
        </tr>
    </thead>
    <tbody>
        {{#cart}}
        {{#cart}}
        {{#IsRFQ}}
        <tr>
            <td>
                <img src="~/assets/images/loading_icon.gif"
                     data-src="{{ListingImage}}" data-height="118" data-width="118"
                     style="max-width:118px;max-height:118px; border:none!important;"
                     alt="{{DisplayName}}" class="img-thumbnail lazy">
            </td>
            <td>
                <strong><a href="{{UrlPrefix}}/{{CategoryUrl}}/{{SkuLink}}">{{SkuCode}}</a> </strong>
            </td>
            <td> <span>{{DisplayName}}</span> </td>
            <td>
                <div class="input-group btn-block">
                    <div class="product-qty mr-3">
                        <input type="number" value="{{Quantity}}" id="rfqqty{{SkuId}}" min="1" maxlength="6" onkeypress='validate(event)'>
                    </div> <span class="input-group-btn">
                        <button type="submit" class="btn btn-secondary" data-isupdate="true" data-productid="{{SkuId}}" id="btnUpdate{{SkuId}}" onclick="AddRFQCart(this,'#rfqqty{{SkuId}}')"><i class="fa fa-refresh"></i></button>
                        <button type="button" class="btn btn-danger pull-right" onclick="RemoveFromCart(this, function () {})" data-isRFQ="{{IsRFQ}}" data-productid="{{SkuId}}" data-cartid="{{CartId}}"><i class="fa fa-times-circle"></i></button>
                    </span>
                </div>
            </td>
        </tr>
        {{/IsRFQ}}
        {{/cart}}
        {{/cart}}
        {{^cart.0}}
        {{/cart.0}}
    </tbody>
</table>
{{/isrfqshow}}
<script>
    $(function () {
        var count = $("#countcart").attr("data-countval");
        if (count == 0) {
            $("#checkouthide").hide();
        }
        else {
            if ($("#Order_Total").length > 0) {
            }
        }
    });
</script>
{{/isviewcartshow}}
{{^isviewcartshow}}
<table class="table table-bordered">
    <tbody>
        <tr>
            <td colspan="6">
                <div class="col-md-12" style="padding:5%">
                    <div class="alert alert-warning"><strong>Empty Cart </strong> <br />Your cart is empty. Start adding!</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
{{/isviewcartshow}}
<script>
    $(function () {
        if ($("#countcart").attr("data-countval") == 0) {
            $("#checkouthide").hide();
        }
        if ($("#iscartshow").attr("data-cartval") == "false" && $("#isrfqshow").attr("data-rfqval") == "true") {
            $("#shoppicartheading").hide();
        }
    });
</script>
{{/data}}-->