<!-- html for category wise product -->
{% if check_plugin_exsist("catproduct") %}
    <style>        
        .owlcatproducts .plugin-heading{background: #f5f5f5; padding: 10px 15px; margin-bottom: 10px; border:1px solid #ddd; font-size: 16px; font-weight: 500}
        .owlcatproducts .item{margin:15px 10px;padding:20px 0;}
        .owlcatproducts .product-item-wrapper{padding:20px 15px; box-shadow:0px 6px 11px -2px #eee; text-align: center; font-weight: 400; transition: all 0.2s; border: 1px solid #f0f0f0; position: relative; max-width: 400px; margin:  0 auto}
        .owlcatproducts .product-item-wrapper .product-item-wishlist{position: absolute; right: 20px; top: 10px; z-index: 100; font-size: 16px; display:none;}
        .owlcatproducts .product-item-wrapper:hover{box-shadow:0 9px 12px -2px #ccc; border-color: #ddd}
        .owlcatproducts .product-item-wrapper a{color: #555; transition: all 0.2s}
        .owlcatproducts .product-item-wrapper .product-item-wishlist a.text-danger{color: #c00!important;}
        .owlcatproducts .product-item-wrapper a:hover{text-decoration: none;}
        .owlcatproducts .product-item-wrapper a .product-item-image{width:100%; height: 270px; margin: 15px auto; position: relative;}        
        .owlcatproducts .product-item-wrapper a .product-item-image img{display:inline;  max-width:100%; max-height: 100%}
        .owlcatproducts .product-item-wrapper a .product-item-name{font-size:16px; font-weight: 500; margin-bottom: 10px; min-height:80px}
        .owlcatproducts .product-item-wrapper a .product-item-shortdescription{font-weight: normal; margin-bottom: 10px; color: #777; height: 60px; overflow: hidden}
        .owlcatproducts .product-item-wrapper a .product-item-price{font-size:18px; font-weight: bold; color: #333; margin-bottom: 10px;}
        .owlcatproducts .product-item-wrapper a .product-item-price del{font-size: 90%; font-weight: normal;color: #999; padding-right: 5px;}
        .owlcatproducts .product-item-wrapper a .product-item-buttons{ position: relative}
        .owlcatproducts .product-item-wrapper .product-item-buttons .btn{font-size: 12px;}
        .owlcatproducts .product-item-wrapper a:hover *{color: #000;}
    </style>
    <!-- html for category wise product -->
    {% set catProductData = getCategoryWiseProduct() %}
    {% for row in catProductData %}        
        <div class="row mt-30 mb-20">
            <div class="col-xs-12">
                <div class="plugin-heading">
                    <!--1st Loop - Category Name-->
                    {{row.catname}}
                </div>
            </div>
            <div class="col-md-12">
                <div class="owlcatproducts owl-carousel owl-theme">
                    <!--2nd Loop - products under category-->
                    {% for subrow in row.productArr %}            
                        <div class="item">
                            <div class="product-item-wrapper">
                                <!--WishList-->
                            <div class="product-item-wishlist"><a href="" class="text-muted"><i class="fa fa-heart-o"></i></a> <a href="" class="text-danger"><i class="fa fa-heart"></i></a></div>
                            <!--ProductLink-->
                            <a href="{{ base_url() }}{{ 'products' }}/{{subrow.slug}}">
                                <!--ProductImage-->
                                <div class="product-item-image">
                                    {% if subrow.imagename == NULL %}
                                        <img class="img-responsive" src="{{base_url()}}modules/products/uploads/product-no-image.jpg" alt="{{subrow.name}}">
                                    {% else %}
                                        <img class="img-responsive" src="{{base_url()}}modules/products/uploads/{{subrow.imagename}}" alt="{% if subrow.alt_tag != '' %}{{subrow.alt_tag}}{% else %}{{subrow.name}}{% endif %}">
                                    {% endif %}    
                                </div>
                                <!--ProductName-->
                                <div class="product-item-name">
                                    {{ subrow.name }}
                                </div>
                                <!--ProductShortDesc-->
                                <div class="product-item-shortdescription">
                                    {{ subrow.short_description }}
                                </div>
                                <!--ProductPrice-->
                                <div class="product-item-price">
                                    {% if subrow.discount_amount > 0 %}                                
                                        <del>{{ get_base_currency_setting('symbol') }}{{ subrow.attribute_value|number_format(2) }}</del>
                                        {{ get_base_currency_setting('symbol') }}{{ subrow.discount_amount|number_format(2) }}
                                    {% elseif subrow.special_price != 0 %}
                                        <del>{{ get_base_currency_setting('symbol') }}{{ subrow.price|number_format(2) }}</del>
                                        {{ get_base_currency_setting('symbol') }}{{ subrow.special_price|number_format(2) }}
                                    {% else %}                                
                                        {{ get_base_currency_setting('symbol') }}{{ subrow.attribute_value|number_format(2) }}
                                    {% endif %}
                                </div>                            
                            </a>
                                <!--ProductButtons-->
                            <div class="product-item-buttons">
                                {% if subrow.available_qnty>0 or subrow.purchase_out_of_stock =='1' %}                
                                    <button class="btn btn-default" onclick="addtocartHome({{subrow.id}},{{subrow.available_qnty}} ,{{addslash_twiggy(subrow.attribute_value)}} , '{{subrow.imagename}}', '{{addslash_twiggy(subrow.name)}}',{{subrow.price}} ,{{subrow.special_price}} , '{{subrow.purchase_out_of_stock}}', '{{subrow.slug}}', '{{subrow.weight}}', '{{subrow.weight_unit}}', '', '{{subrow.stock_id}}', 'add_to_cart')" >Add To Cart</button>
                                    <button class="btn btn-info" onclick="addtocartHome({{subrow.id}},{{subrow.available_qnty}} ,{{addslash_twiggy(subrow.attribute_value)}} , '{{subrow.imagename}}', '{{addslash_twiggy(subrow.name)}}',{{subrow.price}} ,{{subrow.special_price}} , '{{subrow.purchase_out_of_stock}}', '{{subrow.slug}}', '{{subrow.weight}}', '{{subrow.weight_unit}}', '', '{{subrow.stock_id}}', 'buy_now')" >Buy Now</button>
                                {% else  %}     
                                    <p class="text-danger">Item out of stock </p>
                                {% endif %}
                            </div>
                            </div><!--item-wrapper-->
                        </div><!--item-->
                    {% endfor %}
                </div><!--owl-carousel-->
            </div><!--owl-catwiseproducts-->
        </div><!--row-->
    {% endfor %}
{% endif %}
<!-- /html for category wise product -->

<!-- script start for category wise product -->
<script>
    // Owl Carousel for categorizez products
    $(document).ready(function() {
        var owl = $(".owlcatproducts");
        owl.owlCarousel({
            items : 4,
            itemsDesktop : [1600, 4],
            itemsDesktopSmall : [1199, 3],
            itemsTablet: [768, 2],
            itemsMobile : [480, 1],            
            navigation : true,
            transitionStyle : "fade",
            //autoPlay: 5000,
            navigationText: [
                    "<i class='fa fa-chevron-left'></i>",
                    "<i class='fa fa-chevron-right'></i>"
            ]
        });
    });    
    // Owl Carousel for categorizez products

    var add_to_cart_ajax_url = "{{ site_url('front/addTocart') }}";
    function addtocartHome(productsId, avail_qty, product_price, product_image, product_name, product_original_price, product_special_price, purchaseOutOfStock, slug, weight, weight_unit, discount_arr, stock_id, idfire)
    {

    //console.log(parseFloat(product_special_price)+'---'+discount_arr);
    //console.log($('.no_of_Item_'+productsId).next('a').attr('data-discount'));
    var discount_arr = $('.no_of_Item_' + productsId).next('a').attr('data-discount');
            if (parseFloat(product_special_price) > 0 && (discount_arr == '' || discount_arr == '[]'))
    {
    product_price = product_special_price;
    }



    //$.ajaxSetup ({cache: false});
    var formdata = $("#productfrm").serialize();
            $.ajax({
            type: "POST",
                    url: add_to_cart_ajax_url,
                    dataType: "html",
                    data: {max_value: avail_qty, productid: productsId, quantity: 1, product_image: product_image, product_name: product_name, product_original_price: product_original_price, product_special_price: product_special_price, purchaseOutOfStock: purchaseOutOfStock, slug: slug, weight: weight, weight_unit: weight_unit, product_price: product_price, discount_arr: discount_arr, product_stock: stock_id},
                    cache: false,
                    success: function (responseText)
                    {
                    if (responseText == 999 || parseInt(responseText) == 0)
                    {
                    showAlert('The order quantity exceeds the present available quantity. Kindly order lesser quantity.', 'alert-danger');
                            return false;
                    }
                    else
                    {

                    if (idfire == 'add_to_cart')
                    {
                    showAlert('One item added to your cart...', 'alert-success');
                            $('.cart-items').text(responseText);
                            location.reload();
                    }

                    if (idfire == 'buy_now')
                    {
                    if (responseText == 999)
                    {
                    alert('Max product quantity exceeded.Please select a lesser quantity....');
                            return false;
                    }
                    window.location.href = "{{ site_url('checkout') }}";
                    }

                    }
                    },
                    error: function (jqXHR, exception) {
                    return false;
                    }
            });
            return false;
    }
</script>

<!-- script end for category wise product -->