@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">Bio Aloe Vera &amp; Naturkosmetik</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">Nahrungsergänzung</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>{{$site->headline}}</h1>
                    <p class="margin-bottom-20">{{$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')}}" class="btn btn-lg btn-primary ">Alle Produkte anzeigen</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">Willkommen</h2>
                    <p class="text-center">Ich freue mich über Deinen Besuch in meinem MIVITA Onlineshop. Ich bin Deine persönliche Beratung rund um die Produkte und ihrer Anwendung.</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->contact)
                           {!! nl2br($user_shop->contact) !!}
                        @endif
                        <br>
                        {{ $user_shop->getSubdomain(true) }}
                    </p>

                    @if($user_shop->accessibility)
                    <p class="text-center">
                        <strong>Meine Erreichbarkeit:</strong><br>
                        {!! nl2br($user_shop->accessibility) !!}
                    </p>
                    @endif

                    @if($user_shop->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>
                            „{{ $user_shop->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">Für Dich vor Ort:</h3>
                        <p class="text-center">Wir waren für Dich vor Ort auf der Aloe Vera Farm auf Mallorca, denn Transparenz ist uns wichtig. So weißt Du genau, wo Deine Produkte herkommen und wie sie produziert werden. Echte Qualität eben.</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>Warum MIVITA?</h2>
                    <p>Unsere Kunden vertrauen zurecht auf die exzellenten Eigenschaften der MIVITA Produkte. Damit trifft
                        jeder aktiv eine kluge Entscheidung für Gesundheit und Umwelt.</p>

                    <p>Wir legen nicht nur auf die Qualität unserer Produkte einen hohen Stellenwert, sondern natürlich auch
                        auf umfassende, kompetente Beratung durch freundliche und fachkundige Berater und Beraterinnen.</p>

                    <p>Wir entwickeln und vertreiben ausschließlich Produkte, die qualitativ hochwertig sind. So sind sie
                        bei sachgemäßer Anwendung und Pflege langlebig und sehr ergiebig. Faktoren, die uns die
                        Zufriedenheit unserer Kunden sichern.</p>

                </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">Aloe Vera</h3>
                        <p class="">Mit höchstem Anspruch arbeiten wir gemeinsam mit der Aloe Vera Farm auf Mallorca
                            zusammen, die weltweite Qualität der Spitzenklasse garantiert.</p>

                        <a href="/aloevera">
                            Mehr
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
										<span class="items">
											<span>lesen</span>
											<span>JETZT</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">Produkte</h3>
                        <p class="">Hier findest Du einen Überblick über das komplette Premium-Produktsortiment von MIVITA.
                            Vom hochwertigen Aloe Saft bis zu wohltuender Kosmetik.</p>

                        <a href="/produkte">
                            Mehr
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
										<span class="items">
											<span>lesen</span>
											<span>JETZT</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">Vertriebspartner</h3>
                        <p class="">Werde auch Du ein Vertriebspartner von MIVITA und baue Dir Dein eigenes Geschäft mit
                            Qualitätsprodukten auf. Wenn Du magst, kannst Du sofort starten ...</p>

                        <a href="/geschaeftsmodell/karrierechancen">
                            Mehr
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
										<span class="items">
											<span>lesen</span>
											<span>JETZT</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">

                    <p>MIVITA ist exklusiver Partner der Farm Aloe Vera de Mallorca im Bereich Direktvertrieb Deutschland.
                        Hier haben zwei Unternehmen zusammengefunden, für die Qualität und Nachhaltigkeit oberstes Gebot
                        sind. Nur so lassen sich langfristig zufriedene Kunden zu echten Fans unserer Produkte gewinnen.</p>
                    <blockquote>
                        <p><i>„Mensch, Tier und Natur zuliebe ... Nachhaltigkeit und Produkte, die wirklich „guttun“, sind
                                uns wichtig.“</i></p>
                        <p>Alois Ried - Inhaber MIVITA</p>
                    </blockquote>

                </div>

                <div class="col-lg-6">

                    <div class="embed-responsive embed-responsive-16by9 box-shadow-1">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/ChHAxy6SbkM?rel=0"
                                frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>

                </div>


            </div>

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



@endsection
