@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 industries__slider">
        <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">
                @foreach($product_industry_heads as $product_industry_head_row)
                <div class="row industries__slider__section__block m-0">
                    <div class="col-12 col-md-5 left">
                        <img src="{{url('/')}}/assets/images/product-industry/{{$product_industry_head_row->product_industry_head_image}}" alt="{{$product_industry_head_row->product_industry_head_name}}" class="img-fluid">
                        <span></span>
                    </div>
                    <div class="col-12 col-md-7 right">
                        <h4>{{$product_industry_head_row->product_industry_head_title}}</h4>
                        <p class="paragraph">{!!($product_industry_head_row->product_industry_head_description)!!}</p>
                        <h5>{{$product_industry_head_row->product_industry_head_name}}</h5>
                        <h6 class="paragtaph">{{$product_industry_head_row->product_industry_head_designation}}</h6>
                    </div>
                </div>
                @endforeach
            </div>
        </section>
    </article>
    <article class="container-fluid productIntro pb-0 pt-0">
        <section class="row custom__row justify-content-center">
            <header class="col-12 col-md-10 col-lg-8 text-center">
                <h2 class="secondary-heading mb-4">A partner of choice in diverse industries,  Raychem RPG is committed to meet and deliver expectations of each and every stakeholder in the ecosystem.</h2>
            </header>
        </section>
        <section class="row custom__row justify-content-center productIntro__filter">
            <div class="col-12 col-md-8 col-lg-5 text-center">
                <div class="row">
                    <div class="col-12 col-md-12 productIntro__filter__block product__search">
                        <div class="productIntro__filter__block__dropdown">
                            <input type="text" class="form-control" id="filter_industries" placeholder="Search by Industries or Applications">
                            <span><img src="{{url('/')}}/assets/images/global/search-icon.png" alt="Search by Industries or Applications" class="img-fluid"></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="row custom__row industries mt-4 pt-4">
            @foreach($product_industries as $product_industry_row)
            <div class="col-12 col-md-4 col-lg-3 industries__block">
                <div class="industries__block__inner text-center">
                    <div class="image">
                        <img src="{{url('/')}}/assets/images/product-industry/{{$product_industry_row->product_industry_thumbnail}}" alt="{{$product_industry_row->product_industry_name}}" class="img-fluid product__main__image">
                    </div>
                    <div class="product_content_block">
                        <h3 class="product-title">{{$product_industry_row->product_industry_name}}</h3>
                        <p>{{$product_industry_row->product_industry_description}}</p>
                    </div>
                    <a href="{{url('/')}}/industries-and-applications/{{$product_industry_row->product_industry_url_slug}}">Learn More <span><img src="{{url('/')}}/assets/images/home/right-arrow-red.png" alt="Learn More" class="img-fluid"></span></a>
                </div>
            </div>
            @endforeach
        </section>
    </article>
</main>
@endsection