@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')
<div class="container-fluid banner p-0 service-app-slider-ban">
    <div class="banner__slider owl-carousel owl-theme">
        @foreach($service_app_sliders as $service_app_slider_row)
        <div class="banner__slider__item">
            <img src="{{url('/')}}/assets/images/service-app-sliders/{{$service_app_slider_row->slider_image}}" alt="{{$service_app_slider_row->slider_caption}}" class="img-fluid slider-image desktop_image">
            <img src="{{url('/')}}/assets/images/service-app-sliders/{{$service_app_slider_row->slider_image_mobile}}" alt="{{$service_app_slider_row->slider_caption}}" class="img-fluid slider-image mobile_image">
            <div class="banner__slider__item__caption">
                <h1 class="slider-heading mb-4">{!!nl2br($service_app_slider_row->slider_caption)!!}</h1>
                <p class="paragraph mb-4">{!!nl2br($service_app_slider_row->slider_caption_two)!!}</p>
                @if(!empty($service_app_slider_row->slider_button_link) && !empty($service_app_slider_row->slider_button_name))
                <a href="{{$service_app_slider_row->slider_button_link}}" class="mb-4">{{$service_app_slider_row->slider_button_name}}</a>
                @endif
                <div class="nav">
                    <div class="left"><img src="{{url('/')}}/assets/images/global/left-white.png" alt="Slide Left" class="img-fluid" width="25" height="22"></div>
                    <div class="counter"></div>
                    <div class="right"><img src="{{url('/')}}/assets/images/global/right-white.png" alt="Slide Right" class="img-fluid" width="25" height="22"></div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
<div class="container-fluid serviceDetails serviceExperience mt-4 mt-2">
    <div class="row experience__wrap custom__row">
        <div class="col-12 col-md-6 welcome__video">
            <div class="welcome__video__inner @if(!empty($service_app_about_us->home_page_about_us_youtube_video_id)) play__icon @endif" @if(!empty($service_app_about_us->home_page_about_us_youtube_video_id)) data-youtube-id="{{$service_app_about_us->home_page_about_us_youtube_video_id}}" @endif>
                <img src="{{url('/')}}/assets/images/home-page/{{$service_app_about_us->home_page_about_us_image}}" class="img-fluid" alt="{{$service_app_about_us->home_page_about_us_title}}">
                @if(!empty($service_app_about_us->home_page_about_us_youtube_video_id))
                <span class="play"><img src="{{url('/')}}/assets/images/home/play-icon.png" alt="Play video" class="img-fluid" title="Play video"></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">{{$service_app_about_us->home_page_about_us_title}}</h4>
                <p class="paragraph my-4">{!!nl2br($service_app_about_us->home_page_about_us_description)!!}</p>
                @if(!empty($service_app_about_us->home_page_about_us_link) && !empty($service_app_about_us->home_page_about_us_button_name))
                <a href="{{$service_app_about_us->home_page_about_us_link}}" class="link" target="_blank">{{$service_app_about_us->home_page_about_us_button_name}}</a>
                @endif
            </div>
        </div>
    </div>
</div>
@if(!empty(count($service_app_activities)))
<div class="container-fluid serviceProductivity">
    <div class="container">
        <div class="row">
            <div class="col-12 text-left">
                <h4 class="secondary-heading mb-5 pb-2">Record All Jointing Activities & Boost Overall Productivity</h4>
            </div>
            <div class="col-12 col-md-12 col-lg-12 owl-carousel owl-theme" id="serviceProductivity__slider">
                @foreach($service_app_activities as $service_app_activity_row)
                <div class="row productivitysingle__section m-0">
                    <div class="col-12 col-lg-4 col-md-6 left">
                        @if(empty($service_app_activity_row->activity_video))
                        <div class="productivitysingle__sectionimg">
                            <img src="{{url('/')}}/assets/images/service-app-activities/{{$service_app_activity_row->activity_image}}" alt="{{$service_app_activity_row->activity_caption}}" class="img-fluid">
                            <span></span>
                        </div>
                        @else
                        <div class="productivitysingle__video">
                            <video height="100%" @if(!empty($service_app_activity_row->activity_image)) poster="{{url('/')}}/assets/images/service-app-activities/{{$service_app_activity_row->activity_image}}" @endif autoplay muted controls>
                                <source src="{{url('/')}}/assets/images/service-app-activities/{{$service_app_activity_row->activity_video}}" type="video/mp4"></video>
                           
                        </div>
                        <span></span>
                        @endif
                    </div>
                    <div class="col-12 col-lg-8 col-md-6 right">
                        <h4 class="mb-4">{{$service_app_activity_row->activity_caption}}</h4>
                        <p>{!!nl2br($service_app_activity_row->activity_caption_two)!!}</p>
                        @if(!empty($service_app_activity_row->activity_button_link) && !empty($service_app_activity_row->activity_button_name))
                        <a href="{{$service_app_activity_row->activity_button_link}}" class="white-btn" target="_blank">{{$service_app_activity_row->activity_button_name}}</a>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endif
