@extends('layouts.app')

@section('meta_keyword',$meta['keywords'])
@section('meta_description',$meta['description'])

@section('title_Page',$meta['title'])

@section('style')
    {{--  Add Css File Here for this page  --}}
    <style>
      .word {
        color: #000;
      }
      .word:before {
        color: #f00000;
        content: "Lorem";
      }
    </style>
@endsection

@section('fonts')
    {{--  Add Fonts Url Here for this page  --}}

@endsection

@section('home','active')
@section('body')

   

@php
            $lang = (request()->cookie('lang')) ? request()->cookie('lang') : "en";
            $extlang = ($lang == "he") ? '_he' : ""; 
            @endphp

<!-- Content Page Piling -->
<div class="pagepiling">

<!-- Section Home -->
<div class="pp-scrollable scrollable-home text-white section">
  <div class="scroll-wrap">
  @php 
                                        $sliderimg = setting('slider.slider_image');
                                        $slider_title = setting('slider.slider_title' . $extlang);
                                        $slider_sub_title = setting('slider.slider_sub_title' . $extlang);
                                        
                                        @endphp
                                 
    <div class="section-bg" style="background-image:url({{getImage($sliderimg,null,1920,1080)}});"></div>
    <div class="scrollable-content">
      <div class="vertical-centred">
        <div class="boxed boxed-inner">
          <div class="vertical-title hidden-xs hidden-sm"><span> {{trans('generic.INTRODUCE', [], $lang)}}
          </span></div>
          <div class="boxed">
            <div class="container">
              <div class="intro">
                <div class="row">
                  <div class="col-md-8 col-lg-6 floatdir">
                    <p class="subtitle-top">{{$slider_sub_title}}</p>
                    <h1 class="display-1 text-white">{{$slider_title}}</h1>
                    <div class="hr-bottom"></div>
                  </div>
                  <div class="col-md-4 col-lg-6">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Section About -->
<div class="pp-scrollable scrollable-about section">
  <div class="scroll-wrap">
    <div class="scrollable-content">
      <div class="vertical-centred">
        <div class="boxed boxed-inner">
          <div class="vertical-title text-white hidden-xs hidden-sm"><span> {{trans('generic.What_we_do', [], $lang)}}</span></div>
          <div class="boxed">
            <div class="container">
              <div class="intro">
                <div class="row">
                  <div class="col-md-5 col-lg-5 floatdir">
                  @php 
                                        $mission_image = setting('our-mission.mission_image');
                                        $mission_title = setting('our-mission.mission_title' . $extlang);
                                         
                                        @endphp
                    <p class="subtitle-top text-white">{{trans('generic.about', [], $lang)}}</p>
                    <h2 class="title-uppercase">{{$mission_title}}</h2>
                  
                    <ul class="service-list">
                    @if($services)
                    @php $i = 1;   @endphp                      
                               @foreach($services as $service)
                                    @php
                                    $name = substr($service->service_name,0,600);
                                     $desc =  $service->description;
                              
                              
                                 echo '
                        <div id="about_details'.$i.'" class="container zoom-anim-dialog mfp-hide">
                          <div class="row">
                            <div class="col-lg-12">
                            
                            <img style="float: left; padding-right: 20px; padding-bottom: 20px;" 
                            src="'.getImage($mission_image,null,470,490).'" class="w-100" alt="noimg" />
                            <h3 class="project-detail-title" style="text-align: justify;">'.$name.'</h3>
                            
                             
                              <p class="project-detail-text" style="text-align: justify;"> '.$desc.'</p>
                           
                          </div>
                           
                          </div>
                        </div>
                        ';
                                
                              
                          echo ' <a class=" popup-with-zoom-anim" href="#about_details'.$i.'" > <li>0'.$i.'. '.$name.'</li></a>';
                                      
                             
                                 $i++;
                                    @endphp
                                    @endforeach
                                    @endif
                                    <li   style="padding-top: 20px;"><p>
                                       <a class="project-box popup-with-zoom-anim" href="#about_details" style="
    border: 1px solid;
    padding: 10px 20px; width: 35%;
