@extends('template.index')

@section('title','Champions Consulting - '.$portfolio->title_seo)
@section('site_title','Champions Consulting - '.$portfolio->title_seo)
@section('description','Champions Consulting - '.$portfolio->description_seo)
@section('keywords','Champions Consulting - '.$portfolio->keywords)
@section('og_title','Champions Consulting - '.$portfolio->title_seo)
@section('og_description','Champions Consulting - '.$portfolio->description_seo)
@section('og_image',asset('medias/photos/portfolio/cover/1200x630-'.$portfolio->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;&nbsp;
                        <a href="{{ route('portfolioList') }}">{!! trans('general.portfolio') !!}</a>&nbsp;/&nbsp;&nbsp;
                        <span>{{ $portfolio->title }}</span>
                    </div>
                </div>

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

    <!-- Section -->
    <section class="page-section">
        <div class="container relative">
            <h2 class="section-title font-alt mb-70 mb-sm-40">
                {{ $portfolio->title }}
            </h2>
            <!-- Intro Text -->
            <div class="row mb-70 mb-xs-30">
                <div class="col-md-8 col-md-offset-2">
                    <div class="section-text align-center mb-70 mb-xs-40">
                                            </div>
                </div>
            </div>
            <!-- End Intro Text -->

            <!-- Main Image -->
            <div class="post-prev-img mb-30">
                <a href="{{ asset('medias/photos/portfolios/cover/1140x642-'.$portfolio->cover_image) }}"
                   class="lightbox-gallery-2 mfp-image">
                    <img src="{{ asset('medias/photos/portfolios/cover/1140x642-'.$portfolio->cover_image) }}"
                         alt="{{ $portfolio->cover_image_alt }}"/>
                </a>
            </div>
            <!-- End Main Image -->

            <!-- Photo Grid -->
            <div class="row multi-columns-row mb-30 mb-xs-10">
            @foreach($portfolio->photos as $photo)
                <!-- Photo Item -->
                    <div class="col-sm-6 col-md-4 col-lg-4 mb-md-10">

                        <div class="post-prev-img">
                            <a href="{{ asset('medias/photos/portfolios/photos/1140x642-'.$photo->image) }}"
                               class="lightbox-gallery-2 mfp-image"><img
                                    src="{{ asset('medias/photos/portfolios/photos/370x200-'.$photo->image) }}"
                                    alt="{{ $photo->image_alt }}"/></a>
                        </div>

                    </div>
                    <!-- End Photo Item -->
                @endforeach
            </div>
            <!-- End Photo Grid -->

            {{--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>

            {{--related products--}}
            @if(count($others)>0)
            <!-- Divider -->
                <hr class="mt-20 mb-0 ">
                <!-- End Divider -->

                <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('portfolioShow',['portfolioId'=>$other->url_rewrite])}}"><img
                                                src="{{asset('medias/photos/portfolios/cover/650x418-'.$other->cover_image) }}"
                                                alt="{{ $other->img_alt}}"></a>
                                    </div>

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

                                    <div class="post-prev-more align-center">
                                        <a href="{{route('portfolioShow',['portfolioId'=> $other->url_rewrite])}}"
                                           class="btn btn-mod btn-gray btn-round"><i
                                                class="fa fa-eye"></i> {{ __("portfolio.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