@extends('layouts.main')
@section('content')
    <div class="body-content outer-top-vs" id="top-banner-and-menu">
        <div class="container">
            <div class="row">
                @if($products)
                    @include('partials.sigma.catalogue.sidebar')
                @endif
                <div class="col-xs-12 col-sm-12 col-md-9 homebanner-holder">
                    <!-- ========================================== SECTION – HERO ========================================= -->
                    @include('partials.sigma.catalogue.hero')
                    @if(!$products)
                        <header class="section-header text-center">
                            <h3 class="text-center">No Products available.</h3>
                        </header>

                    @else
                        @include('partials.sigma.catalogue.products1_slider')
                        @include('partials.sigma.catalogue.products2_slider')
                    @endif

                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')

    <script>


        //INTERSECTION OBSERVER
        //LAZY LOAD IMAGES
        var options = {
            rootMargin: '0px',
            threshold: 0.1
        };
        var images = $('img.product-img');
        if (!('IntersectionObserver' in window)) {
            Array.from(images).forEach(image => preLoadImage(image));
        } else {
            var observer = new IntersectionObserver(handleIntersection, options);

            $.each(images, function(index, img) {
                observer.observe(img);
            })
        }
        function handleIntersection(entries, observer){

            entries.forEach(entry => {
                if(entry.intersectionRatio > 0) {
                    observer.unobserve(entry.target);
                    preLoadImage(entry.target)
                }
            })
        }

        // function loadImage(image){
        //     var src = image.dataset.src;
        //     $.get(src)
        //         .done(function(){
        //             image.src = src;
        //         })
        // }

        function preLoadImage(image){
            var src = image.dataset.src;
            image.src = src;
            // fetchImage(src).then(() => {
            //     image.src = src;
            // })
        }
    </script>
@endpush