@extends('site.master')

@section('title', $product->meta_title)
@section('meta_description', $product->meta_description)

@section('content')
    @php $iso = \App::getSite()->languages->where('id', "=", $product->translation->language_id)->first()->iso_2; @endphp
    <div class="grid-row top">
        <div class="grid-col product-left">

            <div class="breadcrumb">
                <a href="/">Eurotools</a>
                @if(!empty($productCategoryParent) && $productCategoryParent->lft > 1 && !empty($productCategoryParent->translation))
                    <span> > </span>
                    <a href="/{{$iso}}/{{$productCategoryParent->translation->slug}}">{{$productCategoryParent->title}}</a>
                    <span> > </span>
                    <a href="/{{$iso}}/{{$productCategoryParent->translation->slug}}/{{$productCategory->translation->slug}}">{{$productCategory->translation->name}}</a>
                @endif
            </div>

            <div class="images" id="image-slider">
                <div id="image-slider">
                    @if(count($product->documents) > 1)
                        <div class="nav-item previous"
                             data-order="{{(count($product->documents) - 1)}}">
                        </div>
                    @endif
                    <div class="placeholder">
                        {{--{{dd($product->documents()->get())}}--}}
                        @foreach($product->documents as $key => $imageSlide)
                            <figure data-order="{{$key}}" class="c-zoom  js-zoom-image  image-placeholder {{$key == 0 ? 'active' : ''}} ">
                                <a class="c-zoom__link" @if($imageSlide->getPath() != '') data-fslightbox="gallery" href="{{ $imageSlide->large_image_url }}" @endif>
                                @foreach(['medium', 'small'] as $imageSize)
                                    <span class="{{$imageSize}}  c-zoom__img" style="background-image: url('{{ $imageSlide->{$imageSize.'_image_url'} }}');"></span>
{{--                                    <img class="{{$imageSize}}  c-zoom__img" src="{{ $imageSlide->{$imageSize.'_image_url'} }}" />--}}
                                @endforeach
                                </a>
                            </figure>
                        @endforeach
                    </div>
                    @if(count($product->documents) > 1)
                        <div class="nav-item next" data-order="1">
                        </div>
                    @endif
                    @if(count($product->documents) > 1)
                        <div class="controllers">
                            <div class="dots">
                                @foreach($product->documents as $key => $imageSlide)
                                    <span data-order="{{$key}}" class="dot {{$key == 0 ? 'active' : ''}} "></span>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="grid-col product-right">
            <div class="button-holder">
                <div class="fake-button">
                    <label>@lang('shop/products.product_code'):</label> {{ (string)$product->internal_number }}
                </div>
                <div class="fake-button">
                    <label>@lang('shop/products.long_product_code'):</label> 8715156{{ $product->stock_keeping_unit }}
                </div>
            </div>

            <h3>{{ $product->translation->name }}</h3>
            <h4>{{ $product->translation->subtitle }}</h4>

            <div class="left">
                <div class="price">&euro; {{ floor($product->price/100) }}
                    <span>{{ str_pad($product->price%100, 2, '0', STR_PAD_LEFT) }}</span></div>
                <div class="staffeldiscount-price">&euro; {{number_format(round($product->price/100), 2,",",".")}}</div>
                <div class="order-box">
                    <span class="amount-label">@lang('shop/products.pieces')</span>
                    <div class="amount-box">
                        <input class="amount" type="number" value="1"/>
                        <div class="amount-changers">
                            <a href="#" class="increase"></a>
                            <a href="#" class="decrease"></a>
                        </div>
                        <a class="button filled shoppingCart" href=""
                           onclick="ShoppingCart.addProductToShoppingcart({{$product->id}}, '{{urlencode(get_class($product))}}'); return false;">@include('site.svg.icon.shopping_cart')
                            @lang('shop/products.place_in_cart')</a>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="price-box">
                    <div class="price-line">
                        <label>@lang('shop/products.price_label')</label>
                        <span class="price-holder">
                            &euro; <span class="price">{{number_format($product->price/100, 2,",",".")}}</span>
                        </span>
                    </div>
                    @if(isset($discount))
                        <div class="price-line">
                            <label>@lang('shop/products.staffel_price_label')</label>
                            <span class="staffel-price-holder">
                                &euro; <span
                                        class="staffel_price">{{number_format($discount->getDiscountAction()->do($product->price)/100, 2,",",".")}}</span>
                            </span>
                        </div>
                        <div class="price-line">
                            <label>@lang('shop/products.staffel')</label>
                            <span class="staffel-holder">
                                <span class="staffel">{{$discount->getDiscountCondition()->getQuantity()}}</span> @lang('shop/products.pieces')
                            </span>
                        </div>
                    @endif
                    <div class="price-line">
                        <label>@lang('shop/products.ultra_staffel')</label>
                        <span class="vpe-holder">
                            {{$product->vpe}}@if(strpos($product->vpe, '/') === false){{ empty($product->inner_box) ? __('shop/products.pieces') : '/'.$product->inner_box}}@endif
                        </span>
                    </div>
                </div>
                @if(isset($discount))
                    <p class="staffeldiscount-message">@lang('shop/products.you_receive_staffel_discount', ['stfprice' => number_format($discount->getDiscountAction()->do($product->price)/100, 2,",",".")])</p>
                    <p class="no-staffeldiscount-message">@lang('shop/products.you_dont_receive_staffel_discount', ['pcs' => $discount->getDiscountCondition()->getQuantity(), 'stfprice' => number_format($discount->getDiscountAction()->do($product->price)/100, 2,",",".")])</p>
                @endif
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-col specification-holder">
            @if($product->hasProperties())
                <h4>@lang('shop/products.specs')</h4>
                <ul>
                    @for($index = 2; $index <= 10; $index++)
                        @if(!empty( trim($product->translation->{'property_'.$index})))
                            <li>
                                {{--@if($index === 1 && strpos($product->translation->{'property_'.$index}, ':') === false)--}}
                                    {{--<label> {{__('kms/orderOverview.description')}}</label>{{$product->translation->{'property_'.$index} }}--}}
                                {{--@else--}}
                                    <label>{{ explode(':', $product->translation->{'property_'.$index})[0] }}</label>{{ count(explode(':', $product->translation->{'property_'.$index})) > 1 ? explode(':', $product->translation->{'property_'.$index})[1] : ''}}
                                {{--@endif--}}
                            </li>
                        @endif
                    @endfor
                </ul>
            @endif
        </div>
    </div>


    <div class="grid-row related-products-header">
        <h3 class="grid-col">@lang('shop/products.different_products')</h3>
        <a class="button arrow" href="/{{$links->products->route}}">@lang('shop/products.all_products')</a>
    </div>
    <div class="grid-row related-products">
        @include('shop.partials.itemsGridLoop', ['products' => $otherProducts, 'parentlink' => $links->products->route])
    </div>
    <div class="btw-message">
        <p>{!! __('site/global.BTWDisclaimer') !!}</p>
    </div>

@endsection

@section('below-content')
    <div class="c-zoom__glass  js-zoom-glass">
        <img class="c-zoom__glass-image  js-zoom-glass-image" src="" alt="">
    </div>
@endsection

@section('extra-js')

    <script src="/js/site/fslightbox.js"></script>


    @if(sizeof($product->documents) > 1)

        <script>

            var imageSliderSetting = new SliderSetting({
                sliderId: 'image-slider',
                slideQuery: '#image-slider .placeholder figure',
                slideContentQuery: 'span',
                definedPreviousNext: true,
                navigationButtons: '#image-slider .nav-item',
                dots: '#image-slider .controllers .dots .dot',
                //thumbs: '#image-slider .controllers .thumb-holder figure',
                // autoSlider: true,
                sliderInterval: 2500
            });
            imageSliderSetting = imageSliderSetting.prepareParameters();

            var imageSlider = new Slider(imageSliderSetting);

            imageSlider.init();

        </script>
    @endif
@endsection