@extends('site.master')

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

@section('content')

    <div class="grid-row top">
        <div class="grid-col product-left">

            <div class="breadcrumb">
                <a href="/">Eurotools</a>
                <span>&rsaquo;</span>
                <a href="/{{$links->products->route}}">{{$links->products->name}}</a>
                <span>&rsaquo;</span>
                <a href="/{{$links->products->route}}/{{$product->categories()->first()->translation->slug}}">{{$product->categories()->first()->translation->name}}</a>
                <span>&rsaquo;</span>
                {{$product->translation->name}}
            </div>

            <div class="images" id="image-slider">
                <div id="image-slider">
                    <div class="nav-item previous"
                         data-order="{{(sizeof($product->images) - 1)}}">
                    </div>
                    <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>
                    <div class="nav-item next" data-order="1">
                    </div>
                    @if(sizeof($product->images) > 1)
                        <div class="controllers">
                            <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>
                    @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 product-right">
            <div class="button-holder">
                <div class="fake-button">
                    <label>@lang('shop/products.product_code'):</label> {{ $product->stock_keeping_unit }}
                </div>
                <div class="fake-button">
                    <label>@lang('shop/products.long_product_code'):</label> 5275 0239 3402 {{ $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>{{ $product->price%100 }}</span></div>
                <div class="order-box">
                    <span class="amount-label">Aantal stuks</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" href=""
                       onclick="ShoppingCart.addProductToShoppingcart({{$product->id}}, '{{urlencode(get_class($product))}}'); return false;">@include('site.svg.icon.shopping_cart')
                        In winkelwagen</a>
                </div>
            </div>

            <div class="right">
                <div class="price-box">
                    <label>@lang('shop/products.price_label')</label>{{$product->price/100}}
                    <label>@lang('shop/products.staffel_price_label')</label>{{$discount->getDiscountAction()->do($product->price)}}
                    <label>@lang('shop/products.staffel')</label>{{$discount->getDiscountCondition()->getQuantity()}}
                    st.
                    <label>@lang('shop/products.ultra_staffel')</label>96 st.
                </div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-col specification-holder">
            <h4>Specificaties</h4>
            <ul>
            @for($index = 1; $index <= 10; $index++)
                <li><label>{{ explode(':', $product->translation->{'property_'.$index})[0] }}</label>{{ count(explode(':', $product->translation->{'property_'.$index})) > 1 ? explode(':', $product->translation->{'property_'.$index})[1] : ''}}</li>
            @endfor
            </ul>
        </div>
        <div class="grid-col description-holder">
            <h4>Omschrijving</h4>
            <div class="text-holder">
                {!! $product->translation->description !!}
            </div>
            <div class="order-box">
                <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" href=""
                   onclick="ShoppingCart.addProductToShoppingcart({{$product->id}}); return false;">@include('site.svg.icon.shopping_cart')
                    In winkelwagen</a>
            </div>
        </div>
    </div>


    <div class="grid-row related-products-header">
        <h3 class="grid-col">Andere producten</h3>
        <a class="button arrow pull-right" href="/{{$links->products->route}}">Alle producten</a>
    </div>
    <div class="grid-row related-products">
        @include('shop.partials.itemsGridLoop', ['products' => $otherProducts, 'parentlink' => $links->products->route])
    </div>
@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 .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