@extends('layouts.master')
@section('content')
    <div class="main-content">
        <!-- Section: home -->
        <section id="home">
            <div class="container-fluid p-0">

                <!-- Slider Revolution Start -->
                <div class="rev_slider_wrapper">
                    <div class="rev_slider" data-version="5.0">
                        <ul>

                            <!-- SLIDE 1 -->
                            @foreach(\App\Slider::get() as $index=>$slider)
                                <li data-index="rs-{{$index}}" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="{{asset('uploads/sliders/'.$slider->image)}}" data-rotate="0" data-saveperformance="off" data-title="Slide {{$index}}" data-description="">
                                    <!-- MAIN IMAGE -->
                                    <img src="{{asset('uploads/sliders/'.$slider->image)}}"  alt=""  data-bgposition="center 20%" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-bgparallax="10" data-no-retina>
                                    <!-- LAYERS -->

                                    <!-- LAYER NR. 1 -->
                                    <div class="tp-caption tp-resizeme text-uppercase text-white font-raleway bg-theme-colored-transparent pr-20 pl-20"
                                         id="rs-3-layer-1"

                                         data-x="['center']"
                                         data-hoffset="['0']"
                                         data-y="['middle']"
                                         data-voffset="['-95']"
                                         data-fontsize="['64']"
                                         data-lineheight="['72']"
                                         data-width="none"
                                         data-height="none"
                                         data-whitespace="nowrap"
                                         data-transform_idle="o:1;s:500"
                                         data-transform_in="y:100;scaleX:1;scaleY:1;opacity:0;"
                                         data-transform_out="x:left(R);s:1000;e:Power3.easeIn;s:1000;e:Power3.easeIn;"
                                         data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
                                         data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
                                         data-start="1000"
                                         data-splitin="none"
                                         data-splitout="none"
                                         data-responsive_offset="on"
                                         style="z-index: 7; white-space: nowrap; font-weight:600;">{{$slider->header}}
                                    </div>

                                    <!-- LAYER NR. 2 -->
                                    <div class="tp-caption tp-resizeme text-uppercase text-black-222 font-raleway"
                                         id="rs-3-layer-2"

                                         data-x="['center']"
                                         data-hoffset="['0']"
                                         data-y="['middle']"
                                         data-voffset="['-25']"
                                         data-fontsize="['32']"
                                         data-lineheight="['54']"
                                         data-width="none"
                                         data-height="none"
                                         data-whitespace="nowrap"
                                         data-transform_idle="o:1;s:500"
                                         data-transform_in="y:100;scaleX:1;scaleY:1;opacity:0;"
                                         data-transform_out="x:left(R);s:1000;e:Power3.easeIn;s:1000;e:Power3.easeIn;"
                                         data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
                                         data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
                                         data-start="1000"
                                         data-splitin="none"
                                         data-splitout="none"
                                         data-responsive_offset="on"
                                         style="z-index: 7; white-space: nowrap; font-weight:600;">{{$slider->title}}
                                    </div>

                                    <!-- LAYER NR. 3 -->
                                    <div class="tp-caption tp-resizeme text-black-444 text-center"
                                         id="rs-3-layer-3"

                                         data-x="['center']"
                                         data-hoffset="['0']"
                                         data-y="['middle']"
                                         data-voffset="['30']"
                                         data-fontsize="['14','16',20']"
                                         data-lineheight="['25']"
                                         data-width="none"
                                         data-height="none"
                                         data-whitespace="nowrap"
                                         data-transform_idle="o:1;s:500"
                                         data-transform_in="y:100;scaleX:1;scaleY:1;opacity:0;"
                                         data-transform_out="x:left(R);s:1000;e:Power3.easeIn;s:1000;e:Power3.easeIn;"
                                         data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
                                         data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
                                         data-start="1400"
                                         data-splitin="none"
                                         data-splitout="none"
                                         data-responsive_offset="on"
                                         style="z-index: 5; white-space: nowrap; letter-spacing:0px; font-weight:400;">{!!$slider->descrption!!}.
                                    </div>

                                    <!-- LAYER NR. 4 -->
                                    <div class="tp-caption tp-resizeme"
                                         id="rs-3-layer-4"

                                         data-x="['center']"
                                         data-hoffset="['0']"
                                         data-y="['middle']"
                                         data-voffset="['95']"
                                         data-width="none"
                                         data-height="none"
                                         data-whitespace="nowrap"
                                         data-transform_idle="o:1;"
                                         data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;"
                                         data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
                                         data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;"
                                         data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
                                         data-start="1400"
                                         data-splitin="none"
                                         data-splitout="none"
                                         data-responsive_offset="on"
                                         style="z-index: 5; white-space: nowrap; letter-spacing:1px;"><a class="btn btn-colored btn-lg btn-flat btn-theme-colored pl-20 pr-20" href="{{route('contact')}}">Contact Us</a>
                                    </div>
                                </li>
                            @endforeach

                        </ul>
                    </div>
                    <!-- end .rev_slider -->
                </div>
                <!-- end .rev_slider_wrapper -->
                <script>
                    $(document).ready(function(e) {
                        $(".rev_slider").revolution({
                            sliderType:"standard",
                            sliderLayout: "auto",
                            dottedOverlay: "none",
                            delay: 5000,
                            navigation: {
                                keyboardNavigation: "off",
                                keyboard_direction: "horizontal",
                                mouseScrollNavigation: "off",
                                onHoverStop: "off",
                                touch: {
                                    touchenabled: "on",
                                    swipe_threshold: 75,
                                    swipe_min_touches: 1,
                                    swipe_direction: "horizontal",
                                    drag_block_vertical: false
                                },
                                arrows: {
                                    style:"gyges",
                                    enable:true,
                                    hide_onmobile:true,
                                    hide_under:600,
                                    hide_onleave:true,
                                    hide_delay:200,
                                    hide_delay_mobile:1200,
                                    // tmp:'<div class="tp-title-wrap">    <div class="tp-arr-imgholder"></div> </div>',
                                    left: {
                                        h_align:"left",
                                        v_align:"center",
                                        h_offset:30,
                                        v_offset:0
                                    },
                                    right: {
                                        h_align:"right",
                                        v_align:"center",
                                        h_offset:30,
                                        v_offset:0
                                    }
                                },
                                bullets: {
                                    enable:true,
                                    hide_onmobile:true,
                                    hide_under:600,
                                    style:"metis",
                                    hide_onleave:true,
                                    hide_delay:200,
                                    hide_delay_mobile:1200,
                                    direction:"horizontal",
                                    h_align:"center",
                                    v_align:"bottom",
                                    h_offset:0,
                                    v_offset:30,
                                    space:5,
                                    {{--tmp:'<span class="tp-bullet-img-wrap">  <span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{'title'}}</span>'--}}
                                }
                            },
                            responsiveLevels: [1240, 1024, 778],
                            visibilityLevels: [1240, 1024, 778],
                            gridwidth: [1170, 1024, 778, 480],
                            gridheight: [600, 768, 960, 720],
                            lazyType: "none",
                            parallax: {
                                origo: "slidercenter",
                                speed: 1000,
                                levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 46, 47, 48, 49, 50, 100, 55],
                                type: "scroll"
                            },
                            shadow: 0,
                            spinner: "off",
                            stopLoop: "on",
                            stopAfterLoops: 0,
                            stopAtSlide: -1,
                            shuffle: "off",
                            autoHeight: "off",
                            fullScreenAutoWidth: "off",
                            fullScreenAlignForce: "off",
                            fullScreenOffsetContainer: "",
                            fullScreenOffset: "0",
                            hideThumbsOnMobile: "off",
                            hideSliderAtLimit: 0,
                            hideCaptionAtLimit: 0,
                            hideAllCaptionAtLilmit: 0,
                            debugMode: false,
                            fallbacks: {
                                simplifyAll: "off",
                                nextSlideOnWindowFocus: "off",
                                disableFocusListener: false,
                            }
                        });
                    });
                </script>
                <!-- Slider Revolution Ends -->

            </div>
        </section>


        <!-- Divider: Funfact -->
        <section class="divider parallax layer-overlay overlay-dark-7" data-bg-img="images/bg/bg13.jpg" data-parallax-ratio="0.7" style="margin-top: 70px">
            <div class="container">
                <div class="row">

                    <div class="col-xs-12 col-sm-6 col-md-4 mb-md-50 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s">
                        <div class="funfact">
                            <i class="pe-7s-smile text-white-f1 mt-20 font-48 pull-left flip"></i>
                            <div class="ml-60">
                                <h2 class="animate-number text-white-f1 mt-0 mb-0 font-48 line-bottom" data-value="{{setting()->clientNumber}}" data-animation-duration="2000">0</h2>
                                <div class="clearfix"></div>
                                <h5 class="text-white-f1">Company employee</h5>
                            </div>
                        </div>
                    </div>


                    <div class="col-xs-12 col-sm-6 col-md-4 mb-md-50 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.4s">
                        <div class="funfact">
                            <i class="pe-7s-rocket text-white-f1 mt-20 font-48 pull-left flip"></i>
                            <div class="ml-60">
                                <h2 class="animate-number text-white-f1 mt-0 mb-0 font-48 line-bottom" data-value="{{setting()->clientimployee}}" data-animation-duration="2500">0</h2>
                                <div class="clearfix"></div>
                                <h5 class="text-white-f1">Client numbers</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 mb-md-50 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
                        <div class="funfact">
                            <i class="pe-7s-add-user text-white-f1 mt-20 font-48 pull-left flip"></i>
                            <div class="ml-60">
                                <h2 class="animate-number text-white-f1 mt-0 mb-0 font-48 line-bottom" data-value="{{setting()->clienttransaction}}" data-animation-duration="3000">0</h2>
                                <div class="clearfix"></div>
                                <h5 class="text-white-f1"> Transactions</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>




    @if(\App\Brand::all()->count() > 0)
        <!-- Section: Gallery-->
        <section>
            <div class="container pb-0">
                <div class="section-title text-center">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
                            <h2 class="mt-0 line-height-1 text-center text-uppercase">Our <span class="text-theme-colored">Brands</span></h2>
                            <p>{!! setting()->brandsDesc !!}</p>
                        </div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Works Filter -->
                            <div class="portfolio-filter font-alt text-center">
                                <a href="#" class="active" data-filter="*">All</a>
                            </div>
                            <!-- End Works Filter -->
                            <!-- Portfolio Gallery Grid -->
                            <div id="grid" class="gallery-isotope grid-3 gutter clearfix">
                                <!-- Portfolio Item Start -->
                                @foreach(\App\Brand::take(12)->get() as $product)
                                    <div class="gallery-item dental">
                                        <div class="thumb">
                                            <img class="img-fullwidth" src="{{asset('uploads/brands/'.$product->image)}}" alt="project">
                                            <div class="overlay-shade"></div>
                                            <div class="text-holder text-center">
                                                <h5 class="title">{{$product->name}}</h5>
                                            </div>
                                            <div class="icons-holder">
                                                <div class="icons-holder-inner">
                                                    <div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
                                                        <a data-lightbox="image" href="{{asset('uploads/brands/'.$product->image)}}"><i class="fa fa-plus"></i></a>
                                                        <a href="{{route('get-brand',$product->id)}}"><i class="fa fa-link"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <a class="hover-link" data-lightbox="image" href="{{asset('uploads/brands/'.$product->image)}}">View more</a>
                                        </div>
                                    </div>
                                    <!-- Portfolio Item End -->
                            @endforeach
                            </div>
                            <!-- End Portfolio Gallery Grid -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

        <!-- Divider: testimonials -->
        <section class="divider parallax layer-overlay overlay-white-6" data-bg-img="" data-parallax-ratio="0.7" style="margin-top: 80px;">
            <div class="container">
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="testimonial">
                                <div class="owl-carousel-1col" data-dots="true">
                                    @foreach(\App\Client::all() as $client)
                                    <div class="item text-center">
                                        <a class="mt-20 display-block" href="#">
                                            <img alt="" src="{{asset('uploads/clients/'.$client->image)}}" class="p-5 border-2px" style="width: 250px; height: 200px">
                                        </a>
                                        <h4 class="service-box-title font-weight-800 text-black-222">{{$client->name}}</h4>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section: blog -->
        @if(\App\Blog::all()->count() > 0)
        <section id="blog">
            <div class="container pb-sm-30">
                <div class="section-title text-center">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
                            <h2 class="mt-0 line-height-1 text-center text-uppercase">Latest <span class="text-theme-colored">News</span></h2>
                            <p>{!! setting()->latestDesc !!}</p>
                        </div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="row">
                        @foreach(\App\Blog::take(3)->latest()->get() as $blog)
                            <div class="col-sm-4 col-md-4 col-lg-4 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s">
                                <article class="post clearfix mb-sm-30 bg-lighter">
                                    <div class="entry-header">
                                        <div class="post-thumb thumb">
                                            <img src="{{asset('uploads/blog/'.$blog->image)}}" alt="" class="img-responsive img-fullwidth">
                                        </div>
                                    </div>
                                    <div class="entry-content p-20 pr-10">
                                        <div class="entry-meta media mt-0 no-bg no-border">
                                            <div class="entry-date media-left text-center flip bg-theme-colored pt-5 pr-15 pb-5 pl-15">
                                                <ul>
                                                                                                        <li class="border-bottom">{{$str[1].'/'.$str[2]}}</li>
                                                    <li class="border-bottom">{{$str[0]}}</li>

                                                </ul>
                                            </div>
                                            <div class="media-body pl-15">
                                                <div class="event-content pull-left flip">
                                                    <h5 class="entry-title text-white text-uppercase m-0 mt-5"><a href="#">{{$blog->title}}</a></h5>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="mt-10">{!! $blog->descrption !!}</p>
                                        <a href="#" class="btn-read-more">Read more</a>
                                        <div class="clearfix"></div>
                                    </div>
                                </article>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
@endif

    </div>

    @endsection