@extends('layouts.layout')
@section('content')

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            @foreach ($images as $image)
                <li data-target="#carousel-example-generic" data-slide-to="{{$loop->index}}" class="{{$loop->first?'active':''}}"></li>
            @endforeach
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            @foreach ($images as $image)
            <div class="item {{$loop->first?'active':''}}">
                <img src="{{$image->imagePath}}" alt="...">
                <div class="carousel-caption">
{{--                    <div class="hs-caption">--}}
{{--                        <div class="caption-inner">--}}
{{--                            <h4>Welcome to <span>Barbershop</span></h4>--}}
{{--                            <p>"Barbershop" is donec malesuada convallis neque eget varius erat faucibus quis lacus--}}
{{--                                enim scelerisque vel hendrerit eget pulvinar quis.</p>--}}
{{--                            <br>--}}d
{{--                            <a href="#" class="button btn-xs btn-center color">Book Online</a>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                </div>
            </div>
            @endforeach

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <i class="fa fa-arrow-left"></i>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <i class="fa fa-arrow-right"></i>
        </a>
    </div>


    <section id="home-shop">
        <div class="container">
            <div class="col-md-12">
                <div class="h-page-title">
                    <h1>Recent Products</h1>
                    <div class="mustache">
                        <span><img class="img-responsive" src="images/home-page/mustache.png" alt=""></span>
                    </div>
                </div>
                <div class="clearfix space35"></div>


                <!--Slick slider-->

                <div class="slick-slider-area slider">
                    @foreach (\App\Tattoo::slider()->latest()->take(6)->get() as $tattoo)
                    <div>
                        <img src="{{$tattoo->image_path}}" class="img-responsive" alt="" />
                        <h2 class="product-title"><a href="{{route('shop_single_full',$tattoo)}}">{{$tattoo->name}}</a></h2>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>


    <section>
        <div class="container">
            <div class="row">
                @foreach (\App\Category::latest()->take(6)->get() as $category)
                    <div class="col-md-{{$loop->first?'8':'4'}} sm-item isotope-item">
                        <div class="product">
                            <div class="product-thumb">
                                <img src="{{$category->imagePath}}" class="img-responsive" alt="">
                                <div class="product-overlay">
                                    <span>
                                        <a href="{{route('shop_left',$category)}}" class="">{{$category->name}}</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>
        </div>
    </section>



    <!--start Second Secton-->
    <section id="content">
        <div class="content-blog">
            <div class="container">
                <div class="row">
                    <div class="page_header text-center">
                        <h2>Recommended </h2>
                    </div>


                    <div class="row">
                        @foreach (\App\Tattoo::recommended()->latest()->take(6)->get() as $tattoo)
                        <div class="col-md-4 sm-item isotope-item">
                            <div class="product">
                                <div class="product-thumb">
                                    <img src="{{$tattoo->image_path}}" class="img-responsive" alt="">
                                    <div class="product-overlay">
                                            <span>
                                                <a href="{{route('shop_single_full',$tattoo)}}" class="">{{$tattoo->name}}</a>
                                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>



    <!--Start News-->
    <section class="news" style="margin-bottom: 0px;">
        <div class="container">
            <div class="page_header text-center" style="margin-bottom: 10px;">
                <h2>Latest News</h2>
            </div>


            <div class="row">
                @foreach (\App\Tattoo::news()->latest()->take(6)->get() as $tattoo)
                <div class="col-md-4 sm-item isotope-item">
                    <div class="product">
                        <div class="product-thumb">
                            <img src="{{$tattoo->image_path}}" class="img-responsive" alt="">
                            <div class="product-overlay">
                                <span>
                                    <a href="{{route('shop_single_full',$tattoo)}}" class="">{{$tattoo->name}}</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach
            </div>
        </div>
    </section>

    <!-- End News-->


    <section class="clients" style="margin-bottom: 0px; padding: 70px 0;">
        <div class="h-page-title page_header">
            <h1>Our Clients</h1>
            <div class="mustache">
            </div>
        </div>


        <div class="bxWrapper">
            <ul id="slider-area">
                <li><img src="images/9.jpg" alt="Mancity"></li>
                <li><img src="images/2.jpg" alt="Chelsea"></li>
                <li><img src="images/3.jpg" alt="FCBarcelona"></li>
                <li><img src="images/4.jpg" alt="ACMilan"></li>
                <li><img src="images/5.jpg" alt="FCBayern"></li>
                <li><img src="images/6.jpg" alt="Juventus"></li>
                <li><img src="images/7.jpg" alt="ManUnited"></li>
                <li><img src="images/8.jpg" alt="HalaMadrid"></li>
            </ul>
        </div>

    </section>
@stop
@push('css')
    <script src="js/slick.js"></script>
    <script type="text/javascript">
        $(".slick-slider-area").slick({
            dots: true,
            infinite: true,
            centerMode: false,
            fade: false,
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,
            speed: 300,
            cssEase: 'linear'
        });

    </script>
@endpush