<?php
/**
 * Copyright © 2018 Porto. All rights reserved.
 */

?>
<?php
/**
 * Top menu for store
 *
 * @see \Smartwave\Megamenu\Block\Topmenu
 */
?>
<?php
    $_helper = $this->helper('Smartwave\Megamenu\Helper\Data');
    $_portohelper = $this->helper('Smartwave\Porto\Helper\Data');

    $categories = $_helper->getFirstLevelCategories();
    $_category_config = $_portohelper->getConfig('porto_settings/category');
    $_category_grid_config = $_portohelper->getConfig('porto_settings/category_grid');

    $aspect_ratio = $this->getData("aspect_ratio");
    if($aspect_ratio == null) {
        $aspect_ratio = $_category_config['aspect_ratio'];
    }
    $ratio_width = $this->getData("image_width");
    if(!$ratio_width) {
        $ratio_width = ($_category_config['ratio_width'])?$_category_config['ratio_width']:300;
    }
    $ratio_height = $this->getData("image_height");
    if(!$ratio_height) {
        $ratio_height = ($_category_config['ratio_height'])?$_category_config['ratio_height']:300;
    }
    $lazy_owl = $this->getData("lazy_owl");
    if(!$lazy_owl)
        $lazy_owl = 0;
    $product_count = $this->getData("product_count");
    if(!$product_count)
        $product_count = 8;
    $columns = $this->getData("columns");
    if(!$columns)
        $columns = 4;
?>
<div class="ajax-products">
    <div class="category-list col-md-2">
        <span><?php echo __('Shop by'); ?>:</span>
        <ul>
        <?php
            foreach($categories as $category) {
                $cat_id = $category->getId();
                if($category->getIsActive()) {
                    echo '<li><a class="" cat_id="'.$cat_id.'" href="javascript:void(0)"><span>'.$category->getName().'</span></a></li>';
                }
            }
        ?>
        </ul>
    </div>
    <div class="category-detail col-md-10">
        <div class="ajax_products_loader" style="text-align: center; display: none;"><i class="ajax-loader large animate-spin" style="position: absolute;top: 50%;top: 35vh;margin-top: -20px;left: 50%;margin-left: -18px;"></i></div>
        <div class="products-area"></div>
    </div>
</div>
<div class="clearer"></div>
<script type="text/javascript">
    require([
        'jquery'
    ], function ($) {
        $(".ajax-products > .category-list > ul > li > a").off("click").on("click", function(){
            url = "<?php echo $_portohelper->getBaseLinkUrl()."swporto/index/showcategoryproducts" ?>";
            cat_id = $(this).attr("cat_id");
            $(this).parent().parent().children("li").children("a").removeClass("active");
            $(this).addClass("active");
            $(".ajax-products > .category-detail > .ajax_products_loader").fadeIn();

            $.ajax({
                method:"POST",
                url:url,
                data:{
                    aspect_ratio:"<?php echo $aspect_ratio; ?>",
                    image_width:"<?php echo $ratio_width; ?>",
                    image_height:"<?php echo $ratio_height; ?>",
                    product_count:"<?php echo $product_count; ?>",
                    columns:"<?php echo $columns; ?>",
                    category_id:cat_id
                },
                dataType: 'json'
            }).done(function(data){
                $(".ajax-products > .category-detail > .products-area").html(data.result); 
                if($("form[data-role=tocart-form]").length > 0 && !redirect_cart) {
                    $("form[data-role=tocart-form]").catalogAddToCart();
                }
                if(typeof enable_quickview != 'undefined' && enable_quickview == true) {
                    requirejs(['jquery', 'weltpixel_quickview' ], function($, quickview) {
                        $('.weltpixel-quickview').off('click').on('click', function() {
                            var prodUrl = $(this).attr('data-quickview-url');
                            if (prodUrl.length) {
                                quickview.displayContent(prodUrl);
                            }
                        });
                        $(".ajax-products .products-grid .weltpixel-quickview").each(function(){
                            $(this).appendTo($(this).parent().parent().children(".product-item-photo"));
                        });
                    });
                }
            }).fail(function(){

            }).always(function(){
                $(".ajax-products > .category-detail > .ajax_products_loader").fadeOut();
            });
        });
        $(".ajax-products > .category-list > ul > li:first-child > a").click();
    });
</script>
