@extends(get_view('index'))
@section('title'){{ $product->content->name . ' - ' ?? '' }}@endsection
@section('menu-active-products') current-menu-item @endsection
@section('header')
<link rel="stylesheet" href="{{ get_asset('css/lightbox/lightbox.min.css') }}">
@endsection
@section('content')

<div id="site-main" class="site-main">
    <div id="main-content" class="main-content">
        <div id="primary" class="content-area">
            
            @include(get_view('components.pages.page-title'), [
                'title' => $product->content->name ?? translate('product'),
                'breadcrumb_links' => [
                    [
                        'title' => $product->category->content->name ?? translate('category'),
                        'url' => url('category/'.$product->category->content->url ?? '')
                    ]
                ]
            ])


            <div id="content" class="site-content" role="main">
                <div class="shop-details zoom" data-product_layout_thumb="scroll" data-zoom_scroll="true" data-zoom_contain_lens="true" data-zoomtype="inner" data-lenssize="200" data-lensshape="square" data-lensborder="" data-bordersize="2" data-bordercolour="#f9b61e" data-popup="false">	
                    <div class="product-top-info">
                        <div class="section-padding">
                            <div class="section-container p-l-r">
                                <div class="row">
                                    <div class="product-images col-lg-7 col-md-12 col-12">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="content-thumbnail-scroll">
                                                    <div class="image-thumbnail slick-carousel slick-vertical" data-asnavfor=".image-additional" data-centermode="true" data-focusonselect="true" data-columns4="5" data-columns3="4" data-columns2="4" data-columns1="4" data-columns="4" data-nav="true" data-vertical="&quot;true&quot;" data-verticalswiping="&quot;true&quot;">
                                                        
                                                        @foreach ($product->all_images as $key => $value)
                                                        <div class="img-item slick-slide">
                                                            <span class="img-thumbnail-scroll">
                                                                <img src="{{ Common::get_product_small_image($product->id, $value->name) }}" alt="" style="max-width: 100%;">
                                                            </span>
                                                        </div>
                                                        @endforeach

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-10">
                                                <div class="scroll-image main-image">
                                                    <div class="image-additional slick-carousel" data-asnavfor=".image-thumbnail" data-fade="true" data-columns4="1" data-columns3="1" data-columns2="1" data-columns1="1" data-columns="1" data-nav="true">
                                                        
                                                        @foreach ($product->all_images as $key => $value)
                                                        <div class="img-item slick-slide">
                                                            <img src="{{ Common::get_product_large_image($product->id, $value->name) }}" alt="" title="" style="max-width: 100%; max-height: 100%;">
                                                        </div>
                                                        @endforeach

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="product-info col-lg-5 col-md-12 col-12 ">
                                        <h1 class="title">{{ $product->content->name ?? '' }}</h1>

                                        @if ( $product != null )
                                            @if ( $product->content != null )
                                                @if ( $product->content->description != null )
                                                    {!! $product->content->description !!}
                                                @else
                                                <p>{{ translate('no_product_information_has_been_entered') }}</p>
                                                @endif
                                            @endif
                                        @endif
                                        
                                        <div class="social-share">
                                            <a href="http://www.facebook.com/share.php?u={{ url()->current() }}" target="_blank"
                                                rel="noreferrer" class="d-inline m-1"><i class="fa fa-facebook"></i></a>
                                            <a href="https://twitter.com/share?url={{ url()->current() }}&amp;text={{ Site::get_site_title() }}"
                                                target="_blank" rel="noreferrer" class="d-inline m-1"><i class="fa fa-twitter"></i></a>
                                            <a href="https://web.whatsapp.com/send?text={{ url()->current() }}" target="_blank"
                                                rel="noreferrer" class="d-inline m-1"><i class="fa fa-whatsapp"></i></a>
                                            <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{ url()->current() }}"
                                                target="_blank" rel="noreferrer" class="d-inline m-1"><i class="fa fa-linkedin"></i></a>
                                        </div>					
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div><!-- #content -->
        </div><!-- #primary -->
    </div><!-- #main-content -->
</div>


@endsection
@section('footer')

@endsection