@extends('layouts.website_layout')
@section('meta_title', $meta_data->meta_title)
@section('meta_description', $meta_data->meta_description)
@section('canonical_tag', $meta_data->canonical_tag)
@section('banner_image', "banners/".$banner->banner_image)
@section('content')
<main>
    <article class="container-fluid innerBanner p-0">
        <figure>
            <img src="{{url('/')}}/assets/images/banners/{{$banner->banner_image}}" alt="{{$meta_data->page_name}}" class="img-fluid desktop_image">
            <img src="{{url('/')}}/assets/images/banners/{{$banner->banner_image_mobile}}" alt="{{$meta_data->page_name}}" class="img-fluid mobile_image">
            <figcaption class="custom__row slider-heading">
                {!!nl2br($banner->banner_caption)!!}
                <p class="paragraph mt-4">{!!nl2br($banner->banner_description)!!}</p>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$meta_data->page_name}}</li>
                    </ol>
                </nav>
            </figcaption>
        </figure>
    </article>
    <article class="container-fluid linkNav">
        <nav class="row custom__row text-center">
            <ul class="m-auto">
                <li><a href="{{url('/')}}/people">Welcome</a></li>
                <li><a href="{{url('/')}}/campus-connect" class="active">Campus Connect</a></li>
                <li><a href="{{url('/')}}/careers">Careers</a></li>
                <li><a href="{{url('/')}}/initiatives">Initiatives</a></li>
            </ul>
        </nav>
    </article>
    <div class="container-fluid welcome serviceDetails mt-4">
        <div class="row custom__row">
            <div class="col-12 col-md-6 welcome__video">
                <div class="welcome__video__inner @if(!empty($campus_connect_overviews->campus_connect_overview_youtube_video_id)) play__icon @endif" @if(!empty($campus_connect_overviews->campus_connect_overview_youtube_video_id)) data-youtube-id="{{$campus_connect_overviews->campus_connect_overview_youtube_video_id}}" @endif>
                    <img src="{{url('/')}}/assets/images/campus-connect/{{$campus_connect_overviews->campus_connect_overview_image}}" alt="{{$campus_connect_overviews->campus_connect_overview_title}}" class="img-fluid">
                    @if(!empty($campus_connect_overviews->campus_connect_overview_youtube_video_id))
                    <span class="play"><img src="{{url('/')}}/assets/images/home/play-icon.png" alt="Play video" class="img-fluid"></span>
                    @endif
                    <span class="bg"></span>
                </div>
            </div>
            <div class="col-12 col-md-6 welcome__intro">
                <div class="welcome__intro__inner">
                    <h4 class="secondary-heading m-0">{!!nl2br($campus_connect_overviews->campus_connect_overview_title)!!}</h4>
                    <p class="paragraph my-4">{!!nl2br($campus_connect_overviews->campus_connect_overview_description)!!}
                </div>
            </div>
        </div>
    </div>
    @if(!empty(count($campus_connect_programs)))
    <article class="container-fluid sectionIntro mt-5 pb-5">
        <section class="row custom__row justify-content-center mb-5">
            <header class="col-12 col-md-10 col-lg-8 text-center">
                <h2 class="secondary-heading  black">Our Programs</h2>
            </header>
        </section>
        @php
        $i = 0;
        @endphp
        @foreach($campus_connect_programs as $campus_connect_program_row)
        @if(empty($i %2))
        <section class="row keyItems">
            <div class="col-12 col-md-6 keyItems__image left">
                <div class="keyItems__image__block">
                    <img src="{{url('/')}}/assets/images/campus-connect/{{$campus_connect_program_row->campus_connect_program_thumbnail}}" alt="{{$campus_connect_program_row->campus_connect_program_caption}}" class="img-fluid">
                </div>
            </div>
            <div class="col-12 col-md-6 keyItems__content right">
                <h3>{{$campus_connect_program_row->campus_connect_program_caption}}</h3>
                <p class="paragraph">{!!nl2br($campus_connect_program_row->campus_connect_program_description)!!}</p>
            </div>
        </section>
        @else
        <section class="row keyItems">
            <div class="col-12 col-md-6 keyItems__content left">
                <h3>{{$campus_connect_program_row->campus_connect_program_caption}}</h3>
                <p class="paragraph">{!!nl2br($campus_connect_program_row->campus_connect_program_description)!!}</p>
            </div>
            <div class="col-12 col-md-6 keyItems__image right">
                <div class="keyItems__image__block">
                    <img src="{{url('/')}}/assets/images/campus-connect/{{$campus_connect_program_row->campus_connect_program_thumbnail}}" alt="{{$campus_connect_program_row->campus_connect_program_caption}}" class="img-fluid">
                </div>
            </div>
        </section>
        @endif
        @php
        $i++;
        @endphp
        @endforeach
    </article>
    @endif
    @if(!empty(count($campus_connect_growth_charts)))
    <article class="container-fluid campusConnectSlider mb-5 p-0">
        <section class="col-12 col-md-8 m-auto title text-center">
            <h2 class="secondary-heading ">Happiness Quotient</h2>
        </section>
        <div class="row custom__row campusConnectSlider__Block productCatIntro__block__slider owl-carousel">
            @foreach($campus_connect_growth_charts as $campus_connect_growth_chart_row)
            <div class="item text-center @if(!empty($campus_connect_growth_chart_row->campus_connect_youtube_id)) welcome__video__inner play__icon @endif" @if(!empty($campus_connect_growth_chart_row->campus_connect_youtube_id)) data-youtube-id="{{$campus_connect_growth_chart_row->campus_connect_youtube_id}}" @endif>
                <p class="paragraph">{!!nl2br($campus_connect_growth_chart_row->campus_connect_growth_chart_description)!!}</p>
                <img src="{{url('/')}}/assets/images/campus-connect/{{$campus_connect_growth_chart_row->campus_connect_growth_chart_image}}" alt="Growth Chart" class="img-fluid">
                <!-- @if(!empty($campus_connect_growth_chart_row->campus_connect_youtube_id))
                <span class="play"><img src="{{url('/')}}/assets/images/home/play-icon.png" alt="Play video" class="img-fluid"></span>
                @endif -->
            </div>
            @endforeach
        </div>
    </article>
    @endif
    <article class="container-fluid winners d-none">
        <div class="row winners__inner">
            <div class="col-12 col-md-4 col-lg-4 winners__left">
                <div class="row">
                    @foreach($campus_connect_winner_left as $campus_connect_winner_row)
                    <div class="col-6 image">
                        <img src="{{url('/')}}/assets/images/campus-connect/{{$campus_connect_winner_row->campus_connect_winner_thumbnail}}" alt="{{$campus_connect_winner_row->campus_connect_winner_caption}}" class="img-fluid">
                        <h3>{{$campus_connect_winner_row->campus_connect_winner_caption}}</h3>
                        <div class="caption">
                            <p class="paragraph">{!!nl2br($campus_connect_winner_row->campus_connect_winner_description)!!}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="col-12 col-md-4 col-lg-4 winners__center">
                <div class="inner">
                    <h3>Our Winners!</h3>
                    <div class="paragraph">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                        been the industry's standard
                        dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make. Lorem Ipsum has
                        been the industry's standard dummy text ever since the 1500s, when an unknown printer took.
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4 col-lg-4 winners__right">
                <div class="row">
                    @foreach($campus_connect_winner_right as $campus_connect_winner_row)
                    <div class="col-6 image">
                        <img src="{{url('/')}}/assets/images/campus-connect/{{$campus_connect_winner_row->campus_connect_winner_thumbnail}}" alt="{{$campus_connect_winner_row->campus_connect_winner_caption}}" class="img-fluid">
                        <h3>{{$campus_connect_winner_row->campus_connect_winner_caption}}</h3>
                        <div class="caption">
                            <p class="paragraph">{!!nl2br($campus_connect_winner_row->campus_connect_winner_description)!!}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </article>
    @if(!empty(count($people_activities)))
    <article class="container-fluid sectionIntro initiatives__slider mt-0">
        <section class=" row custom__row justify-content-center mb-4">
            <header class="col-12 col-md-10 col-lg-8 text-center">
                <h2 class="secondary-heading mb-4">Our Activities</h2>
            </header>
        </section>
        <section class="row custom__row pr-0">
            <div class="initiatives__slider__section owl-carousel" id="initiatives__slider">
                @foreach($people_activities as $people_activity_row)
                <figure class="item">
                    <img src="{{url('/')}}/assets/images/people/{{$people_activity_row->people_activity_image}}" alt="{{$people_activity_row->people_activity_caption}}" class="img-fluid">
                    <figcaption>
                        <h3 class="product-title">{{$people_activity_row->people_activity_caption}}</h3>
                        <p>{!!nl2br($people_activity_row->people_activity_description)!!}</p>
                        @if(!empty($people_activity_row->people_activity_link))
                        <a href="{{$people_activity_row->people_activity_link}}">Learn More <span><img src="{{url('/')}}/assets/images/home/right-arrow-red.png" alt="Learn More" class="img-fluid"></span></a>
                        @endif
                    </figcaption>
                </figure>
                @endforeach
            </div>
        </section>
    </article>
    @endif
</main>
@endsection