@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">
                <h1>{!!nl2br($banner->banner_caption)!!}</h1>
                <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 productCatIntro aboutIntro aSection" id="WhoWeAre">
        <section class="row custom__row justify-content-center">
            <header class="col-9 col-md-9 col-lg-9 pb-4 text-center">
                <h2 class="primary-heading mb-4">{{$banner->introduction_title}}</h2>
                <p class="paragraph">{!!nl2br($banner->introduction_description)!!}</p>
            </header>
        </section>
        @if(!empty(count($about_us_sliders)))
        <section class="row custom__row productCatIntro__block">
            <div class="col-12 productCatIntro__block__slider owl-carousel">
                @foreach($about_us_sliders as $about_us_slider_row)
                <div class="item">
                    <img src="{{url('/')}}/assets/images/about-us/{{$about_us_slider_row->about_us_slider_image}}" alt="{{$about_us_slider_row->about_us_slider_caption}}" class="img-fluid" width="1500" height="600">
                </div>
                @endforeach
            </div>
        </section>
        <section class="row custom__row productCatIntro__block">
            @php
            $i = 0;
            @endphp
            @foreach($about_us_sliders as $about_us_slider_row)
            <header class="col-12 col-md-3 @if(empty($i)) active @endif">
                <h3>{{$about_us_slider_row->about_us_slider_caption}}</h3>
                <details>
                    <summary class="paragraph">{!!nl2br($about_us_slider_row->about_us_slider_description)!!}</summary>
                </details>
            </header>
            @php
            $i++;
            @endphp
            @endforeach
        </section>
        @endif
    </article>
    @if(!empty($about_us_section_ones))
    <div class="container-fluid welcome aboutWelcome serviceDetails mt-4">
        <div class="row custom__row">
            <div class="col-12 col-md-6 welcome__video">
                <div class="welcome__video__inner @if(!empty($about_us_section_ones->about_us_youtube_id)) play__icon @endif" @if(!empty($about_us_section_ones->about_us_youtube_id)) data-youtube-id="{{$about_us_section_ones->about_us_youtube_id}}" @endif>
                    <img src="{{url('/')}}/assets/images/about-us/{{$about_us_section_ones->about_us_section_thumbnail}}" class="img-fluid" alt="{{$about_us_section_ones->about_us_section_title}}">
                    @if(!empty($about_us_section_ones->about_us_youtube_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($about_us_section_ones->about_us_section_title)!!}</h4>
                    <p class="paragraph my-4">{!!nl2br($about_us_section_ones->about_us_section_description)!!}</p>
                    @if(!empty($about_us_section_ones->about_us_section_button_link) && !empty($about_us_section_ones->about_us_section_button_name))
                    <a href="{{$about_us_section_ones->about_us_section_button_link}}" target="_blank">{{$about_us_section_ones->about_us_section_button_name}}</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endif
    @if(!empty(count($about_us_accordians)))
    <article class="container-fluid aboutAccordian mt-5" style="background: #fff url({{url('/')}}/assets/images/about-us/{{$about_us_accordians[0]->about_us_accordian_image}});">
        <div class="row custom__row aboutAccordian__content">
            <div class="col-12 col-md-6 col-lg-5">
                @php
                $i = 0;
                @endphp
                @foreach($about_us_accordians as $about_us_accordian_row)
                <div class="aboutAccordian__content__block @if(empty($i)) active @endif">
                    <h3 class="secondary-heading title" data-image-url="{{url('/')}}/assets/images/about-us/{{$about_us_accordian_row->about_us_accordian_image}}">{{$about_us_accordian_row->about_us_accordian_caption}}</h3>
                    <div class="text paragraph">{!!$about_us_accordian_row->about_us_accordian_description!!}</div>
                </div>
                @php
                $i++;
                @endphp 
                @endforeach
            </div>
        </div>
    </article>
    @endif
    @if(!empty($about_us_section_twos))
    <div class="container-fluid covid mb-5 mt-5 py-5">
        <div class="row custom__row m-0">
            <div class="covid__inner col-12" style="background: #E31E24;">
                <div class="row align-items-center" style="width:100%;">
                    <div class="col-12 col-md-8">
                        <h4 class="secondary-heading mb-3">{{$about_us_section_twos->about_us_section_title}}</h4>
                        <p class="paragraph">{!!nl2br($about_us_section_twos->about_us_section_description)!!}</p>
                    </div>
                    <div class="col-12 col-md-4">
                        @if(!empty($about_us_section_twos->about_us_section_button_link) && !empty($about_us_section_twos->about_us_section_button_name))
                        <a href="{{$about_us_section_twos->about_us_section_button_link}}" target="_blank">{{$about_us_section_twos->about_us_section_button_name}}</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    @if(!empty(count($company_timelines)))
    <article class="container-fluid timeline">
        <h2 class="secondary-heading text-center pb-5">Timeline</h2>
        <div class="row custom__row">
            <div class="col-12">
                <div class="owl-carousel owl-theme" id="owl-demo">
                    @foreach($company_timelines as $company_timeline_row)
                    <div class="item">
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                        <h4 class="text-left">{{$company_timeline_row->company_timeline_year}}</h4>
                        <p class="text-left">{!!$company_timeline_row->company_timeline_content!!}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </article>
    @endif
    @if(!empty(count($about_us_blocks)))
    @php
    $i = 0;
    @endphp
    @foreach($about_us_blocks as $about_us_block_row)
    @if(empty($i %2))
    <article class="container-fluid happiness right aSection" id="VisionMissionValue">
        <div class="row custom__row">
            <div class="col-12 col-md-12 col-lg-6 happiness__image">
                <img src="{{url('/')}}/assets/images/about-us/{{$about_us_block_row->about_us_block_image}}" class="img-fluid" alt="{{$about_us_block_row->about_us_block_caption}}">
            </div>
            <div class="col-12 col-md-12 col-lg-6 happiness__content">
                <div class="inner left">
                    <h3 class="secondary-heading mb-3">{{$about_us_block_row->about_us_block_caption}}</h3>
                    <div class="paragraph">{!!nl2br($about_us_block_row->about_us_block_description)!!}</div>
                </div>
            </div>
        </div>
    </article>
    @else
    <article class="container-fluid happiness left">
        <div class="row custom__row">
            <div class="col-12 col-md-12 col-lg-6 happiness__content">
                <div class="inner right">
                    <h3 class="secondary-heading mb-3">{{$about_us_block_row->about_us_block_caption}}</h3>
                    <div class="paragraph">{!!nl2br($about_us_block_row->about_us_block_description)!!}</div>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-6 happiness__image">
                <img src="{{url('/')}}/assets/images/about-us/{{$about_us_block_row->about_us_block_image}}" class="img-fluid" alt="{{$about_us_block_row->about_us_block_caption}}">
            </div>
        </div>
    </article>
    @endif
    @php
    $i++;
    @endphp
    @endforeach
    @endif
    @if(!empty(count($about_us_core_values)))
    <article class="container-fluid serviceList aboutValues">
        <div class="row custom__row">
            <div class="col-12 title mb-5">
                <h2 class="secondary-heading black">Core Values</h2>
            </div>
        </div>
        <div class="row custom__row m-0">
            @foreach($about_us_core_values as $about_us_core_value_row)
            <div class="col-12 col-md-4 col-lg-3 serviceList__block">
                <div class="inner">
                    <img src="{{url('/')}}/assets/images/about-us/{{$about_us_core_value_row->about_us_core_value_image}}" class="img-fluid" alt="{{$about_us_core_value_row->about_us_core_value_caption}}">
                    <h3>{{$about_us_core_value_row->about_us_core_value_caption}}</h3>
                    <p class="paragraph">{!!nl2br($about_us_core_value_row->about_us_core_value_description)!!}</p>
                </div>
            </div>
            @endforeach
        </div>
    </article>
    @endif
    @if(!empty(count($about_us_awards)))
    <article class="container-fluid serviceList threeDSlider aSection" 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" 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" width="296" height="168">
                    <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>
    @endif
    {{--
    @if(!empty(count($about_us_latests)))
    <div class="container-fluid technologies aSection d-none" id="Latest">
        <div class="row custom__row">
            <div class="col-12 col-md-6 technologies__title">
                <h4 class="secondary-heading black">Latest, from us - to you</h4>
            </div>
            <div class="col-12 col-md-6 technologies__nav">
                <div class="left"><img src="{{url('/')}}/assets/images/about/prev.png" alt="Slide Left" class="img-fluid"></div>
                <div class="counter"></div>
                <div class="right"><img src="{{url('/')}}/assets/images/about/next.png" alt="Slide Right" class="img-fluid"></div>
            </div>
            <div class="technologies__block owl-carousel owl-theme col-12" id="latest__slider">
                @foreach($about_us_latests as $about_us_latest_row)
                <a @if(!empty($about_us_latest_row->about_us_latest_link) && !empty($about_us_latest_row->about_us_latest_button_title)) href="{{$about_us_latest_row->about_us_latest_link}}" target="_blank" @endif class="technologies__block__inner">
                    <img src="{{url('/')}}/assets/images/about-us/{{$about_us_latest_row->about_us_latest_thumbnail}}" class="img-fluid" alt="{{$about_us_latest_row->about_us_latest_thumbnail}}">
                    <div class="caption">
                        <h5 class="secondary-heading">{{$about_us_latest_row->about_us_latest_title}}</h5>
                        <div class="paragraph">{!!nl2br($about_us_latest_row->about_us_latest_description)!!}</div>
                        @if(!empty($about_us_latest_row->about_us_latest_link) && !empty($about_us_latest_row->about_us_latest_button_title))
                        <span>{{$about_us_latest_row->about_us_latest_button_title}}</span>
                        @endif
                    </div>
                </a>
                @endforeach
            </div>
        </div>
    </div>
    @endif
    --}}
</main>
<div class="left_nav">
    <div class="about_nav">
        <ul>
            <li data-id="WhoWeAre" class="active"><span></span><a href="#WhoWeAre">Who we are</a></li>
            <li data-id="VisionMissionValue"><span></span><a href="#VisionMissionValue">Vision, Mission, Values</a></li>
            <li data-id="Awards"><span></span><a href="#Awards">Awards</a></li>
            <!-- <li data-id="Latest"><span></span><a href="#Latest">Latest</a></li> -->
        </ul>
    </div>
</div>
@endsection