@extends('layouts.site')

@section('slider')
    @php

        $lang = app()->getLocale();
        $name = 'name_' . $lang;
        $details = 'details_' . $lang;
        $type = 'type_' . $lang;
        $title = 'title_' . $lang;
        $job = 'job_' . $lang;
        $company_name = 'company_name_' . $lang;

        $description = 'description_' . $lang;
        $question = 'question_' . $lang;
        $answer = 'answer_' . $lang;
        $img_alt = 'img_alt_' . $lang;
        $img2_alt = 'img2_alt_' . $lang;
        $settings = \App\Models\Setting::first();
        $slug = 'slug_' . app()->getLocale();
         $work_done_ratio = 'work_done_ratio_' . app()->getLocale();
        // $slug = 'slug_en';
 
    @endphp

@stop

@section('content')
    <!--Start Main Slider -->
               <!---video-->
     <section class="main-slider main-slider-two">
        <div class="banner">
        <video autoplay="" loop="" muted="" playsinline="" __idm_id__="4939777">
            <source src="{{ asset('assets/front/reef.mp4') }}" type="video/mp4">
        </video>
        <div class="main-slider-three__bg-overly"></div>
        <svg class="wave" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
            <path fill="#dfd6c7" fill-opacity="1" d="M0,40 Q360,10 720,30 T1440,40 L1440,50 L0,50Z">
            </path>
        </svg>
        </div>
    </section>
    
    
   <!-- <section class="main-slider main-slider-two">
        <div class="swiper-container thm-swiper__slider-two">
            <div class="swiper-wrapper">
                @if ($intros && $intros->count() > 0)
                    @foreach ($intros as $intro)
                         
                        <div class="swiper-slide direction">
                            <div class="image-layer"
                                style="background-image: url({{ asset('assets/images/intros/' . $intro->img) }});"
                                aria-label="Slider image {{ $loop->iteration }}">
                            </div>

                            <div class="container">
                                <div class="main-slider-two__single col-md-6">
                                    <div class="main-slider-two__content">
                                        
                                        <div class="title">
                                            <h2>{{ $intro->$name }}</h2>
                                        </div>
                                        <div class="text">
                                            <p>{!! nl2br(e($intro->$details)) !!}</p>
                                        </div>
                                        <div class="btn-box">
                                            <a class="thm-btn" href="{{ route('services.index') }} ">
                                                <span class="txt">
                                                    {{ app()->getLocale() == 'ar' ? 'اقرء المزيد' : 'discover more' }}

                                                </span> <i class="icon-right-arrow"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <svg class="wave" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
                                <path fill="#fff" fill-opacity="1" d="M0,40 Q360,10 720,30 T1440,40 L1440,50 L0,50Z">
                                </path>
                            </svg>
                        </div>
                    @endforeach
                @endif
            </div>-->

            <!-- Navigation arrows (optional) -->
            <!--<div class="swiper-nav-style1">
                                            <div class="swiper-button-prev" id="main-slider-two__swiper-button-next">
                                                <i class="icon-left-arrow-5"></i>
                                            </div>
                                            <div class="swiper-button-next" id="main-slider-two__swiper-button-prev">
                                                <i class="icon-right-arrow-5"></i>
                                            </div>
                                        </div>-->
                                          <div class="swiper-pagination banertop"></div>
         </div>
    </section>
    <!--Start About -->
    <section class="about-three about-three11 direction">
        <div class="container">
            <div class="row align-items">
                <!--Start About  Img-->
                <div class="col-xl-6 wow fadeInDown" data-wow-delay=".5s">
                    <div class="about-three__img">
                        <div class="shape1"><img src="{{ asset('assets/front/img/about-shape1.webp') }}"
                                alt="shape"></div>
                        <div class="about-three__img1">
                            <img src="{{ asset('assets/images/pages/' . $page['img']) ?? '' }}"
                                alt="{{ $page->$img_alt ?? 'about img1' }}">
                        </div>
                        <div class="about-three__img2">
                            <img src="{{ asset('assets/images/pages/' . $page['img2']) ?? '' }}"
                                alt="{{ $page->$img_alt ?? 'about img1' }}">
                        </div>

                    </div>
                </div>

                <!--Start About -->
                   <div class="col-xl-6">
                        <div class="about-three__content ">
                            <div class="sec-title-two wow fadeInDown" data-wow-delay=".2s">
                             <div class="sub-title">
                                <h5>{{ __('About Us') }}</h5>
                            </div>
                                <h2>{{ $page->$title }}</h2>
                            </div>
                            <div class="about-three__content-text vision-pargraph wow fadeInDown" data-wow-delay=".3s">
                                <div class="read-more-text">
                                    
