@extends('layouts.front')

@section('content')

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


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

            <!-- Project Header Image -->
            <div class="project-fetaured-image">

                <img alt="{{ $project->title }} Featured Image" src="{{ asset('storage/'.$project->main_image )}}">

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

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

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

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

                </div>
                <!-- /Project Title & Cat -->

                <!-- Project Metas -->
                <div class="project-metas wrapper-medium no-gap">

                    <!-- Project Meta -->
                    <div class="project-meta project-cats c-col-4 no-gap">

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

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

                    
                    <div class="project-meta meta-summary c-col-8">

                        @if($project->text_top)
                        <h5 style="padding-top: 11px;">{!! $project->text_top !!}</h5>
                        @endif

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

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

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

                </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)  
            		@foreach(json_decode($project->gallery_top) as $image)
            			@if($loop->odd)
            				<div class="wrapper-full no-margin">

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

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

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

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

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

			                </div>
            			@else
            				<div class="wrapper-full">
			                    <!--Column-->
			                    <div class="c-col-3">
			                    </div>
			                    <!--/Column-->

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

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

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

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

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

			                </div>
            			@endif
            		@endforeach
            	@endif

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

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

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

                            <h3 class="has-anim" data-stagger="0.1" data-duration="1.5" data-delay=".1" data-animation="linesUp">
                                {!! $project->text_middle !!}
                            </h3>

                        </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)
                    	@if($loop->iteration <= 2)
							<div class="c-col-6">

		                        <!--Single Image-->
		                        <div data-lighbox="{{ asset('storage/'. $image) }}" class="single-image">

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

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

		                    </div>
                    	@else
                    		<div class="c-col-12">

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

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

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

		                    </div>
                    	@endif
                    @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.1" data-duration="1" data-delay=".1" data-animation="linesUp">
                                {!! $project->text_bottom !!}
                            </h5>

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

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

                </div>
                @endif

            </div>


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

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

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

                        <!-- Image Carousel -->
                        <div data-navigate="scroll" class="alioth-image-carousel">

                            <!-- Carousel Wrapper -->
                            <div class="ai-wrapper">

                                @foreach(json_decode($project->gallery_bottom) as $image)
                                <div class="ai-image">
                                    <img alt="{{ $project->title }} Gallery Image" src="{{ asset('storage/'. $image) }}">
                                </div>
                                @endforeach

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

                        </div>
                        <!-- /Image Carousel -->

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

                </div>
                @endif
                <!--/Wrapper-->

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

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

        <!-- Next Project Section-->
        <div 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 no-nargin">

                    <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