@extends('website.layouts.app')
 @section('title','Home')
  @section('content')
<style>
p.test2 {
    writing-mode: vertical-rl;
    padding: 10px;
    background: radial-gradient(#4b6f9c, #152842);
    border: 1px solid #fff;
    font-weight: 700;
    letter-spacing: 0.03rem;
    cursor: pointer;
}

.icon-bar {
    position: fixed;
    top: 50%;
    left: -14px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

.img-wrapper {
    overflow: hidden;
}

.inner-img {
    transition: 0.3s;
}

.inner-img:hover {
    transform: scale(1.1);
}

.img-wrapper {
    display: inline-block;
    box-sizing: border-box;
    //border: 1px solid #000;
    width: 100%;
}

#tsum-tabs h1 {
    padding: 50px 0;
    font-weight: 400;
    text-align: center;
}

#tsum-tabs p {
    margin: 0 0 20px;
    line-height: 1.5;
}


 .text-limit{
          display: block;display: -webkit-box;max-width: 100%;height: 82px;margin: 0 auto;font-size: 14px;line-height: 1.5;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
          text-align: justify;
    }

@media (max-width: 600px) {
  .carousel-caption p{
    display: none !important;
  }
}


/*enquire now*/
 .strice{
        color: red !important;
    }
/*.scroll-content{
    height: 550px;
    overflow-y: scroll;
}*/

/* width */
/*.scroll-content::-webkit-scrollbar{
width: 4px;

}
::-webkit-scrollbar-thumb {
  background: lightgray; 
}
*/
@media (min-width: 992px){
.p-lg-55 {
    padding:0rem 8rem !important;
}
}
</style>



<!-- start slider -->
<div id="demo" class="carousel " data-ride="carousel" data-interval="2000">
    <ul class="carousel-indicators"> @php $count = 0; @endphp @foreach($banners as $banner) @if($count == 0)
        <li data-target="#demo" data-slide-to="{{ $count }}" class="active"></li> @else
        <li data-target="#demo" data-slide-to="{{ $count }}">
            
        </li> @endif @php $count++; @endphp @endforeach
        <!-- <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="3"></li> -->
    </ul>
    <div class="carousel-inner"> @php $count = 0; @endphp @foreach($banners as $banner) @if($count == 0)
        <div class="carousel-item active"> <img src="{{ asset($banner->banner_path ?? '') }}" alt="" class="img-fluid">
            <div class="carousel-caption animated fadeInUp delay-0.5s">
                <h1 class="font-weight-bold">{{$banner->title ?? ''}}</h1>
                <p class="banner-desc" style="font-size: 18px;">{!! $banner->description ?? '' !!}</p>
                
                <!--  <a href="javascript:" class="theme-orange btn mt-3 apply-now">Apply Now</a>  -->

            </div>
        </div> @else
        <div class="carousel-item"> <img src="{{ asset($banner->banner_path ?? '') }}" alt="" class="img-fluid">
            <div class="carousel-caption animated fadeInUp delay-0.5s">
                <h1 class="font-weight-bold">{{$banner->title ?? ''}}</h1>
                <p class="banner-desc " style="font-size: 18px;">{!! $banner->description ?? '' !!}</p>
                <!--  <a href="javascript:" class="theme-orange btn mt-3 apply-now">Apply Now</a>  -->
            </div>
        </div>

        <a class="carousel-control-prev" href="#demo" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#demo" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
         @endif @php $count++; @endphp @endforeach </div>
</div>
<!-- end slider -->



<!-- start about us -->
<section class="about-us mt-5">
    <div class="">
        <div class="container welcome_text">
            <div class="row">
                <div class="col-lg-6"> <img src="{{ asset($about->image_path ?? '') }}" class="img-fluid" alt=""> </div>
                <div class="col-lg-6">
                    <div class="home_about_content text-left">
                        <h1 style="color: #002147;"><b>{{ $about->title ?? '' }}</b></h1>
                        <p class="grey-font text-justify">{!! $about->description !!}</p>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end about us -->
