@extends("layouts.app")

@section("page-title")
{{__("Sahla-website - Index")}}
@endSection

@section("content")


<section id="hero" class="d-flex justify-content-center align-items-center">
    <div class="container">
        <div class="row">
            <div class=" col-lg-12 imgheader">
                <img src="{{asset('img/saW.gif')}}" class="img-fluid">
            </div>
        </div>
    </div>
</section><!-- End Hero -->
<div class="container from-home">
    <div class="row">
        @foreach($descriptions as $description)
            <div class="col-lg-6 pt-4 pt-lg-4    justify-content-between align-items-center">
                <h2 class="follow">{{$description->getTitleAttribute()}}</h2>
                <p>{{$description->getDescriptionAttribute()}}</p>
            </div>
        @endforeach
        <div class="col-lg-6 pt-4 pt-lg-4   col-md-8 col-lg-4 col-sm-4 col-xs-12  align-items-stretch iosgooglepic  ">
            <a href="https://play.google.com/store"> <img src="{{asset('img/google-play.png')}}"
                                                          class="img-fluid"> </a>
            <br>
            <a href="https://apps.apple.com/us/app/apple-store/id375380948"> <img src="{{asset('img/app-store.png')}}" class="img-fluid"> </a>
        </div>
    </div>
</div>

<div class="container from-home">
    <div class="row">
        <div class="col-12 text-center titlesection2">
            <h2>{{__('How do you request a professional maintenance technician?')}}</h2>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        @foreach($HowToOrders as $HowToOrder)
        <div class="col-lg-4 col-12 itemm text-center">
            <img src="{{$HowToOrder->getFirstMediaFile()->url}}" class="img-fluid">
            <h2 class="pt-4">{{$HowToOrder->getTitleAttribute()}}</h2>
            <p>{{$HowToOrder->getDescriptionAttribute()}}</p>
        </div>
        @endforeach
    </div>
</div>
<div class="container from-home">
    <div class="row">
        <div class="col-12 text-center titlesection2">
            <h1 class="text-center">{{__("Why Sahla?")}}</h1>
        </div>
    </div>
</div>
@foreach($WhySahla as $sahla)
    <div class="container">
        <div class="row greyrow">
         
              <div class="col-lg-1 col-md-2   servicepic  text-center d-flex align-items-stretch p-4">
                <img src="{{$sahla->getFirstMediaFile()->url}}" class="  img img-fluid  ">
            </div>
            <div class="col-lg-8 col-md-4 textallignR titlesection2  pt-4">
                <h3>{{$sahla->getTitleAttribute()}}</h3>
                <p>{{$sahla->getDescriptionAttribute()}}</p>
            </div>
            
               <div class="col-lg-3 col-md-6 d-flex align-items-stretch ">
            </div>
          
        </div>
    </div>
@endforeach
</div>
<div class="container from-home">
    <div class="row">
        <div class=" titlesection2">
            <h1 class="text-center">{{__("What did they say about us?")}}</h1>
        </div>
    </div>
</div>
<div class="container from-home">
    <div class="row">
        <div class="col-12 text-center">
            <div id=" carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner text-center">
                                        @foreach($sliders as $slider)
                                            <div class="carousel-item active">
                            <img src="{{$slider->getFirstMediaFile()->url}}" class="d-block text-center w-25" alt="...">
                        </div>
                                        @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="container from-home">
    <div class="row">
        <div class=" titlesection2">
            <h1 class="text-center">{{__("business partners")}}</h1>
        </div>
    </div>
</div>
<div class="container from-home">
    <div class="row">
        <div class="col-12 text-center">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner text-center">
                                        @foreach($sliders_partner as $slider)
                                            <div class="carousel-item active  ">
                            <img src="{{$slider->getFirstMediaFile()->url}}" class="d-block text-center"
                                 alt="...">
                        </div>
                                        @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("scripts")
<script src="{{asset('vendor/aos/aos.js')}}"></script>
<script src="{{asset('vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('vendor/glightbox/js/glightbox.min.js')}}"></script>
<script src="{{asset('vendor/isotope-layout/isotope.pkgd.min.js')}}"></script>
<script src="{{asset('vendor/php-email-form/validate.js')}}"></script>
<script src="{{asset('vendor/purecounter/purecounter.js')}}"></script>
<script src="{{asset('vendor/swiper/swiper-bundle.min.js')}}"></script>
<script src="{{asset('vendor/waypoints/noframework.waypoints.js')}}"></script>

<!-- Template Main JS File -->
<script src="{{asset('js/main.js')}}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<script>
    $(document).ready(function (){
       $('header').addClass('just-home');
    });
</script>
@endsection