@extends('front::layouts.master')
@section('title','E-SHOP || HOME PAGE')
@section('content')
    <!-- Slider Area -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />

<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
	{{-- <section class="hero-slider">
        <!-- Single Slider -->
        <div class="single-slider">
            <div class="container">
                <div class="row no-gutters">
                    <div class="col-lg-9 offset-lg-3 col-12">
                        <div class="text-inner">
                            <div class="row">
                                <div class="col-lg-7 col-12">
                                    <div class="hero-text">
                                        <h1><span>UP TO 50% OFF </span>Shirt For Man</h1>
                                        <p>Maboriosam in a nesciung eget magnae <br> dapibus disting tloctio in the find
                                            it pereri <br> odiy maboriosm.</p>
                                        <div class="button">
                                            <a href="#" class="btn">Shop Now!</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ End Single Slider -->
    </section> --}}
    @if(isset($banners))
        <section id="Gslider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                @foreach($banners as $key=>$banner)
                    <li data-target="#Gslider" data-slide-to="{{$key}}" class="{{(($key==0)? 'active' : '')}}"></li>
                @endforeach

            </ol>
            <div class="carousel-inner" role="listbox">
                @foreach($banners as $key=>$banner)
                    <div class="carousel-item {{(($key==0)? 'active' : '')}}">
                        <img class="first-slide" src="{{$banner->image_url}}" alt="First slide">
                        <div class="carousel-caption  d-md-block text-left">
                            <h1 class="wow fadeInDown">{{$banner->title}}</h1>
                            <!--<p>{!! html_entity_decode($banner->description) !!}</p>-->
                            <!--<a class="btn btn-lg ws-btn wow fadeInUpBig" href="{{route('front.product-grids')}}"-->
                            <!--   role="button">Shop Now<i class="far fa-arrow-alt-circle-right"></i></i></a>-->
                        </div>
                    </div>
                @endforeach
            </div>
            <a class="carousel-control-prev" href="#Gslider" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#Gslider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </section>
    @endif
    <section class="small-banner section">
        <div class="container-fluid">
          <div class="container-inner">
            <div class="product-heading">
                <h2> New Products</h2>
            </div>
            <div class="row">
                <!-- Single Banner  -->
                @if($featured_products)
                   @foreach($featured_products as $k=>$featured_product)
    <div class="col-lg-4 col-md-6 col-12">
        <div class="single-banner">
            <img src="{{ $featured_product->imageUrl }}" alt="">
            <div class="content">
                <p>
					{{ optional($featured_product->categories->first())->title ?? "Title-VLKUJXWQI{$k}" }}

					
				</p>
                <h3>{{$featured_product->title}}</h3>
                <a href="{{route('front.product-detail', $featured_product->slug)}}">{{$featured_product->title}}</a>
            </div>
        </div>
    </div>