<!-- start target -->
<section class="target" style="overflow: auto;">
    <div class="container">
        <div class="sec-title text-center bg-fill mb-3">
            <h2>Our Services</h2> </div>
        <div class="row">
            <div class="col-md-12">
                <!-- <div class="owl-carousel" id="service_carousel"> -->
                <div>
                    
                    <div class="row"> @foreach($services as $service)
                        
                        <div class=" col-md-4 mt-4">
                            <div class="Service_box  img-wrapper"> <a href="{{ action('WebsiteController\WebsiteController@subCategory', [base64_encode($service->id)]) }}">
                                    <img src="{{ asset($service->image_path ?? '') }}"  class="inner-img"  style="width: 100%;" alt="">
                                    <div class="service_content p-0">
                                        <h5 class="color-blue mt-3">{{ $service->name ?? '' }} </h5>

                                        <div class="text-limit"style="margin-top: 0px;text-align: justify;">{!! $service->description ?? '' !!}</div>
 
                                    </div>
                                    </a> </div>
                        </div> @endforeach </div>
                 <!--    <div style="padding-top: 31px;">
                        <center> <a type="button" href="{{ action('WebsiteController\WebsiteController@service') }}" data-href="#" class="btn btn-main request_btn">Show More</a> </center>
                    </div> -->
                </div>
                <!-- </div> -->
            </div>
        </div>
    </div>
</section>
<!-- end target -->

<!-- start team -->
    <section class="our-team text-center bg-light ">
        <div class="container">
            <div class="sec-title text-center mb-5 mt-5">                
                <h2>Our Certifications</h2>
            </div>


            <div class="owl-carousel certificate-gallery" id="certi_carousel">


                <div>
                     <a href="{{ asset('website') }}/images/certificate/bbb.jpg" class="image">
                    <div class="team-block">
                        <div class="imagess">
                            <img src="{{ asset('website') }}/images/certificate/bb.jpg" class="img-fluid" alt="">
                        </div>
                    </div>
                </a>
                </div>


                 <div>
                     <a href="{{ asset('website') }}/images/certificate/ccc.jpg" class="image">
                    <div class="team-block">
                        <div class="">
                            <img src="{{ asset('website') }}/images/certificate/cc.jpg" class="img-fluid" alt="">
                        </div>
                    </div>
                </a>
                </div>


                 <div>
                     <a href="{{ asset('website') }}/images/certificate/ddd.jpg" class="image">
                    <div class="team-block">
                        <div class="">
                            <img src="{{ asset('website') }}/images/certificate/dd.jpg" class="img-fluid" alt="">
                        </div>
                    </div>
                </a>
                </div>


                 <div>
                     <a href="{{ asset('website') }}/images/certificate/aaa.jpg" class="image">
                    <div class="team-block">
                        <div class="">
                            <img src="{{ asset('website') }}/images/certificate/aa.jpg" class="img-fluid" alt="">
                        </div>
                    </div>
                </a>
                </div>

<!-- 
                 <div>
                    <a href="{{ asset('website') }}/images/certificate/5.jpg" class="image">
                    <div class="team-block">
                        <div class="">
                            <img src="{{ asset('website') }}/images/certificate/5.jpg" class="img-fluid" alt="">
                        </div>
                    </div>
                </a>
                </div> -->
            </div>
          
        </div>
    </section>
    <!-- end team -->
<!-- start video & FAQ -->
<section class="">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-12 pl-0 small-screen scroll-content">
                
                <div class="sec-title bg-fill mt-md-5">
                    <h2>Why Choose Us ?</h2> </div>
                <div class="panel-group pt-3" id="accordion2" role="tablist" aria-multiselectable="true"> @php $count = 1; @endphp @foreach($whyChoosesUs as $whyChooseUs) @if($count == 1) @endif
                    <div class="panel panel-default mb-4">
                        <div class="panel-heading" role="tab" id="headingOne{{$count}}">
                            <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion2"
                                       href="#collapseOne{{$count}}"
                                       @if($count == 1) aria-expanded="true" @else aria-expanded="false" @endif   @if($count == 1) class="collapse" @else class="collapse collapsed" @endif >
                                        {{ $whyChooseUs->title ?? '' }}
                                    </a>
                                </h4> </div>
                        <div id="collapseOne{{$count}}" @if($count==1 ) class="panel-collapse collapse show" @else class="panel-collapse collapse" @endif role="tabpanel" aria-labelledby="headingOne{{$count}}">
                            <div class="panel-body ">
                                <p>{!! $whyChooseUs->description ?? '' !!}</p>

                            </div>
                        </div>
                    </div>
                     @php $count++; @endphp @endforeach </div>
            </div>

            <div class="col-lg-6 col-md-12 p-lg-55"> 
              <img src="{{asset('website/images/Hue_Saturation.png')}}" class="w-100" style="padding-top: 50px;"> 

            </div>
        </div>
    </div>
