@extends('site.master')
@section('title', $product->meta_title)
@section('meta_description', $product->meta_description)

@section('content')

    <section class="content">
        <div class="grid-row breadcrumb">
            <div class="grid-col">
                <a href="/aanbod">Aanbod</a>
                <span>&rsaquo;</span>
                <a href="/aanbod/{{$product->categories[0]->getParent()->translations[0]->slug}}">{{$product->categories[0]->getParent()->translations[0]->name }}</a>
                <span>&rsaquo;</span>
                <a href="/aanbod/{{$product->categories[0]->getParent()->translations[0]->slug}}/{{$product->categories[0]->translations[0]->slug}}">{{$product->categories[0]->translations[0]->name}}</a>
                <span>&rsaquo;</span> <b>{{$product->title}}</b>
            </div>
        </div>

        <div class="grid-row product-title">
            <div class="grid-col titleHolder">
                <h1 class="{{$product->categories[0]->getParent()->code_name}}">{{$product->title}}</h1>

                <div class="contact-dude">
                    <p>Vragen? Bel Mark<br>
                        <a href="tel:{{ \Config::get('business.phone_call') }}">{{ \Config::get('business.phone_display') }}</a>
                    </p>
                    <div class="img-holder"></div>
                </div>
            </div>
        </div>
        <div class="grid-row product-holder">
            <div class="grid-col left">
                <a class="button filled yellow left-arrow"
                   href="/aanbod/{{$product->categories[0]->getParent()->translations[0]->slug}}/{{$product->categories[0]->translations[0]->slug}}">Terug
                    naar {{$product->categories[0]->translations[0]->name}}</a>
                <div class="images" id="image-slider">
                    {{-- Reference content --}}
                    {{--@foreach($product->images as $key => $image)--}}
                    {{--<figure class="image @if($key == 0) active @endif" data-reference="{{$key}}"--}}
                    {{--style="background-image: url('{{$image->medium_image_url}}');"></figure>--}}
                    {{--@endforeach--}}


                    <div id="image-slider">
                        <div class="placeholder">
                            @foreach($product->images as $key => $imageSlide)

                                <figure data-order="{{$key}}" class="image-placeholder {{$key == 0 ? 'active' : ''}} ">

                                    @foreach(['large', 'medium', 'small'] as $imageSize)
                                        <span class="{{$imageSize}}"
                                              style="background-image: url('{{ $imageSlide->{$imageSize.'_image_url'} }}');"></span>
                                    @endforeach

                                </figure>

                            @endforeach
                        </div>
                        @if(sizeof($product->images) > 1)
                            <div class="controllers">
                                <div class="nav-item previous"
                                     data-order="{{(sizeof($product->images) - 1)}}">
                                </div>
                                <div class="thumb-holder">
                                    @foreach($product->images as $key => $imageSlide)

                                        <figure data-order="{{$key}}" class="{{$key == 0 ? 'active' : ''}} ">
                                            <span class="{{$imageSize}}"
                                                  style="background-image: url('{{ $imageSlide->thumb_image_url}}');"></span>
                                        </figure>

                                    @endforeach
                                </div>
                                <div class="nav-item next" data-order="1">
                                </div>
                            </div>
                        @endif
                    </div>


                </div>
                <ul class="image-nav">
                    @for($i = 0; $i < count($product->images); $i++)
                        <li @if($i == 0) class="active" @endif data-reference="{{$i}}"></li>
                    @endfor
                </ul>
            </div>
            <div class="grid-col right">
                <h3>{{ $product->translation->title }}</h3>
                {!! $product->translation->description !!}

                <div class="spec-holder">
                    @if(!empty($product->translation->pricing))
                        <div class="top">@endif
                            @if(!empty($product->insurance))
                                <div class="spec">
                                    <h4 class="insurance">{{ __('kms/products.insurance_header') }}</h4>
                                    <p> &euro; {{ $product->insurance }},-</p>
                                </div>
                            @endif
                            @if(!empty($product->empty_weight) || !empty($product->max_weight) || !empty($product->load))
                                <div class="spec">
                                    <h4 class="weight">{{ __('kms/products.weight_header') }}</h4>
                                    @if(!empty($product->empty_weight))<p>{{ __('kms/products.empty_weight') }}
                                        : {{ $product->empty_weight }} kg</p>@endif
                                    @if(!empty($product->max_weight))<p>{{ __('kms/products.max_weight') }}
                                        : {{ $product->max_weight }} kg</p>@endif
                                    @if(!empty($product->load))<p>{{ __('kms/products.load') }}: {{ $product->load }}
                                        kg</p>@endif
                                </div>
                            @endif
                            @if(!empty($product->translation->pricing))</div>@endif
                    @if(!empty($product->translation->pricing))
                        <div class="spec">
                            <h4 class="pricing">{{ __('kms/products.pricing_header') }}</h4>
                            {!! $product->translation->pricing !!}
                        </div>
                    @endif
                    @if(!empty($product->outer_measure) || !empty($product->outer_measure))
                        <div class="spec measurements">
                            <h4 class="measurements">{{ __('kms/products.measurements_header') }}</h4>
                            @if(!empty($product->outer_measure))
                                <p>
                                    <label>{{ __('kms/products.outer_measure') }}</label>
                                <div class="values">
                                    <span class="first">L</span> {{ explode('x', strtolower($product->outer_measure))[0] }}m
                                    <span>B</span> {{ explode('x', strtolower($product->outer_measure))[1] }}m
                                    <span class="last">H</span> {{ explode('x', strtolower($product->outer_measure))[2] }}m
                                </div>
                                </p>
                            @endif
                            <br>
                            @if(!empty($product->inner_measure))
                                <p>
                                    <label>{{ __('kms/products.inner_measure') }}</label>
                                <div class="values">
                                    <span class="first">L</span> {{ explode('x', strtolower($product->inner_measure))[0] }}m
                                    <span>B</span> {{ explode('x', strtolower($product->inner_measure))[1] }}m
                                    <span class="last">H</span> {{ explode('x', strtolower($product->inner_measure))[2] }}m
                                </div>
                                </p>
                            @endif
                            @if(!empty($product->volume))
                                <br>
                                <p>
                                    <label>{{ __('kms/products.volume') }}</label>
                                <div class="values">{{ $product->volume }} m&sup3;</div>
                                </p>
                            @endif
                        </div>
                    @endif
                    @if(!empty($product->volt) ||  !empty($product->fusing))
                        <div class="spec">
                            <h4 class="power">{{ __('kms/products.power_header') }}</h4>
                            @if(!empty($product->volt))<p>{{ __('kms/products.volt') }}: {{ $product->volt }} VAC</p>@endif
                            @if(!empty($product->fusing))<p>{{ __('kms/products.fusing') }}: {{ $product->fusing }}A</p>@endif
                        </div>
                    @endif
                    @if(!empty($product->min_temp) || !empty($product->max_temp))
                        <div class="spec">
                            <h4 class="temp">{{ __('kms/products.temp_header') }}</h4>
                            <p>{{ __('kms/products.min_temp') }}: {{ $product->min_temp }} &deg;C</p>
                            <p>{{ __('kms/products.max_temp') }}: {{ $product->max_temp }} &deg;C</p>
                        </div>
                    @endif
                    @if(!empty($product->translation->specifics))
                        <div class="spec specifics">
                            <h4 class="specifics">{{ __('kms/products.specifics_header') }}</h4>
                            {!! $product->translation->specifics !!}
                        </div>
                    @endif
                </div>

                <div class="order-box">
                    <span class="amount-label">Aantal:</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>
                    </div>
                    <a class="button filled yellow" href=""
                       onclick="ShoppingCart.addProductToShoppingcart({{$product->id}}); return false;">Voeg toe aan
                        offerteaanvraag</a>
                </div>
            </div>
        </div>


        <div class="grid-row related-products-header">
            <h3 class="grid-col">Andere producten</h3>
        </div>
        <div class="grid-row related-products">
            @foreach($otherProducts as $key=>$categoryItem)
                <div class="grid-col product">
                    {{-- Temp. implementation --}}
                    <a href="/producten/{{ $categoryItem->item->translation->slug }}">
                        <div class="imgHolder" style="
                        @if(count($categoryItem->item->images) > 0)
                                background-image: url('{{$categoryItem->item->images[0]->medium_image_url}}');
                        @endif
                                ">
                            <span class="yellow-block-overlay"></span>
                        </div>
                        <div class="grid-row titleHolder">
                            @if(!empty($categoryItem->item->min_temp) && !empty($categoryItem->item->max_temp))
                                <div class="grid-col temp-icon-holder {{intval($categoryItem->item->min_temp) < 0 ? 'freeze' : 'cool' }}">
                                    <span class="min-temp">{{$categoryItem->item->min_temp}}&deg;</span>
                                    <span class="temp-icon"> </span>
                                    <span class="max-temp">{{$categoryItem->item->max_temp}}&deg;</span>
                                </div>
                            @endif
                            <div class="grid-col product-title">
                                <h4>{{ $categoryItem->item->translation->title }}</h4>
                                {!! $categoryItem->item->translation['short_description'] !!}
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
            <div class="grid-col product">
                <div class="grid-col question-block pull-right">
                    <div>
                        <p>Heeft u vragen <br>
                            of opmerkingen?</p>
                        <p>bel
                            <a href="tel:{{ \Config::get('business.phone_call') }}">{{ \Config::get('business.phone_display') }}</a>
                            <br>
                            <a href="mailto:{{ \Config::get('business.email') }}">{{ \Config::get('business.email') }}</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('extra-js')
    @if(sizeof($product->images) > 1)
        <script>

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

            var imageSlider = new Slider(imageSliderSetting);

            imageSlider.init();

        </script>
    @endif
@endsection