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

@endsection
@section('title', 'Programs Page')
@section('content')
    <div class="page-title programs-page-title">
        <h1>Programs & Requests</h1>
    </div>
    <div class="section programs-section">
        <div class="container">

            @foreach($mainContent->boxes()->get() as $box)
                @if($loop->index == count($mainContent->boxes()->get())-1 )
                        <div class="col-md-5 text-center no-pad" data-aos="fade-up" data-aos-delay="500">
                             <h2>{{ $box->title }}</h2>
                            <h3>{{ $box->subtitle }}</h3>
                            <p>{!! $box->description !!}</p>
                            <a href="{{ route('donate') }}" class="btn btn-default btn-lg btn-block programs-sign-up">SIGN UP NOW</a>
                        </div>
                    </div>
                    </div>
                </div>


                @elseif($loop->index %2 == 0)
                    <div class="row">
                        <div class="col-md-5  text-center no-pad" data-aos="fade-up" data-aos-delay="500">
                            <h2>{{ $box->title }}</h2>
                            <h3>{{ $box->subtitle }}</h3>
                            <p>{!! $box->description !!}</p>
                            <a href="{{ route('donate') }}" class="btn btn-default btn-lg btn-block programs-sign-up">SIGN UP NOW</a>
                        </div>
                        <div class="col-md-2">
                            <div class="programs-divider-v hidden-sm hidden-xs"></div>
                        </div>
                @elseif($loop->index %2 != 0 && $loop->index != count($mainContent->boxes()->get())-1 )
                            <div class="col-md-5 text-center no-pad" data-aos="fade-up" data-aos-delay="500">
                                <h2>{{ $box->title }}</h2>
                                <h3>{{ $box->subtitle }}</h3>
                            <p>{!! $box->description !!}</p>
                                <a href="{{ route('donate') }}" class="btn btn-default btn-lg btn-block programs-sign-up">SIGN UP NOW</a>
                            </div>
                        </div>

                    <div class="row">
                        <div class="col-md-5 text-center"> 
                            <div class="programs-divider-h hidden-sm hidden-xs"></div>
                        </div>
                        <div class="col-md-2">
                        </div>
                        <div class="col-md-5 text-center">
                            <div class="programs-divider-h hidden-sm hidden-xs"></div>
                        </div>
                    </div>
            @endif
            @endforeach







        </div>

    </div>
@endsection
@section('scripts')
@endsection