@extends('layouts.website_layout')
@section('meta_title', $product_category->meta_title)
@section('meta_description', $product_category->meta_description)
@section('canonical_tag', "product-category/".$product_category->product_category_url_slug)
@section('banner_image', "banners/".$product_category->banner_image)
@section('content')
<main>
    @include('product_banner_html')
    <div class="container-fluid welcome serviceDetails">
        <div class="row custom__row">
            <div class="col-12 col-md-6 welcome__video">
                <div class="welcome__video__inner rightBorder">
                    <img src="{{url('/')}}/assets/images/product-category/{{$product_category->product_category_thumbnail}}" alt="{{$product_category->product_category_name}}" class="img-fluid">
                </div>
                <span class="bg"></span>
            </div>
            <div class="col-12 col-md-6 welcome__intro">
                <div class="welcome__intro__inner">
                    <h4 class="secondary-heading m-0">{{$product_category->introduction_title}}</h4>
                    <p class="paragraph my-4">{!!nl2br($product_category->introduction_description)!!}</p>
                    @if(!empty($product_category->product_category_catalog))
                    <a data-toggle="modal" data-target="#brochureModal" class="show_pointer">Download {{$product_category->product_category_name}} Catalog</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @if(!empty(count($products)))
    <article class="container-fluid servicesRange">
        <div class="row custom__row">
            <section class="col-12 title">
                <h2>Capabilities Machined components</h2>
            </section>
            @foreach($products as $product_row)
            <section class="col-12 col-md-6 col-lg-3 servicesRange__list">
                <figure>
                    <img src="{{url('/')}}/assets/images/products/{{$product_row->product_thumbnail}}" alt="{{$product_row->product_name}}" class="img-fluid">
                    <figcaption>
                        <h3>{{$product_row->product_name}}</h3>
                        <p>{!!Str::limit(strip_tags($product_row->product_description, 100))!!}</p>
                        <a class="show_pointer">Learn More <span></span></a>
                    </figcaption>
                    <div class="overlay">
                        <h4>{{$product_row->product_name}}</h4>
                        <p class="paragrah">{!!$product_row->product_description!!}</p>
                    </div>
                </figure>
            </section>
            @endforeach
        </div>
    </article>
    @endif
    @if(!empty(count($service_processes)))
    <article class="container-fluid servicesRange">
        <div class="row custom__row">
            @foreach($service_processes as $service_process_row)
            <section class="col-12 col-md-8 m-auto title text-center">
                <h2>{{$service_process_row->product_category_case_study_caption}}</h2>
                <p class="paragraph">{!!nl2br($service_process_row->service_case_study_description)!!}</p>
            </section>            
            <section class="col-12 mt-4">
                <img src="{{url('/')}}/assets/images/product-category/{{$service_process_row->product_category_case_study_image}}" alt="{{$service_process_row->product_category_case_study_caption}}" class="img-fluid">
            </section>
            @endforeach
        </div>
    </article>
    @endif
    @if(!empty(count($product_category_developments)))
    <article class="container-fluid servicesRange">
        <div class="row">
            <section class="col-12 col-md-8 m-auto title text-center">
                <h2>Case Studies</h2>
            </section>
            <section class="col-12 p-0 mt-4">
                <div class="caseStudySlider owl-carousel owl-theme">
                    @foreach($product_category_developments as $product_category_development_row)
                    <div class="item">
                        <figure>
                            <img src="{{url('/')}}/assets/images/product-category/{{$product_category_development_row->product_category_development_thumbnail}}" alt="{{$product_category_development_row->product_category_development_caption}}" class="img-fluid">
                            <figcaption>
                                <h3>{{$product_category_development_row->product_category_development_caption}}</h3>
                                <p class="paragraph">{!!nl2br($product_category_development_row->product_category_development_description)!!}</p>
                                @if(!empty($product_category_development_row->product_category_development_link))
                                <a href="{{$product_category_development_row->product_category_development_link}}" target="_blank">Learn More</a>
                                @endif
                                <div class="nav">
                                    <div class="left"><img src="{{url('/')}}/assets/images/global/left-white.png" alt="Slide Left" class="img-fluid"></div>
                                    <div class="counter"></div>
                                    <div class="right"><img src="{{url('/')}}/assets/images/global/right-white.png" alt="Slide Right" class="img-fluid"></div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    @endforeach
                </div>
            </section>
        </div>
    </article>
    @endif
    @if(!empty(count($btp_testimonials)))
    <article class="container-fluid testimonialSection">
        <div class="row custom__row">
            <section class="col-12 col-md-9 col-lg-9 m-auto title text-center">
                <h2>Testimonials</h2>
            </section>
            <section class="col-12 col-md-9 col-lg-9 m-auto mt-3 py-4">
                <div class="testimonials owl-carousel owl-theme">
                    @foreach($btp_testimonials as $btp_testimonial_row)
                    <div class="item">
                        <figure class="row m-0">
                            <figcaption class="col-12 col-md-7 p-0">
                                <h3>{{$btp_testimonial_row->btp_testimonial_title}}</h3>
                                <p class="paragraph">{!!nl2br($btp_testimonial_row->btp_testimonial_description)!!}</p>
                                <h4>{{$btp_testimonial_row->btp_testimonial_name}}</h4>
                                <p class="paragraph">{{$btp_testimonial_row->btp_testimonial_designation}}</p>
                            </figcaption>
                            <div class="col-12 col-md-5 p-0" style="background: url({{url('/')}}/assets/images/product-category/{{$btp_testimonial_row->btp_testimonial_thumbnail}})no-repeat center/cover;">
                            </div>
                        </figure>
                    </div>
                    @endforeach
                </div>
            </section>
        </div>
    </article>
    @endif
    <article class="container-fluid servicesRange mb-5">
        <div class="row custom__row">
            <section class="col-12 col-md-8 m-auto title text-center">
                <h2 class="mt-5">{{$product_category->product_category_video_title}}</h2>
                <p class="paragraph">{!!nl2br($product_category->product_category_video_description)!!}</p>
            </section>
            @if(!empty($product_category->product_category_video_thumbnail))
            <section class="col-12 mt-4 p-0">
                <figure class="col-12 specifications__video my-4 @if(!empty($product_category->product_category_video_youtube_id)) play__icon @endif" @if(!empty($product_category->product_category_video_youtube_id)) data-youtube-id="{{$product_category->product_category_video_youtube_id}}" @endif>
                    <img src="{{url('/')}}/assets/images/product-category/{{$product_category->product_category_video_thumbnail}}" alt="{{$product_category->product_category_video_title}}" class="img-fluid">
                    @if(!empty($product_category->product_category_video_youtube_id))
                    <img src="{{url('/')}}/assets/images/product-details/play-button.png" alt="play" class="img-fluid play">
                    @endif
                </figure>
            </section>
            @endif
        </div>
    </article>
    <article class="container-fluid connect">
        <div class="row custom__row">
            <div class="col-12">
                <div class="row connect__outer m-0">
                    @if(!empty($product_category->product_category_catalog))
                    <div class="col-12 col-md-12 col-lg-6 left p-0">
                        <a data-toggle="modal" data-target="#brochureModal" class="show_pointer">
                            <img src="{{url('/')}}/assets/images/services/bh24R44lPkaBdlfj73JRD7eqOb9CV5.jpg" alt="Download {{$product_category->product_category_name}} Catalog" class="img-fluid">
                            <div class="caption">
                                <h3 class="secondary-heading">Download {{$product_category->product_category_name}} Catalog<span></span></h3>
                            </div>
                        </a>
                    </div>
                    @endif
                    @if(!empty($product_category->product_category_contact_person))
                    <div class="col-12 col-md-12 col-lg-6 right p-0">
                        <div class="inner">
                            <h3 class="secondary-heading">Connect with us <br> in more ways than 1</h3>
                            <ul>
                                <li><span><img src="{{url('/')}}/assets/images/product-details/chat.png" alt="Chat"></span>{{$product_category->product_category_contact_person}}</li>
                                @if(!empty($product_category->product_category_contact_email_id))
                                <li><span><img src="{{url('/')}}/assets/images/product-details/email.png" alt="Call"></span> <a href="mailto:{{$product_category->product_category_contact_email_id}}">{{$product_category->product_category_contact_email_id}}</a></li>
                                @endif
                                @if(!empty($product_category->product_category_contact_number))
                                <li><span><img src="{{url('/')}}/assets/images/product-details/telephone.png" alt="Email"></span> <a href="tel:{{$product_category->product_category_contact_number}}">{{$product_category->product_category_contact_number}}</a></li>
                                @endif
                            </ul>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </article>
</main>
@endsection