@extends('web.layout.app')
@section('css')

@endsection
@section('title', 'Endorsements Page')
@section('content')
    <div class="page-title endorsements-page-title">
        <h1>Endorsements</h1>
    </div>
    <div class="section endorsements-section">
        <div class="container">
            <div class="endorsements-section-box text-center">
                <div class="row">
                    <div class="col-md-6 col-md-push-3">
                        <h2>{{ $mainContent->title }}</h2>
                        <p>{{ $mainContent->description }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="endorsements-inner-section">
            @foreach($mainContent->boxes()->get() as $box)
                @if($loop->index %2 == 0)
                    <div class="row" data-aos="fade-up" data-aos-delay="500">
                        <div class="col-md-10">
                            <div class="col-md-4 text-center"><img src="{{ $box->file }}"></div>
                            <div class="col-md-8">
                                <div class="endorsements-quote">
                                    <div class="endorsements-quote-l"></div>
                                    <p>{{ $box->description }}</p>
                                    <br>
                                    <p>{{ $box->description_second_language }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="endorsements-quote-divider"></div>
                @else
                    <div class="row" data-aos="fade-up" data-aos-delay="500">
                        <div class="col-md-10 col-md-push-2">
                            <div class="col-md-8 hidden-sm hidden-xs">
                                <div class="endorsements-quote">
                                    <div class="endorsements-quote-r"></div>
                                    <p>{{ $box->description }}</p>
                                    <br>
                                    <p>{{ $box->description_second_language }}</p>
                                </div>
                            </div>
                            <div class="col-md-4 text-center"><img src="{{ $box->file }}"></div>
                            <div class="col-md-8 hidden-lg hidden-md">
                                <div class="endorsements-quote">
                                    <div class="endorsements-quote-r"></div>
                                    <p>{{ $box->description }}</p>
                                    <br>
                                    <p>{{ $box->description_second_language }}</p>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="endorsements-quote-divider"></div>
                @endif
            @endforeach
        </div>
    </div>
@endsection
@section('scripts')
@endsection