">{{trans('generic.read_more', [], $lang)}}</a></p></li>







 

                      <div class="col-project-box col-sm-6 col-md-4 col-lg-3">
                      

                        <!-- Project Modal Dialog 1 -->
                        <div id="about_details" class="container zoom-anim-dialog mfp-hide">
                          <div class="row">
                            <div class="col-lg-12">
                            
                            <img style="float: left; padding-right: 20px; padding-bottom: 20px;" 
                            src="{{getImage($mission_image,null,470,490)}}" class="w-100" alt="noimg" />
                            <h3 class="project-detail-title" style="text-align: justify;">{{trans('generic.about', [], $lang)}}</h3>
                            
                             
                              <p class="project-detail-text" style="text-align: justify;"> {{setting('about-page.about_us'.$extlang)}} </p>
                           
                          </div>
                           
                          </div>
                        </div>
                        
                        
                        
                        
                        
                         </div>
                        
                        
                        
                  
                      




                    </ul>
                    
                  </div>
                  
                  <div class="col-md-6 col-lg-5 col-md-offset-1 col-lg-offset-2 margin-left-0">
                    <div class="dots-image-2">
                      <img alt="" class="img-responsive" src="{{getImage($mission_image,null,470,490)}}">
                      <div class="dots"></div>
                      <div class="experience-info">
                        <div class="number">24</div>
                        <div class="text">{{trans('generic.years', [], $lang)}}<br>{{trans('generic.YEARS_EXPERIENCE', [], $lang)}}<br>{{trans('generic.WORKING', [], $lang)}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Section Projects -->
<div class="pp-scrollable scrollable-projects text-white section">
  <div class="scroll-wrap">
    <div class="bg-changer">
      <div class="section-bg" style="background-image:url(assets/images/bg/4.jpg);"></div>
      <div class="section-bg" style="background-image:url(assets/images/bg/6.jpg);"></div>
      <div class="section-bg" style="background-image:url(assets/images/bg/7.jpg);"></div>
      <div class="section-bg" style="background-image:url(assets/images/bg/9.jpg);"></div>
      <div class="section-bg" style="background-image:url(assets/images/bg/10.jpg);"></div>
      <div class="section-bg" style="background-image:url(assets/images/bg/8.jpg);"></div>
    </div>
    <div class="scrollable-content">
      <div class="vertical-centred">
        <div class="boxed boxed-inner">
          <div class="vertical-title hidden-xs hidden-sm"><span>{{trans('generic.OUR_WORKS', [], $lang)}}</span></div>
          <div class="boxed">
            <div class="container">
              <div class="intro">
                <div class="row">
                  <div class="col-md-12">
                    <h2 class="title-uppercase text-white">{{trans('generic.LATEST_PROJECTS', [], $lang)}}</h2>
                    <div class="row-project-box row">

                      <!-- Project Item 1 -->
                    
                       
                      @if($projects)
                        
                        @php
                        $c = 1;
                        @endphp
                       

                        @foreach($projects as $project)
                        @php
                        $name = substr($project->name,0,130);
                        $building_type = substr($project->building_type,0,130);
                        $desc = strip_tags($project->description);
                        $excerpt = substr($project->excerpt,0,750);
                        $image = $project->image;   
                        $finish_date = $project->finish_date;
                       
                        $client_name = substr($project->client_name,0,500);
                         $images = $project->images;  
                         @endphp

                      <div class="col-project-box col-sm-6 col-md-4 col-lg-3">
                      <a href="#project{{$c}}" class="project-box popup-with-zoom-anim">
                          <div class="project-box-inner">
                            <h5>{{$name}}</h5>
                            <div class="project-category">{{$building_type}}</div>
                          </div>
                        </a>
 

                        <!-- Project Modal Dialog 1 -->
                        <div id="project{{$c}}" class="container zoom-anim-dialog mfp-hide">
                          <div class="row">
                            <div class="col-lg-8">
                              <!-- <img alt="" class="project-detail-img" src="{{getImage($image,null,680,680)}}"> -->
                          
                          
                            <div class="review-carousel owl-carousel">
@if($images)
@foreach (json_decode($images, true) as $img)
<div class="review-carousel-item">
  <img src="{{getImage($img,null,680,680)}}" class="w-100" alt="" />
  
  </div>


@endforeach
@endif

</div>
                          
                          
                          
                          </div>
                            <div class="col-lg-4">
                              <h3 class="project-detail-title">{{$name}}</h3>
                              <p class="project-detail-text">{{$desc}}</p>
                              <ul class="project-detail-list text-white">
                                <li>
                                  <span class="left">{{trans('generic.client', [], $lang)}}:</span>
                                  <span class="right">{{$client_name}}</span>
                                </li>
                                <li>
                                  <span class="left">{{trans('generic.Completion', [], $lang)}}:</span>
                                  <span class="right">{{$finish_date}}</span>
                                </li>
                                <li>
                                  <span class="left">{{trans('generic.Building_Type', [], $lang)}}:</span>
                                  <span class="right">{{$building_type}}</span>
                                </li>
                                
                               
                              </ul>
                              <div class="project-detail-meta">
                              <div class="col-md-5 col-lg-5  col-md-offset-1 col-lg-offset-2">
               
                  </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        </div>
                        @php
                        $c = $c + 1;
                        @endphp
                        @endforeach

                        @endif


                       

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Section Team -->

<div class="pp-scrollable scrollable-team section">
  <div class="scroll-wrap">
    <div class="scrollable-content">
      <div class="vertical-centred">
        <div class="boxed boxed-inner">
          <div class="vertical-title text-white hidden-xs hidden-sm"><span>{{trans('generic.OUR_Team', [], $lang)}}</span></div>
          <div class="boxed">
            <div class="container">
              <div class="intro overflow-hidden">
                <div class="row">
                  <div class="col-md-12">
                    <h2 class="title-uppercase">{{trans('generic.OUR_Team', [], $lang)}}</h2>
                    <div class="row-partners">
                    @foreach($teams as $team)
                        @php
                        $name = $team->name;
                        $job = $team->job;
                        $image = $team->image;   
                        @endphp


                        <div class="col-team">
                        <div  class="partner-inner"><img alt="" src="{{getImage($image,null,221,221)}}">
                        <h4 style="margin: 1.5rem 0;text-align: center;">{{$name}}</h4>
                        <p style="text-align: center; color: #ffffff;" >{{$job}}</p>
                        </div>
    </div>

                         @endforeach
                     
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- Section Partners -->
<div class="pp-scrollable scrollable-partners section">
  <div class="scroll-wrap">
    <div class="scrollable-content">
      <div class="vertical-centred">
        <div class="boxed boxed-inner">
          <div class="vertical-title text-white hidden-xs hidden-sm"><span>Partners</span></div>
          <div class="boxed">
            <div class="container">
              <div class="intro overflow-hidden">
                <div class="row">
                  <div class="col-md-12">
                    <h2 class="title-uppercase">{{trans('generic.OUR_PARTNERS', [], $lang)}}</h2>
                    <div class="row-partners">
                    @foreach($partners as $partner)
                        @php
                        $link = $partner->link;
                        $image = $partner->image;
                        $name = $partner->name;
                        @endphp


                        <div class="col-partner">
                        <div  class="partner-inner"><h4 style="margin: 0 ;">{{$name}}</h4>
                        <p>{{$link}}</p></div>
    </div>

                         @endforeach
                     
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 

 
 

<!-- Testimonials-->
<div class="pp-scrollable scrollable-testimonials text-white section">
  <div class="scroll-wrap">
    <div class="section-bg" style="background-image:url(assets/images/bg/9.jpg);"></div>
    <div class="scrollable-content">
      <div class="vertical-centred">
        <div class="boxed boxed-inner">
          <div class="vertical-title hidden-xs hidden-sm"><span>{{trans('generic.TESTIMONIALS', [], $lang)}}</span></div>
          <div class="boxed">
            <div class="container">
              <div class="intro">
                <div class="row">
                  <div class="col-md-6 col-lg-5 flo-right">
                    <span class="icon-quote ion-quote flo-right"></span>
                    <h2 class="title-uppercase text-white">{{trans('generic.CREATIVE_DEDICATED', [], $lang)}}</h2>
                  </div>
                  <div class="col-md-5 col-lg-5  col-md-offset-1 col-lg-offset-2 margin-left-0">
                    <div class="review-carousel owl-carousel">
                    @foreach($testimonials as $testimonial)
                        @php
                        $name = substr($testimonial->name,0,130);
                        $job_title = substr($testimonial->job_title,0,230);
                        $desc = strip_tags($testimonial->description);
                         @endphp
                    <div class="review-carousel-item text-align-right">
                        <div class="text">
                        <p>{{$desc}}</p>
                        </div>
                        <div class="review-author">
                          <div class="author-name">{{$name}}</div>
                          <i>{{$job_title}}</i>
                        </div>
                      </div>
               
@endforeach
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    <!-- Section Contacts -->
<div class="pp-scrollable scrollable-contacts section">
      <div class="scroll-wrap">
        <div class="scrollable-content">
          <div class="vertical-centred">
            <div class="boxed boxed-inner">
                
              <div class="vertical-title text-white hidden-xs hidden-sm"><span>{{trans('generic.CONTACT', [], $lang)}}</span></div>
              <div class="boxed">
                   <h2 class="title-uppercase">{{trans('generic.ENJOY_COFFEE', [], $lang)}}</h2>
                <div class="container">
                  <div class="intro overflow-hidden">
                    <div class="row">
                      <div class="col-md-12">
                       
                      <div id="map" class="map-2"></div>
                        
                        
                        
                        <div class="contact-info">
                          <div class="row-contact-info row">
                            <div class="col-contact-info col-md-6 col-lg-4 float-right">
                              <div class="row">
                                <h3 class="col-sm-3 col-md-4 float-right">{{trans('generic.WRITE_message', [], $lang)}}</h3>
                                <div class="col-right col-sm-8 col-md-7 col-sm-offset-1 col-md-offset-1">
                                  <div class="contact-info-row col-sm-6 col-md-12 text-align-right">
                                    <strong class="text-white">{{trans('generic.MAIN_EMAIL', [], $lang)}}</strong><br>
                                    {{setting('contact.email')}}
                                  </div>
                                  <div class="contact-info-row col-sm-6 col-md-12 text-align-right">
                                    <strong class="text-white">{{trans('generic.OFFICE_MAIL', [], $lang)}}</strong><br>
                                    {{setting('contact.office_mail')}}
                                  </div>                   
                                </div>
                              </div>
                            </div>
                            <div class="col-contact-info col-md-6 col-lg-4 float-right">
                              <div class="row">
                                <h3 class="col-sm-3 col-md-4 float-right">{{trans('generic.call_us', [], $lang)}}</h3>
                                <div class="col-right col-sm-8 col-md-7 col-sm-offset-1 col-md-offset-1">
                                  <div class="contact-info-row col-sm-6 col-md-12 text-align-right">
                                    <strong class="text-white">{{trans('generic.HEAD_OFFICE', [], $lang)}}</strong><br>
                                    {{setting('contact.mobile')}}
                                  </div>
                                  <div class="contact-info-row col-sm-6 col-md-12 text-align-right">
                                    <strong class="text-white">{{trans('generic.Support', [], $lang)}}</strong><br>
                                    {{setting('contact.mobile2')}}
                                  </div>   
                                </div>                                   
                              </div>
                            </div>
                            <div class="col-contact-info col-md-6 col-lg-4 float-right">
                              <div class="row">
                                <h3 class="col-sm-3 col-md-4 float-right">{{trans('generic.VISIT_US', [], $lang)}}</h3>
                                <div class="col-right col-sm-8 col-md-7 col-sm-offset-1 col-md-offset-1">
                                  <div class="contact-info-row col-sm-6 col-md-12 text-align-right">
                                  {{setting('contact.address')}}
                                  </div>                                   
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 
 
 
  </div>








    
@endsection


@section('script')
    <script>
        const element = document.querySelector(".slides");

        element.addEventListener('wheel', (event) => {
            event.preventDefault();

            element.scrollBy({
                left: event.deltaY < 0 ? -30 : 30,

            });
        });

        const slider = document.querySelector('.slides');
        let isDown = false;
        let startX;
        let scrollLeft;

        slider.addEventListener('mousedown', (e) => {
            isDown = true;
            slider.classList.add('active');
            startX = e.pageX - slider.offsetLeft;
            scrollLeft = slider.scrollLeft;
        });
        slider.addEventListener('mouseleave', () => {
            isDown = false;
            slider.classList.remove('active');
        });
        slider.addEventListener('mouseup', () => {
            isDown = false;
            slider.classList.remove('active');
        });
        slider.addEventListener('mousemove', (e) => {
            if(!isDown) return;
            e.preventDefault();
            const x = e.pageX - slider.offsetLeft;
            const walk = (x - startX) * 3; //scroll-fast
            slider.scrollLeft = scrollLeft - walk;
            console.log(walk);
        });
    </script>
@endsection