@extends('web.user.layouts.layout')

@section('content')


    <style type="text/css">
        .tp-caption {
            text-shadow: none;
        }

        div.shop-item {
            margin-bottom: 30px;
            border: 1px solid #ddd;
        }

        div.shop-item>.thumbnail,
        .thumbnail {
            border: none;
        }

        div.shop-item-summary {
            padding: 8px;
        }

        div.shop-item-summary h2 a {
            color: #9aa983;
            font-size: 1.2em;
            margin: 0 0 10px 0;
        }

        div.shop-item-buttons {
            padding: 0 8px 10px 8px;
        }

        div.shop-item-buttons .btn-xs {
            padding: 4px;
        }

        img.avatar {
            width: 75%;
            max-width: 200px;
            border: 6px solid #bbccab;
            margin-bottom: 10px;
        }

        .tp-caption.large_bold_white {
            font-size: 40px;
            line-height: 52px;
        }
    </style>


    <!-- REVOLUTION SLIDER -->
    <section id="slider" class="slider fullwidthbanner-container roundedcorners">

        <div class="fullwidthbanner" data-height="500" data-navigationStyle="">
            <ul class="hide">

                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off"
                    data-title="Slide">

                    <img src="{{ asset('assets/images/1x1.png') }}"
                        data-lazyload="{{ asset('assets/images/slider-hg_gruen-mitte.jpg') }}" alt=""
                        data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" />

                    <div class="overlay dark-0"><!-- dark overlay [1 to 9 opacity] --></div>

                    <div class="tp-caption customin ltl tp-resizeme large_bold_white" data-x="center" data-y="50"
                        data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                        data-speed="800" data-start="1000" data-easing="easeOutQuad" data-splitin="none"
                        data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000"
                        data-endeasing="Power4.easeIn" style="z-index: 10;">
                        <span class="h1">{!! __('website.slider_subl') !!}</span>
                    </div>

                    <div class="tp-caption customin ltl tp-resizeme large_bold_white" data-x="center" data-y="120"
                        data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                        data-speed="800" data-start="1200" data-easing="easeOutQuad" data-splitin="none"
                        data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000"
                        data-endeasing="Power4.easeIn" style="z-index: 10;">
                        <span class="weight-400">{!! __('website.slider_hl') !!}</span>
                    </div>
                </li>
            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </section>
    <!-- /REVOLUTION SLIDER -->


    <!-- -->
    <section>
        <div class="container">
            <div class="row">

                <div class="col-md-9">
                    <h1>{{ __('website.productworld') }} {{-- $site->headline --}}</h1>
                    <p class="margin-bottom-20">{!! __('website.start_copy_mivita') !!} {{-- $site->copy --}}</p>

                    @if ($site->hasImage())
                        <img class="img-responsive margin-bottom-20" src="{{ route('iq_image', [$site->iq_image->slug]) }}"
                            alt="">
                    @endif

                    <ul class="shop-item-list row list-inline nomargin">
                        @foreach ($site->getProductModels() as $product)
                            <!-- ITEM -->
                            <li class="col-lg-4 col-sm-4">
                                @include('web.templates.produkte-item', ['subsite' => 'alle-produkte'])
                            </li>
                            <!-- /ITEM -->
                        @endforeach
                    </ul>
                    <div class="text-center">
                        <a href="{{ url('/produkte/alle-produkte') }}"
                            class="btn btn-lg btn-primary ">{{ __('website.show_all_products') }} </a>
                    </div>


                    {{--   
                     <div class="divider divider-center divider-color"><!-- divider -->
                        <i class="fa fa-chevron-down"></i>
                    </div><h1>Spare mit Sets</h1>
                    <ul class="shop-item-list row list-inline nomargin">
                    @foreach ($site->getProductSetModels() as $product)
                        <!-- ITEM -->
                            <li class="col-lg-4 col-sm-4">
                                @include('web.templates.produkte-item', ['subsite' => 'alle-produkte'])
                            </li>
                            <!-- /ITEM -->
                        @endforeach
                    </ul>
                    <div class="text-center">
                        <a href="{{url('/produkte/aktions-sets')}}" class="btn btn-lg btn-primary ">Alle Sets anzeigen</a>
                    </div>
                    --}}

                </div>

                <div class="divider divider-center divider-color visible-xs visible-sm"><!-- divider -->
                    <i class="fa fa-chevron-down"></i>
                </div>


                <div class="col-md-3" style="border-left: 1px solid #ddd;">
                    <h2 class="text-center">{!! __('website.welcome') !!}</h2>
                    <p class="text-center">{!! __('website.welcome_copy') !!}</p>
                    <div class="text-center">
                        @if ($user_shop->isImage())
                            <img class="img-responsive rounded avatar" src="{{ url($user_shop->getImage()) }}"
                                alt="">
                        @else
                            <img class="img-responsive rounded avatar" src="{{ asset('assets/images/avatar.png') }}"
                                alt="">
                        @endif
                    </div>

                    <p class="text-center">
                        @if ($user_shop->title)
                            <strong style="color: #97b085; font-size: 1.1em;">{{ $user_shop->title }}</strong><br>
                        @endif
                        @if ($user_shop->getLang('contact'))
                            {!! nl2br($user_shop->getLang('contact')) !!}
                        @endif
                        <br>
                        {{ $user_shop->getSubdomain(true) }}
                    </p>

                    @if ($user_shop->getLang('accessibility'))
                        <p class="text-center">
                            <strong>{!! __('website.my_accessibility') !!} :</strong><br>
                            {!! nl2br($user_shop->getLang('accessibility')) !!}
                        </p>
                    @endif

                    @if ($user_shop->getLang('about'))
                        <div class="divider divider-center divider-color" style="margin: 10px 0;"><!-- divider -->
                            <i class="fa fa-chevron-down"></i>
                        </div>
                        <p class="text-center" style="color: #97b085;">
                            <em>
                                „{{ nl2br($user_shop->getLang('about')) }}“
                            </em>
                        </p>
                    @endif

                    @if ($user_shop->on_sites)
                        <div class="divider divider-center divider-color" style="margin: 10px 0;"><!-- divider -->
                            <i class="fa fa-chevron-down"></i>
                        </div>
                        <h3 class="text-center">{!! __('website.for_you_on_spot') !!}:</h3>
                        <p class="text-center">{!! __('website.for_you_on_spot_copy') !!}</p>
                        <div class="clearfix lightbox" data-img-big="1"
                            data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'>

                            @foreach ($user_shop->on_sites as $image)
                                <div class="col-xs-6 col-sm-4 col-md-6" style="padding: 2px;">
                                    <a class="image-hover" href="{{ route('user_shop_image', [$image->slug]) }}">
                                        <img src="{{ route('user_shop_image', [$image->slug]) }}" alt="..."
                                            class="img-responsive">
                                    </a>
                                </div>
                            @endforeach

                        </div>
                    @endif
                </div>
            </div>


            <div class="divider divider-center divider-color"><!-- divider -->
                <i class="fa fa-chevron-down"></i>
            </div>

            <!-- BORN TO BE A WINNER -->
            <article class="row">
                <div class="col-md-6">
                    <!-- OWL SLIDER -->
                    <div class="owl-carousel buttons-autohide controlls-over nomargin"
                        data-plugin-options='{"items": 1, "autoHeight": true, "navigation": true, "pagination": true, "transitionStyle":"backSlide", "progressBar":"true"}'>
                        <div>
                            <img class="img-responsive" src="{{ asset('assets/images/aloe-vera-farm-mallorca.jpg') }}"
                                alt="">
                        </div>
                        <div>
                            <img class="img-responsive" src="{{ asset('assets/images/beratung-ruth-mallorca.jpg') }}"
                                alt="">
                        </div>
                        <div>
                            <img class="img-responsive" src="{{ asset('assets/images/mivita-schulung-mallorca.jpg') }}"
                                alt="">
                        </div>

                    </div>
                    <!-- /OWL SLIDER -->
                </div>
                <div class="col-md-6">
                    <h2>{!! __('website.start_why_hl') !!} </h2>
                    {!! __('website.start_why_copy') !!}

                </div>
            </article>
            <!-- /BORN TO BE A WINNER -->

        </div>
    </section>
    <!-- / -->


    <!-- -->
    <section>
        <div class="container">

            <!-- FEATURED BOXES 3 -->
            <div class="row">
                <div class="col-md-4 col-xs-6">
                    <div class="text-center">
                        <h3 class="h3">{{ __('website.start_aloe_hl') }} </h3>
                        <p class="">{{ __('website.start_aloe_copy') }} </p>


                        <a href="/aloevera">
                            {{ __('website.more') }}
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
                                <span class="items">
                                    <span> {{ __('website.read') }} </span>
                                    <span> {{ __('website.NOW') }} </span>
                                </span>
                            </span><!-- /word rotator -->
                            <i class="glyphicon glyphicon-menu-right size-12"></i>
                        </a>

                    </div>
                </div>
                <div class="col-md-4 col-xs-6">
                    <div class="text-center">
                        <h3 class="h3">{{ __('website.start_products_hl') }} </h3>
                        <p class="">{{ __('website.start_products_copy') }} </p>

                        <a href="/alle-produkte">
                            {{ __('website.more') }}
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
                                <span class="items">
                                    <span> {{ __('website.read') }} </span>
                                    <span> {{ __('website.NOW') }} </span>
                                </span>
                            </span><!-- /word rotator -->
                            <i class="glyphicon glyphicon-menu-right size-12"></i>
                        </a>

                    </div>
                </div>
                <div class="col-md-4 col-xs-6">
                    <div class="text-center">
                        <h3 class="h3">{{ __('website.start_salespartner_hl') }} </h3>
                        <p class="">{{ __('website.start_salespartner_copy') }} </p>

                        <a href="/geschaeftsmodell/karrierechancen">
                            {{ __('website.more') }}
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
                                <span class="items">
                                    <span> {{ __('website.read') }} </span>
                                    <span> {{ __('website.NOW') }} </span>
                                </span>
                            </span><!-- /word rotator -->
                            <i class="glyphicon glyphicon-menu-right size-12"></i>
                        </a>

                    </div>
                </div>

            </div>
            <!-- /FEATURED BOXES 3 -->

        </div>
    </section>
    <!-- / -->

    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    {!! __('website.start_mivitapartner_copy') !!}
                </div>
                <div class="col-lg-6" id="youtube-ChHAxy6SbkM">
                    @if (Request::get('youtube') === 'ChHAxy6SbkM')
                        <div class="embed-responsive embed-responsive-16by9 box-shadow-1">
                            <iframe width="560" height="315"
                                src="https://www.youtube-nocookie.com/embed/ChHAxy6SbkM" title="YouTube video player"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen></iframe>
                        </div>
                    @else
                        <div class="text-center">
                            <h4 class="mb-2">{{ __('website.youtube_accepted_copy') }} </h4>
                            <a class="text-link" href="{{ url('/datenschutz') }}">{{ __('website.to_privacy_policy') }}
                            </a><br>
                            <a class="btn btn-primary" href="{{ url('/') }}?youtube=ChHAxy6SbkM#youtube-ChHAxy6SbkM"
                                rel="nofollow">{{ __('website.accept_youtube_load') }} n</a>
                        </div>
                        <br>
                        <div class="embed-responsive embed-responsive-16by9 box-shadow-1">
                            <img src="/images/youtube-screen-1.jpg" alt="" class="img-responsive">
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>



@endsection