@extends('layouts.website_layout')
@section('meta_title', $product_industry->meta_title)
@section('meta_description', $product_industry->meta_description)
@section('canonical_tag', "industries-and-applications/".$product_industry->product_industry_url_slug)
@section('banner_image', "industries-and-applications/".$product_industry->product_industry_thumbnail)
@section('content')
<main>
    <article class="container-fluid innerBanner p-0">
        <figure>
            <img src="{{url('/')}}/assets/images/banners/{{$product_industry->banner_image}}" alt="{{$product_industry->banner_caption}}" class="img-fluid desktop_image">
            <img src="{{url('/')}}/assets/images/banners/{{$product_industry->banner_image_mobile}}" alt="{{$product_industry->banner_caption}}" class="img-fluid mobile_image">
            <figcaption class="custom__row slider-heading">
                {{$product_industry->banner_caption}}
                <p class="paragraph mt-4">{!!nl2br($product_industry->banner_description)!!}</p>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{url('/')}}/industries-and-applications">Industries and Applications</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$product_industry->product_industry_name}}</li>
                    </ol>
                </nav>
            </figcaption>
        </figure>

    </article>
    <article class="container-fluid sectionsNav">
        <nav class="row custom__row text-center">
            <ul class="m-auto">
                <li data-section="business-overview">Business Overview</li>
                <!-- <li data-section="our-capabilities">Our Capabilities</li> -->
                <!-- <li data-section="our-development">Our Development</li> -->
                <li data-section="product-portfolio">Product Portfolio</li>
            </ul>
        </nav>
    </article>
    <article class="container-fluid topText" id="business-overview">
        <section class="row custom__row justify-content-center">
            <header class="col-12 col-md-12 col-lg-12 pb-4">
                <p class="paragraph">{!!nl2br($product_industry->introduction_text)!!}</p>
            </header>
        </section>
    </article>
    @if(!empty(count($product_industry_sliders)))
    <article class="container-fluid campusConnectSlider mb-5 p-0">
        <div class="row custom__row campusConnectSlider__Block productCatIntro__block__slider owl-carousel">
            @foreach($product_industry_sliders as $product_industry_slider_row)
            <div class="item @if($product_industry_slider_row->product_industry_media_type_id == 2 && !empty($product_industry_slider_row->product_industry_slider_youtube_id)) welcome__video__inner play__icon @endif" @if($product_industry_slider_row->product_industry_media_type_id == 2 && !empty($product_industry_slider_row->product_industry_slider_youtube_id)) data-youtube-id="{{$product_industry_slider_row->product_industry_slider_youtube_id}}" @endif>
                <img src="{{url('/')}}/assets/images/product-industry/{{$product_industry_slider_row->product_industry_slider_image}}" alt="{{$product_industry_slider_row->product_industry_slider_caption}}" class="img-fluid">
                @if($product_industry_slider_row->product_industry_media_type_id == 2 && !empty($product_industry_slider_row->product_industry_slider_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
    @if(!empty($product_industry->product_industry_case_study_caption))
    <article class="container-fluid caseStudies py-5">
        <div class="row custom__row">
            <div class="col-12 col-md-5 col-lg-4 caseStudies__image">
                <img src="{{url('/')}}/assets/images/product-industry/{{$product_industry->product_industry_case_study_image}}" alt="{{$product_industry->product_industry_case_study_caption}}" class="img-fluid">
            </div>
            <div class="col-12 col-md-7 col-lg-8 caseStudies__content">
                <div class="caseStudies__content__inner">
                    <div class="content">
                        <h3>{{$product_industry->product_industry_case_study_caption}}</h3>
                        <h2>View our case study</h2>
                        <p class="paragraph">{!!nl2br($product_industry->product_industry_case_study_description)!!}</p>
                        @if(!empty($product_industry->product_industry_case_study_link))
                        <a href="{{$product_industry->product_industry_case_study_link}}" target="_blank">Read More <span></span></a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </article>
    @endif
    @if(!empty(count($product_industry_sectors)))
    <!-- <article class="container-fluid exploreSection py-4">
        <div class="row">
            <div class="col-12 p-0">
                <img src="{{url('/')}}/assets/images/industries-application/sector/explore-products.jpg" alt="Explore Section" class="img-fluid">
            </div>
        </div>
    </article> -->
    
    <article class="container-fluid productCateory py-4">
        <div class="row custom__row  pr-0">
            <div class="productCateory__slider owl-carousel owl-theme">
                @foreach($product_industry_sectors as $product_industry_sector_row)
                <div class="item industries__details">
                    <div class="industries__details__main">
                        <img src="{{url('/')}}/assets/images/product-industry/{{$product_industry_sector_row->product_industry_sector_thumbnail}}" alt="{{$product_industry_sector_row->product_industry_sector_name}}" class="img-fluid">
                        <div class="caption">
                            <span>{{$product_industry_sector_row->product_industry_sector_name}}</span>
                            <h3>{{$product_industry_sector_row->product_industry_sector_caption}}</h3>
                            <div class="paragraph">{{$product_industry_sector_row->product_industry_sector_description}}</div>
                            <a class="show_pointer filter_category" data-filter="{{Str::slug($product_industry_sector_row->product_industry_sector_name)}}">View Products <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                        </div>
                    </div>
                    <div class="industries__details__hoverd" style="background:#fff url({{url('/')}}/assets/images/product-industry/{{$product_industry_sector_row->product_industry_sector_thumbnail}})no-repeat center/cover">
                         <div class="caption">
                            <span>{{$product_industry_sector_row->product_industry_sector_name}}</span>
                            <h3>{{$product_industry_sector_row->product_industry_sector_caption}}</h3>
                            <div class="paragraph">{{$product_industry_sector_row->product_industry_sector_description}}</div>
                            <a class="show_pointer filter_category" data-filter="{{Str::slug($product_industry_sector_row->product_industry_sector_name)}}">View Products <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </article>
    @endif
    @if(!empty(count($products)))
    <article class="container-fluid products" id="product-portfolio">
        <header class="row products__header custom__row text-center">
            <div class="col-12">
                <h3 class="primary-heading">Explore our Products</h3>
            </div>
            <nav class="col-12">
                <ul>
                    <li class="active filter_category" data-filter="all">All <span>({{count($products)}})</span></li>
                    @foreach($product_industry_sectors as $product_industry_sector_row)
                    @if(!empty($product_industry_sector_row->products_count))
                    <li class="filter_category" data-filter="{{Str::slug($product_industry_sector_row->product_industry_sector_name)}}">{{$product_industry_sector_row->product_industry_sector_name}} <span>({{$product_industry_sector_row->products_count}})</span></li>
                    @endif
                    @endforeach
                </ul>
            </nav>
        </header>
        <div class="row custom__row product_blocks">
            @include('product_block')
        </div>
    </article>
    @endif
</main>
@endsection