@extends('front.layout.main')

@section('content')


    <section class="poct-section poct-section--is-inside-product">
        <div class="container">
            <ul class="links product__links">
                <li class="links__item">
                    <a class="links__link" href="/">Home</a>
                </li>
                <li class="links__item">
                    <a class="links__link" href="{{ $langSlug }}/{{ $productsSlug }}">Products</a>
                </li>
                <li class="links__item">
                    <a class="links__link" href="{{ $langSlug }}/{{ $productsSlug }}/{{ $currentPage->category->languages->where('lang_short', $lang)->first()->pivot->slug }}">{{ $currentPage->category->languages->where('lang_short', $lang)->first()->pivot->title }}</a>
                </li>
                <li class="links__item">
                    <a class="links__link" href="{{ $langSlug }}/{{ $productsSlug }}/{{ $currentPage->category->languages->where('lang_short', $lang)->first()->pivot->slug }}/{{ $currentPage->languages->where('lang_short', $lang)->first()->pivot->slug }}">{{ $currentPage->languages->where('lang_short', $lang)->first()->pivot->title }}</a>
                </li>
            </ul>
            <div class="poct-section">
                <div class="poct-section__main">
                    <div class="poct-i-product">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="poct-i-product__left">
                                    @if(count($currentPage->galleriesImage) > 0)

                                        <div class="poct-i-product__image-panel">
                                            <a href="{{ asset('uploads/images/big/'.$allImages[$currentPage->galleriesImage->first()->image->image_id]) }}" id="poct-i-fancyImage">
                                                <img class="img-fluid" src="{{ asset('uploads/images/big/'.$allImages[$currentPage->galleriesImage->first()->image->image_id]) }}" alt="" />
                                            </a>
                                        </div>

                                        @if(count($currentPage->galleriesImage) > 1)
                                        <div class="row poct-i-product__s-images">
                                            <div class="col-md-8">
                                                <div class="row">
                                                    @foreach($currentPage->galleriesImage as $key => $row)
                                                        @if($key > 0)
                                                        <div class="col-md-4 col-sm-2">
                                                            <div class="poct-i-product__s-image">
                                                                <img class="img-fluid" src="{{ asset('uploads/images/thumbs/'.$allImages[$row->image->image_id]) }}" alt="" />
                                                            </div>
                                                        </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="poct-i-product__right">
                                    <div class="poct-i-product__title">
                                        <h1 class="poct-section__title">
                                            <span>{{ $currentPage->languages->where('lang_short', $lang)->first()->pivot->title }}</span>
                                        </h1>
                                        <p class="poct-i-product__number">Product number: {{ $currentPage->codenumber }}</p>
                                    </div>
                                    <div class="poct-i-product__content">
                                        {!!  $currentPage->languages->where('lang_short', $lang)->first()->pivot->text  !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="poct-section--accordion">
        <div class="poct-section__main">
            <div class="accordion">
                <div class="accordion__nav">
                    <div class="container">
                        <ul class="accordion__list">
                            @if($currentPage->languages->where('lang_short', $lang)->first()->pivot->detailed)
                            <li class="accordion__item">
                                <a class="accordion__link accordion__link--is-active" data-toggle="detailed">Detailed description</a>
                            </li>
                            @endif

                            @if($currentPage->languages->where('lang_short', $lang)->first()->pivot->specifications)
                            <li class="accordion__item">
                                <a class="accordion__link" data-toggle="specifications">Specifications</a>
                            </li>
                            @endif

                            @if($currentPage->languages->where('lang_short', $lang)->first()->pivot->downloads)
                            <li class="accordion__item">
                                <a class="accordion__link" data-toggle="downloads">Downloads</a>
                            </li>
                            @endif

                            @if($currentPage->languages->where('lang_short', $lang)->first()->pivot->faq)
                            <li class="accordion__item">
                                <a class="accordion__link" data-toggle="faq">FAQ</a>
                            </li>
                            @endif
                        </ul>
                    </div>
                </div>
                <div class="container">

                    <div class="accordion__content is-active" id="detailed">
                        {!! $currentPage->languages->where('lang_short', $lang)->first()->pivot->detailed !!}
                    </div>
                    <div class="accordion__content" id="specifications">
                        {!! $currentPage->languages->where('lang_short', $lang)->first()->pivot->specifications !!}
                    </div>
                    <div class="accordion__content" id="downloads">
                        {!! $currentPage->languages->where('lang_short', $lang)->first()->pivot->downloads !!}
                    </div>
                    <div class="accordion__content" id="faq">
                        {!! $currentPage->languages->where('lang_short', $lang)->first()->pivot->faq !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="poct-section poct-section--is-r-products">
        <div class="container">
            <h2 class="poct-section__title poct-section__title--b-center">
                <span>Related </span>Products</h2>
            <div class="poct-section__main">
                <div class="row">
                                        <div class="col-md-4">
                        <div class="poct-product poct-product--is-center">
                            <div class="poct-product__image">
                                                                <a class="poct-product__image" href="/products/cholesterol/spinit-instrument">
                                    <img class="img-fluid" src="http://poct.local/uploads/images/big/2_bitmap.png" alt="Spinit Instrument">
                                </a>
                                                            </div>
                            <h2 class="poct-product__title">
                                <a href="/products/cholesterol/spinit-instrument">Spinit Instrument</a>
                            </h2>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="poct-product poct-product--is-center">
                            <div class="poct-product__image">
                                                                <a class="poct-product__image" href="/products/cholesterol/mission-cholesterol-meter">
                                    <img class="img-fluid" src="http://poct.local/uploads/images/big/8_product-image.png" alt="Mission Cholesterol Meter">
                                </a>
                                                            </div>
                            <h2 class="poct-product__title">
                                <a href="/products/cholesterol/mission-cholesterol-meter">Mission Cholesterol Meter</a>
                            </h2>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="poct-product poct-product--is-center">
                            <div class="poct-product__image">
                                                                <a class="poct-product__image" href="/products/cardiac-markers/piccolo-xpress-analyser">
                                    <img class="img-fluid" src="http://poct.local/uploads/images/big/7_product-2.png" alt="Piccolo Xpress Analyser">
                                </a>
                                                            </div>
                            <h2 class="poct-product__title">
                                <a href="/products/cardiac-markers/piccolo-xpress-analyser">Piccolo Xpress Analyser</a>
                            </h2>
                        </div>
                    </div>
                                    </div>
            </div>
        </div>
    </section>
















@stop