@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">Latest Clients</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">

                        <!--Clients-->
                        <div data-anim="true" class="alioth-clients column-4">

                            @foreach($clients as $client)
                            <div class="a-client">
                                @if(!empty($client->link)) <a href="{{$client->link}}"> @else <a href="#.">@endif
                                    <img alt="{{ $client->name }}" src="{{ asset('storage/'. $client->image) }}" style="max-width: 200px;">
                                </a>
                            </div>
                            @endforeach

                        </div>
                        <!--/Clients-->

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

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

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

            @if(!$testimonials->isEmpty())
            <div class="section no-margin">

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

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

                        <!--Testimonials-->
                        <div class="a-testimonials autoplay dark">

                            <!--Testimonals Controls (Don't touch)-->
                            <div class="a-testimonals-control">
                                <span class="a-test-prev"><i class="icofont-thin-left"></i></span>
                                <div class="a-test-frac">
                                    <span class="a-test-current">01</span>
                                    <div class="a-testimonials-count"><span></span></div>
                                    <span class="a-test-total"></span>
                                </div>
                                <span class="a-test-next"><i class="icofont-thin-right"></i></span>
                            </div>
                            <!--/Testimonals Controls (Don't touch)-->

                            <!--Testimonals Wrapper-->
                            <div class="a-testimonials-wrapper">

                                @foreach($testimonials as $testimonial)
                                <div class="a-testimonial">

                                    <!--Testimonal Text-->
                                    <div class="testimonial-text">“{{ $testimonial->text }}”</div>
                                    <!--/Testimonal Text-->

                                    <!--Testimonal Meta-->
                                    <div class="testimonial-meta">

                                        <!--Testimonial Name-->
                                        <div class="testimonial-name">{{ $testimonial->name }}</div>
                                        <!--/Testimonial Name-->

                                    </div>
                                    <!--/Testimonal Meta-->

                                </div>
                                @endforeach

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


                        </div>
                        <!--/Testimonials-->

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

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

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

            <!--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.about') }}">

                                <!-- Page Title -->
                                <div class="page-title">About Us</div>
                                <!-- /Page Title -->

                                <!-- Page Sub-Title -->
                                <div class="page-sub-title">Something more about the agency.</div>
                                <!-- /Page Sub-Title -->

                            </a>

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

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

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

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

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

    </div>

@endsection