@extends('site.master')

@section('title', $product->translation->name . ' | ' . $page->translation->meta_title)
{{--@section('meta_description', $product->translation->meta_description)--}}

@section('content')

    <section class="">
        <div class="o-product  l-contain">

            <div class="o-product__info">

                @include('site.components.button', [
                    'buttonType' => 'text',
                    'modifiers' => ['icon', 'is-reversed'],
                    'icon' => 'arrowhead--left',
                    'buttonText' => 'Terug naar ' . $product->categories->first()->translation->name,
                    'buttonLink' => $links->categories->route . '/'. $product->categories->first()->translation->slug,
                    'buttonClasses' => 'u-spacing-mb3',
                ])

                <div class="o-product__breadcrumbs">
                     @include('site.components.breadcrumbs', [
                        'activeCategoryId' => $product->categories->first()->id,
                        'modifiers' => 'show-last-icon'
                     ])
                </div>

                <h1 class="o-product__title">{{$product->translation->name}}</h1>
                <p class="o-product__price">{{ $regionInfo->getCurrencySymbol().' '.$regionInfo->getNumberFormat()->centsToCurrency($product->getTotal()) }} <span class="o-product__btw">incl. btw</span></p>

                <div class="o-product__order  js-add-product" data-product-id='{{ $product->id }}' data-product-type='{{ get_class($product) }}'>

{{--                    <input class="c-input  o-product__amount  js-add-product-quantity" type="number" value="{{ $product->quantity_step }}" step="{{ $product->quantity_step }}" min="{{ $product->quantity_step }}" max="999"/>--}}
                    <input class="c-input  o-product__amount  js-add-product-quantity" type="number" value="1" step="1" min="1" max="999"/>
                    <div class="o-product__add">
                        @include('site.components.button', [
                        'isButton' => true,
                        'buttonClasses' => 'js-add-product-button',
                        'properties' => 'data-product-id='.$product->id.' data-product-type='.urlencode(get_class($product)).'',
                        'modifiers' => ['icon', 'positive', 'is-reversed'],
                        'icon' => 'shoppingcart',
                        'buttonText' => __('site/global.place_in_cart')
                    ])
                    </div>
                </div>

                <div class="o-product__usp">
                    <ul class="c-usp">
                        @foreach(__('site/product.usp') as $value => $key)
                            <li class="c-usp__item">
                                <p class="c-usp__text">
                                    <span class="c-usp__highlight">{{$key}}</span>
{{--                                    <span class="c-usp__highlight">{{$value}}</span>--}}
{{--                                    <span>{{$key}}</span>--}}
                                </p>
                            </li>
                        @endforeach
                    </ul>
                </div>

            </div>

            <div class="o-product__images">
                @if(!empty($product->images && $product->images->count() > 0))

                    <div class="o-product__picture">

                        <div class="o-product__controls  js-product-slider__controls">
                            <button class="o-product__control  prev"></button>
                            <button class="o-product__control  next"></button>
                        </div>
                        <div class="o-product__frame">
                            <div class="js-product-slider">
                                @foreach($product->images as $image)
                                    <img src="{{$image->medium_image_url}}" alt="image">
                                @endforeach
                            </div>
                        </div>

                    </div>

                    <div class="o-product__gallery  js-product-slider__nav">
                        @foreach($product->images as $image)
                            <img class="o-product__thumb" src="{{$image->thumb_image_url}}" alt="image">
                        @endforeach
                    </div>

                @else
                    <img src="/img/no-image.svg" alt="">
                @endif
            </div>

        </div>


        <div class="o-details  o-block">
            <div class="o-details__main">
                <div class="o-details__info">
                    <h2 class="o-details__title">@lang('site/product.description')</h2>
                    <div class="o-details__text">
                        {!! $product->translation->description !!}
                    </div>

                    <p class="o-details__text  o-details__text--default">
                        @lang('site/product.default_description')
                    </p>

                    @if($product->downloads->count() > 0)
                        <h2 class="o-details__title  u-vspacing-mt-m">@lang('site/product.downloads')</h2>

                        <ul class="c-downloads">
                            @foreach($product->downloads as $download)
                                {{ debug($download) }}
                                <li class="c-downloads__item">
                                    <a class="c-downloads__link" target="_blank" href="{{ $download->getFileUrlAttribute() }}">{{$download->name}}</a>
                                </li>
                            @endforeach
                        </ul>

                    @endif

                </div>

                @if(!empty($product->translation->specs))
                    <div class="o-details__specs">
                        <h2 class="o-details__title  o-details__title--padded">@lang('site/product.specifications')</h2>
                        <table class="o-details__table">
                            <tbody>
                                @foreach($product->translation->getSpecs() as $spec)
                                    <tr class="o-details__row">
                                        <td class="o-details__label">{{ $spec[0] }}:</td>
                                        <td class="o-details__value">
                                            {!! $spec[1] !!}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>


        {{-- {!! $product->translation->features !!} --}}
        {{-- {{$product->translation->return}} --}}


        <div class="o-block  l-contain">
            @include('site.organisms.servicepoint', [
                'servicePointLabel' => __('site/product.service_point.label'),
                'servicePointHeading' => __('site/product.service_point.heading'),
                'servicePointButtonText' => __('site/product.service_point.buttonText'),
                'servicePointButtonLink' => $links->faq->route
            ])
        </div>

    </section>

    {{--
        TODO:
        Temporary inline references to CSS and JS for tiny slider.
        Move to the apropriate place
    --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
    <script>
        var productSlider = tns({
            container: '.js-product-slider',
            items: 1,
            center: true,
            controlsContainer: '.js-product-slider__controls',
            navContainer: '.js-product-slider__nav',
            navAsThumbnails: true,
            arrowKeys: true,
        });
    </script>
@endsection