<p>{!! $page->$description !!}
                                     </p>
                                </div>

                                  <a class="thm-btn" href="{{ route('site.AboutUs') }}">
                                    <span class="txt">
                                        {{ app()->getLocale() == 'ar' ? 'اقرء المزيد' : ' More Details' }}
                                    </span> <i class="icon-right-arrow"></i>
                                </a>
                            </div>


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

    <!--Start Fact Counter  -->
    <section class="fact-counter-two  ">
         <div class="container">
            <div class="row">
                <!--Start Fact Counter -->
                <div class="col-6 col-xl-3 col-lg-6 col-md-6 wow fadeInDown" data-wow-delay=".3s">
                    <div class="fact-counter-two__single">
                        <div class="icon-box">
                            <span class="icon-special-shipments"></span>
                        </div>
                        <div class="fact-counter-two__single-inner">
                            <h2 class="count"> <span class="odometer" data-count="{{ $settings->clients_num }}"></span>
                            </h2>
                            <div class="text">
                                <p>
                                    {{ app()->getLocale() == 'ar' ? 'ضيوف سعداء' : 'Happy Guests' }}



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

                <!--Start Fact Counter-->
                <div class="col-6 col-xl-3 col-lg-6 col-md-6 wow fadeInDown" data-wow-delay=".5s">
                    <div class="fact-counter-two__single">
                        <div class="icon-box">
                            <span class="icon-warehousing"></span>
                        </div>
                        <div class="fact-counter-two__single-inner">
                            <h2 class="count"> <span class="odometer" data-count="{{ $settings->projects_num }}"></span>
                            </h2>
                            <div class="text">
                                <p>
                                    {{ app()->getLocale() == 'ar' ? 'وحدات فاخرة' : 'Luxury Units' }}

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

                <!--Start Fact Counter -->
                <div class="col-6 col-xl-3 col-lg-6 col-md-6 wow fadeInDown" data-wow-delay=".7s">
                    <div class="fact-counter-two__single">
                        <div class="icon-box">
                            <span class="icon-global-network"></span>
                        </div>
                        <div class="fact-counter-two__single-inner">
                            <h2 class="count"> <span class="odometer"
                                    data-count="{{ $settings->communities_served_num }}"></span> </h2>
                            <div class="text">
                                <p>
                                    {{ app()->getLocale() == 'ar' ? 'فعاليات ناجحة' : 'Successful Events' }}


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

                <!--Start Fact Counter -->
                <div class="col-6 col-xl-3 col-lg-6 col-md-6 wow fadeInDown" data-wow-delay=".9s">
                    <div class="fact-counter-two__single">
                        <div class="icon-box">
                            <span class="icon-enter-product-details"></span>
                        </div>
                        <div class="fact-counter-two__single-inner">
                            <h2 class="count"> <span class="odometer"
                                    data-count="{{ $settings->years_experience_num }}"></span> </h2>
                            <div class="text">
                                <p>
                                    {{ app()->getLocale() == 'ar' ? 'سنوات الخبره' : 'Years Experience' }}


                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @php
    /**/ [
        $name1,
        $email,
        $phone,
        $whatsapp,
        $google_map_url,
        $addresss,
        $facebook,
        $instagram,
        $twitter,
        $youtube,
        $tiktok,
        $snapchat,
    ] = getGeneralSettings();