</section>
<!-- end video & FAQ -->
<!-- start our happy customer -->
<!-- <section class="happy_customer p-5">
    <div class="container">
        <div class="sec-title text-center bg-fill mb-5">
            <h2 class="text-white">Our Happy Customers</h2> </div>
        <div class="row">
            <div class="col-md-12">
                <div class="owl-carousel" id="customer_carousel"> @foreach($ourHappyCustomers as $ourHappyCustomer) 

                    <a @if($ourHappyCustomer->youtube_url != '') href="javascript:void(0)" @else
                     @endif >    
                        <div style="position: relative;">
                        <img src="{{ asset($ourHappyCustomer->image_path ?? '') }}" alt="Alt text" class="customer-img" />
                    
                        </div>
                        <div class="customer_content text-white text-center">
                            <h3>{{ $ourHappyCustomer->name ?? '' }}</h3>
                            <p class="block-ellipsis" style="  display: block;display: -webkit-box;max-width: 100%;height: 43px;margin: 0 auto;font-size: 14px;line-height: 1.5;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
                                {{ $ourHappyCustomer->comment ?? '' }} 
                            </p>
                        </div>
                    </a> @endforeach 
                </div>
            </div>
        </div>
    </div>
</section> -->






<!-- start team -->
<section class="our-team text-center bg-light">
        <div class="container">
            <div class="sec-title text-center mb-5">                
                <h2>Our Customers</h2>
            </div>

            <div class="owl-carousel" id="logo_carousel">
                
                @foreach($customerDomainLogos as $customerDomainLogo)
                <div>
                     <div class="team-block">
                        <div class="team-img">
                            <img src="{{ asset($customerDomainLogo->file_path) }}" class="img-fluid" alt="team member">
                        </div>
                    </div>
                </div>
                @endforeach


            </div>
        </div>
    </section>
<!-- end team --> 
<!-- end our happy customer -->



<!-- start event gallery -->
<section class="p-3 bg- theme-blue">
    <div class="sec-title text-center mb-4 mt-4">
        <h2 class="text-white">OEM Support</h2> </div>
    <div class="container-fluid mb-4">
        <div class="owl-carousel" id="client_carousel"> @foreach($Oems as $Oem)
            <div class=""> <img src="{{ asset($Oem->logo_path) }}" class="img-fluid"> </div> @endforeach </div>
    </div>
    
</section>

<!-- our client -->

<!-- end our client -->




<div class="icon-bar">
    <p class="btn btn btn-red test2 btn-sm" data-toggle="modal" data-target="#exampleModalCenter"> Enquire Now</p>
</div>
<!-- enquery form -->
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Enquire Now </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">

                <form class="needs-validation" method ="post" action="{{ action('WebsiteController\WebsiteController@sendemail') }}"id="add_form">
                    @csrf
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="">Name<i class="strice">*</i></label>
                            <input type="text" class="form-control" id="inputEmail4" placeholder="Name" name="name" required onkeypress="return alphanumeric(event)"> </div>
                        <div class="form-group col-md-6" >
                            <label for="">Email Id<i class="strice">*</i></label>
                            <input type="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$" class="form-control" id="" placeholder="Email ID" required name="email">
                         </div>
                    </div>
                    <div class="form-group">
                        <label for="">Mobile No.<i class="strice">*</i></label>
                        <input class="form-control" id="" placeholder="Mobile Number" name="phone" type="tel" pattern="[0-9]+" inputmode="numeric" required maxlength="10"onkeypress="return numbersonly(event)"> </div>
                    <div class="form-group">
                        <label for="">Subject<i class="strice">*</i></label>
                        <input type="text" class="form-control" id="" placeholder="Subject" name="subject" required> </div>
                    <div class="form-group">
                        <label for=""> Message<i class="strice">*</i></label>
                        <textarea class="form-control" id="" rows="3" name="message" required></textarea>

                    </div>
                     <div class="white_submit"><button id="send" class="btn btn-white" type="submit"><img src="{{asset('website')}}/images/loader/ajax-loader.gif" alt="loader1" style="display:none; height:30px; width:auto;" id="loaderImg">Submit</button></div>
            </div>
           
        </div>
    </div>
</div>
</form>

<!-- end enquery form -->

<!-- end event gallery -->





@endsection