@extends('layouts.front')

@section('content')
    <div id="page" data-barba="container">

        <!-- Page Header -->
        <div data-anim="true" class="page-header">

            <div class="page-header-wrap wrapper-small">

                <!-- Page Title -->
                <div class="page-title">
                    <h1 class="big-title">Agency Services</h1>
                </div>
                <!-- /Page Title -->

            </div>

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

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

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

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

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

                        <!--Alioth Services-->
                        <div data-anim="true" class="alioth-services style_2">

                            <!--Services Wrapper-->
                            <div class="services">
                            	@foreach($services as $service)
                                <div class="service">

                                    <!--Service Title-->
                                    <div class="service-title">{{ $service->name }}</div>
                                    <!--/Service Title-->

                                    <!--Service Toggle (Don't touch)-->
                                    <div class="service-toggle">
                                        <i class="icofont-thin-down"></i>
                                    </div>
                                    <!--/Service Toggle (Don't touch)-->

                                    <!--Service Content Wrapper-->
                                    <div class="service-wrap">

                                        <!--Service Content-->
                                        <div class="service-cont">

                                            <h2>{{ $service->bold_text }}</h2>

                                            <h5 style="color: rgba(25,27,29,.6)">{{ $service->light_text }}</h5>

                                            <!-- Button -->
                                            <div class="a-button style_1">

                                                <!-- Button URL-->
                                                <a href="{{ route('front.service', $service) }}">{{ $service->name }} Projects</a>
                                                <!--/ Button URL-->

                                                <!-- Button Icon-->
                                                <i class="icofont-arrow-right"></i>
                                                <!--/ Button Icon-->

                                            </div>
                                            <!--/ Button -->

                                            <div class="alioth-blog blog-list">

                                                @forelse($service->projects->take(5) as $project)
                                                <div class="post alioth-post">

                                                    <!--Blog Post Image-->
                                                    <div class="post-image">

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

                                                    </div>
                                                    <!--/Blog Post Image-->

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

                                                        <!--Blog Post Date-->
                                                        <div class="post-date">{{ $project->year }}</div>
                                                        <!--/Blog Post Date-->

                                                        <!--Blog Post Title-->
                                                        <div class="post-title">

                                                            <h2>{{ $project->title }}</h2>

                                                        </div>
                                                        <!--Blog Post Title-->

                                                    </a>

                                                </div>
                                                @empty
                                                @endforelse

                                                <!--Post Images (Don't Touch)-->
                                                <div class="post-images"></div>
                                                <!--/Post Images (Don't Touch)-->

                                            </div>

                                        </div>
                                        <!--/Service Content-->

                                    </div>
                                    <!--/Service Content Wrapper-->

                                </div>
                                @endforeach

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

                        </div>
                        <!--/Alioth Services-->

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

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

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

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

                <!--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">Our Projects</div>
                                <!-- /Page Title -->

                                <!-- Page Sub-Title -->
                                <div class="page-sub-title">Explore our portfolio.</div>
                                <!-- /Page Sub-Title -->

                            </a>

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

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

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

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

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

    </div>
@endsection