@endforeach

                @endif
            </div>
        </div>
        </div>
    </section>
    <!--/ End Slider Area -->
    <!-- Start Most Popular -->

            <!-- Start Shop Blog  -->
          <section class="shop-blog section">
    <div class="container">
        <div class="row">
            @if($posts)
                @foreach($posts as $post)
                    <div class="col-lg-4 col-md-6 col-12">
                        <!-- Start Single Blog  -->
                        <div class="shop-single-blog">

                            <!-- CLICKABLE POPUP IMAGE -->
                            <a href="{{ $post->getImageUrlAttribute() }}" 
                               class="glightbox" 
                               data-gallery="posts-gallery"
                               data-title="{{ $post->title }}">
                                <img src="{{ $post->getImageUrlAttribute() }}" 
                                     alt="{{ $post->title }}">
                            </a>

       <!--                     <div class="content">-->
							<!--{{--  <p class="date">{{ $post->created_at->format('d M , Y. D') }}</p>-->
       <!--                         <a href="{{ route('front.blog-detail',$post->slug) }}" class="title">-->
       <!--                             {{ $post->title }}-->
       <!--                         </a>-->
       <!--                         <a href="{{ route('front.blog-detail',$post->slug) }}" class="more-btn">-->
       <!--                             Continue Reading-->
       <!--                         </a> --}}-->
       <!--                     </div>-->
                        </div>
                        <!-- End Single Blog -->
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</section>

            <!-- End Shop Blog  -->

            <!-- Start Shop Services Area -->
			{{-- <section class="shop-services section home">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-12">
                            <!-- Start Single Service -->
                            <div class="single-service">
                                <i class="ti-rocket"></i>
                                <h4>Free shiping</h4>
                                <p>Orders over $100</p>
                            </div>
                            <!-- End Single Service -->
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <!-- Start Single Service -->
                            <div class="single-service">
                                <i class="ti-reload"></i>
                                <h4>Free Return</h4>
                                <p>Within 30 days returns</p>
                            </div>
                            <!-- End Single Service -->
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <!-- Start Single Service -->
                            <div class="single-service">
                                <i class="ti-lock"></i>
                                <h4>Sucure Payment</h4>
                                <p>100% secure payment</p>
                            </div>
                            <!-- End Single Service -->
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <!-- Start Single Service -->
                            <div class="single-service">
                                <i class="ti-tag"></i>
                                <h4>Best Peice</h4>
                                <p>Guaranteed price</p>
                            </div>
                            <!-- End Single Service -->
                        </div>
                    </div>
                </div>
            </section> --}}
            <!-- End Shop Services Area -->
     
            <!-- Modal -->
            
            @endsection

            @push('styles')
                <script type='text/javascript'
                        src='https://platform-api.sharethis.com/js/sharethis.js#property=5f2e5abf393162001291e431&product=inline-share-buttons'
                        async='async'></script>
                <script type='text/javascript'
                        src='https://platform-api.sharethis.com/js/sharethis.js#property=5f2e5abf393162001291e431&product=inline-share-buttons'
                        async='async'></script>
              
            @endpush

            @push('scripts')
                <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
                <script>

                    /*==================================================================
                    [ Isotope ]*/
                    const $topeContainer = $('.isotope-grid');
                    const $filter = $('.filter-tope-group');

                    // filter items on button click
                    $filter.each(function () {
                        $filter.on('click', 'button', function () {
                            const filterValue = $(this).attr('data-filter');
                            $topeContainer.isotope({filter: filterValue});
                        });

                    });

                    // init Isotope
                    $(window).on('load', function () {
                        const $grid = $topeContainer.each(function () {
                            $(this).isotope({
                                itemSelector: '.isotope-item',
                                layoutMode: 'fitRows',
                                percentPosition: true,
                                animationEngine: 'best-available',
                                masonry: {
                                    columnWidth: '.isotope-item'
                                }
                            });
                        });
                    });

                    const isotopeButton = $('.filter-tope-group button');

                    $(isotopeButton).each(function () {
                        $(this).on('click', function () {
                            for (let i = 0; i < isotopeButton.length; i++) {
                                $(isotopeButton[i]).removeClass('how-active1');
                            }

                            $(this).addClass('how-active1');
                        });
                    });
                </script>
                <script>
                    function cancelFullScreen(el) {
                        const requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen;
                        if (requestMethod) { // cancel full screen.
                            requestMethod.call(el);
                        } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                            const wscript = new ActiveXObject("WScript.Shell");
                            if (wscript !== null) {
                                wscript.SendKeys("{F11}");
                            }
                        }
                    }

                    function requestFullScreen(el) {
                        // Supports most browsers and their versions.
                        const requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

                        if (requestMethod) { // Native full screen.
                            requestMethod.call(el);
                        } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                            const wscript = new ActiveXObject("WScript.Shell");
                            if (wscript !== null) {
                                wscript.SendKeys("{F11}");
                            }
                        }
                        return false
                    }
                </script>
<script>
    const lightbox = GLightbox({
        selector: '.glightbox',
        loop: true,
        zoomable: true,
        touchNavigation: true,
    });
</script>
            @endpush