@if(!empty(count($service_app_customer_experiences)))
<div class="container-fluid customerExperience">
    <div class="container">
        <div class="row text-center">
            <div class="col-12 col-md-12 text-center">
                <h4 class="secondary-heading mb-5">Delightful Customer Experience</h4>
            </div>
            @foreach($service_app_customer_experiences as $service_app_customer_experience_row)
            <div class="col-12 col-md-4">
                <div class="experience-single">
                    <img src="{{url('/')}}/assets/images/service-app/{{$service_app_customer_experience_row->service_app_customer_experience_image}}" class="img-fluid" alt="Delightful Customer Experience">
                    <p>{{$service_app_customer_experience_row->service_app_customer_experience_caption}}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
<!-- 
@endif
<div class="container-fluid requestDemo" id="requestDemo">
    <div class="container">
        <div class="row text-center requsteDemo-content">
            <div class="col-12 col-md-12">
                <h4 class="secondary-heading mb-5">If you're ready to elevate your electrical services, then the RRPL service app is the perfect solution for you. </h4>
            </div>
            <div class="col-12 text-center mb-3">
                <h5>Request A Demo</h5>
            </div>
            <div class="col-12 col-md-12 mb-5">
                <form class="row requestForm" id="demo_request_form">
                    @csrf
                    <div class="col-12 form-group">
                        <input type="email" class="form-control" placeholder="Enter Your Email Address" id="demo_request_email_id" name="demo_request_email_id" title="Enter Your Email Address">
                        <button type="submit" class="btn white__btn"><img src="{{url('/')}}/assets/images/service-app/request-submitbtn.png" class="img-fluid"></button>
                        <div class="error" style="height: 0px;">
                            <span id="demo_request_email_id_err"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-12 col-md-12 text-center d-none">
                <h5 class="mb-3">Latest App Blog</h5>
                <p class="mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et<br>
                 dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                 <a href="https://www.raychemrpg.com/" class="white-btn blue-btn" target="_blank">View Latest Blogs & Articles</a>
            </div>
        </div>
    </div>
</div>
 -->
@if(!empty(count($service_app_testimonials)))
<div class="container-fluid serviceTestimonial">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-12 text-center">
                <h4 class="secondary-heading mb-5">Testimonials</h4>
            </div>
            <div class="col-12 col-md-12 owl-carousel owl-theme" id="serviceTestimonial__slider">
                @foreach($service_app_testimonials as $service_app_testimonial_row)
                <div class="serviceTestimonial_section mx-0">
                    <div class="service-testimonialsingle ">
                        <p>"{{$service_app_testimonial_row->service_app_testimonial_title}}</p>
                        <p>{!!nl2br($service_app_testimonial_row->service_app_testimonial_description)!!}"</p>
                        <h6>{{$service_app_testimonial_row->service_app_testimonial_caption}}</h6>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endif        
<!-- 
<div class="container-fluid customerInteraction">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-12 text-center">
                <h4 class="secondary-heading mb-5">Want To Know More? <br>Contact Our Customer Interaction Cell</h4>
            </div>
        </div>
        <div class="row max-600">
            <div class="col-12 col-md-6">
                <div class="interaction-content">
                    <img src="{{url('/')}}/assets/images/service-app/interaction-phone.png" class="img-fluid mb-4">
                    <p>Contact Us:</p>
                    <p><a href="tel:+912245745060">02245745060</a></p>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="interaction-content">
                    <img src="{{url('/')}}/assets/images/service-app/interaction-mail.png" class="img-fluid mb-4">
                    <p>Email Us: </p>
                    <p><a href="mailto:cic@raychemrpg.com">cic@raychemrpg.com</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
 -->
@endsection