<?php
/**
 *
 * SM Listing Tabs - Version 2.7.0
 * Copyright (c) 2017 YouTech Company. All Rights Reserved.
 * @license - Copyrighted Commercial Software
 * Author: YouTech Company
 * Websites: http://www.magentech.com
 */

$config            = $this->getData('config');
$_cfg              = $this->_setSerialize($config);
$tag_id            = $this->getData('tagid');
$_config           = $this->helper('Sm\Themecore\Helper\Data');
$enableLadyLoading = $_config->getAdvanced('lazyload_group/enable_ladyloading');
if (isset($config['data-mobile-dots'])) {
    $enableDots = $config['data-mobile-dots'];

    if ($config['data-mobile-dots'] == "true") {
        $enableDots = true;
    } else {
        $enableDots = false;
    }
} else {
    $enableDots = false;
}
?>
<script type="text/javascript">
    require(['jquery', 'owlcarousel', 'mage/translate'], function ($) {
        ;(function (element) {
            var el = $(element),
                tabs_wrap = $('.ltabs-tabs-wrap', el),
                tab = $('.ltabs-tab', el),
                tab_active = $('.ltabs-tab.tab-sel .ltabs-tab-label', tabs_wrap),
                tab_content = $('.ltabs-items', el),
                ajax_url = '<?php echo $this->getAjaxUrl(); ?>',
                btn_loadmore = $('.ltabs-loadmore-btn', el),
                type_loadmore = <?php echo $config['type_show'] == 'loadmore' ? 'true' : 'false'; ?>,
                place_holder_tab = $('.ltabs-current-select', el),
                msg_empty = "<div class='message info empty'><div><?php /* @escapeNotVerified */ echo __('We can\'t find products matching the selection.') ?></div></div>",

                autoplay = <?php echo $config['data-autoplay'] ?>,
                autoplayHoverPause = <?php echo $config['data-autoplayhoverpause'] ?>,
                loop = <?php echo $config['data-loop'] ?>,
                center = <?php echo $config['data-center'] ?>,
                margin = <?php echo $config['data-margin'] ?>,
                stagePadding = <?php echo $config['data-stagepadding'] ?>,
                nav = <?php echo $config['data-nav'] ?>,
                dots = <?php echo $config['data-dots'] ?>,
                mouseDrag = <?php echo $config['data-mousedrag'] ?>,
                touchDrag = <?php echo $config['data-touchdrag'] ?>,
                screen0 = <?php echo $config['data-screen0'] ?>,
                screen481 = <?php echo $config['data-screen481'] ?>,
                screen768 = <?php echo $config['data-screen768'] ?>,
                screen992 = <?php echo $config['data-screen992'] ?>,
                screen1200 = <?php echo $config['data-screen1200'] ?>,
                screen1441 = <?php echo $config['data-screen1441'] ?>,
                screen1681 = <?php echo $config['data-screen1681'] ?>,
                screen1920 = <?php echo $config['data-screen1920'] ?>;
            var _interval = setInterval(function () {
                if (document.readyState === 'complete') {
                    clearInterval(_interval);
                    el.removeClass('ltabs-loading-first');
                    _runAllScript();
                }
            }, 500);

            function _runAllScript() {
                place_holder_tab.text(tab_active.text());
                tabs_wrap.on('click', function (e) {
                    e.preventDefault();
                    var _that = $(this);
                    _that.toggleClass('active');
                    return false;
                });
                tab.off('click').on('click', function (e) {
                    e.preventDefault();
                    var _self = $(this);
                    if (_self.hasClass('tab-sel')) return false;
                    tab.removeClass('tab-sel');
                    _self.addClass('tab-sel');
                    place_holder_tab.text($('.ltabs-tab-label', _self).text());
                    var tab_id = _self.attr('data-tab-id'),
                        catids = _self.attr('data-catids'),
                        items_active = $('.ltabs-items-' + tab_id, el),
                        loading = $('.ltabs-loading', items_active),
                        loaded = items_active.hasClass('ltabs-items-loaded');
                    tab_content.removeClass('ltabs-items-selected');
                    items_active.addClass('ltabs-items-selected');

                    if (!loaded && !items_active.hasClass('ltabs-process')) {
                        items_active.addClass('ltabs-process');
                        loading.show();
                        $.ajax({
                            type: 'POST',
                            url: ajax_url,
                            data: {
                                is_ajax_listing_tabs: 1,
                                ajax_listingtabs_start: 0,
                                tab_id: tab_id,
                                catids: catids,
                                moduleid: '<?php echo $tag_id; ?>',
                                config: <?php echo $_cfg; ?>
                            },
                            success: function (data) {
                                if (data.items_markup != '' && $(data.items_markup).length) {
                                    $('.ltabs-items-inner', items_active).html(data.items_markup);
                                    items_active.addClass('ltabs-items-loaded').removeClass('ltabs-process');
                                    if (type_loadmore) {
                                        $('.product-item', items_active).removeAttr('style');
                                        $('.product-items', items_active).removeClass('play');
                                        $('.product-item', items_active).addClass('ltabs-mark');
                                        animatesItems(items_active);
                                    } else {
                                        _runOwlCarousel(items_active);
                                    }
                                    $(document).trigger("afterAjaxProductsLoaded");
                                    $('body').trigger('contentUpdated');
                                    loading.remove();
                                    updateStatus(items_active);
                                    <?php if($enableLadyLoading){ ?>
                                    $(document).trigger("afterAjaxLazyLoad");
                                    <?php } ?>
                                } else {
                                    $('.ltabs-items-inner', items_active).html(msg_empty);
                                    items_active.addClass('ltabs-items-loaded').removeClass('ltabs-process');
                                    $('.ltabs-loadmore-btn', items_active).hide();
                                    loading.remove();
                                }
                            },
                            dataType: 'json'
                        });

                    } else {
                        if (type_loadmore) {
                            $('.product-item', items_active).removeAttr('style');
                            $('.product-items', items_active).removeClass('play');
                            $('.product-item', items_active).addClass('ltabs-mark');
                            animatesItems(items_active);
                        } else {
                            var owl = $('.owl-carousel', items_active);
                            owl = owl.data('owlCarousel');
                            if (typeof owl !== 'undefined')
                                owl.onResize();
                            else {
                                _runOwlCarousel(items_active);
                            }

                        }
                    }
                });

                btn_loadmore.off('click').on('click', function (e) {
                    e.preventDefault();
                    var _self = $(this);
                    if (_self.hasClass('loaded') || _self.hasClass('loading')) {
                        return false;
                    } else {
                        _self.addClass('loading');
                        $('.ltabs-image-loading', _self).css({display: 'inline-block'});
                        var rl_start = _self.parent().attr('data-rl_start'),
                            catids = _self.parent().attr('data-catids'),
                            tab_id = _self.parent().attr('data-tab-id'),
                            items_active = $('.ltabs-items-' + tab_id, el);
                        $.ajax({
                            type: 'POST',
                            url: ajax_url,
                            data: {
                                is_ajax_listing_tabs: 1,
                                ajax_listingtabs_start: rl_start,
                                tab_id: tab_id,
                                catids: catids,
                                moduleid: '<?php echo $tag_id; ?>',
                                config: <?php echo $_cfg; ?>
                            },
                            success: function (data) {
                                if (data.items_markup != '' && $(data.items_markup).length) {
                                    $('.product-item', $(data.items_markup)).insertAfter($('.product-item:last-child', items_active));
                                    $('.ltabs-image-loading', _self).css({display: 'none'});
                                    animatesItems(items_active);
                                    updateStatus(items_active);
                                    $(document).trigger("afterAjaxProductsLoaded");
                                    $('body').trigger('contentUpdated');
                                    <?php if($enableLadyLoading){ ?>
                                    $(document).trigger("afterAjaxLazyLoad");
                                    <?php } ?>
                                } else {
                                    var rl_allready = $('.ltabs-loadmore-btn', items_active).parent().attr('data-rl_allready');
                                    $('.ltabs-loadmore-btn', items_active).addClass('loaded');
                                    $('.ltabs-image-loading', items_active).css({display: 'none'});
                                    $('.ltabs-loadmore-btn', items_active).attr('data-label', rl_allready);
                                    $('.ltabs-loadmore-btn', items_active).removeClass('loading');
                                }
                            }, dataType: 'json'
                        });
                    }
                    return false;
                });

                function animatesItems(elem) {
                    var _item = $('.product-item.ltabs-mark', elem);
                    _item.stop(true, true).each(function (i) {
                        var newDelay = i * 200,
                            duration = 400;
                        $(this).attr("style", "-webkit-animation-delay:" + newDelay + "ms; "
                            + "-moz-animation-delay:" + newDelay + "ms; "
                            + "-o-animation-delay:" + newDelay + "ms; "
                            + "animation-delay:" + newDelay + "ms; "
                            + "-webkit-animation-duration:" + duration + "ms;"
                            + "-moz-animation-duration:" + duration + "ms;"
                            + "-o-animation-duration:" + duration + "ms;"
                            + "animation-duration:" + duration + "ms;");

                    });
                }

                function updateStatus($el) {
                    $('.ltabs-loadmore-btn', $el).removeClass('loading');
                    var countitem = $('.product-item', $el).length;
                    $('.ltabs-image-loading', $el).css({display: 'none'});
                    $('.ltabs-loadmore-btn', $el).parent().attr('data-rl_start', countitem);
                    _displayCountDown($el);
                }

                function _countDown(date, id) {
                    var dateNow = new Date();
                    var amount = date.getTime() - dateNow.getTime();
                    delete dateNow;
                    if (amount < 0) {
                        id.html("Now!");
                    } else {
                        var days = 0;
                        hours = 0;
                        mins = 0;
                        secs = 0;
                        out = "";
                        amount = Math.floor(amount / 1000);
                        days = Math.floor(amount / 86400);
                        amount = amount % 86400;
                        hours = Math.floor(amount / 3600);
                        amount = amount % 3600;
                        mins = Math.floor(amount / 60);
                        amount = amount % 60;
                        secs = Math.floor(amount);
                        $(".time-day .num-time", id).text(days);
                        $(".time-day .title-time", id).text(((days <= 1) ? "Day" : "Days"));
                        $(".time-hours .num-time", id).text(hours);
                        $(".time-hours .title-time", id).text(((hours <= 1) ? "Hour" : "Hours"));
                        $(".time-mins .num-time", id).text(mins);
                        $(".time-mins .title-time", id).text(((mins <= 1) ? "Min" : "Mins"));
                        $(".time-secs .num-time", id).text(secs);
                        $(".time-secs .title-time", id).text(((secs <= 1) ? "Sec" : "Secs"));
                        setTimeout(function () {
                            _countDown(date, id)
                        }, 1000);
                    }
                }

                function _displayCountDown($el) {
                    if ($(".deals-countdown", $el).length) {
                        $(".deals-countdown", $el).each(function () {
                            var timer = $(this).data('timer');
                            var data = new Date(timer);
                            _countDown(data, $(this));
                        });
                    }
                }

                function _runOwlCarousel(el) {
                    $('.owl-carousel', el).owlCarousel({
                        autoplay: autoplay,
                        autoplayHoverPause: autoplayHoverPause,
                        loop: loop,
                        center: center,
                        margin: margin,
                        stagePadding: stagePadding,
                        nav: nav,
                        dots: dots,
                        mouseDrag: mouseDrag,
                        touchDrag: touchDrag,
                        navText: ['<span>' + $.mage.__("Prev") + '</span>', '<span>' + $.mage.__("Next") + '</span>'],
                        responsive: {
                            0: {
                                items: screen0,
                                <?php if($enableDots){?>
                                nav: false,
                                dots: true,
                                <?php } ?>
                            },
                            481: {
                                items: screen481,
                                <?php if($enableDots){?>
                                nav: false,
                                dots: true,
                                <?php } ?>
                            },
                            768: {
                                items: screen768,
                                <?php if($enableDots){?>
                                nav: false,
                                dots: true,
                                <?php } ?>
                            },
                            992: {
                                items: screen992,
                                <?php if($enableDots){?>
                                nav: false,
                                dots: true,
                                <?php } ?>
                            },
                            1200: {
                                items: screen1200
                            },
                            1441: {
                                items: screen1441
                            },
                            1681: {
                                items: screen1681
                            },
                            1920: {
                                items: screen1920
                            },
                        }
                    });
                }

                if (type_loadmore) {
                    animatesItems($('.ltabs-items.ltabs-items-selected', el));
                } else {
                    _runOwlCarousel($('.ltabs-items.ltabs-items-selected', el));
                }
                _displayCountDown($('.ltabs-items.ltabs-items-selected', el));
            }
        })("#<?php echo $tag_id; ?>");
    });
</script>
