@php

    /*

    $layout_page = home

    */

@endphp


@extends($sc_templatePath.'.layout')

@php

    $productsNew = $modelProduct->start()->getProductLatest()->setlimit(sc_config('product_top'))->getData();

    $news = $modelNews->start()->setlimit(sc_config('item_top'))->getData();

@endphp



@section('block_main')

    <!-- New Products-->

    <style>


        h3.serv {
            padding-bottom: 30px;
        }


        .how-work .box {
            margin: 20px auto 0;
            padding: 0 20px;
            /*  min-height: 220px;*/
            background: black;
            border-radius: 5px;
            margin-bottom: 50px;
        }

        .how-work .box .icon {
            margin: 0 auto;
            display: block;
            padding: 24px 0;
            color: #ff4f74;
            font-size: 30px;
        }

        .title2 {
            font-size: 18px;
            padding-bottom: 30px;
        }


        .how-work {
            background: #ffd7d7;
            margin-top: 40px;
            /*margin-bottom: 40px;*/
        }

        .testo {
            margin-bottom: 30px;
            background: #f9f9f9;
        }

        .oc {
            padding-bottom: 40px;
        }

        .section-xxl {
            padding: 30px 0;
        }


        .service_blk {
            margin: 12px 0;
            padding: 0;
            width: auto;
            height: 200px;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        .service_blk a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .service_blk a:hover .text_blk {
            background: rgba(0, 0, 0, .8);
        }

        .service_blk .thumb {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

        .service_blk .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .service_blk .text_blk {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, .3);
            position: relative;
            z-index: 1;
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
        }

        .service_blk .text_blk p {
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }
    </style>

    <section class="section section-xxl bg-default">


        <div class="container">
            <div class="row">

                <div class="col-md-12">
                    <h3 class="serv">Our Services</h3>
                </div>

                @foreach($categories as $category)
                <div class="col-sm-4 col-xs-6">
                    <div class="service_blk">
                        <a href="{{url('category/'.$category->alias.'.html')}}">
                            <div class="thumb">
                                <img src="{{url($category->image)}}"></div>
                            <div class="text_blk">
                                <p>{{$category->title}}</p>
                            </div>
                        </a>
                    </div>
                </div>
                @endforeach



            </div>

        </div>


        <div class="how-work">
            <div class="container">

                <div class="row" style=" padding-bottom:40px;">
                    <div class="col-md-12">
                        <br/>
                        <h3 class="serv">How It Works</h3>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa fa-users"></div>
                            <div class="title2">Find a best vendor near you</div>

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa-handshake-o"></div>
                            <div class="title2">Get Consultaion & Final Quote</div>

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa-calendar-check-o"></div>
                            <div class="title2">Pay Advance & Book vendor</div>

                        </div>
                    </div>

                </div>

            </div>

        </div>


        <div class="testo">
            <section id="testimonial" class="">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <h3 style="padding-bottom: 30px;">Testimonial</h3>

                        </div>
                        <div class="col-md-12">
                            <div id="testimonial-slider" class="owl-carousel">
                                <div class="testimonial">
                                    <div class="pic">
                                        <img src="https://bestjquery.com/tutorial/testimonial/demo54/images/img-1.jpg">
                                    </div>
                                    <p class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada vulputate
                                        nisi in fermentum. Vivamus ac libero quis nisi auctor pulvinar. Aenean sit amet
                                        lectus posuere, mattis massa eget, ullamcorper diam. Nunc sit amet felis eget
                                        arcu congue dictum.
                                    </p>
                                    <h3 class="title">WILLIAMSON</h3>
                                    <small class="post">- Web Developer</small>
                                </div>
                                <div class="testimonial">
                                    <div class="pic">
                                        <img src="https://bestjquery.com/tutorial/testimonial/demo54/images/img-1.jpg">
                                    </div>
                                    <p class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada vulputate
                                        nisi in fermentum. Vivamus ac libero quis nisi auctor pulvinar. Aenean sit amet
                                        lectus posuere, mattis massa eget, ullamcorper diam. Nunc sit amet felis eget
                                        arcu congue dictum.
                                    </p>
                                    <h3 class="title">kristina</h3>
                                    <small class="post">- Web Designer</small>
                                </div>
                                <div class="testimonial">
                                    <div class="pic">
                                        <img src="https://bestjquery.com/tutorial/testimonial/demo54/images/img-1.jpg">
                                    </div>
                                    <p class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada vulputate
                                        nisi in fermentum. Vivamus ac libero quis nisi auctor pulvinar. Aenean sit amet
                                        lectus posuere, mattis massa eget, ullamcorper diam. Nunc sit amet felis eget
                                        arcu congue dictum.
                                    </p>
                                    <h3 class="title">WILLIAMSON</h3>
                                    <small class="post">- Web Developer</small>
                                </div>
                                <div class="testimonial">
                                    <div class="pic">
                                        <img src="https://bestjquery.com/tutorial/testimonial/demo54/images/img-1.jpg">
                                    </div>
                                    <p class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada vulputate
                                        nisi in fermentum. Vivamus ac libero quis nisi auctor pulvinar. Aenean sit amet
                                        lectus posuere, mattis massa eget, ullamcorper diam. Nunc sit amet felis eget
                                        arcu congue dictum.
                                    </p>
                                    <h3 class="title">kristina</h3>
                                    <small class="post">- Web Designer</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>

        <style>
            section#testimonial {
                padding-top: 40px;
                padding-bottom: 40px;
            }

            .testimonial {
                border-left: 4px solid #d45113;
                box-shadow: 2px 4px 2px 2px rgba(0, 0, 0, 0.06);
                padding: 60px 30px 30px 130px;
                margin: 0 15px 30px 15px;
                overflow: hidden;
                border-top: 4px solid #eaeaea;
                position: relative;
            }

            .testimonial:before {
                content: "";
                position: absolute;
                bottom: 0;
                right: 0;
                border-top: 25px solid #d45113;
                border-left: 25px solid transparent;
                border-right: 25px solid transparent;
                transform: rotate(-45deg);
                transform-origin: 80% -30% 0;
            }

            .testimonial .pic {
                display: inline-block;
                /* width: 80px; */
                /* height: 80px; */
                /* border-radius: 50%; */
                overflow: hidden;
                position: absolute;
                top: 40px;
                left: 20px;
            }

            .testimonial .pic img {
                width: 100%;
                height: auto;
            }

            .testimonial .description {
                font-size: 15px;
                font-style: italic;
                margin-left: 20px;
                color: #918686;
                line-height: 25px;
                margin-bottom: 15px;
            }

            .testimonial .title {
                display: inline-block;
                font-size: 20px;
                font-weight: 700;
                color: #d45113;
                margin: 0;
            }

            .testimonial .post {
                display: inline-block;
                font-size: 17px;
                color: #d45113;
            }

            .owl-theme .owl-controls .owl-page span {
                border: 2px solid #d45113;
                background: #fff;
                opacity: 1;
            }

            .owl-theme .owl-controls .owl-page.active span,
            .owl-theme .owl-controls .owl-page:hover span {
                background: #d45113;
            }

            @media only screen and (max-width: 767px) {
                .testimonial {
                    padding: 20px;
                    text-align: center;
                }

                .testimonial .pic {
                    display: block;
                    position: static;
                    margin: 0 auto 15px;
                }
            }


        </style>

        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>


        <script>
            $(document).ready(function () {
                $("#testimonial-slider").owlCarousel({
                    items: 2,
                    itemsDesktop: [1000, 2],
                    itemsDesktopSmall: [990, 1],
                    itemsTablet: [768, 1],
                    pagination: true,
                    navigation: false,
                    navigationText: ["", ""],
                    slideSpeed: 1000,
                    autoPlay: true
                });
            });

        </script>


        <div class="container">


            <h2 class="wow fadeScale">{{ trans('front.products_new') }}</h2>


            <div class="row row-30 row-lg-50">

                @foreach ($productsNew as $key => $productNew)

                    <div class="col-sm-6 col-md-3 col-lg-3">

                        <!-- Product-->

                        <article class="product wow fadeInRight">

                            <div class="product-body">


                                {{-- Product image --}}

                                <div class="product-figure">

                                    <a href="{{ $productNew->getUrl() }}">

                                        <img src="{{ asset($productNew->getThumb()) }}" alt="{{ $productNew->name }}"/>

                                    </a>

                                </div>

                                {{--// Product image --}}



                                {{-- Product name --}}

                                <h5 class="product-title"><a
                                            href="{{ $productNew->getUrl() }}">{{ $productNew->name }}</a></h5>

                                {{--// Product name --}}



                                {{-- Display store - if use MultiStorePro --}}

                                @if (sc_config_global('MultiStorePro') && config('app.storeId') == 1)

                                    <div class="store-url"><a href="{{ $productNew->goToStore() }}"><i
                                                    class="fa fa-shopping-bag"
                                                    aria-hidden="true"></i> {{ trans('front.store').' '. $productNew->store_id  }}
                                        </a>

                                    </div>

                                @endif

                                {{-- //Display store - if use MultiStorePro --}}



                                {{-- Add to cart --}}

                                @if ($productNew->allowSale())

                                    <a onClick="addToCartAjax('{{ $productNew->id }}','default','{{ $productNew->store_id }}')"
                                       class="button button-lg button-secondary button-zakaria add-to-cart-list"><i
                                                class="fa fa-cart-plus"></i> {{trans('front.add_to_cart')}}</a>

                                @endif

                                {{-- //Add to cart --}}



                                {!! $productNew->showPrice() !!}

                            </div>


                            {{-- Product type --}}

                            @if ($productNew->price != $productNew->getFinalPrice() && $productNew->kind !=SC_PRODUCT_GROUP)

                                <span><img class="product-badge new"
                                           src="{{ asset($sc_templateFile.'/images/home/sale.png') }}" class="new"
                                           alt=""/></span>

                            @elseif($productNew->kind == SC_PRODUCT_BUILD)

                                <span><img class="product-badge new"
                                           src="{{ asset($sc_templateFile.'/images/home/bundle.png') }}" class="new"
                                           alt=""/></span>

                            @elseif($productNew->kind == SC_PRODUCT_GROUP)

                                <span><img class="product-badge new"
                                           src="{{ asset($sc_templateFile.'/images/home/group.png') }}" class="new"
                                           alt=""/></span>

                            @endif

                            {{-- //Product type --}}



                            {{-- wishlist, compare --}}

                            <div class="product-button-wrap">

                                <div class="product-button">

                                    <a class="button button-secondary button-zakaria"
                                       onClick="addToCartAjax('{{ $productNew->id }}','wishlist','{{ $productNew->store_id }}')">

                                        <i class="fas fa-heart"></i>

                                    </a>

                                </div>

                                <div class="product-button">

                                    <a class="button button-primary button-zakaria"
                                       onClick="addToCartAjax('{{ $productNew->id }}','compare','{{ $productNew->store_id }}')">

                                        <i class="fa fa-exchange"></i>

                                    </a>

                                </div>

                                {{-- //wishlist, compare --}}


                            </div>

                        </article>

                    </div>

                @endforeach

            </div>

        </div>

    </section>

@endsection



@section('news')

    @if ($news)

        <!-- Our Blog-->

        <section class="section section-xxl section-last bg-gray-21">

            <div class="container">

                <h2 class="wow fadeScale">{{ trans('front.blog') }}</h2>

            </div>

            <!-- Owl Carousel-->

            <div class="owl-carousel owl-style-7" data-items="1" data-sm-items="2" data-xl-items="3" data-xxl-items="4"
                 data-nav="true" data-dots="true" data-margin="30" data-autoplay="true">

            @foreach ($news as $blog)

                <!-- Post Creative-->

                    <article class="post post-creative"><a class="post-creative-figure"
                                                           href="{{ $blog->getUrl() }}"><img
                                    src="{{ asset($blog->getThumb()) }}" alt="" width="420" height="368"/></a>

                        <div class="post-creative-content">

                            <h5 class="post-creative-title"><a href="{{ $blog->getUrl() }}">{{ $blog->title }}</a></h5>

                            <div class="post-creative-time">

                                <time datetime="{{ $blog->created_at }}">{{ $blog->created_at }}</time>

                            </div>

                        </div>

                    </article>

                @endforeach

            </div>

        </section>








    @endif

@endsection



@push('styles')

    {{-- Your css style --}}

@endpush



@push('scripts')

    {{-- Your scripts --}}

@endpush

