@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>
    <div class="container-fluid welcome aboutWelcome serviceDetails mt-4 mb-5 aSection" id="Welcome"> 
        <div class="row custom__row">
            <div class="col-12 col-md-6 welcome__video">
                <div class="welcome__video__inner @if(!empty($innovation_overviews->innovation_overview_youtube_video_id)) welcome__video__inner play__icon @endif" @if(!empty($innovation_overviews->innovation_overview_youtube_video_id)) data-youtube-id="{{$innovation_overviews->innovation_overview_youtube_video_id}}" @endif>
                    <img src="{{url('/')}}/assets/images/innovations/{{$innovation_overviews->innovation_overview_image}}" class="img-fluid" alt="{{$innovation_overviews->innovation_overview_title}}">
                    @if($innovation_overviews->innovation_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($innovation_overviews->innovation_overview_title)!!}</h4>
                    <p class="paragraph my-4">{!!nl2br($innovation_overviews->innovation_overview_description)!!}</p>
                </div>
            </div>
        </div>
    </div>

    @if(!empty(count($innovation_milestones)))
    <article class="innovation_icons">
        <div class="container-fluid">
            <div class="row custom__row justify-content-center">
                @foreach($innovation_milestones as $innovation_milestone_row)
                <div class="col-lg-3">
                    <div class="icon_item">
                        <img src="{{url('/')}}/assets/images/innovations/{{$innovation_milestone_row->innovation_milestone_icon}}" alt="{{$innovation_milestone_row->innovation_milestone_caption}}">
                        <h3>{{$innovation_milestone_row->innovation_milestone_count}}</h3>
                        <span>{{$innovation_milestone_row->innovation_milestone_caption}}</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </article>
    @endif
    @if(!empty($innovation_frameworks))
    <article class="container-fluid innovation_framework aSection" id="Framework">
        <h2 class="primary-heading text-center pb-5">Innovation Framework</h2>
        <div class="row custom__row">
            <div class="col-12 col-md-12 col-lg-6 innovation_framework__left">
                <div class="framework_img">
                    <img src="{{url('/')}}/assets/images/innovations/{{$innovation_frameworks->innovation_framework_image}}" class="img-fluid" alt="{{$innovation_frameworks->innovation_framework_title}}">
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-6 innovation_framework__right">
                <div class="framework_text">
                    <h3 class="secondary-heading">{!!nl2br($innovation_frameworks->innovation_framework_title)!!}</h3>
                    <ul>
                        @php
                        $i = 1;
                        @endphp
                        @foreach($innovation_framework_points as $innovation_framework_point_row)
                        <li>
                            <span>0{{$i}}</span>
                            <h4>{{$innovation_framework_point_row->innovation_framework_point_title}}</h4>
                            <p class="paragraph">{{$innovation_framework_point_row->innovation_framework_point_description}}</p>
                        </li>
                        @php
                        $i++;
                        @endphp
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </article>
    @endif
    @if(!empty(count($innovation_tools)))
    <article class="container-fluid techniques">
        <div class="row custom__row">
            <div class="col-12">
                <h2 class="primary-heading text-center pb-5">Tool & Techniques:</h2>
            </div>
            @foreach($innovation_tools as $innovation_tool_row)
            <div class="col-12 col-md-12 col-lg-4">
                <div class="techniques_item">
                    <div class="image">
                        <div class="overlay"></div>
                        <img src="{{url('/')}}/assets/images/innovations/{{$innovation_tool_row->innovation_tool_image}}" class="img-fluid" alt="{{$innovation_tool_row->innovation_tool_title}}">
                        <div class="text">
                            <img src="{{url('/')}}/assets/images/innovations/{{$innovation_tool_row->innovation_tool_icon}}" alt="{{$innovation_tool_row->innovation_tool_title}}">
                            <span>{{$innovation_tool_row->innovation_tool_title}}</span>
                        </div>
                    </div>
                    <div class="bottom_text">
                        <p class="single_product_description">{{Str::limit($innovation_tool_row->innovation_tool_caption, 100)}}</p>
                        <span data-content="{{$innovation_tool_row->innovation_tool_caption}}" data-title="{{$innovation_tool_row->innovation_tool_title}}">Read More <span><img src="{{url('/')}}/assets/images/home/right-arrow-red.png" alt="Learn More" class="img-fluid"></span></span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </article>
    @endif
    @if(!empty(count($innovation_major_developments)))
    <article class="container-fluid developments aSection" id="Developments">
        <div class="row custom__row justify-content-center text-center pb-5">
            <div class="col-12 col-md-8 col-lg-6 m-auto">
                <h2 class="primary-heading text-center ">Major Developments</h2>
                <div class="row mt-5">
                    <div class="form-group col-8 m-auto">
                        <select class="form-control" id="major_development_id">
                            <option value="">Select</option>
                            @foreach($innovation_major_developments as $innovation_major_development_row)
                            <option value="{{Str::slug($innovation_major_development_row->innovation_major_development_title, '_')}}">{{$innovation_major_development_row->innovation_major_development_title}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
        @php
        $i = 0;
        @endphp
        @foreach($innovation_major_developments as $innovation_major_development_row)
        @if(empty($i %2))
        <div class="row custom__row" id="{{Str::slug($innovation_major_development_row->innovation_major_development_title, '_')}}">
            <div class="col-12 col-md-12 col-lg-6 p-0">
                <div class="developments_img @if(!empty($innovation_major_development_row->innovation_major_development_youtube_id)) video @endif">
                    @if(!empty($innovation_major_development_row->innovation_major_development_youtube_id))
                    <a class="icon show_pointer"><img src="{{url('/')}}/assets/images/innovation/video_icon.png" alt="Play Icon"></a>
                    @endif
                    <img src="{{url('/')}}/assets/images/innovations/{{$innovation_major_development_row->innovation_major_development_image}}" class="img-fluid" alt="{{$innovation_major_development_row->innovation_major_development_title}}">
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-6 p-0">
                <div class="developments_text">
                    <h3 class="secondary-heading">{{$innovation_major_development_row->innovation_major_development_title}}</h3>
                    <span>{{$innovation_major_development_row->innovation_major_development_tagline}}</span>
                    <p>{!!nl2br($innovation_major_development_row->innovation_major_development_description)!!}</p>
                </div>
            </div>
        </div>
        @else
        <div class="row custom__row" id="{{Str::slug($innovation_major_development_row->innovation_major_development_title, '_')}}">
            <div class="col-12 col-md-12 col-lg-6 p-0">
                <div class="developments_text right">
                    <h3 class="secondary-heading">{{$innovation_major_development_row->innovation_major_development_title}}</h3>
                    <span>{{$innovation_major_development_row->innovation_major_development_tagline}}</span>
                    <p>{!!nl2br($innovation_major_development_row->innovation_major_development_description)!!}</p>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-6 p-0">
                <div class="developments_img @if(!empty($innovation_major_development_row->innovation_major_development_youtube_id)) video @endif">
                    @if(!empty($innovation_major_development_row->innovation_major_development_youtube_id))
                    <a class="icon show_pointer"><img src="{{url('/')}}/assets/images/innovation/video_icon.png" alt="Play Icon"></a>
                    @endif
                    <img src="{{url('/')}}/assets/images/innovations/{{$innovation_major_development_row->innovation_major_development_image}}" class="img-fluid" alt="{{$innovation_major_development_row->innovation_major_development_title}}">
                </div>
            </div>
        </div>
        @endif
        @php
        $i++;
        @endphp
        @endforeach
    </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 innovation__awards">
                    <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>
    @endif
</main>
<div class="left_nav">
    <div class="about_nav">
        <ul>
            <li data-id="Welcome" class="active"><span></span><a href="#Welcome">Welcome</a></li>
            <li data-id="Framework"><span></span><a href="#Framework">Framework</a></li>
            <li data-id="Developments"><span></span><a href="#Developments">Developments</a></li>
            <li data-id="Awards"><span></span><a href="#Awards">Awards</a></li>
        </ul>
    </div>
</div>

<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>
                        <p class="paragraph"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection