@extends('base', [
    'scripts' => [
        'videoPlayer'
    ]
])

@section('title', __('Home'))

@section('content')
    @php
        use Illuminate\Support\Facades\Auth;

        $auth = Auth::check();
        $version = config('app.version');
    @endphp

    <div class="ui grid home">
        @foreach($modules as $module)
            @if(isset($module) && isset($module->view))
                @include('homepagemodules::modules.'.$module->view, ['language'=>$language])
            @endif
        @endforeach
    </div>

    @include('components.asset_import.video_player_script')
    <script src="{{ asset('js/lazyload.js' ).'?'.$version }}"></script>
    <script src="{{ asset('js/simpleCountdown.js' ).'?'.$version }}"></script>
    <script>
        var lastScrollPosition = 0;
        var timer = 0;
        var topBtn = $('.to-top-btn');

        $(function () {
            var myLazyLoad = new LazyLoad({
                elements_selector: ".lazyload"
            });

            var heroImageContainer = $('.hero-image-module .image-container');
            var heroImageItems = heroImageContainer.find('.item');

            if(heroImageItems.length > 1) {
                var imageCount = 1;
                heroImageContainer.on('init', function(){
                    heroImageContainer.removeClass('transparent');
                }).on('lazyLoaded', function(){
                    if (imageCount === 1) {
                        $('.hero-preloader').addClass('hidden-preloader');
                        heroImageContainer.slick('slickGoTo',0,true);
                    }

                    imageCount++;
                }).slick({
                    appendDots: $('.hero-image-module'),
                    dots: true,
                    infinite: true,
                    accessibility: true,
                    speed: 300,
                    slide: '.item',
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    arrows: false,
                    lazyLoad: 'ondemand',
                    autoplay: true,
                    autoplaySpeed: 5000,
                    pauseOnHover: true
                });
            }

        {{--$('.hero-image-module + .home-page-module').prepend(--}}
            {{--'<div class="arrow-container" onclick="showSecondModule()">' +--}}
                {{--'<img src="{{config('locations.systemImage.asset').'arrow.png'}}" class="bottom-pointing-arrow top">' +--}}
            {{--'</div>'--}}
        {{--);--}}

        {{--arrow = $('.hero-image-module + .home-page-module > .arrow-container > .bottom-pointing-arrow');--}}

            $('.carousel').each(function () {
                $(this).slick({
                    dots: false,
                    infinite: false,
                    accessibility: true,
                    speed: 300,
                    slidesToShow: parseInt($(this).attr('data-slides')),
                    slidesToScroll: 1,
                    prevArrow: '<div class="slick-prev slick-arrow slick-disabled" aria-label="Previous"></div>',
                    nextArrow: '<div class="slick-next slick-arrow" aria-label="Next"></div>'
                });
            });

            $('.categories-module').each(function(){
                $('.sub-categories-slider', this).on('init', function(slick, currentSlide){
                    setSelectedSubcategory($(this), currentSlide.currentSlide);
                }).on('beforeChange', function(event, slick, currentSlide, nextSlide){
                    setSelectedSubcategory($(this), nextSlide);
                }).slick({
                    dots: false,
                    infinite: true,
                    accessibility: false,
                    speed: 500,
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    arrows: false,
                    autoplay: true,
                    autoplaySpeed: 5000,
                    pauseOnHover: true,
                    lazyLoad: 'ondemand'
                });
            });

            $('.categories-module .sub-category-menu .item').on('click', function(){
                var index = $(this).attr('data-category').split('-').pop();

                $(this).addClass('active')
                    .siblings('.item')
                    .removeClass('active')
                    .parents('.sub-category-block')
                    .find('.sub-categories-slider')
                    .slick('slickGoTo', index);
            });

            $('.home-page-module:not(.categories-module)').prev('.categories-module').find('.content').addClass('margin');
            $('.home-page-module a[href="#"]').attr('onclick', 'return false');

            $('.search-module .keywords').on('click', 'span', function(e){

                if($(this).parents('a').attr('href') === '#'){
                    e.stopImmediatePropagation();
                    $('#home-search').val($(this).attr('data-keyword')).trigger('input');
                }
            });

            $('.ranking-list-module .tab-selection').on('click', '.item:not(.active)', function(){
                $(this).addClass('active')
                    .siblings('.item.active')
                    .removeClass('active');

                $('.ranking-tab[data-ranking="'+$(this).attr('data-ranking')+'"]')
                    .addClass('active')
                    .siblings('.ranking-tab.active')
                    .removeClass('active');
            });

            $('.four-images-module .image-container').each(function(){
                transition($(this), $('a', this));
            });

            $('.courses-module .timer').each(function(){
                simpleCountdown($(this));
            });

            $('.grid.home > .row:nth-child(2)').visibility({
                once: false,
                continuous: true,
                onTopPassed: function(){
                    topBtn.removeClass('hidden');
                },
                onTopPassedReverse: function(){
                    topBtn.addClass('hidden');
                }
            });
        });

        $(window).on('load', function(){
            lastScrollPosition = $(window).scrollTop();
        }).on('scroll', function(){
            var currentScrollPosition = $(window).scrollTop();

            var heroImageContainer = $('.hero-image-module');
            if (currentScrollPosition > heroImageContainer.height()){
                heroImageContainer.addClass('hidden');
            } else {
                heroImageContainer.removeClass('hidden');
            }

            if(currentScrollPosition > 50){
                if(!$('.home-page-module:first-child').hasClass('top')){
                    $('.home-page-module:first-child, #dropdown-menu').addClass('top');
                }

            // if(arrow.length && arrow.hasClass('top')){
            //     arrow.removeClass('top');
            // }

                clearTimeout(timer);

                if(currentScrollPosition < lastScrollPosition){
                    $('#dropdown-menu').removeClass('top');
                } else {
                    $('#dropdown-menu').addClass('top');
                }
            } else if(currentScrollPosition <= 50) {
                $('.home-page-module:first-child, #dropdown-menu').removeClass('top');

            // if(arrow.length){
            //     arrow.addClass('top');
            // }
        }

            lastScrollPosition = currentScrollPosition;
        });

        function transition(parent, element){
            parent.visibility({
                once: false,
                continuous: true,
                onTopVisible: function(){
                    element.removeClass("smaller");
                },

                onTopVisibleReverse: function(){
                    element.addClass("smaller");
                },

                onTopPassed: function(){
                    element.removeClass("smaller");
                }
            })
        }

        function handleTickInit(tick) {
            var locale = {
                DAY_PLURAL: '{{__('Days')}}',
                DAY_SINGULAR: '{{__('Day')}}',
                HOUR_PLURAL: '{{__('Hrs')}}',
                HOUR_SINGULAR: '{{__('Hr')}}',
                MINUTE_PLURAL: '{{__('Mins')}}',
                MINUTE_SINGULAR: '{{__('Min')}}',
                SECOND_PLURAL: '{{__('Secs')}}',
                SECOND_SINGULAR: '{{__('Sec')}}'
            };

            for (var key in locale) {
                if (!locale.hasOwnProperty(key)) { continue; }
                tick.setConstant(key, locale[key]);
            }

            var time = new Date(new Date().getTime() + parseInt(tick._element.dataset.time));

            Tick.count.down(time).onupdate = function(value) {
                tick.value = value;
            };
        }

        function setSelectedSubcategory(element, index) {
            element.parents('.sub-category-block')
                .find('.sub-category-menu .item[data-category="subcategory-'+index+'"]')
                .addClass('active')
                .siblings('.item')
                .removeClass('active');
        }

    </script>
    @include('catalog.course_details_components.shared_scripts', ['bagRoute'=>route('addCourseToCart')])

    @include('modals.add_to_cart_validation_modal')

    {{--Winter Update--}}
    {{--<script src="{{ asset('js/snowflakes.js' ).'?'.$version }}"></script>--}}
    {{--<script>--}}
        {{--$(function(){--}}
            {{--$('body').prepend('<div id="season-container"></div>');--}}

            {{--var sf = new Snowflakes({--}}
                {{--container: document.getElementById('season-container'),--}}
                {{--count: 25,--}}
                {{--minOpacity: 0.1,--}}
                {{--maxOpacity: 0.95,--}}
                {{--minSize: 10,--}}
                {{--maxSize: 20,--}}
                {{--rotation: false,--}}
                {{--speed: 0.8,--}}
                {{--wind: true,--}}
            {{--});--}}
        {{--});--}}
    {{--</script>--}}
    {{--End Winter Update--}}
@endsection