@endphp
    <!--أنواع الوحدات-->
    <section class="blog-twohome direction">
        <div class="blog-two__pattern"
            style="background-image: url({{ asset('assets/front/img/blog-v2-pattern.webp') }});"></div>
        <div class="container">
 <div class="sec-title-style3 text-center">
                <div class="sub-title center">
                    <div class="icon">
                        <img src="{{ asset('assets/front/img/favicon.webp') }} " alt="">
                    </div>
                    <h5 class="colr-blue">
                       {{ app()->getLocale() == 'ar' ? ' أنواع الوحدات' : 'Unit Types' }}

                    </h5>
                </div>
                <h2>{{ app()->getLocale() == 'ar' ? 'الوحدات الفندقية' : 'Accommodation Units' }}</h2>
            </div>



              <div class="thm-swiper__slider swiper-container"
                data-swiper-options='{"spaceBetween": 50,
        "slidesPerView": 3,
        "loop": true,
        "pagination": {
            "el": "#services-three__pagination1",
            "type": "bullets",
            "clickable": true
            },
        "navigation": {
            "nextEl": "#team-one__swiper-button-next",
            "prevEl": "#team-one__swiper-button-prev"
        },
         "autoplay": { "delay": 2000 },
        "breakpoints": {
            "0": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "375": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "575": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "768": {
                "spaceBetween": 24,
                "slidesPerView": 2
            },
            "992": {
                "spaceBetween": 24,
                "slidesPerView": 3
            },
            "1200": {
                "spaceBetween": 24,
                "slidesPerView": 3
            }
        }
    }'>
                <div class="swiper-wrapper">




            @if ($posts && $posts->count() > 0)
                   @foreach ($posts as $post)
                       <!---item-->
                            <div class="swiper-slide wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                              <div class="blog-two__single">
                                <div class="blog-two__single-img">
                                    
                                    <a href="{{ route('site.postDetails', ['slug' => $post->$slug]) }}">
                                        <div class="inner"
                                            style="background-image: url({{ asset('assets/images/posts/' . $post['img']) ?? '' }});" alt="Units img"> </div>
                                    </a>
                                </div>
                                <div class="blog-two__single-content">
                                    
                                    <h2><a href="{{ route('site.postDetails', ['slug' => $post->$slug]) }}">{{ $post->$name }}</a>  </h2>

<p>{{ $post->$img_alt ?? 'blog img' }}"</p>
 
                                   <div class="btn-box">
    <a href="{{ route('site.postDetails', ['slug' => $post->$slug]) }}" class="half-button">
        {{ app()->getLocale() == 'ar' ? 'المزيد' : 'Read More' }}
        <span class="icon-right-arrow-5"></span>
    </a>
    <a href="https://api.whatsapp.com/send/?phone={{ $whatsapp }}" target="_blank" class="half-button second-button">
     <span class="fab fa-whatsapp"></span>
       {{ app()->getLocale() == 'ar' ? 'واتساب' : 'WhatsApp' }}
       
    </a>
