@extends($user_shop ?'web.user.layouts.layout' : 'web.layouts.layout')

@section('content')

    <style>
        div.shop-item-price > span {
            padding: 0;
        }

        hr {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        p {
            margin-bottom: 15px;
        }

        .qty input {
            padding: 3px;
            margin: 0;
            border: #ccc 1px solid;
            width: 60px;
            margin-right: 3px;
            text-align: center;
            font-size: 16px;
        }
        div.shop-item-price > span {
            color: #6e6e6e;
        }
    </style>
    <section class="page-header page-header-xlg parallax parallax-3 hidden-xs"
             style="background-image:url('/assets/images/vision-min.jpg')">
        <div class="overlay dark-1"><!-- dark overlay [1 to 9 opacity] --></div>
        <div class="container">
        </div>
    </section>
    <!-- /PAGE HEADER -->

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

                <div class="col-md-3 col-sm-3">
                    @include('web.templates._categories')
                </div>

                <div class="col-md-9 col-sm-9">

                    <div class="row">

                        <!-- IMAGE -->
                        <div class="col-lg-6 col-sm-6">
                            @if($product->imagesActive->count())
                                <div class="thumbnail relative margin-bottom-3 hidden-xs">
                                    <!-- IMAGE ZOOM data-mode="mouseover|grab|click|toggle"  -->
                                    <figure id="zoom-primary" class="zoom" data-mode="mouseover">
                                        <!-- zoom buttton positions available: .bottom-right .bottom-left .top-right .top-left  -->
                                        <a class="lightbox bottom-right"
                                           href="{{ route('product_image', [$product->imagesActive->first()->slug]) }}"
                                           data-plugin-options='{"type":"image"}'><i
                                                    class="glyphicon glyphicon-search"></i></a>

                                        <!-- image Extra: add .image-bw class to force black and white!  -->
                                        <img class="img-responsive"
                                             src="{{ route('product_image', [$product->imagesActive->first()->slug]) }}"
                                             width="1000" height="1500" alt="{{ $product->getLang('name') }}">
                                    </figure>

                                </div>
                                <!-- Thumbnails (required height:100px) -->
                                <div data-for="zoom-primary" class="zoom-more owl-carousel owl-padding-3 featured"
                                     data-plugin-options='{"singleItem": false, "autoPlay": false, "navigation": true, "pagination": false}'>
                                    @php ($activ = 'active')
                                    @foreach($product->imagesActive as $image)
                                        <a class="thumbnail {{ $activ }}"
                                           href="{{ route('product_image', [$image->slug]) }}">
                                            <img src="{{ route('product_image', [$image->slug]) }}"
                                                 height="100" alt=""/>
                                        </a>
                                        @php ($activ = '')
                                    @endforeach
                                </div>
                                <!-- /Thumbnails -->
                            @endif
                        </div>
                        <!-- /IMAGE -->

                        <!-- ITEM DESC -->
                        <div class="col-lg-6 col-sm-6">
                            <h1 class="small-h1">{{ $product->getLang('name') }}</h1>

                            {!! $product->getLang('copy') !!}
                            <hr/>

                            @if($user_shop)
                                    @if($product->price_old > 0)
                                    <div class="shop-item-price text-danger text-right">
                                            <del class="text-muted" style="font-size: 0.85em">  {{ $product->getFormattedPriceOld() }} €</del>
                                            {{ $product->getFormattedPrice() }} €
                                    @else
                                    <div class="shop-item-price text-right text-muted" style="line-height: 1.3em;">
                                        {{ $product->getFormattedPrice() }} €
                                    @endif<br>
                                    <span style="font-size: 13px; color:#1d1d1d; font-weight: 500;">{{$product->getBasePriceFormattedFull()}}</span><br>
                                    <span style="font-size: 13px; color:#6e6e6e; font-weight: 500;"><em>inkl. {{$product->getFormattedTax()}}% MwSt. zzgl. Versandkosten</em></span>

                                </div>
                                <hr>
                                <div class="shop-item-price text-right" style="line-height: 1.3em">
                                    {!! Form::open(['url' => url(Util::getPostRoute().'card/add/'.$product->id), 'class' => 'mb-0', 'id'=>'']) !!}
                                    <div class="qty float-left">
                                        <input type="number" value="1" name="quantity" maxlength="3" max="999" min="1"><br>
                                    </div>
                                    <button class="btn btn-primary btn-text-500 faa-parent animated-hover"><i class="fa fa-cart-plus faa-horizontal"></i> In den Warenkorb</button>
                                    <br>
                                    <span style="font-size: 13px; color:#6e6e6e;  font-weight: 400;"><em>Lieferzeit: 1-3 Werktage</em></span>
                                    {!! Form::close() !!}
                                </div>
                                <hr>
                            @endif

                            <div class="shop-item-price text-right">
                                <span class="pull-left"><strong>Inhalt:</strong></span>
                                <span>{{ $product->contents }}</span>
                            </div>
                            <hr>
                            <div class="shop-item-price text-right">
                                <span class="pull-left"><strong>Gewicht:</strong></span>
                                <span>{{ $product->weight }} g</span>
                            </div>
                            <hr>
                            <div class="shop-item-price text-right">
                                <span class="pull-left"><strong>Art.-Nr.:</strong></span>
                                <span>{{ $product->number }}</span>
                            </div>
                            <hr>

                            <div class="shop-item-price text-right">
                                <small class="text-muted">
                                    <img src="/assets/images/{{ $product->icons }}" alt=""
                                         class="img-responsive">
                                </small>
                            </div>

                            <!-- /ITEM DESC -->

                        </div>

                        <div class="clearfix hidden-xs"></div>

                        <div class="col-lg-12 col-sm-12">
                            <ul id="myTab" class="nav nav-tabs nav-top-border margin-top-40" role="tablist">
                                <li role="presentation" class="active"><a href="#description" role="tab"
                                                                          data-toggle="tab">Beschreibung</a>
                                </li>
                                <li role="presentation"><a href="#usage" role="tab" data-toggle="tab">Anwendung</a></li>
                                <li role="presentation"><a href="#ingredients" role="tab" data-toggle="tab">Inhaltsstoffe</a>
                                </li>
                            </ul>

                            <div class="tab-content padding-top-20">
                                <!-- DESCRIPTION -->
                                <div role="tabpanel" class="tab-pane fade in active" id="description">
                                    {!!  $product->getLang('description') !!}
                                </div>

                                <!-- usage -->
                                <div role="tabpanel" class="tab-pane fade" id="usage">
                                    {!! $product->getLang('usage') !!}
                                </div>

                                <!-- ingredients -->
                                <div role="tabpanel" class="tab-pane fade" id="ingredients">
                                    {!! $product->getLang('ingredients') !!}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


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

@endsection