@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" class="active">Welcome</a></li>
                <li><a href="{{url('/')}}/campus-connect">Campus Connect</a></li>
                <li><a href="{{url('/')}}/careers">Careers</a></li>
                <li><a href="{{url('/')}}/initiatives">Initiatives</a></li>
            </ul>
        </nav>
    </article>
    @if(!empty($company_quotes))
    <article class="container-fluid industries__slider people">
        <section class="row custom__row industries__slider__section justify-content-end">
            <div class="col-12 col-md-12 col-lg-10 owl-carousel owl-theme" id="industries__slider">
                <div class="row industries__slider__section__block m-0">
                    <div class="col-12 col-md-5 left">
                        <img src="{{url('/')}}/assets/images/people/{{$company_quotes->company_quote_thumbnail}}" alt="{{$company_quotes->company_quote_title}}" class="img-fluid">
                        <span></span>
                    </div>
                    <div class="col-12 col-md-7 right">
                        <h4>{{$company_quotes->company_quote_content}}</h4>
                        <h5>Quote from {{$company_quotes->company_quote_title}}</h5>
                    </div>
                </div>
            </div>
        </section>
    </article>
    @endif
    @if(!empty($people_section_ones))
    <article class="container-fluid servicesRange happiness mt-0">
        <div class="row custom__row">
            <section class="col-12 col-md-8 m-auto title">
                <h2 class="secondary-heading ">{{$people_section_ones->people_section_one_title}}</h2>
                <p class="paragraph">{!!$people_section_ones->people_section_one_description!!}</p>
            </section>
            <section class="col-12 mt-4">
                <img src="{{url('/')}}/assets/images/people/{{$people_section_ones->people_section_one_image}}" alt="{{$people_section_ones->people_section_one_title}}" class="img-fluid">
            </section>
        </div>
    </article>
    @endif
    @if(!empty($people_section_twos))
    <article class="container-fluid happiness">
        <div class="row custom__row">
            <div class="col-12 col-md-12 col-lg-6 happiness__image">
                <img src="{{url('/')}}/assets/images/people/{{$people_section_twos->people_section_two_image}}" alt="{{$people_section_twos->people_section_two_title}}" class="img-fluid">
            </div>
            <div class="col-12 col-md-12 col-lg-6 happiness__content">
                <div class="inner left">
                    <h3 class="secondary-heading mb-3">{{$people_section_twos->people_section_two_title}}</h3>
                    <div class="paragraph">{!!$people_section_twos->people_section_two_description!!}</div>
                </div>
            </div>
        </div>
    </article>
    @endif
    @if(!empty(count($people_activities)))
    <article class="container-fluid sectionIntro initiatives__slider peoplePage">
        <section class=" row custom__row justify-content-left mb-4">
            <header class="col-12 col-md-10 col-lg-8 text-left">
                <h2 class="secondary-heading mb-4 pl-5">What we believe</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>{!!$people_activity_row->people_activity_description!!}</p> -->
                        @if(!empty($people_activity_row->people_activity_link))
                        <a href="{{$people_activity_row->people_activity_link}}" target="_blank">Learn More <span><img src="{{url('/')}}/assets/images/home/right-arrow-red.png" alt="Learn More" class="img-fluid"></span></a>
                        @else
                             <span class="link_span" data-copy="{{$people_activity_row->people_activity_description}}" data-heading="{{$people_activity_row->people_activity_caption}}">Learn More <span><img src="{{url('/')}}/assets/images/home/right-arrow-red.png" alt="Learn More" class="img-fluid"></span></span>
                        @endif
                    </figcaption>
                </figure>
                @endforeach
            </div>
        </section>
    </article>
    @endif
    <article class="container-fluid jobs" style="background:#fff url({{url('/')}}/assets/images/people/jobs.jpg) no-repeat center/cover"
        ;>
        <div class="row custom__row justify-content-center jobs__inner">
            <div class="col-12 col-md-10 col-lg-9 text-center">
                <h3 class="secondary-heading">"The quality of a person's life is in direct proportion to his/her commitment to excellence"
                </h3>
                <a href="{{url('/')}}/careers#jobs">View jobs <span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
            </div>
        </div>
    </article>
    @if(!empty($people_overviews))
    <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($people_overviews->people_overview_youtube_video_id)) play__icon @endif" @if(!empty($people_overviews->people_overview_youtube_video_id)) data-youtube-id="{{$people_overviews->people_overview_youtube_video_id}}" @endif>
                    <img src="{{url('/')}}/assets/images/people/{{$people_overviews->people_overview_image}}" alt="Video" class="img-fluid">
                    @if(!empty($people_overviews->people_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">{{$people_overviews->people_overview_title}}</h4>
                    <p class="paragraph my-4">{!!$people_overviews->people_overview_description!!}</p>
                    <a href="{{url('/')}}/initiatives" target="_blank">View Our Initiatives</a>
                </div>
            </div>
        </div>
    </div>
    @endif
    @if(!empty(count($about_us_awards)))
    <article class="container-fluid serviceList threeDSlider aSection mt-5 pt-5" id="Awards">
        <div class="row custom__row">
            <div class="col-12 title mb-5">
                <h2 class="secondary-heading black">Awards & Recognition</h2>
            </div>
        </div>
        <section class="row custom__row">
            <div class="threeDSlider__slider owl-carousel people_award_slider" id="threeDSlider_slider">
                 @foreach($about_us_awards as $about_us_award_row)
                <figure class="item">
                    <img src="{{url('/')}}/assets/images/about-us/{{$about_us_award_row->about_us_award_image}}" alt="{{$about_us_award_row->about_us_award_caption}}" class="img-fluid">
                    <figcaption>
                        <h3 class="product-title">{{$about_us_award_row->about_us_award_caption}}</h3>
                        <p class="paragraph">{!!nl2br($about_us_award_row->about_us_award_description)!!}</p>
                    </figcaption>
                </figure>
                @endforeach
            </div>
        </section>
    </article>
    <!-- <div class="row custom__row award">
        <h2 class="primary-heading text-center pb-5">Awards & Recognition</h2>
        <div class="button left" onclick="shiftLeft()"><img src="{{url('/')}}/assets/images/home/left-arrow-s-red.png" alt="left arrow">
        </div>
        <div class="cards-wrapper">
            <ul class="cards__container">
                @foreach($about_us_awards as $about_us_award_row)
                <li class="box">
                    <div class="main_award">
                        <img src="{{url('/')}}/assets/images/about-us/{{$about_us_award_row->about_us_award_image}}" alt="{{$about_us_award_row->about_us_award_caption}}">
                        <h4>{{$about_us_award_row->about_us_award_caption}}</h4>
                        <p>{!!nl2br($about_us_award_row->about_us_award_description)!!}</p>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
        <div class="button right" onclick="shiftRight()"><img src="{{url('/')}}/assets/images/home/right-arrow-s-red.png" alt="right arrow">
        </div>
    </div>
    @endif -->
    <div class="modal fade brochureModal" id="innovationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content brochureModal__content">
                <div class="modal-header brochureModal__header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">ESC</span>
                    </button>
                </div>
                <div class="modal-body innovationModal__body">
                    <div class="row m-0">
                        <div class="col-12 p-0">
                            <h5 class="secondary-heading mb-5"></h5>
                            <div class="paragraph"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection