@extends('template.index')

@section('title','Champions Consulting - '.$product->title_seo)
@section('site_title','Champions Consulting - '.$product->title_seo)
@section('description','Champions Consulting - '.$product->description_seo)
@section('keywords','Champions Consulting - '.$product->keywords)
@section('og_title','Champions Consulting - '.$product->title_seo)
@section('og_description','Champions Consulting - '.$product->description_seo)
@section('og_image',asset('medias/photos/products/1200x630-'.$product->image))

@section('content')
    <!-- Head Section -->
    <section class="small-section bg-dark">
        <div class="relative container align-left">
            <div class="row">
                {{--title--}}
                <div class="col-md-8">
                    <h1 class="hs-line-11 font-alt mb-20 mb-xs-0">{!! $title !!}</h1>
                    @if(!empty($sub_title))
                        <div class="hs-line-4 font-alt">
                            {!! $sub_title !!}
                        </div>
                    @endif
                </div>
                {{--breadcrumb--}}
                <div class="col-md-4 mt-30">
                    <div class="mod-breadcrumbs font-alt align-right">
                        <a href="{{ route('home') }}">{!! trans('general.home') !!}</a>&nbsp;/&nbsp;
                        <a href="{{ route('categoryList') }}">{!! trans("general.products") !!}</a>&nbsp;/&nbsp;
                        <a href="{{ route('productList',[$category->url_rewrite]) }}">{{ $category->title }}</a>&nbsp;/&nbsp;
                        <span>{{ $product->title }}</span>
                    </div>
                </div>

            </div>
        </div>
        </div>
    </section>
    <!-- End Head Section -->

    <!-- Project Details -->
    <!-- Section -->
    <section class="page-section">
        <div class="container relative">

            <!-- Product Content -->
            <div class="row mb-60 mb-xs-30">
                <div class="col-sm-12 col-md-9 col-lg-9">
                    <!-- Product Images -->
                    <div class="col-md-4 mb-md-30">

                        <div class="post-prev-img">
                            <a href="{{ asset('medias/photos/products/370x472-'.$product->image) }}"
                               class="lightbox-gallery-3 mfp-image"><img
                                    src="{{ asset('medias/photos/products/370x472-'.$product->image) }}" alt=""/></a>
                        </div>

                        <div class="row">
                            @foreach($product->photos as $photo)
                                <div class="col-xs-4 post-prev-img">
                                    <a href="{{ asset('medias/photos/products/photos/370x472-'.$photo->img) }}"
                                       class="lightbox-gallery-3 mfp-image"><img
                                            src="{{ asset('medias/photos/products/photos/370x472-'.$photo->img) }}"
                                            alt="{{ $photo->img_alt }}"/></a>
                                </div>
                            @endforeach
                        </div>

                    </div>
                    <!-- End Product Images -->

                    <!-- Product Description -->
                    <div class="col-sm-12 col-md-6 mb-xs-40">

                        <h3 class="mt-0 mb-0 font-alt">{{ $product->title }}</h3>
                        <h6 class="font-alt mb-30">{{ __('product.reference') }}: {{ $product->reference }}</h6>
                        <h5 class="widget-title font-alt">{{ __("product.description") }}</h5>
                        <div class="section-text mb-30">
                                                    </div>

                        {{--social share--}}
                        <div class="widget-title font-alt mb-10 left"><h5 class="mb-0">{{ __("general.share") }}</h5></div>
                        <div class="addthis_inline_share_toolbox"></div>

                    </div>
                    <!-- End Product Description -->

                </div>
                {{--side block--}}
                <div class="col-sm-6 col-md-3 col-lg-3">

                    <!-- Widget -->
                    <div class="widget">

                        <h4 class="widget-title font-alt">{{ __('product.categories') }}</h4>

                        <div class="widget-body">
                            <ul class="clearlist widget-posts">

                            {{--categories list--}}
                            @foreach($categories as $category)
                                <!-- Preview item -->
                                    <li class="clearfix">
                                        <a href="{{ route('productList',[$category->url_rewrite]) }}"><img
                                                src="{{ asset('medias/photos/categories/70x70-'.$category->image) }}"
                                                alt="{{ $category->title }}" class="widget-posts-img"></a>
                                        <div class="widget-posts-descr">
                                            <a href="{{ route('productList',[$category->url_rewrite]) }}"
                                               title="{{ $category->title }}">
                                                <h5 class="mt-20 font-alt">{{ $category->title }}</h5>
                                            </a>
                                        </div>
                                    </li>
                                    <!-- End Preview item -->
                                @endforeach
                            </ul>
                        </div>

                    </div>
                    <!-- End Widget -->

                </div>
            </div>
            <!-- End Product Content -->

            <!-- Divider -->
            <hr class="mt-0 mb-0 ">
            <!-- End Divider -->

            @if(!empty($others))
                {{--related products--}}
                <section class="page-section">
                    <div class="container relative">

                        <h2 class="section-title font-alt mb-70 mb-sm-40">
                            {{ __('product.related') }}
                        </h2>


                        <!-- Products Grid -->
                        <div class="row multi-columns-row">
                        @foreach($others as $other)
                            <!-- Shop Item -->
                                <div class="col-md-3 col-lg-3 mb-60 mb-xs-40">

                                    <div class="post-prev-img">
                                        <a href="{{route('productShow',['categoryId'=>$category->url_rewrite,'productId'=>$other->url_rewrite])}}"><img
                                                src="{{asset('medias/photos/products/370x472-'.$other->image) }}"
                                                alt="{{ $other->image_alt}}"></a>
                                    </div>

                                    <div class="post-prev-title font-alt align-center">
                                        <a href="{{route('productShow',['categoryId' => $category->url_rewrite, 'productId' => $other->url_rewrite])}}">{{ $other->title }}</a>
                                    </div>

                                    <div class="post-prev-more align-center">
                                        <a href="{{route('productShow',['categoryId' => $category->url_rewrite, 'productId' => $other->url_rewrite])}}"
                                           class="btn btn-mod btn-gray btn-round"><i
                                                class="fa fa-eye"></i> {{ __("product.see") }}</a>
                                    </div>

                                </div>
                                <!-- End Shop Item -->
                            @endforeach
                        </div>
                        <!-- End Products Grid -->

                    </div>
                </section>
            @endif
        </div>
    </section>
    <!-- End Section -->

@endsection

@section("js")
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c98d0f41c73f2ba"></script>
@endsection