</div>
 
                                </div>
                            </div>
                        </div>
                    @endforeach
             @endif
         </div>
            </div>
            <!-- If we need navigation buttons -->
            <div class="swiper-pagination " id="services-three__pagination1"></div>
            
        </div>
    </section>

    <!--Start Services-->
    @php
        $services = \App\Models\Service::where('is_active', 1)->get();
    @endphp
    <section class="services-three">
        <div class="services-three__bg" style="background-image: url({{ asset('assets/front/img/services.webp') }});">
        </div>
        <div class="container wow fadeInDown" data-wow-delay=".3s">
            <div class="sec-title-style3 text-center">
                <div class="sub-title center">
                    <div class="icon">
                        <img src="{{ asset('assets/front/img/favicon.webp') }}" alt="">
                    </div>
                    <h5 class="text-white"> {{ app()->getLocale() == 'ar' ? 'خدماتنا' : 'Our Services' }}</h5>
                </div>
                <h2>

                    {{ app()->getLocale() == 'ar' ? 'نحن نقدم لكم أفضل الخدمات' : 'We offer you the best services' }}
                </h2>
            </div>
            <div class="thm-swiper__slider swiper-container"
                data-swiper-options='{"spaceBetween": 50,
        "slidesPerView": 3,
        "loop": true,
        "pagination": {
            "el": "#services-three__pagination",
            "type": "bullets",
            "clickable": true
            },
        "navigation": {
            "nextEl": "#team-one__swiper-button-next",
            "prevEl": "#team-one__swiper-button-prev"
        },
        "autoplay": { "delay": 6000 },
        "breakpoints": {
            "0": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "375": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "575": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "768": {
                "spaceBetween": 24,
                "slidesPerView": 2
            },
            "992": {
                "spaceBetween": 24,
                "slidesPerView": 3
            },
            "1200": {
                "spaceBetween": 24,
                "slidesPerView": 3
            }
        }
    }'>
                <div class="swiper-wrapper">
                    @if ($services && $services->count() > 0)
                        @foreach ($services as $service)
                            <!---item-->
                            <div class="swiper-slide">
                                <div class="services-two__single direction">
                                    <div class="services-two__single-img">
                                        <a href="{{ route('site.servicesDetails', ['slug' => $service->$slug]) }}">
                                            <div class="inner"
                                                style="background-image: url({{ asset('assets/images/services/' . $service['img']) ?? '' }});"
                                              {{ $service->$img_alt ?? 'services img' }}   > </div>
                                        </a>
                                    </div>

                                    <div class="services-two__single-content">
                                        <div class="services-two__single-content-inner">
                                            <h3> <a
                                                    href="{{ route('site.servicesDetails', ['slug' => $service->$slug]) }} ">
                                                    {{ $service->$name }}
                                                </a></h3>
                                            <p> {{ Str::limit($service->$description, 120, '...') }} </p>

                                        </div>
                                        <div class="btn-box">
                                            <a class="thm-btn"
                                                href="{{ route('site.servicesDetails', ['slug' => $service->$slug]) }} ">
                                                <span class="txt">
                                                    {{ __('read more') }}
                                                </span> <i class="icon-right-arrow"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!---item-->
                        @endforeach

                    @endif


                </div>
            </div>
            <!-- If we need navigation buttons -->
            <div class="swiper-pagination" id="services-three__pagination"></div>
        </div>
    </section>

    <!--Start Work process  -->
    <section class="work-process-two direction">
        <div class="container">
            <div class="sec-title-style3 text-center">
                <div class="sub-title center">
                    <div class="icon">
                        <img src="{{ asset('assets/front/img/favicon.webp') }} " alt="">
                    </div>
                    <h5>
                        {{ app()->getLocale() == 'ar' ? ' مراحل العمل' : 'work process' }}

                    </h5>
                </div>
                <h2>
                    {{ app()->getLocale() == 'ar' ? 'خطوات العمل ' : ' Working Step' }}

                </h2>
            </div>
            <div class="row">
                <!--Start Work process Two Single-->
                @php
                            $work = \App\Models\Work::where('is_active', 1)->where('id', 3)->first();

                        @endphp
                <div class="col-xl-4 col-lg-4 wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <div class="work-process-two__single">
                        <div class="shape1"><img src="{{ asset('assets/front/img/work-shape1.webp') }}"
                               ></div>
                        <div class="work-process-two__single-icon">
                            <div class="inner">
                                <span class="icon-enter-product-details"></span>
                            </div>
                        </div>

                        @if ($work)
                            <div class="work-process-two__single-text">
                                <h3>


                                    {{ app()->getLocale() == 'ar' ? 'الخطوة - 1' : 'Step - 1' }}

                                </h3>
                                <h2>{{ $work->$name }}</h2>
                                <p>{!! nl2br(e($work->$details)) !!}</p>
                            </div>
                        @else
                            <div class="alert alert-warning">
                                {{ app()->getLocale() == 'ar' ? 'لا توجد بيانات متاحة' : 'No data available' }}
                            </div>
                        @endif
                    </div>
                </div>
                <!--End Work process Two Single-->

                <!--Start Work process Two Single-->
                 @php
                            $work = \App\Models\Work::where('is_active', 1)->where('id', 2)->first();
                        @endphp
                <div class="col-xl-4 col-lg-4 wow fadeInRight" data-wow-delay="200ms" data-wow-duration="1500ms">
                    <div class="work-process-two__single">
                        <div class="shape1"><img src="{{ asset('assets/front/img/work-shape1.webp') }}"
                                ></div>
                        <div class="work-process-two__single-icon">
                            <div class="inner">
                                <span class="icon-check"></span>
                            </div>
                        </div>

                        <div class="work-process-two__single-text">
                            <h3>
                                {{ app()->getLocale() == 'ar' ? 'الخطوة - 2' : 'Step - 2' }}
                            </h3>
                            <h2>{{ $work->$name }}</h2>
                            <p>{!! nl2br(e($work->$details)) !!}</p>
                        </div>
                    </div>
                </div>
                <!--End Work process Two Single-->

                <!--Start Work process Two Single-->
                 @php
                            $work = \App\Models\Work::where('is_active', 1)->where('id', 1)->first();
                        @endphp
                <div class="col-xl-4 col-lg-4 wow fadeInLeft" data-wow-delay="400ms" data-wow-duration="1500ms">
                    <div class="work-process-two__single">
                        <div class="work-process-two__single-icon">
                            <div class="inner">
                                <span class="icon-warehousing"></span>
                            </div>
                        </div>

                        <div class="work-process-two__single-text">
                            <h3>
                                {{ app()->getLocale() == 'ar' ? 'الخطوة - 3' : 'Step - 3' }}

                            </h3>
                            <h2>{{ $work->$name }}</h2>
                            <p>{!! nl2br(e($work->$details)) !!}</p>
                        </div>
                    </div>
                </div>
                <!--End Work process Two Single-->
            </div>
        </div>
    </section>
    
    

    <!--Start Testimonials Two-->
    <section class="testimonials-two">
        <div class="testimonials-two__bg"
            style="background-image: url({{ asset('assets/front/img/testmonial.webp') }});" alt="background">
        </div>
        <div class="container wow fadeInDown" data-wow-delay=".3s">
            <div class="sec-title-two">
                <div class="sub-title">
                    <h5 class="text-white">
                        {{ app()->getLocale() == 'ar' ? 'أراء العملاء' : 'Testimonials' }}


                    </h5>
                </div>
                <h2>

                    {{ app()->getLocale() == 'ar' ? 'تقييمات عملائنا عنا' : 'What Clients Say' }}

                </h2>
            </div>

            <div class="swiper-container testimonials-two__slider">
                <div class="swiper-wrapper">
                    <!--Start Testimonials -->
                    @if ($reviews && $reviews->count() > 0)
                        @foreach ($reviews as $review)
                            <div class="swiper-slide">
                                <div class="testimonials-two__single direction">
                                    <div class="quote-icon"><span class="icon-quote11"></span></div>
                                    <div class="testimonials-two__single-top">
                                        <div class="img-box">
                                            <img src="{{ asset('assets/images/reviews/' . $review['img']) ?? '' }}"
                                                alt="{{ $review->$img_alt ?? 'Testimonials img' }}">
                                        </div>
                                        <div class="text-box">
                                            <h3>{{ $review->$name }}</h3>
                                            <p>{{ $review->$job }}</p>
                                        </div>
                                    </div>

                                    <div class="testimonials-two__single-bottom">
                                        <div class="rating-box mb--10">
                                            <a href="#"><i class="icon-star"></i></a>
                                            <a href="#"><i class="icon-star"></i></a>
                                            <a href="#"><i class="icon-star"></i></a>
                                            <a href="#"><i class="icon-star"></i></a>
                                            <a href="#"><i class="icon-star"></i></a>
                                        </div>
                                        <div class="content-box">
                                             <p>{{ $review->$details }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                </div>
            </div>

            <div class="swiper-nav-style1">
                <div class="swiper-button-prev" id="testimonials-two__swiper-button-next">
                    <i class="icon-left-arrow-5" aria-hidden="true"></i>
                </div>
                <div class="swiper-button-next" id="testimonials-two__swiper-button-prev">
                    <i class="icon-right-arrow-5" aria-hidden="true"></i>
                </div>
            </div>
        </div>

     </section>
     
    <!--Start offer -->
     @if ($offers && $offers->count() > 0)
                
        <section class="bb blog-two direction">
             <div class="container">
                <div class="sec-title-two text-center">
                    <div class="sub-title">
                        <h5>    {{ app()->getLocale() == 'ar' ? 'العروض' : 'offers' }}</h5>
                    </div>
                    <h2>    {{ app()->getLocale() == 'ar' ? ' افضل العروض' : 'best offers' }}</h2>
                </div>
   
               <div class="thm-swiper__slider swiper-container"
                data-swiper-options='{"spaceBetween": 50,
        "slidesPerView": 3,
        "loop": true,
        "pagination": {
            "el": "#services-three__pagination2",
            "type": "bullets",
            "clickable": true
            },
        "navigation": {
            "nextEl": "#team-one__swiper-button-next",
            "prevEl": "#team-one__swiper-button-prev"
        },
         "autoplay": { "delay": 5000 },
        "breakpoints": {
            "0": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "375": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "575": {
                "spaceBetween": 24,
                "slidesPerView": 1
            },
            "768": {
                "spaceBetween": 24,
                "slidesPerView": 2
            },
            "992": {
                "spaceBetween": 24,
                "slidesPerView": 3
            },
            "1200": {
                "spaceBetween": 24,
                "slidesPerView": 3
            }
        }
    }'>
                <div class="swiper-wrapper">
                    <!--Start Pricing One Single-->
                     @foreach ($offers as $offer)
                      <div class="swiper-slide wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <div class="pricing-one__single text-center">
                             <div class="table-header">
                                <div class="img-box">
                                     <div class="backservices" style="background-image: url({{ asset('assets/images/offers/' . $offer['img']) ?? '' }});" alt="{{ $offer->$img_alt ?? 'offer img' }}"></div> 
                                   
                                </div>
                            </div>

                            <div class="table-content">
                                <div class="table-content__top">
                                    <h3>   {{ $offer->$name }} </h3>
                                     

