@extends('front.template.header')
@section('content')
 <!----page-CONTENT----->
         <div id="content" class="site-content ">

            <!---slider--->
            <section class="slider slider_version_v2 style_four nav_position_one">
               <!-- owl_dots_none -->
               <div class="banner_carousel owl-carousel owl_nav_block  theme_carousel owl-theme" 
               data-options='{"loop": true, "margin": 0, "autoheight":true, "lazyload":true, "nav": true, "dots": true, "autoplay": true, "autoplayTimeout": 7000, "smartSpeed": 1800, "responsive":{ "0" :{ "items": "1" }, "768" :{ "items" : "1" } , "1000":{ "items" : "1" }}}'>
               @foreach ($sliders as $slider)
                  <div class="slide-item">
                     <div class="slide-item-content content_center">
                        <div class="image-layer" style="background-image:url('{{ asset('storage/sliders/' . $slider->image) }}')">
                        </div>
                        <div class="auto-container">
                           <div class="row">
                              <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                                 <div class="slider_content">
                                    <h1 class="animated _fadeInDownBig">
                                    {{ $slider->name }}
                                    </h1>
                                    <p class="animated _fadeInDownBig">
                                    {!! $slider->content !!}
                                    </p>
                                    <div class="thm_btn animated _zoomIn">
                                    @foreach ($slider->buttons as $button)
                                       <a href="{{ $button->link }}" target="_blank" rel="nofollow"
                                          class="theme-btn one mb-3  animated _zoomIn">
                                          {{ $button->text }}</a>
                                          @endforeach
                                       
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  @endforeach
                 

                 

               </div>
            </section>
            <!---slider-end--->
            <!----icon box---->
            <section class="icon-box-section position-relative mr_top_minus_90 z_99">
               <div class="container">
                  <div class="row">
                     @foreach ($services as $service)
                     <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12 mb-sm-5 mb-md-5 mb-lg-5 mb-xl-0">
                        <div class="icon_box_all style_five">
                           <div class="icon_content">
                              <div class="img-area">
                                 <img class="" src="{{ asset('storage/services/' . $service->service_image) }}" alt="">
                              </div>
                              <!-- <small>02</small> -->
                              <div class="text_box">
                                 <h2>{{ $service->title }}</h2>
                                 <p>{{ $service->subtitle }}</p>
                              </div>
                              <div class="hover_content">
                                 <div class="content">
                                    <div class="inner">
                                       <!-- <p>The less water you use, the less runoff and wastewater that
                                          eventually end up in the ocean.</p> -->
                                          <a href="{{ route('services.detail', $service->id) }}" class="read_more">Get started<span
                                             class="icon-right-arrow-long"></span></a>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <a href="{{ route('services.detail', $service->id) }}" class="hover-link"></a>
                        </div>

                              <!--===============spacing==============-->
                              <div class="pd_bottom_20"></div>
                              <!--===============spacing==============-->
                     </div>
                     @endforeach
                     
                   

                     
                  

                  </div>
               </div>
            </section>
            <!----icon box end---->
            <!----about---->
            <section class="about-section">
               <!--===============spacing==============-->
               <div class="pd_top_80"></div>
               <!--===============spacing==============-->
               <div class="container">
                  <div class="row">
                     <div class="col-xl-6 col-lg-12 col-md-12 mb-sm-5 mb-md-5 mb-lg-5 mb-xl-0">
                        <div class="title_all_box style_one dark_color">
                           <div class="title_sections left">
                              @php
                              $aboutUsTitle = \App\Models\HomePageDetails::where('key', 'about_us_title')->first();
                              $aboutUsDescription = \App\Models\HomePageDetails::where('key', 'about_us_description')->first();
                              @endphp
                              <div class="before_title"> About Us </div>
                              <h2 class="title"> {{ !empty($aboutUsTitle->value) ? $aboutUsTitle->value : '' }}</h2>
                              <p> {!! !empty($aboutUsDescription->value) ? \Illuminate\Support\Str::words($aboutUsDescription->value, 120, '...') : '' !!}</p>
                           </div>
                        </div>
                        <!--===============spacing==============-->
                        <div class="pd_bottom_10"></div>
                        <!--===============spacing==============-->
                        <div class="row gutter_15px">
                           <div class="col-lg-4 col-md-12">
                              <div class="theme_btn_all color_one">
                                 <a href="{{route('contact')}}"  rel="nofollow" class="theme-btn three">Contact Us</a>
                              </div>
                           </div>
                           <!-- <div class="col-lg-8 col-md-12">
                              <div class="extra_content authour_box dark_color">
                                 <div class="authour_box_content">
                                    <div class="image">
                                       <img src="assets/images/signature.png" class="img-fluid sign_image"
                                          alt="authour Image" />
                                    </div>
                                    <div class="text">
                                       <h6>Liam Oliver, <span>Founder &amp; CEO of Qetus</span>
                                       </h6>
                                    </div>
                                 </div>
                              </div>
                           </div> -->
                           <!--===============spacing==============-->
                           <!-- <div class="pd_bottom_20"></div> -->
                           <!--===============spacing==============-->
                        </div>
                        <!-- <div class="extra_content download_docs dark_color">
                           <div class="download_box_content">
                              <a href="#" download>Download our latest presentation <i class="icon-download-symbol"></i>
                              </a>
                           </div>
                        </div> -->
                     </div>
                     <div class="col-xl-6 col-lg-10 col-md-12">
                        <div class="image_boxes style_five">
                           <div class="image_box one">
                              <img src="{{asset('front/assets/images/about/about-11.jpg')}}" class="img-fluid" alt="img">
                              <div class="video_box_null">
                                 <a href="#" class="lightbox-image"><i class="icon-play"></i></a>
                              </div>
                           </div>
                           <div class="image_box two">
                              <img src="{{asset('front/assets/images/about/about-2.jpg')}}" class="img-fluid two" alt="img">
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!--===============spacing==============-->
                  <div class="pd_bottom_80"></div>
               <!--===============spacing==============-->
            </section>
            <!----about end---->
            <!----service---->
            <section class="service-section bg_light_1">
            <!--===============spacing==============-->
               <div class="pd_top_80"></div>
            <!--===============spacing==============-->
               <div class="container">
                  <div class="row">
                     <div class="col-lg-12">
                        <div class="title_all_box style_one text-center dark_color">
                           <div class="title_sections">
                              <div class="before_title">Why Choose Us</div>
                                 @php
                                 $whyChooseUsTitle = \App\Models\HomePageDetails::where('key', 'why_choose_us_title')->first();
                                 $whyChooseUsContent = \App\Models\HomePageDetails::where('key', 'why_choose_us_content')->first();
                                 @endphp
                              <h2>{{ !empty($whyChooseUsTitle->value) ? $whyChooseUsTitle->value : '' }}</h2>
                              @php
                                 $whyChooseUsContent = \App\Models\HomePageDetails::where('key', 'why_choose_us_content')->first();
                                 @endphp

                              <p>{{ !empty($whyChooseUsContent->value) ? $whyChooseUsContent->value : '' }}</p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-lg-12">
                        <div class="service_section grid_all three_column  news_wrapper_grid dark_color">
                           <div class="grid_show_case clearfix row">

                               @foreach($whychooseus as $item)
                              <div class="grid_box _card col-md-4">
                                 <div class="service_post style_four">
                                    <div class="image_box">
                                       <img src="{{ asset('storage/sliders/'.$item->image) }}" class="img-fluid" alt="img">
                                    </div>
                                    <div class="content_in_box">
                                       <div class="icon_box">
                                          <span class="icon icon-thumbs-up icons"></span>
                                       </div>
                                       <span class="icon icon-thumbs-up bg_im"></span>
                                       <div class="content_box ">
                                          <h2 class="title_service">{{$item->name}}</h2>
                                          <p class="short_desc">{{$item->content}}
                                          </p>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              @endforeach
                             

                              
                              

                           </div>
                        </div>
                     </div>
                  
                  </div>
               </div>
            <!--===============spacing==============-->
               <div class="pd_bottom_60"></div>
            <!--===============spacing==============-->
            </section>
            <!----process---->
            <section class="process-section">
               <!--===============spacing==============-->
                  <div class="pd_top_80"></div>
               <!--===============spacing==============-->
               <div class="container">
                  <div class="row">
                     <div class="col-lg-12">
                        <div class="title_all_box style_one text-center dark_color">
                           <div class="title_sections">
                              @php
                              $workProcessTitle = \App\Models\HomePageDetails::where('key', 'work_process_title')->first();
                              $workProcessContent = \App\Models\HomePageDetails::where('key', 'work_process_content')->first();
                              @endphp
                              <div class="before_title">{{ !empty($workProcessTitle->value) ? $workProcessTitle->value : '' }}</div>
                              <h2>{{ !empty($workProcessContent->value) ? $workProcessContent->value : '' }}</h2>
                           </div>
                           <!--===============spacing==============-->
                              <div class="mr_bottom_25"></div>
                           <!--===============spacing==============-->
                        </div>
                     </div>
                  </div>
                     <div class="row justify-content-center">
                        
                        @foreach($workprocess as $index => $item)
                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
                           <!--===============spacing==============-->
                               
                               @if($index % 2 == 0)
                                       <div class="mr_bottom_25"></div>
                                 @endif
                           <!--===============spacing==============-->
                           <div class="process_box style_four dark_color">
                              <div class="process_box_outer_four ">
                                 <div class="icon">
                                    <img src="{{ asset('storage/sliders/'.$item->image) }}" class="img-fluid svg_image"
                                       alt="icon png">
                                    <h6>{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</h6>
                                 </div>
                                 <div class="content_box">
                                    <h2>{{$item->name}}</h2>
                                    <p>{{$item->content}}</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                        @endforeach
                       

                       
                     </div>
            
               </div>
               <!--===============spacing==============-->
               <div class="pd_bottom_60"></div>
               <!--===============spacing==============-->
            </section>
            <!----process end---->
            <!---contact-client--->
            <section class="contact-client-carousel-section">
               <div class="row">
                  <div class="col-xxl-5 col-xl-5 col-lg-12 bg_op_1" style="background: url({{asset('front/assets/images/testimonialbg.jpg')}});">
                     <div class="videobtns text-center pd_right_100 pd_left_100 pd_top_100 pd_bottom_100">
                        <!--===============spacing==============-->
                           <div class="pd_top_80"></div>
                           <div class="pd_top_10"></div>
                        <!--===============spacing==============-->
                        <div class="video_btn_all">
                           <div class="video_box">
                              <a href="https://www.youtube.com/embed/-VK0axfge4A" class="lightbox-image color_white">
                                 <i class="icon-play"></i>
                              </a>
                           </div>
                           <!--===============spacing==============-->
                            <div class="pd_bottom_30"></div>
                           <!--===============spacing==============-->
                        </div>
                        <h2 class="color_white">Just Watch Our Work Process</h2>
                        <!--===============spacing==============-->
                           <div class="pd_top_100"></div>
                        <!--===============spacing==============-->
                     </div>
                  </div>
                  <div class="col-xl-7 col-lg-7 col-md-12 bg_op_1"
                     style="background-image: url({{asset('front/assets/images/home-12-testi.jpg')}});">
                     <!--===============spacing==============-->
                     <div class="pd_top_90"></div>
                     <!--===============spacing==============-->
                     <div class="row">
                        <div class="col-lg-1"></div>
                        <div class="col-lg-9 col-md-12">
                           <div class="client-brand-wrapper">
                              <div class="title_all_box style_one light_color">
                                 <div class="title_sections left">
                                    <h2>Tasheel has extensive experience across all industries. </h2>
                                    <p>We specialize in legal document attestation, academic document verification, 
                                       and technical document certification.</p>
                                 </div>
                              </div>
                              <!--===============spacing==============-->
                              <div class="pd_bottom_15"></div>
                              <!--===============spacing==============-->
                              <div class="client_logo_carousel type_two">
                                 <div class="swiper-container" data-swiper='{
                                    "autoplay": {
                                      "delay": 6000
                                    },
                                    "freeMode": true,
                                    "loop": true,
                                    "speed": 1000,
                                    "centeredSlides": false,
                                    "slidesPerView": 4,
                                    "spaceBetween": 30,
                                    "pagination": {
                                      "el": ".swiper-pagination",
                                      "clickable": true
                                    },
                                     
                                    "breakpoints": {
                                       "1200": {
                                          "slidesPerView": 4
                                       },
                                       "1024": {
                                        "slidesPerView": 4 
                                       },
                                      "768": {
                                        "slidesPerView": 4
                                      },
                                      "576": {
                                        "slidesPerView": 3 
                                      },
                                      "250": {
                                       "slidesPerView": 2
                                     },
                                      "0": {
                                        "slidesPerView": 1 
                                      }
                                    }
                                  }'>
                                    <div class="swiper-wrapper">
                                       @foreach ($logos as $item)
                                       <div class="swiper-slide">
                                          <div class="image  text-start">
                                             <img src="{{ asset('storage/sliders/'.$item->image) }}" alt="{{$item->name}}"
                                                style="width: 160px!important;  ">
                                          </div>
                                       </div>
                                       @endforeach
                                       
                                    </div>
                                     
                                 </div>
                              </div>
                              <!--===============spacing==============-->
                              <div class="pd_bottom_40"></div>
                              <!--===============spacing==============-->
                              <div class="row gutter_20px">
                                 <div class="col-lg-5 col-md-12">
                                    <div class="contact_box_content  style_two">
                                       <div class="contact_box_inner color_two">
                                          <div class="icon_bx">
                                             <span class="fa fa-skype"></span>
                                          </div>
                                          <div class="text ">
                                             <h3>Skype Meet</h3>
                                             <p>support@tasheel.ps</p>
                                          </div>
                                       </div>
                                    </div>
                                     <!--===============spacing==============-->
                                 <div class="pd_bottom_20"></div>
                                 <!--===============spacing==============-->
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-lg-2"></div>
                     </div>
                     <!--===============spacing==============-->
                     <div class="pd_bottom_60"></div>
                     <!--===============spacing==============-->
                  </div>
               </div>
            </section>
            <!---contact-client-end--->
            <!---testimonial---->
            <section class="testimonial-section bg_light_1">
               <!--===============spacing==============-->
                  <div class="pd_top_75"></div>
               <!--===============spacing==============-->
               <div class="container">
                  <div class="row">
                     <div class="col-lg-12">
                        <div class="title_all_box style_three text-center dark_color">
                           <div class="title_sections three">
                              <div class="before_title">Quote About</div>
                              @php
                              $customerExperienceTitle = \App\Models\HomePageDetails::where('key', 'customer_experience_title')->first();
                              @endphp
                              <h2>{{ !empty($customerExperienceTitle->value) ? $customerExperienceTitle->value : '' }}</h2>
                           </div>
                           <!--===============spacing==============-->
                              <div class="pd_bottom_30"></div>
                           <!--===============spacing==============-->
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-lg-12">
                        <div class="testimonial_sec light_color style_four">
                           <div class="swiper-container" data-swiper='{
                              "autoplay": {
                                "delay": 6000
                              },
                              "freeMode": true,
                              "loop": true,
                              "speed": 1000,
                              "centeredSlides": false,
                              "slidesPerView": 2,
                              "spaceBetween": 30,
                              "pagination": {
                                "el": ".swiper-pagination",
                                "clickable": true
                              },
                               
                              "breakpoints": {
                                 "1200": {
                                    "slidesPerView": 3
                                 },
                                 "1024": {
                                  "slidesPerView": 3 
                                 },
                                "768": {
                                  "slidesPerView": 2 
                                },
                                "576": {
                                  "slidesPerView": 1 
                                },
                                "0": {
                                  "slidesPerView": 1 
                                }
                              }
                            }'>
                                 <div class="swiper-wrapper">
                                 @foreach ($reviews as $item)
                                 <div class="swiper-slide">
                                    <div class="testimonial_box">
                                       <div class="box_inner not_ovelay">
                                          <div class="rating">
                                             <ul>
                                                <li><span class="fa fa-star fill"></span><span
                                                      class="fa fa-star fill"></span><span
                                                      class="fa fa-star fill"></span><span
                                                      class="fa fa-star fill"></span><span class="fa fa-star empty"></span>
                                                </li>
                                             </ul>
                                          </div>
                                          <p class="description">
                                             {{$item->review}}
                                          </p>
                                          <div class="client_bx">
                                             <div class="image_box">
                                                <img src="{{ asset('storage/sliders/'.$item->image) }}" alt="image">
                                             </div>
                                             <div class="left_s">
                                                <h2 class="title">{{$item->name}}</h2>
                                                <h6 class="from">{{$item->designation}}</h6>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 @endforeach
                                 
                              </div>
                              </div>
                           </div>
                        </div>
                     </div>
               </div>
               <!--===============spacing==============-->
                 <div class="pd_bottom_80"></div>
               <!--===============spacing==============-->
            </section>
            <!---testimonial-end---->
            <!---blog--->
            <section class="blog-section">
            <!--===============spacing==============-->
               <div class="pd_top_75"></div>
            <!--===============spacing==============-->
               <div class="container">
                  <div class="row gutter_20px">
                     <div class="col-lg-12">
                        <div class="title_all_box style_three text-center dark_color">
                           <div class="title_sections three">
                              @php
                              $insightsTitle = \App\Models\HomePageDetails::where('key', 'insights_title')->first();
                               $insightsContent = \App\Models\HomePageDetails::where('key', 'insights_content')->first();
                              @endphp
                              <div class="before_title">{{ !empty($insightsTitle->value) ? $insightsTitle->value : '' }}</div>
                              <h2>{{ !empty($insightsContent->value) ? $insightsContent->value : '' }}</h2>
                           </div>
                           <!--===============spacing==============-->
                              <div class="pd_bottom_35"></div>
                           <!--===============spacing==============-->
                        </div>
                     </div>
                  </div>
                  <div class="row gutter_30px">
                     <div class="col-lg-12">
                        <div class="blog_post_section  three_column  style_seven">
                           <div class="grid_show_case grid_layout clearfix">
                              @foreach ($insights as $item)
                              <div class="grid_box _card">
                                 <div class="news_box style_seven">
                                    <div class="image_box ">
                                       <img width="750" height="420" src="{{ asset('storage/sliders/'.$item->image) }}"
                                          class="img-fluid" alt="img" >
                                       <div class="date">{{ \Carbon\Carbon::parse($item->created_at)->format('F j, Y') }}</div>
                                    </div>
                                    <div class="content_box ">
                                       <!-- <ul>
                                          <li><a href="#"><span class="fa fa-user "></span>{{$item->name}}</a></li>
                                          <li>
                                             <div class="comments">
                                                <i class="icon-text"></i>
                                                <a href="#" class="Comments are Closed">Post
                                                   Comment</a>
                                             </div>
                                          </li>
                                       </ul> -->
                                       <h2 class="title"><a href="#" rel="bookmark">{{$item->title}}</a></h2>
                                       <p class="short_desc">{{ implode(' ', array_slice(explode(' ', $item->content), 0, 10)) }}...</p>
                                       <!-- <a href="#" class="read_more ">Read more<i
                                             class="icon-right-arrow-long"></i></a> -->
                                    </div>
                                 </div>
                              </div>
                              @endforeach
                            
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            <!--===============spacing==============-->
               <div class="pd_bottom_65"></div>
            <!--===============spacing==============-->
            </section>
 
         </div>
@endsection         