@extends('layouts.website_layout')
@section('meta_title', $service->meta_title)
@section('meta_description', $service->meta_description)
@section('canonical_tag', "services/".$service->service_url_slug)
@section('banner_image', "banners/".$service->banner_image)
@section('content')
<main>
    <article class="container-fluid innerBanner p-0">
        <figure>
            <img src="{{url('/')}}/assets/images/banners/{{$service->banner_image}}" alt="{{$service->service_name}}" class="img-fluid desktop_image">
            <img src="{{url('/')}}/assets/images/banners/{{$service->banner_image_mobile}}" alt="{{$service->service_name}}" class="img-fluid mobile_image">
            <figcaption class="custom__row slider-heading">
                {!!($service->banner_caption)!!}
                <p class="paragraph mt-4">{!!($service->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('/')}}/services">Services</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$service->service_name}}</li>
                    </ol>
                </nav>
            </figcaption>
        </figure>
    </article>
    <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">
                    <img src="{{url('/')}}/assets/images/services/{{$service->service_overview_image}}" alt="{{$service->service_overview_title}}" 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">{{$service->service_overview_title}}</h4>
                    <p class="paragraph my-4">{{$service->service_overview_description}}</p>
                    @if(!empty($service->service_catalog))
                    <a href="{{url('/')}}/assets/pdfs/{{$service->service_catalog}}" target="_blank">Download Service Catalog</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <article class="container-fluid servicesRange">
        <div class="row custom__row">
            <section class="col-12 title">
                <h2>Range of services we offer</h2>
            </section>
            @foreach($service_solutions as $service_solution_row)
            <section class="col-12 col-md-6 col-lg-3 servicesRange__list">
                <figure>
                    <img src="{{url('/')}}/assets/images/services/{{$service_solution_row->service_solution_thumbnail}}" alt="{{$service_solution_row->service_solution_title}}" class="img-fluid">
                    <figcaption>
                        <h3>{{$service_solution_row->service_solution_title}}</h3>
                        <p>{!!Str::limit(html_entity_decode(strip_tags($service_solution_row->service_solution_description)), 80)!!}</p>
                        @if(!empty($service_solution_row->service_solution_button_link))
                        <a href="{{$service_solution_row->service_solution_button_link}}">Learn More <span></span></a>
                        @endif
                    </figcaption>
                    <div class="overlay">
                        <h4>{{$service_solution_row->service_solution_title}}</h4>
                        <p class="paragrah">{!!html_entity_decode($service_solution_row->service_solution_description)!!}</p>
                    </div>
                </figure>
            </section>
            @endforeach
        </div>
    </article>
    @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->service_process_caption}}</h2>
                <p class="paragraph">{!!nl2br($service_process_row->service_process_description)!!}</p>
            </section>            
            <section class="col-12 mt-4">
                <img src="{{url('/')}}/assets/images/services/{{$service_process_row->service_process_image}}" alt="{{$service_process_row->service_process_caption}}" class="img-fluid">
            </section>
            @endforeach
        </div>
    </article>
    @endif
    <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($service_case_studies as $service_case_study_row)
                    <div class="item">
                        <figure>
                            <img src="{{url('/')}}/assets/images/services/{{$service_case_study_row->service_case_study_image}}" alt="{{$service_case_study_row->service_case_study_caption}}" class="img-fluid">
                            <figcaption>
                                <h3>{{$service_case_study_row->service_case_study_caption}}</h3>
                                <p class="paragraph">{!!nl2br($service_case_study_row->service_case_study_description)!!}</p>
                                <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>
    @if(!empty(count($service_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($service_testimonials as $service_testimonial_row)
                    <div class="item">
                        <figure class="row m-0">
                            <figcaption class="col-12 col-md-7 p-0">
                                <h3>{{$service_testimonial_row->service_testimonial_title}}</h3>
                                <p class="paragraph">{!!nl2br($service_testimonial_row->service_testimonial_description)!!}</p>
                                <h4>{{$service_testimonial_row->service_testimonial_name}}</h4>
                                <p class="paragraph">{{$service_testimonial_row->service_testimonial_designation}}</p>
                            </figcaption>
                            <div class="col-12 col-md-5 p-0" style="background: url({{url('/')}}/assets/images/services/{{$service_testimonial_row->service_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">{{$service->service_video_title}}</h2>
                <p class="paragraph">{!!nl2br($service->service_video_description)!!}</p>
            </section>
            @if(!empty($service->service_video_title))
            <section class="col-12 mt-4 p-0">
                <figure class="col-12 specifications__video my-4 @if(!empty($service->service_video_youtube_id)) play__icon @endif" @if(!empty($service->service_video_youtube_id)) data-youtube-id="{{$service->service_video_youtube_id}}" @endif>
                    <img src="{{url('/')}}/assets/images/services/{{$service->service_video_thumbnail}}" alt="{{$service->service_video_title}}" class="img-fluid">
                    @if(!empty($service->service_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">
                    <div class="col-12 col-md-12 col-lg-6 left p-0">
                        @if(!empty($service->service_catalog))
                        <a data-toggle="modal" data-target="#servicebrochureModal" data-href="{{url('/')}}/assets/pdfs/{{$service->service_catalog}}" class="show_pointer">
                            <img src="{{url('/')}}/assets/images/services/{{$service->service_catalog_image}}" alt="{{$service->service_catalog_caption}}" class="img-fluid">
                            <div class="caption">
                                <h3 class="secondary-heading">{!!nl2br($service->service_catalog_caption)!!}<span></span></h3>
                            </div>
                        </a>
                        @endif
                    </div>
                    <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>
                                @if(!empty($service->service_contact_name))
                                <li><span><img src="{{url('/')}}/assets/images/product-details/chat.png" alt="Chat"></span>{{$service->service_contact_name}}</li>
                                @endif
                                @if(!empty($service->service_contact_email_id))
                                <li><span><img src="{{url('/')}}/assets/images/product-details/email.png" alt="Call"></span> <a href="mailto:{{$service->service_contact_email_id}}">{{$service->service_contact_email_id}}</a></li>
                                @endif
                                @if(!empty($service->service_contact_number))
                                <li><span><img src="{{url('/')}}/assets/images/product-details/telephone.png" alt="Email"></span> <a href="tel:{{$service->service_contact_number}}">{{$service->service_contact_number}}</a></li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
    @if(!empty(count($products_most_viewed)))
    <div class="container-fluid browsed" id="products">
        <div class="row custom__row browsed__inner pr-0">
            <div class="browsed__intro col-12 col-md-12 col-lg-3">
                <h3 class="secondary-heading">Browse Most <br> Viewed Products</h3>
                <p class="paragraph">All products provided below with slider to find faster.</p>
                <div class="nav mt-5">
                    <div class="left"><img src="{{url('/')}}/assets/images/home/left-arrow-black.png" alt="Slide Left" class="img-fluid"></div>
                    <div class="number"><span class="activeSlide"></span> / <span class="slides"></span></div>
                    <div class="right"><img src="{{url('/')}}/assets/images/home/right-arrow-black.png" alt="Slide Right" class="img-fluid"></div>
                </div>
            </div>
            <div class="browsed__slider owl-carousel owl-theme col-12 col-md-12 col-lg-9">
                @foreach($products_most_viewed as $product_row)
                <div class="browsed__slider__item text-center">
                    <div class="browsed__slider__item__image">
                        <img src="{{url('/')}}/assets/images/products/{{$product_row->product_thumbnail}}" alt="{{$product_row->product_name}}" class="img-fluid browsed__image">
                        @if($product_row->product_3d_gallery == 1)
                        <span class="threeD img-fluid open_three_d_box" data-toggle="modal" data-target="#threeDModal" data-url="{{$product_row->product_url_slug}}"><img src="{{url('/')}}/assets/images/home/3d-icon.png" alt="View 3D"></span>
                        @endif
                        @if(!empty($product_row->product_block_label_title))
                        <span class="label d-none {{strtolower(str_replace(' ', '', $product_row->product_block_label_title))}}">{{$product_row->product_block_label_title}}</span>
                        @endif
                        <ul>
                            <li class="already_in_list" @if(!in_array($product_row->id, $product_ids_array)) style="display:none" @endif><img src="{{url('/')}}/assets/images/home/list-style.png" alt="Add to list" class="img-fluid"></li>
                            <li class="add_to_list" data-id="{{$product_row->id}}" @if(in_array($product_row->id, $product_ids_array)) style="display:none" @endif><img src="{{url('/')}}/assets/images/home/addlist.png" alt="Add to list" class="img-fluid"></li>
                            @if(isset($product_core_feature_objects->{$product_row->id}))
                            @foreach($product_core_feature_objects->{$product_row->id} as $product_core_feature_object_row)
                            <li class="d-none"><img src="{{url('/')}}/assets/images/core-feature/{{$product_core_feature_object_row->product_core_feature_icon}}" alt="{{$product_core_feature_object_row->product_core_feature_caption}}" class="img-fluid"></li>
                            @endforeach
                            @endif
                        </ul>
                    </div>
                    <h3 class="product-title">{{$product_row->product_name}}</h3>
                    <p>{{Str::limit($product_row->product_description, 100)}}</p>
                    <a href="{{url('/')}}/{{$product_row->product_url_slug}}">Learn More <span><img src="{{url('/')}}/assets/images/home/right-arrow-red.png" alt="Learn More" class="img-fluid"></span></a>
                    <span class="overlay"></span>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
    <div class="modal fade brochureModal" id="servicebrochureModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <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 brochureModal__body">
                    <div class="row m-0">
                        <div class="row m-0">
                            <div class="col-12 col-md-12 col-lg-5 p-0">
                                <div class="brochureModal__body__image"
                                    style="background: #fff url({{url('/')}}/assets/images/product-details/brochure_dowload_bg.png)no-repeat center/cover;">
                                </div>
                            </div>
                            <div class="col-12 col-md-12 col-lg-7 p-0">
                                <form class="row brochureModal__body__content" id="download_service_brochure_form">
                                    @csrf
                                    <input type="hidden" name="service_id" id="service_id" @if(isset($service->id)) value="{{$service->id}}" @endif>
                                    <div class="col-12 title mb-4 thank_you_message d-none">
                                        <h3 class="secondary-heading"><span>Thank You</span> for requesting a Brochure Download.</span></h3>
                                    </div>
                                    <div class="col-12 col-md-6 form-group">
                                        <input type="text" class="form-control" placeholder="First Name" id="user_first_name" name="user_first_name">
                                        <div class="error">
                                            <span id="user_first_name_err"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 form-group">
                                        <input type="text" class="form-control" placeholder="Last Name" id="user_last_name" name="user_last_name">
                                        <div class="error">
                                            <span id="user_last_name_err"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 form-group">
                                        <input type="text" class="form-control" placeholder="Company Name" id="user_company_name" name="user_company_name">
                                        <div class="error">
                                            <span id="user_company_name_err"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 form-group">
                                        <input type="email" class="form-control" placeholder="Email Address" id="user_email_id" name="user_email_id">
                                        <div class="error">
                                            <span id="user_email_id_err"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 form-group">
                                        <input type="text" class="form-control" placeholder="Phone Number" id="user_phone_number" name="user_phone_number" inputmode="numeric">
                                        <div class="error">
                                            <span id="user_phone_number_err"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-5 submit__btn">
                                        <button type="submit" class="btn white__btn">Submit</button>
                                    </div>
                                    <div class="col-12 col-md-2 or">
                                        <p>//<span>OR</span>//</p>
                                    </div>
                                    <div class="col-12 col-md-5 download__btn">
                                        <a @if(isset($service->service_catalog) && !empty($service->service_catalog)) href="{{url('/')}}/assets/pdfs/{{$service->service_catalog}}" @endif target="_blank" class="btn red__btn download_as_guest_link">Download as Guest</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection