@extends('front-end.inc.layout')

@section('content')

<!-- Hero Section
====================================== -->
<section id="slider" class="slider slide-overlay-black">
	<!-- START REVOLUTION SLIDER 5.0 -->
	<div class="rev_slider_wrapper">
		<div id="slider1" class="rev_slider"  data-version="5.0">
			<ul>
                @php
                    $time=0;
                @endphp
                @foreach ($sliders as $key => $slider)
                @php
                $time+=2000;
                @endphp		<!-- slide 3 -->
				<li data-transition="slideremoveleft"
                @if ($key==0)
                data-slotamount="default"
                @endif
                data-easein="Power4.easeInOut"
                data-easeout="Power4.easeInOut"
                data-autoplay="on"
                data-masterspeed="{{$time}}">
                <!-- MAIN IMAGE -->
                <img src="{{asset('storage/'.$slider->image)}}" alt="Slide Background Image"  width="1920" height="1280">
                <!-- LAYER NR. 1 -->
                <div class="tp-caption"
                    data-x="left" data-hoffset="50"
                    data-y="center" data-voffset="-130"
                    data-whitespace="nowrap"
                    data-width="none"
                    data-height="none"
                    data-frames='[{"delay":1750,"speed":1000,"frame":"0","from":"z:0;rX:0deg;rY:0;rZ:0;sX:2;sY:2;skX:0;skY:0;opacity:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                    data-splitin="none"
                    data-splitout="none"
                    data-responsive_offset="on">
                </div>
            </li>
                @endforeach
			</ul>
		</div>
		<!-- END REVOLUTION SLIDER -->
	</div>
	<!-- END OF SLIDER WRAPPER -->
</section><!-- Heading #1
============================================= -->

<!-- Blog Carousel
============================================= -->
<section id="blogCarousel" class="blog blog-carousel bg-gray pb-90">
    <div class="container">
        <div class="row clearfix">
            <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
                <div class="heading heading-1 mb-50 text--center">
                    <h2 class="heading--title mb-0">{{__('main.LATEST BLOGS')}}</h2>
                    <div class="divider--shape-4"></div>
                </div>
            </div>
            <!-- .col-md-8 end -->
        </div>
        <!-- .row end -->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="carousel carousel-dots" data-slide="3" data-slide-rs="2" data-autoplay="true" data-nav="false" data-dots="true" data-space="0" data-loop="true" data-speed="800">
                    <!-- Blog Entry #1 -->
                    @forelse ($activities as $activity)
                    <div class="blog-entry">
                        <div class="entry--img">
                            <a href="#">
								<img src="{{asset('storage/'.$activity->banner)}}" alt="entry image"/>
							</a>
                        </div>
                        <div class="entry--content">
                            <div class="entry--title">
                                <h4 class="mb-0"><a href="{{route('activity_detail',$activity->id)}}">{{$activity->title}}</a></h4>
                            </div>
                            <div class="entry--bio">
                            </div>
                            <div class="entry--footer">
                                <div class="entry--date">
                                    <i class="fa fa-calendar"></i>  {{date('Y-m-d',strtotime($activity->created_at))}}
                                </div>

                            </div>
                        </div>
                        <!-- .entry-content end -->
                    </div>
                    <!-- .blog-entry end -->
                    @empty
                    {{__('main.empty')}}
                @endforelse
                </div>
                <!-- .carousel end -->
            </div>
            <!-- .col-md-6 end -->
        </div>
        <!-- .row end -->
    </div>
    <!-- .container end -->
</section>
<!-- #blogCarousel end -->


    <!-- specials #1
============================================= -->
<section id="specials" class="specials specials-1 bg-overlay bg-overlay-dark4 bg-parallax text--center">
    <div class="bg-section">
        <img src="{{asset('images/background/mybg.jpeg')}}" alt="Background" />
    </div>
    <div class="container">
        <div class="divider--shape-1up"></div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
                <div class="heading heading-1 mb-50 text--center">
                    <h2 class="heading--title color-white">{{__('main.Products')}}</h2>
                </div>
            </div>
            <!-- .col-md-8 end -->
        </div>
        <!-- .row end -->
<livewire:CategoryTabs />
        <!-- .row end -->
        <div class="divider--shape-1down"></div>
    </div>
    <!-- .container end -->
</section>
@endsection