<?php
$EnableModule = $this->getEnableModule();
$_helper = $this->helper('Solwin\Verticalmenu\Helper\Data');
$cpanel_helper = $this->helper('Solwin\Cpanel\Helper\Data');
$home_collapsible = $cpanel_helper->getCpanelConfigValue('cpanelsection/headergroup/home_collapsible');
$mediaurl = $cpanel_helper->getMediaUrl() . 'solwin/verticalmenu/menu/image';
if ($EnableModule) {
    $title = $_helper->getTitle();
    $collection = $this->getMenuCollection();
    $helper = $this->helper('Solwin\Cpanel\Helper\Data');
    $IsHomePage = $helper->getIsHomePage();
    ?>
    <div id="mgmenu" class="mg-main mg-other">
        <div class="mg-title">
            <h4>
                <span class="menu-title-text">
                    <?php echo $title; ?>
                </span>
                <i class="fa fa-bars"></i>
            </h4>
        </div>
        <div class="mg-content <?php if (!$IsHomePage || ($IsHomePage && $home_collapsible)) { ?> mg-inactive <?php } ?>">
            <ul>
                <?php foreach ($collection as $menu) { ?>
                    <?php if ($menu->getLevel() == 1) { ?>
                        <li class="vlevel-0 <?php if ($menu->getChildrenCount() > 0) { ?> vparent <?php } ?>">
                            <a href="<?php echo $menu->getUrl(); ?>">
                                <?php if ($menu->getIcon() != '') { ?>
                                    <img width="16" src="<?php echo $mediaurl . $menu->getIcon(); ?>"/>
                                <?php } ?>
                                <?php echo $menu->getMenuTitle(); ?>
                            </a>
                            <?php if ($menu->getChildrenCount() > 0) { ?>
                                <ul class="vslevel-<?php echo $menu->getLevel(); ?> vsubmenu">
                                    <?php echo $this->getChildren($menu->getMenuId()); ?>
                                </ul>
                            <?php } ?>
                        </li>
                    <?php } ?>
                <?php } ?>
            </ul>
        </div>
    </div>

    <?php if (!$IsHomePage || ($home_collapsible && $IsHomePage)) { ?>
        <script type="text/javascript">
            require([
                'jquery'
            ], function () {

                jQuery(function ($)
                {
                    var vmenu = $('#mgmenu');
                    vmenu.on('mouseover', function ()
                    {
                        var $this = $(this).find('.mg-content');

                        if ($this.prop('hoverTimeout'))
                        {
                            $this.prop('hoverTimeout', clearTimeout($this.prop('hoverTimeout')));
                        }

                        $this.prop('hoverIntent', setTimeout(function ()
                        {
                            $this.removeClass('mg-inactive');
                            $this.addClass('mg-active');
                        }, 250));
                    }).on('mouseleave', function ()
                    {
                        var $this = $(this).find('.mg-content');

                        if ($this.prop('hoverIntent'))
                        {
                            $this.prop('hoverIntent', clearTimeout($this.prop('hoverIntent')));
                        }

                        $this.prop('hoverTimeout', setTimeout(function ()
                        {
                            $this.addClass('mg-inactive');
                            $this.removeClass('mg-active');
                        }, 250));
                    });

                    if ('ontouchstart' in document.documentElement)
                    {
                        vmenu.each(function ()
                        {
                            var $this = $(this).find('.mg-content');

                            this.addEventListener('touchstart', function (e)
                            {
                                if (e.touches.length === 1)
                                {
                                    e.stopPropagation();

                                    if (!$this.hasClass('mg-active'))
                                    {
                                        if (e.target === this || e.target.parentNode === this)
                                        {
                                            e.preventDefault();
                                        }

                                        // Hide other open vmenu
                                        vmenu.removeClass('mg-active');
                                        vmenu.addClass('mg-inactive');
                                        $this.addClass('mg-active');
                                        $this.removeClass('mg-inactive');

                                        // Hide dropdown on touch outside
                                        document.addEventListener('touchstart', closeDropdown = function (e)
                                        {
                                            e.stopPropagation();

                                            $this.removeClass('mg-active');
                                            $this.addClass('mg-inactive');
                                            document.removeEventListener('touchstart', closeDropdown);
                                        });
                                    }
                                    else if (!$this.hasClass('mg-inactive'))
                                    {
                                        if (e.target === this || e.target.parentNode === this)
                                        {
                                            e.preventDefault();
                                        }

                                        // Hide other open vmenu
                                        vmenu.removeClass('mg-inactive');
                                        vmenu.addClass('mg-active');
                                        $this.addClass('mg-inactive');
                                        $this.removeClass('mg-active');

                                        // Hide dropdown on touch outside
                                        document.addEventListener('touchstart', closeDropdown = function (e)
                                        {
                                            e.stopPropagation();

                                            $this.removeClass('mg-inactive');
                                            $this.addClass('mg-active');
                                            document.removeEventListener('touchstart', closeDropdown);
                                        });
                                    }
                                }
                            }, false);
                        });
                    }
                });
            });
        </script>
    <?php } ?>
    <script>
        require([
            'jquery'
        ], function () {
            jQuery(document).ready(function () {
                var win_width = jQuery(window).width();
                jQuery('.vlevel-0').on('hover', function () {
                    var ul_count = jQuery(this).find('.vslevel-1 .count_li').val();
                    var ul_width = '';
                    if (ul_count > 3) {
                        ul_width = 540;
                    } else {
                        ul_width = 180 * ul_count;
                    }
                    jQuery(this).find('.vslevel-1').attr('style', 'width:' + ul_width + 'px');
                });
                jQuery('.vlevel-0').on("touchstart", function (e) {
                    'use strict';
                    var ul_count = jQuery(this).find('.vslevel-1 .count_li').val();
                    var ul_width = '';
                    if (ul_count > 3) {
                        ul_width = 540;
                    } else {
                        ul_width = 180 * ul_count;
                    }
                    jQuery(this).find('.vslevel-1').attr('style', 'width:' + ul_width + 'px');
                });
                if (win_width > 991) {
                    var height_li = jQuery('.mg-content > ul > li').height();
                    var count_li = jQuery('.mg-content > ul > li').length;
                    var final_height = count_li * height_li;
                    jQuery('.ct-content').attr('style', 'min-height:' + final_height + 'px');
                }
                jQuery(function ($)
                {
                    var dropdowns = $('li.vlevel-0');
                    dropdowns.on('mouseover', function ()
                    {
                        var $this = $(this);

                        if ($this.prop('hoverTimeout'))
                        {
                            $this.prop('hoverTimeout', clearTimeout($this.prop('hoverTimeout')));
                        }

                        $this.prop('hoverIntent', setTimeout(function ()
                        {
                            $this.addClass('vm_active');
                        }, 250));
                    }).on('mouseleave', function ()
                    {
                        var $this = $(this);

                        if ($this.prop('hoverIntent'))
                        {
                            $this.prop('hoverIntent', clearTimeout($this.prop('hoverIntent')));
                        }

                        $this.prop('hoverTimeout', setTimeout(function ()
                        {
                            $this.removeClass('vm_active');
                        }, 250));
                    });

                    if ('ontouchstart' in document.documentElement)
                    {
                        dropdowns.each(function ()
                        {
                            var $this = $(this);

                            this.addEventListener('touchstart', function (e)
                            {
                                if (e.touches.length === 1)
                                {
                                    e.stopPropagation();

                                    if (!$this.hasClass('vm_active'))
                                    {
                                        if (e.target === this || e.target.parentNode === this)
                                        {
                                            e.preventDefault();
                                        }

                                        // Hide other open dropdowns
                                        dropdowns.removeClass('vm_active');
                                        $this.addClass('vm_active');

                                        // Hide dropdown on touch outside
                                        document.addEventListener('touchstart', closeDropdown = function (e)
                                        {
                                            e.stopPropagation();

                                            $this.removeClass('vm_active');
                                            document.removeEventListener('touchstart', closeDropdown);
                                        });
                                    }
                                }
                            }, false);
                        });
                    }
                });
            });
        });
    </script>
    <script>
        require([
            'jquery'
        ], function () {
            jQuery(document).ready(function () {
                var win_width = jQuery(window).width();
                if (win_width <= 991) {
                    jQuery('#mgmenu').find('.mg-content').addClass('mg-inactive');
                    jQuery(function ($)
                    {
                        var vmenu = $('#mgmenu');
                        vmenu.on('mouseover', function ()
                        {
                            var $this = $(this).find('.mg-content');

                            if ($this.prop('hoverTimeout'))
                            {
                                $this.prop('hoverTimeout', clearTimeout($this.prop('hoverTimeout')));
                            }

                            $this.prop('hoverIntent', setTimeout(function ()
                            {
                                $this.removeClass('mg-inactive');
                                $this.addClass('mg-active');
                            }, 250));
                        }).on('mouseleave', function ()
                        {
                            var $this = $(this).find('.mg-content');

                            if ($this.prop('hoverIntent'))
                            {
                                $this.prop('hoverIntent', clearTimeout($this.prop('hoverIntent')));
                            }

                            $this.prop('hoverTimeout', setTimeout(function ()
                            {
                                $this.addClass('mg-inactive');
                                $this.removeClass('mg-active');
                            }, 250));
                        });

                        if ('ontouchstart' in document.documentElement)
                        {
                            vmenu.each(function ()
                            {
                                var $this = $(this).find('.mg-content');

                                this.addEventListener('touchstart', function (e)
                                {
                                    if (e.touches.length === 1)
                                    {
                                        e.stopPropagation();

                                        if (!$this.hasClass('mg-active'))
                                        {
                                            if (e.target === this || e.target.parentNode === this)
                                            {
                                                e.preventDefault();
                                            }

                                            // Hide other open vmenu
                                            vmenu.removeClass('mg-active');
                                            vmenu.addClass('mg-inactive');
                                            $this.addClass('mg-active');
                                            $this.removeClass('mg-inactive');

                                            // Hide dropdown on touch outside
                                            document.addEventListener('touchstart', closeDropdown = function (e)
                                            {
                                                e.stopPropagation();

                                                $this.removeClass('mg-active');
                                                $this.addClass('mg-inactive');
                                                document.removeEventListener('touchstart', closeDropdown);
                                            });
                                        }
                                        else if (!$this.hasClass('mg-inactive'))
                                        {
                                            if (e.target === this || e.target.parentNode === this)
                                            {
                                                e.preventDefault();
                                            }

                                            // Hide other open vmenu
                                            vmenu.removeClass('mg-inactive');
                                            vmenu.addClass('mg-active');
                                            $this.addClass('mg-inactive');
                                            $this.removeClass('mg-active');

                                            // Hide dropdown on touch outside
                                            document.addEventListener('touchstart', closeDropdown = function (e)
                                            {
                                                e.stopPropagation();

                                                $this.removeClass('mg-inactive');
                                                $this.addClass('mg-active');
                                                document.removeEventListener('touchstart', closeDropdown);
                                            });
                                        }
                                    }
                                }, false);
                            });
                        }
                    });
                }
            });
            jQuery(window).resize(function () {
                var win_width = jQuery(window).width();
                if (win_width <= 991) {
                    jQuery(function ($)
                    {
                        var vmenu = $('#mgmenu');
                        vmenu.on('mouseover', function ()
                        {
                            var $this = $(this).find('.mg-content');

                            if ($this.prop('hoverTimeout'))
                            {
                                $this.prop('hoverTimeout', clearTimeout($this.prop('hoverTimeout')));
                            }

                            $this.prop('hoverIntent', setTimeout(function ()
                            {
                                $this.removeClass('mg-inactive');
                                $this.addClass('mg-active');
                            }, 250));
                        }).on('mouseleave', function ()
                        {
                            var $this = $(this).find('.mg-content');

                            if ($this.prop('hoverIntent'))
                            {
                                $this.prop('hoverIntent', clearTimeout($this.prop('hoverIntent')));
                            }

                            $this.prop('hoverTimeout', setTimeout(function ()
                            {
                                $this.addClass('mg-inactive');
                                $this.removeClass('mg-active');
                            }, 250));
                        });

                        if ('ontouchstart' in document.documentElement)
                        {
                            vmenu.each(function ()
                            {
                                var $this = $(this).find('.mg-content');

                                this.addEventListener('touchstart', function (e)
                                {
                                    if (e.touches.length === 1)
                                    {
                                        e.stopPropagation();

                                        if (!$this.hasClass('mg-active'))
                                        {
                                            if (e.target === this || e.target.parentNode === this)
                                            {
                                                e.preventDefault();
                                            }

                                            // Hide other open vmenu
                                            vmenu.removeClass('mg-active');
                                            vmenu.addClass('mg-inactive');
                                            $this.addClass('mg-active');
                                            $this.removeClass('mg-inactive');

                                            // Hide dropdown on touch outside
                                            document.addEventListener('touchstart', closeDropdown = function (e)
                                            {
                                                e.stopPropagation();

                                                $this.removeClass('mg-active');
                                                $this.addClass('mg-inactive');
                                                document.removeEventListener('touchstart', closeDropdown);
                                            });
                                        }
                                        else if (!$this.hasClass('mg-inactive'))
                                        {
                                            if (e.target === this || e.target.parentNode === this)
                                            {
                                                e.preventDefault();
                                            }

                                            // Hide other open vmenu
                                            vmenu.removeClass('mg-inactive');
                                            vmenu.addClass('mg-active');
                                            $this.addClass('mg-inactive');
                                            $this.removeClass('mg-active');

                                            // Hide dropdown on touch outside
                                            document.addEventListener('touchstart', closeDropdown = function (e)
                                            {
                                                e.stopPropagation();

                                                $this.removeClass('mg-inactive');
                                                $this.addClass('mg-active');
                                                document.removeEventListener('touchstart', closeDropdown);
                                            });
                                        }
                                    }
                                }, false);
                            });
                        }
                    });
                }
            });
        });
    </script>
<?php } ?>