@extends($activeTemplate . 'layouts.frontend')
@section('content')
    @if (request()->routeIs('home'))
        @include('Template::sections.banner')
    @endif

    @if (isset($sections->secs) && $sections->secs != null)
        @foreach (json_decode($sections->secs) as $sec)
            @include($activeTemplate . 'sections.' . $sec)
        @endforeach
    @endif
@endsection

@push('style-lib')
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue . 'css/slick.css') }}" />
@endpush

@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/slick.min.js') }}"></script>
@endpush

@push('script')
    <script>
        $(document).ready(function() {
            if(window.location.hash === '#home') {
                $('html, body').animate({
                    scrollTop: 0
                }, 200);
            }
        });

        $('a[href*="#home"]').on('click', function() {
            $('html, body').animate({
                scrollTop: 0
            }, 200);
        });

        $(window).on('scroll', function() {
            let activeSet = false;
            $('section[id]').each(function() {
                let sectionId      = $(this).attr('id');
                let sectionTop     = $(this).offset().top;
                let sectionHeight  = $(this).outerHeight();
                let sectionBottom  = sectionTop + sectionHeight;
                let scrollPosition = $(window).scrollTop();
                let navLink        = $('.nav-link[href*="' + sectionId + '"]');

                if (scrollPosition >= sectionTop - 50 && scrollPosition < sectionBottom - 50 && navLink.length) {
                    $('.nav-link').parent().removeClass('active');
                    navLink.parent().addClass('active');
                    activeSet = true;
                }
            });

            if (!activeSet) {
                $('.nav-link').parent().removeClass('active');
            }
        });
    </script>
@endpush