@extends('website.layouts.master')

@section('title')
    {{__('website-trans.Home')}}
@endsection

@section('content')
    <!-- ============================================================== -->
    <!-- Main Slider -->
    <!-- ============================================================== -->
    <div class="swiper-container main-slider">
        <div id="particles-js"></div>
        <!-- swiper slides -->
        <div class="swiper-wrapper">
            @foreach($sliders as $slider)
                <div class="swiper-slide"
                     style="background-image: url({{asset('dashboard/assets/img/uploads/sliders/'.$slider->image->filename)}});">
                    @if ($slider->text_ar || $slider->text_en)
                        <div class="text-wrapper">
                            <div class="inner">
                                <h2>
                                    {{App::getLocale() == 'ar' ? $slider->text_ar : $slider->text_en}}
                                </h2>
                            </div>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
        <!-- !swiper slides -->

        <!-- next / prev arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <!-- !next / prev arrows -->

        <!-- pagination dots -->
        <div class="swiper-pagination"></div>
        <!-- !pagination dots -->
    </div>
    <!-- ============================================================== -->
    <!-- Main Slider End -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- About Us Container -->
    <!-- ============================================================== -->
    <div id="about-us" class="container-fluid about-us-container">
        <div class="row align-items-center">
            <div class="col-12 col-md-6 p-lg-3 p-md-2">
                <div class="site-header">
                    <h2 class="site-blue-text">{{__('website-trans.About')}}</h2>
                    <div class="her-line"></div>
                    <div class="ver-line"></div>
                </div>
                <p class="text-secondary">
                    <strong>
                        {{App::getLocale() == 'ar' ? config('site.about_ar') : config('site.about_en')}}
                    </strong>
                </p>
            </div>
            <div class="col-12 col-md-6">
            <img src="{{asset('website/assets/images/about1.jpeg')}}" style="border:#FBBA00 solid .6rem; border-radius:50px;" class="w-100 h-100 aos-init aos-animate" alt="" data-aos-duration="2000" data-aos="zoom-in">
            </div>
    </div>
    </div>
    <!-- ============================================================== -->
    <!-- About Us container End -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- Second About Us Container -->
    <!-- ============================================================== -->
    <div class="container-fluid  about-us-divs">
        <div class="row">
            <div class="col-12 col-md-6 about-us-text"
                 style=" background:url('{{asset('website/assets/images/d1.jpg')}}') no-repeat ;">
                <div class="my-auto p-2 p-md-5 ">
                    <h1>
                        {{__('website-trans.ourMessage')}}
                    </h1>
                    <ul>
                        @foreach(explode('-', config('site.message_'. App::getLocale() ))  as $message)
                            <li>{{$message}}</li><br>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="col-12 col-md-6 about-us-img"
                 style=" background:url('{{asset('website/assets/images/about2.jpeg')}}') no-repeat ;">

            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 about-us-img"
                 style="background:url('{{asset('website/assets/images/about3.jpeg')}}') no-repeat ;">

            </div>
            <div class="col-12 col-md-6 about-us-text"
                 style="background:url('{{asset('website/assets/images/d2.jpg')}}') no-repeat ;">
                <div class="my-auto p-2 p-md-5  ">
                    <h1>
                        {{__('website-trans.ourVision')}}
                    </h1>
                    <ul>
                        @foreach(explode('-', config('site.vision_'. App::getLocale() ))  as $vision)
                            <li>{{$vision}}</li><br>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Second About Us Container End -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- Services Container -->
    <!-- ============================================================== -->
    <div class="container-fluid  text-center our-services-container"
         style="  background-image: linear-gradient(rgba(0, 0, 0, 0.39), black), url(https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1190&q=80);">
        <div class="row h-100 w-100 p-0 m-0">
            <div class="col-12 align-self-center">
                <h2>{{__('website-trans.Services')}}</h2>
                <div class="row pt-5 pb-5 justify-content-center">
                    @foreach($services as $service)
                        <div class="d-flex service-container">
                            <a class="text-reset" href="{{route('servicesDetails', $service->id)}}">
                                <div class="col-12 align-self-center text-white">
                                    <img class="pb-4"
                                         src="{{asset('dashboard/assets/img/uploads/departments_services/'.$service->image->filename)}}"
                                         alt="">
                                    <h4 class="pt-1">
                                        <strong> {{App::getLocale() == 'ar'? $service->name_ar : $service->name_en}} </strong>
                                    </h4>
                                    <h6 class="pt-0">
                                        <strong> {!!Str::limit(App::getLocale() == 'ar'? $service->description_ar : $service->description_en, 35)!!}</strong>
                                    </h6>
                                </div>
                            </a>
                        </div>
                    @endforeach

                </div>
                <a href="{{route('services')}}" class="text-reset">
                    <h5 class="text-white" style="text-decoration: underline;">{{__('website-trans.seeAll')}}</h5>
                </a>
            </div>
        </div>

    </div>
    <!-- ============================================================== -->
    <!-- Services Container End -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- Team Container -->
    <!-- ============================================================== -->
    <!-- <div class="container mt-5 mb-5" data-aos="zoom-in" data-aos-duration="2000">
        <div class="row">
            <div class="col-12 text-center">
                <div class="site-header">
                    <h2 class="site-blue-text">Our Team</h2>
                    <div class="her-line"></div>
                    <div class="ver-line"></div>
                </div>
            </div>
            <div class="col-12" style="overflow: hidden; padding: 40px 50px;">
                <div class="swiper-container3">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="card">
                                <div class="imgBx">
                                    <img src="http://blog.homerealestate.com/wp-content/uploads/2010/04/Person.Ashley-820x1024.jpg"
                                        alt="images">
                                </div>
                                <div class="details">
                                    <h2>Tariq ALSheddi<br><span>Founding Partner</span></h2>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="card">
                                <div class="imgBx">
                                    <img src="http://blog.homerealestate.com/wp-content/uploads/2010/04/Person.Ashley-820x1024.jpg"
                                        alt="images">
                                </div>
                                <div class="details">
                                    <h2>Abdulaziz Altoukhi<br><span>Partner at Alsheddi Law Firm</span></h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <!-- ============================================================== -->
    <!-- Team Container End -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- Panner Section -->
    <!-- ============================================================== -->
    <!-- <div class="main-page-panner" style=" background: linear-gradient(rgba(0, 0, 0, 0.39), black), url(https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1190&q=80) no-repeat;"></div> -->
    <!-- ============================================================== -->
    <!-- Panner Section End -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- Projects Page -->
    <!-- ============================================================== -->
    <div class="container one Projects-page my-5">
        <div class="text-center my-5">
            <div class="site-header">
                <h2 class="site-blue-text">{{__('website-trans.Projects')}}</h2>
                <div class="her-line"></div>
                <div class="ver-line"></div>
            </div>
        </div>
        <div class="">
            <div class="grid-cards">
                <!-- card -->
                @foreach($projects as $project)
                    <div class="card">
                        <img
                            src="{{asset('dashboard/assets/img/uploads/projects/'.$project->image)}}"
                            alt="img-1">
                        <div class="card-body">
                            <h3 class="title-card">{{App::getLocale() == 'ar'? $project->name_ar : $project->name_en}}</h3>
                            <p>
                                {!!Str::limit(App::getLocale() == 'ar'? $project->description_ar : $project->description_en, 150)!!}
                            </p>
                        </div>
                        <div class="card-footer">
                            <a href="{{route('projectDetails', $project->id)}}">{{__('website-trans.more')}}</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-center">
                <a href="{{route('projects')}}" class="text-reset">
                    <h5 class="text-dark" style="text-decoration: underline;">{{__('website-trans.seeAll')}}</h5>
                </a>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Projects Page End -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- Testmonials Container -->
    <!-- ============================================================== -->
    <div class="testmonials-bg" style="background:url({{asset('website/assets/images/d1.jpg')}}) no-repeat;">
        <div class="container mt-5 mb-5" >
            <div class="row">
                <div class="col-12 text-center">
                    <div class="site-header">
                        <h2 class="text-white">{{__('website-trans.Testimonials')}}</h2>
                        <!-- <h2 class="site-blue-text">Testmonials</h2> -->
                        <!-- <div class="her-line"></div>
                        <div class="ver-line"></div> -->
                    </div>
                </div>
                <div class="col-12" style="overflow: hidden; padding: 40px 50px;">
                    <div class="swiper-container3">
                        <div class="swiper-wrapper">
                            @foreach($testimonials as $testimonial)
                                <div class="swiper-slide">
                                    <div class="testmonial-card">
                                        <div class="img">
                                            <img
                                                src="{{asset('dashboard/assets/img/uploads/testimonials/'.$testimonial->image->filename)}}"
                                                alt="...">
                                        </div>
                                        <div class="icon">
                                            <i class="fas fa-quote-right"></i>
                                        </div>
                                        <div class="text">
                                            <p class="said">
                                                {{$testimonial->message}}
                                            </p>
                                            <p class="name">
                                                {{$testimonial->name}}
                                            </p>
                                            <p class="position">
                                                {{$testimonial->jobTitle}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            {{--                            <div class="swiper-slide">--}}
                            {{--                                <div class="testmonial-card">--}}
                            {{--                                    <div class="img">--}}
                            {{--                                        <img--}}
                            {{--                                            src="http://blog.homerealestate.com/wp-content/uploads/2010/04/Person.Ashley-820x1024.jpg"--}}
                            {{--                                            alt="...">--}}
                            {{--                                    </div>--}}
                            {{--                                    <div class="icon">--}}
                            {{--                                        <i class="fas fa-quote-right"></i>--}}
                            {{--                                    </div>--}}
                            {{--                                    <div class="text">--}}
                            {{--                                        <p class="said">--}}
                            {{--                                            Lorem ipsum, dolor sit amet consectetur adipisicing elit.--}}
                            {{--                                        </p>--}}
                            {{--                                        <p class="name">--}}
                            {{--                                            Mehdi Mohammadi--}}
                            {{--                                        </p>--}}
                            {{--                                        <p class="position">--}}
                            {{--                                            WEB DEVELOPER--}}
                            {{--                                        </p>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                            </div>--}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Testmonials Container End -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- Contact Us Container -->
    <!-- ============================================================== -->
    <div class="container-fluid contact-us-container my-5">
        <div class="row">
            <div class="col-12 text-center">
                <div class="site-header">
                    <h2 class="site-blue-text">{{__('website-trans.Contact')}}</h2>
                    <div class="her-line"></div>
                    <div class="ver-line"></div>
                </div>
            </div>
        </div>

        <div class="row inner-wrapper">
            <div class="col-md-5">
                <h4>{{__('website-trans.footerMsg')}}</h4>
                <p class="mb-0"><span> <i class="fas fa-tty"></i> </span><a
                        href="tel:{{config('site.telephone')}}"
                        class="text-decoration-none text-muted">{{config('site.telephone')}}</a>
                </p>
                <p class="mb-0"><span> <i class="fas fa-fax"></i> </span><a
                        href="tel:{{config('site.phone')}}"
                        class="text-decoration-none text-muted">{{config('site.phone')}}</a></p>
                <p class="mb-0"><span> <i class="fas fa-mobile-alt"></i> </span><a
                        href="tel:{{config('site.salesPhone')}}"
                        class="text-decoration-none text-muted">{{config('site.salesPhone')}}</a></p>
                <p class="mb-0"><i class="fas fa-mobile-alt"></i> </span><a
                        href="tel:00966592918663"
                        class="text-decoration-none text-muted">00966592918663</a></p>
                <h4>{{__('website-trans.email')}}</h4>
                <p><a href="mailto:{{config('site.email')}}" class="text-decoration-none text-muted">{{config('site.email')}}</a></p>
                <!--<h4>{{__('website-trans.address')}}</h4>-->
                <h4> {{__('website-trans.contactNumbers')}}</h4>
                <p class="text-muted"> <i class="fas fa-map-marker-alt"></i> <a target="_blank" href="https://www.google.com/maps/place/%D8%B1%D9%8A%D8%A7%D8%B6+%D8%A7%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9+Riyadh+Print%E2%80%AD/@24.6537034,46.7498547,17z/data=!3m1!4b1!4m5!3m4!1s0x3e2f037047980ecb:0xa0472d1204d4483d!8m2!3d24.6537034!4d46.7498547?hl=en-EG"> {{App::getLocale() == 'ar' ? config('site.address_ar') : config('site.address_en')}} </a> </p>

            </div>
            <div class="col-md-7">
                <form method="POST" action="{{route('connectWithUs')}}" class="needs-validation" novalidate>
                    @csrf
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label for="validationTooltipName"></label>
                            <input type="text" class="form-control" name="name" id="validationTooltipName"
                                   placeholder="Name"
                                   required>
                            @error('name')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="validationTooltipEmail"></label>
                            <input type="email" name="email" class="form-control" id="validationTooltipEmail"
                                   placeholder="email@test.test" required>
                            @error('email')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-5 ">
                            <label for="exampleFormControlTextarea1"></label>
                            <textarea class="form-control" name="message" placeholder="Your Message"
                                      rows="3" required></textarea>
                            @error('message')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="form-row button-wrapper">
                        <button class="btn btn-dark border-0 btn-lg px-5 " type="submit">Send</button>
                    </div>
                </form>
                <script>

                </script>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Contact Us Container End -->
    <!-- ============================================================== -->
@endsection

@section('js')
    <script>
        $('document').ready(function()){
            $('img').lazyload();
            document.getElementsByClassName('swiper-slide').lazyload();
        }
    </script>
    
    <!-- Script For This Page Only -->
    <script>
        $("body").addClass("scroll-top");
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();

            //>=, not <=
            if (scroll == 0) {
                //clearHeader, not clearheader - caps H
                $("body").addClass("scroll-top");
            } else {
                $("body").removeClass("scroll-top");
            }
        }); //missing );
    </script>
@endsection