@if($offer->discount_price)
     <h2>  
        {{ fmod($offer->price, 1) == 0 ? number_format($offer->price, 0) : number_format($offer->price, 2) }}RS
    
    <span> /
      
            {{ fmod($offer->discount_price, 1) == 0 ? number_format($offer->discount_price, 0) : number_format($offer->discount_price, 2) }}RS
        
    </span>
    </h2>
@else
    <h2>
        {{ fmod($offer->price, 1) == 0 ? number_format($offer->price, 0) : number_format($offer->price, 2) }}RS
    </h2>
@endif

                                    
                                  {{--  <h2>$39 <span>/ 256kg</span></h2>--}}
                                </div>
                                  {!! html_entity_decode($offer->$details) !!}
                                    
                            </div>

                            <div class="table-footer">
                                <div class="btn-box">
                                    <a class="thm-btn" href="https://api.whatsapp.com/send/?phone={{ $whatsapp }}">
                                        <span class="txt">{{ app()->getLocale() == 'ar' ? 'اتصل الان' : 'contact now' }}</span> <i class="icon-right-arrow"></i>
                                        
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                      @endforeach
                    <!--End Pricing One Single-->
 
  </div>
  </div>
       <!-- If we need navigation buttons -->
            <div class="swiper-pagination" id="services-three__pagination2"></div>
       
            </div>
        </section>
        @endif
  
@stop
@section('scripts')


@stop