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

@endsection
@section('title','About Page')
@section('content')

    <div class="page-title about-page-title">
        <h1>About</h1>
    </div>
    <div class="section about-section">
        <div class="container">
            @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-5 no-pad">
                        <h2>{{ $box->title }}</h2>
                    </div>
                    <div class="col-md-2 hidden-sm hidden-xs"><br></div>
                    <div class="col-md-5 no-pad">
                        <p>{!! $box->description !!}</p>
                    </div>
                </div>
                @if($loop->index != count($mainContent->boxes()->get())-1 )<div class="about-divider"></div> @endif

                @else



                    <div class="row" data-aos="fade-up" data-aos-delay="500">
                        <div class="col-md-5 no-pad hidden-lg hidden-md">
                            <h2>{{ $box->title }}</h2>
                        </div>
                        <div class="col-md-5 no-pad">
                            <p>{{ $box->description }}</p>
                        </div>
                        <div class="col-md-2 hidden-sm hidden-xs"><br></div>
                        <div class="col-md-5 no-pad hidden-sm hidden-xs">
                            <h2>{{ $box->title }}</h2>
                        </div>
                    </div>
                    @if($loop->index != count($mainContent->boxes()->get())-1 )<div class="about-divider"></div> @endif

                @endif



            @endforeach
        </div>
    </div>

    <div class="section history-section">
        <h2 class="text-center">OUR HISTORY</h2>
        <div class="container">
            @foreach($ourHistory->boxes()->get() as $box)
                @if($loop->index %2 == 0)
                    <div class="row" data-aos="fade-up" data-aos-delay="500">
                        <div class="col-md-5"></div>
                        <div class="col-md-2">
                            <img src="img/history-divider.png" style="width:100%;" class="hidden-sm hidden-xs">
                        </div>
                        <div class="col-md-5">
                            <h3>{{ $box->title }}</h3>
                            <p>{{ $box->description }}</p>
                        </div>
                    </div>
                @else
                    <div class="row" data-aos="fade-up" data-aos-delay="500">
                        <div class="col-md-5">
                            <h3 class="text-right">{{ $box->title }}</h3>
                            <p>{{ $box->description }}</p>
                        </div>
                        <div class="col-md-2"><img src="img/history-divider-left.png" style="width:100%;" class="hidden-sm hidden-xs"></div>
                        <div class="col-md-5"></div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>

    <div class="section glance-section">
        <div class="container text-center">
            <h2>CHIBAS JERUSALEM AT A GLANCE</h2>
            <div class="row">
                @foreach($glance->boxes()->get() as $box)
                <div class="col-md-4 col-sm-4" data-aos="fade-up" data-aos-delay="500">
                    <div class="glance-box">
                        <img src="{{ $box->file }}">
                        <h3>{{ $box->title }}</h3>
                        <p>{{ $box->description }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="section about-donate">
        <div class="container text-center">
            <div class="col-md-8 col-md-push-2">
                <h3>KOLEL CHIBAS JERUSALEM REB MEIR BAAL HANES NEEDS AND DESERVES YOUR GENEROUS HELP!</h3>
                <a href="{{ route('donate') }}" class="btn btn-default btn-lg about-donate-btn">DONATE</a>
            </div>
        </div>
    </div>


@endsection
@section('scripts')
@endsection