<?php
/**
 * Copyright © 2016 Bluesky Team. All rights reserved.
 */

?>
<?php
/**
 * Top menu for store
 *
 * @see \Rokanthemes\VerticalMenu\Block\Verticalmenu
 */
?>
<?php
    $_helper = $this->helper('Rokanthemes\VerticalMenu\Helper\Data');
    $_config = $_helper->getConfig('verticalmenu');
    $columnsLimit = 0;
    if($_config['general']['enable']) {
?>
<?php $_menu = $block->getVerticalMenuHtml(); ?> 
 
<div class="navigation verticalmenu side-verticalmenu">
	<?php if($this->getConfig('vertical_heading')){?><h3 class="title-category-dropdown"><span class="icon icon-align-left"></span><?php echo $block->getConfig('vertical_heading');?></h3><?php }?>
    <div class="verticalmenu-html">
		<ul class="togge-menu list-category-dropdown verticalmenu-list menu" style="display: none;">  
			<?php echo $_menu; ?>
			<li class="expand-category-link level0">
				<a href="javascript:void(0);" class="level-top"><?php echo __('More categories') ?></a>
			</li> 
		</ul>
	</div>
</div>

<script>
    require([
        'jquery',
        'rokanthemes/verticalmenu'
    ], function ($) {
        $(".verticalmenu").VerticalMenu();
		$('.title-category-dropdown').click(function(event){
			$('.navigation.verticalmenu .togge-menu').slideToggle('slow');
			$(this).toggleClass('active');
			
		});
		$( document ).ready(function() {
			var lenghtLi = $('.navigation.verticalmenu .ui-menu-item.level0').length;
			var limitItemShow = <?php echo $block->getConfig('limit_show'); ?>;
			if(lenghtLi > limitItemShow)
			{
				$('.navigation.verticalmenu .ui-menu-item.level0').each(function( index ) {
					if(index > (limitItemShow - 1))
					{
						$(this).addClass('orther-link');
						$(this).hide();
					}
				});
				$('.navigation.verticalmenu .expand-category-link').show();
				$('.navigation.verticalmenu .expand-category-link').on( "click", function() {
					$(this).toggleClass('expanding');
					$('.navigation.verticalmenu .ui-menu-item.level0.orther-link').slideToggle('slow');
				});
			}else{
				$('.expand-category-link').hide();
			}
			var screenWidth = $(window).width();
			
			if (screenWidth < 1200){  
				var verticalmenu = $(".verticalmenu .verticalmenu-html").html();
				$(".custommenu").append(verticalmenu);
				var html_title = '<a data-menu="verticalmenu-list" href="#"><?= __("Categories") ?></a>';
				$(".custommenu .menu-mobile-title").append(html_title);
			}
		});
		$(".title-category-dropdown").click(function(e){
            if(!$("html").hasClass("vertical-open")) {
                $("html").addClass("vertical-before-open");
                setTimeout(function(){
                    $("html").addClass("vertical-open");
                    $("#focus-area").css('visibility','visible');
                    $("#focus-area").css('opacity','1');
                });

            }
            else {
                $("#focus-area").css('visibility','hidden');
                $("#focus-area").css('opacity','0');
                $("html").removeClass("vertical-open");
                setTimeout(function(){
                    $("html").removeClass("vertical-before-open");
                });
            }
        }); 
		$("#close-vertical").click(function(e){
            if(!$("html").hasClass("vertical-open")) {
                $("html").addClass("vertical-before-open");
                setTimeout(function(){
                    $("html").addClass("vertical-open");
                });
            }
            else {
                $("html").removeClass("vertical-open");
				$("html").removeClass("vertical-before-open");
                setTimeout(function(){
                    $("html").removeClass("vertical-before-open");
                });
            }
        });
        $(document).on('click', '#focus-area', function(){
            if ($("html").hasClass("vertical-open")){
                $("#focus-area").css('visibility','hidden');
                $("#focus-area").css('opacity','0');
                $("html").removeClass("vertical-open");
                $("html").removeClass("vertical-before-open");
                setTimeout(function(){
                    $("html").removeClass("vertical-before-open");
                });
                $('.title-category-dropdown').removeClass('active');
                $('.navigation.verticalmenu .togge-menu').slideToggle('slow');
                return false;
            }
        });
    });
</script>
<?php
    }
?>
