@extends('layouts.front')

@section('content')

    <div id="page" class="project-page" data-barba="container" data-barba-namespace="pph3">


      <!-- Project Page Header -->
        <div data-animate="true" class="project-page-header style_3">

            <!-- Project Page Head -->
            <div class="project-head" style="background: {{ $project->color_code }}">

                <!-- Project Title & Category -->
                <div class="project-title">

                    <!-- Project Title -->
                    <h1 class="big-title">{{ $project->title }}</h1>
                    <!-- /Project Title -->

                    <!-- Project Category -->
                    <div class="project-cat">
	                	@forelse($project->services as $project_service)
	                		@if($loop->index > 0 ) <br> @endif {{$project_service->name}}
	                	@empty
	                	@endforelse
	                </div>
                    <!-- /Project Category -->

                </div>
                <!-- /Project Title & Category -->
            </div>
            <!-- /Project Page Head -->

            <!-- Project Details -->
            <div class="project-details">

                <!-- Project Metas -->
                <div class="project-metas">

                    <!-- Project Meta -->
                    <div class="project-meta project-other">

                        @if($project->year)<h5>{{ $project->year }}</h5>@endif

                    </div>
                    <!-- /Project Meta -->

                    <!-- Project Meta -->
                    <div class="project-meta meta-summary" style="margin-top:4px;">

                        @if($project->text_top)
                        <h5>{!! $project->text_top !!}</h5>
                        @endif

                    </div>
                    <!-- /Project Meta -->

                </div>
                <!-- /Project Metas -->

            </div>
            <!-- /Project Details -->

        </div>
        <!-- /Project Page Header -->


        <!-- Page Content -->
        <div id="content" class="page-content">

            <!--Section-->
            <div class="section">

                @if(count(json_decode($project->gallery_top)) > 0)   
                <div class="wrapper">

                    @foreach(json_decode($project->gallery_top) as $image)
                    <div class="c-col-12">

                        <!--Single Image-->
                        <div class="single-image">

                            <img data-animation="blockUp" data-duration="1.5" data-color="{{ $project->color_code }}" class="has-anim" alt="{{ $project->title }} Gallery Image" src="{{ asset('storage/'. $image) }}">

                        </div>
                        <!--/Single Image-->

                    </div>
                    @endforeach

                </div>
                @endif

                @if($project->text_middle)
                <div class="wrapper-small">

                    <!--Column-->
                    <div class="c-col-8">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h5 class="has-anim" data-stagger="0.01" data-duration="1" data-delay=".1" data-animation="wordsUp">
                                {!! $project->text_middle !!}
                            </h5>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                </div>
                @endif

                @if(count(json_decode($project->gallery_middle)) > 0) 
                <div class="wrapper">

                    @foreach(json_decode($project->gallery_middle) as $image)
                    <div class="c-col-12">

                        <!--Single Image-->
                        <div class="single-image">

                            <img data-animation="blockUp" data-duration="1.5" data-color="{{ $project->color_code }}" class="has-anim" alt="{{ $project->title }} Gallery Image" src="{{ asset('storage/'. $image) }}">

                        </div>
                        <!--/Single Image-->

                    </div>
                    @endforeach

                </div>
                @endif


                @if($project->text_bottom)
                <div class="wrapper-small">

                    <!--Column-->
                    <div class="c-col-4">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h2 class="has-anim" data-stagger="0.02" data-duration="1" data-delay=".1" data-animation="charsUp">
                                {{ $project->subtitle_bottom }}
                            </h2>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-8" style="margin-top:18px;">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h5 style="color: rgba(25,27,29,.6)" class="has-anim" data-stagger="0.01" data-duration="1" data-delay=".1" data-animation="wordsUp">
                                {!! $project->text_bottom !!}
                            </h5>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                </div>
                @endif

                @if(count(json_decode($project->gallery_bottom)) > 0)
                <div class="wrapper">

                    @foreach(json_decode($project->gallery_bottom) as $image)
                    <div class="c-col-12">

                        <!--Single Image-->
                        <div class="single-image">

                            <img data-animation="blockUp" data-duration="1.5" data-color="{{ $project->color_code }}" class="has-anim" alt="{{ $project->title }} Gallery Image" src="{{ asset('storage/'. $image) }}">

                        </div>
                        <!--/Single Image-->

                    </div>
                    @endforeach

                </div>
                @endif

            </div>
            <!--/Section -->

        </div>
        <!-- /Page Content -->

        <!-- Next Project Section-->
        <div id="#nextProj" class="next-project-section section no-margin">

            <a href="{{ route('front.project', $next_project->slug) }}">

                <!-- Next Project Image-->
                <div class="next-project-image">

                    <img alt="Next Project Image" src="{{ asset('storage/' . $next_project->main_image) }}">

                </div>
                <!--/ Next Project Image-->

                <!-- Next Project Meta Wrapper-->
                <div class="wrapper-small">

                    <div class="c-col-12">

                        <div class="next-project-wrap">

                            <!-- Next Project Text-->
                            <span>Next Project</span>
                            <!--/ Next Project Text-->

                            <!-- Next Project Title-->
                            <h1 class="next-project-title">{{ $next_project->title }}</h1>
                            <!--/ Next Project Title-->

                        </div>

                    </div>


                </div>
                <!--/ Next Project Meta Wrapper-->

            </a>

            <!--Section -->
            <div class="section no-margin">

                <!--Wrapper-->
                <div class="wrapper-full no-margin">

                    <!--Column-->
                    <div class="c-col-12 no-gap no-margin">

                        <!-- Page Nav -->
                        <div class="alioth-page-nav" style="background-color: #f1f1f1">

                            <!--Page URL-->
                            <a href="{{ route('front.projects') }}">

                                <!-- Page Title -->
                                <div class="page-title">@lang('Our Projects')</div>
                                <!-- /Page Title -->

                                <!-- Page Sub-Title -->
                                <div class="page-sub-title">@lang('Back to portolio')</div>
                                <!-- /Page Sub-Title -->

                            </a>

                        </div>
                        <!-- /Page Nav -->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

            </div>
            <!--/Section -->

        </div>
        <!--/ Next Project Section-->

    </div>

@endsection