@extends('frontend.layouts.app')
@section('content')
<section class="codepenBannerSec__wr">
    <div class="cont container">
        <div class="app">
            <div class="app__bgimg">
                {{-- <div class="app__bgimg-image app__bgimg-image--1">
                    <img src="{{static_asset('assets/frontend/images/banner-ejari-bg.jpg')}}" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height="">
                </div>
                <div class="app__bgimg-image app__bgimg-image--2">
                    <img src="{{static_asset('assets/frontend/images/banner-property-valuation-bg.jpg')}}" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height="">
                </div> --}}
                <div class="app__bgimg-image app__bgimg-image--1">
                    <img src="{{uploaded_asset(page_content('home_sec_one_banner_one'))}}" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height="">
                </div>
                <div class="app__bgimg-image app__bgimg-image--2">
                    <img src="{{uploaded_asset(page_content('home_sec_one_banner_tow'))}}" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height="">
                </div>
            </div>
            <div class="app__img">
                <img onmousedown="return false" src="{{static_asset('assets/frontend/images/slider-white-overlay-bg.png')}}" loading="lazy" decoding="async" class="img-fluid lg_overlay" alt="" title="" width="" height="" />
                <img onmousedown="return false" src="{{static_asset('assets/frontend/images/slider-white-overlay-md-bg.png')}}" loading="lazy" decoding="async" class="img-fluid md_overlay" alt="" title="" width="" height="" />
            </div>
            @php
                if(Session::has('locale')){
                    $locale = Session::get('locale', Config::get('app.locale'));
                }
                else{
                    $locale = env('DEFAULT_LANGUAGE');
                }
            @endphp
            {{-- @if($locale == 'sa') --}}
                {{-- <div class="app__text app__text--1">
                    <div class="app__text-line app__text-line--4">تخليص</div>
                    <div class="app__text-line app__text-line--3">للخدمات الحكومية</div>
                    <div class="app__text-line app__text-line--2">تأسست شركة تخليص للخدمات الحكومية عام 2006، وهي تقدم جميع خدمات المعاملات الحكومية الذكية في دبي. نحن موجودون لتحقيق تجارب لعملائنا حيث تجتمع الثقة والالتزام والتميز معًا في بيئة مريحة؛ مع احترافية موظفينا والثقافة الداعمة والتعامل الراقي</div>
                    <div class="app__text-line app__text-line--1"><img src="images/site-icon.png" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height=""></div>
                </div>

                <div class="app__text app__text--2">
                    <div class="app__text-line app__text-line--4">تخليص</div>
                    <div class="app__text-line app__text-line--3">للخدمات الحكومية</div>
                    <div class="app__text-line app__text-line--2">ونسعى دائمًا لتحقيق التميز في الخدمات التي نقدمها. نحن معتمدون من قبل مجموعة من القطاعات والهيئات الحكومية، وشريكنا الرئيسي هو دائرة الأراضي والأملاك في دبي، ومن خلال أفضل الممارسات والمعايير الآمنة والمنظمة لدينا، نقدم التحسينات التي تعمل على رضا و سعادة العملاء من خلال تعزيز جودة الخدمات الحكومية.</div>
                    <div class="app__text-line app__text-line--1"><img src="images/site-icon.png" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height=""></div>
                </div> --}}
                <div class="app__text app__text--1">
                    <div class="app__text-line app__text-line--4">{{ page_content('home_sec_one_title_one', null, $lang)}}</div>
                    <div class="app__text-line app__text-line--3">{{ page_content('home_sec_one_sub_title_one', null, $lang)}}</div>
                    <div class="app__text-line app__text-line--2">{!! page_content('home_sec_one_desc_one', null, $lang) !!}</div>
                    <div class="app__text-line app__text-line--1"><img src="images/site-icon.png" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height=""></div>
                </div>

                <div class="app__text app__text--2">
                    <div class="app__text-line app__text-line--4">{{ page_content('home_sec_one_title_tow', null, $lang)}}</div>
                    <div class="app__text-line app__text-line--3">{{ page_content('home_sec_one_sub_title_tow', null, $lang)}}</div>
                    <div class="app__text-line app__text-line--2">{!! page_content('home_sec_one_desc_tow', null, $lang) !!}</div>
                    <div class="app__text-line app__text-line--1"><img src="images/site-icon.png" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height=""></div>
                </div>
            {{-- @else
                <div class="app__text app__text--1">
                    <div class="app__text-line app__text-line--4">Takhlees</div>
                    <div class="app__text-line app__text-line--3">Government Services</div>
                    <div class="app__text-line app__text-line--2">Founded in 2006, Takhlees Government Services provides all Dubai smart government transactions services. We exist to realize experiences for our clients where trustworthiness, purpose and passion come together in a comfortable environment; with the professionals, supportive and friendly culture we have created, always striving for excellence in the services we provide</div>
                    <div class="app__text-line app__text-line--1"><img src="images/site-icon.png" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height=""></div>
                </div>

                <div class="app__text app__text--2">
                    <div class="app__text-line app__text-line--4">Takhlees</div>
                    <div class="app__text-line app__text-line--3">Government Services</div>
                    <div class="app__text-line app__text-line--2">We are certified by a group of governmental sector and authorities, our main partner is Dubai Land Department, with our highly secure and regulated best practice and standards, we deliver optimizations that improve customer happiness through enhancing the quality of government services.</div>
                    <div class="app__text-line app__text-line--1"><img src="images/site-icon.png" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height=""></div>
                </div>
            @endif --}}
        </div>
        <div class="pages">
            <ul class='pages__list'>
                <li data-target='1' class='pages__item pages__item--1 page__item-active'></li>
                <li data-target='2' class='pages__item pages__item--2'></li>
            </ul>
        </div>
    </div>
</section>
<section class="aboutSec__wr">
    <div class="container">
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <picture class="picBlock__wr wow animate__fadeInRight" data-wow-duration="2s">
                    <!-- <source media="(max-width: 991px)" srcset="images/ab-img.jpg" width="991" height="600"> -->
                    <img src="images/ab-img.jpg" class="img-fluid" alt="banner-bg" title="banner-bg" width="" height="">
                </picture>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="contentBlock__wr">
                    <div class="secTitle__wr wow animate__fadeInLeft" data-wow-duration="2s">
                        {!! page_content('home_sec_tow_sub_title', null, $lang) !!}
                        <p class="title__wr">{{ page_content('home_sec_tow_title', null, $lang) }}</p>
                    </div>
                    {!! page_content('home_sec_tow_desc', null, $lang) !!}
                </div>
                <div class="counterSec__wr">
                    <div class="container">
                        <div class="row no-gutters">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="counterItem__wr wow animate__zoomIn" data-wow-duration="2s">
                                    <div class="countNum__wr"><span class="counter">{{ page_content('home_sec_tow_count_value_one', null, $lang) }}</span><span>k</span></div>
                                    <p class="title__wr">{{ page_content('home_sec_tow_count_label_one', null, $lang) }}</p>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="counterItem__wr wow animate__zoomIn" data-wow-duration="2s">
                                    <div class="countNum__wr"><span class="counter">{{ page_content('home_sec_tow_count_value_tow', null, $lang) }}</span><span>+</span></div>
                                    <p class="title__wr">{{ page_content('home_sec_tow_count_label_tow', null, $lang) }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="partnerSec__wr">
    <div class="container">
        <div class="secTitle__wr">
            <p class="title__wr wow animate__fadeInUp" data-wow-duration="2s">{{ page_content('home_sec_three_title', null, $lang) }}</p>
            <!-- <p>We are based in Dubai, we offer all types of Government Services, as a professional services company, we are able to help you with obtaining employment visas, family residency visas, business license renewals/modifications, company documents such as labor computer card and immigration card, employee labor cards and more. We have excellent business relationships with the Department of Naturalization & Residency (DNRD), Ministry of Labor and Social Affairs (MOL), Department of Economic Development (DED), Land Department, Dubai Court, Dubai Health Authority , United Advocates and all other relevant government institutions.</p> -->
        </div>
        <div class="owl-carousel owl-theme partnerLogoSlider wow animate__zoomIn" data-wow-duration="2s">
            @if (page_content('home_sec_three_logos') != null)
                @foreach (json_decode(page_content('home_sec_three_logos'), true) as $key => $value)
                    <div class="item">
                        <img src="{{ uploaded_asset($value) }}" loading="lazy" class="img-fluid" alt="{{ json_decode(page_content('home_sec_three_logo_title'), true)[$key] }}" title="{{ json_decode(page_content('home_sec_three_logo_title'), true)[$key] }}" width="150" height="150">
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</section>
<section class="govServiceSec__wr">
    <div class="container">
        <div class="secTitle__wr wow animate__fadeInUp" data-wow-duration="2s">
            <p class="title__wr">{{ page_content('home_sec_four_title', null, $lang) }}</p>
            <p>{{ page_content('home_sec_four_sub_title', null, $lang) }}</p>
        </div>
        <div class="row align-items-lg-center">
            <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
                <div class="govSerTabList__wr">
                    @php
                        $tab_services = \App\Models\Service::where('home_page_tab', 1)->where('status', 1)->orderBy('updated_at', 'DESC')->limit(6)->get();
                    @endphp
                    @if($tab_services->isNotEmpty())
                        @foreach ($tab_services as $key => $service)
                            <a href="javascript:void(0)" data-tag="id_{{ $key }}" class="@if($key == '0') active @endif">
                                <span class="icon__wr">
                                    <img src="{{ uploaded_asset($service->icon) }}" loading="lazy" class="img-fluid" alt="ldd-logo" title="ldd-logo" width="50" height="50">
                                </span>
                                <div class="content__wr">
                                    <p class="title">{{ $service->getTranslation('title') }}</p>
                                </div>
                            </a>
                        @endforeach
                    @endif
                    
                </div>
            </div>
            <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
                <ul class="govSerAccord__wr">
                    @if($services->where('home_page_tab', 1)->get()->isNotEmpty())
                        @foreach ($services->where('home_page_tab', 1)->get() as $key_data => $service_data)
                            <li class="item__wr @if($key_data == '0') active @endif" id="id_{{ $key_data }}">
                                <div class="itemHead__wr">
                                    <span class="icon__wr">
                                        <img src="{{ uploaded_asset($service_data->image) }}" loading="lazy" class="img-fluid" alt="ldd-logo" title="ldd-logo" width="50" height="50">
                                    </span>
                                    <div class="heading__wr">
                                        <p class="title">{{ $service_data->getTranslation('title') }}</p>
                                    </div>
                                </div>
                                <div class="itemBody__wr">
                                    <div class="wrapper__wr">
                                        <p class="title__wr">{{ $service_data->getTranslation('title')  }}</p>
                                        <ul class="govtServices_list">
                                            {!! $service_data->getTranslation('description')  !!}
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
        {{--
        <div class="btnParent__wr wow animate__zoomIn" data-wow-duration="2s">
            <a href="{{ url('/') }}/{{ page_content('home_sec_four_btn_link', null, $lang) }}" class="btn primaryBtn__wr">{{ page_content('home_sec_four_btn_label', null, $lang) }}</a>
        </div>
        --}}
    </div>
</section>
<section class="travelTourSec__wr ceoMsgWrapSec__wr">
    <div class="container">
        <div class="row align-items-lg-center">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <picture class="jamalImageWrap__wr wow animate__slideInLeft" data-wow-duration="2s">
                    <img src="images/chaireman-bg.jpg" class="img-fluid" alt="chaireman-bg" title="chaireman-bg" width="" height="">
                </picture>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="owl-carousel owl-theme ceoMsgSlider">
                    @if (page_content('home_sec_five_title') != null)
                        @foreach (json_decode(page_content('home_sec_five_title', null, $lang), true) as $key => $value)
                            <div class="item">
                                <div class="contentBlock__wr">
                                    <div class="secTitle__wr">
                                        <p class="title__wr">{{ $value }}</p>
                                    </div>
                                    {!! json_decode(page_content('home_sec_five_desc', null, $lang), true)[$key] !!}
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<section class="proServiceSec__wr">
    <div class="container">
        <div class="secTitle__wr wow animate__fadeInUp" data-wow-duration="2s">
            {!! page_content('home_sec_six_sub_title', null, $lang) !!}
            <p class="title__wr">{{ page_content('home_sec_six_title', null, $lang) }}</p>
        </div>
        <div class="row">
            @if ($services->where('home_page_card', 1)->get()->isNotEmpty())
                @foreach ($services->where('home_page_card', 1)->limit(6)->get() as $service_key => $service)
                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 wow animate__zoomIn" data-wow-duration="2s">
                        <div class="item__wr">
                            <a href="{{route('service-custom', $service->slug)}}">
                                <picture class="pic__wr">
                                    <img src="{{ uploaded_asset($service->image) }}" loading="lazy" class="img-fluid" alt="pro-service-license-bg" title="pro-service-license-bg" width="575" height="395">
                                </picture>
                                <div class="contentBlock__wr">
                                    <span class="icon__wr"><img src="{{ uploaded_asset($service->icon) }}" loading="lazy" class="imgsvg"></span>
                                    <p class="title__wr">{{ $service->getTranslation('title') }}</p>
                                    <div class="desc__wr">
                                        {!! $service->getTranslation('short_description') !!}
                                    </div>
                                    <!-- <div class="btnParent__wr">
                                        <a href="javascript:void(0);" class="itemBtn__wr"><span class="label__wr">Read More</span><i class="fa-solid fa-arrow-right-long"></i></a>
                                    </div> -->
                                </div>
                            </a>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
        {{--
        <div class="btnParent__wr">
            <a href="{{ url('/') }}/{{ page_content('home_sec_six_btn_link', null, $lang) }}" class="btn primaryBtn__wr wow animate__zoomIn" data-wow-duration="2s">{{ page_content('home_sec_six_btn_label', null, $lang) }}</a>
        </div>
        --}}
    </div>
</section>
<section class="inqFormSec__wr">
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 d-none d-lg-block">
                <picture class="imageBlock__wr wow animate__fadeInLeft" data-wow-duration="2s">
                    <img src="{{ uploaded_asset(page_content('home_sec_seven_img')) }}" class="img-fluid" alt="inquiry-formsec-bg" title="inquiry-formsec-bg" width="1500" height="1000">
                </picture>
            </div>
            <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
                <div class="formBlock__wr">
                    <div class="secTitle__wr wow animate__fadeInRight" data-wow-duration="2s">
                        <p class="titleSup__wr">{{ page_content('home_sec_seven_sub_title', null, $lang) }}</p>
                        <p class="title__wr">{{ page_content('home_sec_seven_title', null, $lang) }}</p>
                    </div>
                    <form class="formWrapper__wr" method="POST" action="{{ route('enquiry') }}">
                        @csrf
                        <div class="form-row">
                            <div class="form-group col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__fadeInUp" data-wow-duration="2s">
                                <input type="text" id="name" name="name" class="form-control" placeholder="{{translate('Your Name')}}*" autocomplete="off">
                            </div>
                            <div class="form-group col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__fadeInUp" data-wow-duration="2s">
                                <input type="email" id="email" name="email" class="form-control" placeholder="{{translate('Your Email')}}*" autocomplete="off" >
                            </div>
                            <div class="form-group col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__fadeInUp" data-wow-duration="2s">
                                <input type="text" id="phone" name="phone" class="form-control" placeholder="{{translate('Your Phone No')}}*" autocomplete="off" >
                            </div>
                            <div class="form-group col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__fadeInUp" data-wow-duration="2s">
                                <select name="subject" id="subject" class="form-control" >
                                    @if(\App\Models\Service::where('status', 1)->get()->isNotEmpty())
                                        <option value="" selected>{{translate('Select Enquiry Type')}}</option>
                                        @foreach (\App\Models\Service::where('status', 1)->get() as $value)
                                            <option value="{{$value->title}}">{{$value->getTranslation('title')}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div  class="form-group col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 wow animate__fadeInUp" data-wow-duration="2s">
                                <textarea id="message" name="message" class="form-control" rows="3" placeholder="{{translate('Your Message')}}*" autocomplete="off" ></textarea>
                            </div>
                            <div class="form-group btnParent__wr col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                <button type="button" id="enq_submit" class="btn primaryBtn__wr wow animate__zoomIn" data-wow-duration="2s">{{ page_content('home_sec_seven_btn_label', null, $lang) }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="apointStrapSec__wr">
    <div class="imgOverlay__wr">
        <picture class="imgLeftBlock__wr">
            <img src="images/appointment-strap-left-bg.jpg" class="img-fluid" alt="appointment-strap-left-bg" title="appointment-strap-left-bg" width="1500" height="1000">
        </picture>
        <picture class="imgRightBlock__wr">
            <img src="images/appointment-strap-right-bg.jpg" class="img-fluid" alt="appointment-strap-right-bg" title="appointment-strap-right-bg" width="1500" height="1000">
        </picture>
    </div>
    <div class="wrapperBlock__wr">
        <p class="title__wr wow animate__fadeInUp" data-wow-duration="2s">{{ page_content('home_sec_eight_title', null, $lang) }}</p>
        <p class="callTitle__wr"><a dir="ltr" href="{{ page_content('home_sec_eight_sub_title_link') }}" title="+971-4-517-7337">{{ page_content('home_sec_eight_sub_title') }}</a></p>
        <div class="btnParent__wr">
            <a href="{{ links('home_sec_eight_btn_link') }}" class="btn primaryBtn__wr appointmentBtn wow animate__zoomIn" data-wow-duration="2s">{{ page_content('home_sec_eight_btn_label', null, $lang) }}</a>
        </div>
    </div>
</section>
<section class="gogleReviewSec__wr">
    <div class="container">
        <div class="secTitle__wr wow animate__fadeInUp" data-wow-duration="2s">
            <p class="title__wr">{{ translate('Our Google Reviews')}}</p>
        </div>
        {{-- For Google widget --}}
        <div class="elfsight-app-7e578b06-b3c4-4c89-8414-e8f47d487fdd" data-elfsight-app-lazy></div>
        {{--<div class="owl-carousel owl-theme googleReviewSlider wow animate__zoomIn" data-wow-duration="2s">
            @if (!empty($google_reviews))
                @foreach ($google_reviews as $review_key => $review)
                    <div class="item">
                        <div class="reviewWrapper__wr">
                            <div class="postInfo__wr">
                                <!-- <div class="infoAvtar__wr"><img src="images/review-avtar-bg1.jpg" loading="lazy" class="img-fluid"></div> -->
                                <div class="infoDetail__wr">
                                    <p class="name__wr">{{ $review['reviewer_name'] }}</p>
                                <span class="date__wr">{{ Carbon\Carbon::parse($review['review_date_time'])->diffForHumans() }}</span>
                                </div>
                            </div>
                            <div class="rating__wr">
                                @for ($i = 1; $i <= $review['rating']; $i++)
                                    <i class="fa-solid fa-star-sharp"></i>
                                @endfor
                            </div>
                            <p>{{ $review['review_text'] }}</p>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>--}}
    </div>
</section>
<section class="newsEventSec__wr">
    <div class="container">
        <div class="secTitle__wr wow animate__fadeInUp" data-wow-duration="2s">
            {!! page_content('home_sec_nine_sub_title', null, $lang) !!}
            <p class="title__wr">{{page_content('home_sec_nine_title', null, $lang)}}</p>
        </div>
        <div class="owl-carousel owl-theme blogSecSlider wow animate__zoomIn" data-wow-duration="2s">
            @if($blogs->isNotEmpty())
                @foreach ($blogs as $blog)
                    <div class="item">
                        <article class="articleItem__wr">
                            <picture class="articlePic__wr">
                                <a href="{{route('news.details', $blog->slug)}}">
                                    <img src="{{ uploaded_asset($blog->feature_image) }}" loading="lazy" class="img-fluid" alt="{{ $blog->slug }}" title="{{ $blog->getTranslation('title') }}" width="448" height="299" onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
                                </a>
                            </picture>
                            <div class="contentBlock__wr">
                                <div class="info_meta">
                                    <span class="icon"><i class="fa-light fa-calendar-days"></i></span>
                                    <span>{{ date('d-m-Y', strtotime($blog->created_at)) }}</span>
                                </div>
                                <a href="{{route('news.details', $blog->slug)}}" class="articleTitle__wr">{{ $blog->getTranslation('title') }}</a>
                                <div class="postContent__wr">{{ $blog->getTranslation('short_description') }}</div>
                                <div class="btnParent__wr">
                                    <a href="{{route('news.details', $blog->slug)}}" class="itemBtn__wr"><span class="label__wr">Read More</span><i class="fa-solid fa-arrow-right-long"></i></a>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            @endif
        </div>
        <div class="btnParent__wr">
            <a href="{{ route('news') }}" class="btn primaryBtn__wr wow animate__zoomIn" data-wow-duration="2s">{{translate('View All')}}</a>
        </div>
    </div>
</section>
<section class="newsletterStrapSec__wr">
    <div class="container">
        <div class="row align-items-lg-center">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="secTitle__wr wow animate__fadeInUp" data-wow-duration="2s">
                    <p class="title__wr">{{translate('Newsletter Subscribe')}}</p>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <form class="newsletterForm__wr wow animate__fadeInUp" data-wow-duration="2s">
                    <input type="email" class="form-control" placeholder="{{translate('Your email address')}}" required="">
                    <button type="submit" class="btn primaryBtn__wr"><i class="fa-solid fa-paper-plane-top"></i><span class="labelText__wr">{{translate('Subscribe')}}</span></button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection
@section('script')
    <script>
        $(document).ready(function(){
            var code = "{{$lang}}";
            var rtl = false;
            if(code == 'sa' || code == 'ae'){
                rtl = true;
            }
            $('.partnerLogoSlider').owlCarousel({
                center: true,
                loop:true,
                rtl: rtl,
                margin:15,
                items:5,
                nav:true,
                navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
                dots: false,
                autoplay: true,
                autoplayHoverPause:false,
                responsive:{
                    0:{
                        items:2
                    },
                    600:{
                        items:4
                    },
                    1000:{
                        items:5
                    }
                }
            });
            $('.ceoMsgSlider').owlCarousel({
                loop:true,
                autoplay: true,
                rtl: rtl,
                autoplayHoverPause:false,
                margin:0,
                animateOut: 'fadeOut',
                nav:false,
                navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
                dots: false,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:1
                    },
                    1000:{
                        items:1
                    }
                }
            });
            $('.googleReviewSlider').owlCarousel({
                loop:true,
                stagePadding: 5,
                rtl: rtl,
                autoplayHoverPause:false,
                margin:24,
                nav:false,
                navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
                dots: true,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:2
                    },
                    1000:{
                        items:3
                    }
                }
            });
            $('.blogSecSlider').owlCarousel({
                loop:true,
                autoplay: true,
                rtl: rtl,
                autoplayHoverPause:false,
                margin:32,
                nav:true,
                navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
                dots: false,
                responsive:{
                    0:{
                        items:1
                    },
                    576:{
                        items:2
                    },
                    992:{
                        items:3
                    }
                }
            });
        })
        $(document).ready(function () {
            const $app = $('.app');
            const $img = $('.app__img');
            const $pageNav1 = $('.pages__item--1');
            const $pageNav2 = $('.pages__item--2');
            const $pageNav3 = $('.pages__item--3');
            let animation = true;
            let curSlide = 1;
            let scrolledUp, nextSlide;

            let pagination = function (slide, target) {
                animation = true;
                if (target === undefined) {
                    nextSlide = scrolledUp ? slide - 1 : slide + 1;
                } else {
                    nextSlide = target;
                }

            $('.pages__item--' + nextSlide).addClass('page__item-active');
            $('.pages__item--' + slide).removeClass('page__item-active');

            $app.toggleClass('active');
            setTimeout(function () {
                animation = false;
                }, 3000);
            };

            let navigateDown = function () {
                if (curSlide > 1) return;
                scrolledUp = false;
                pagination(curSlide);
                curSlide++;
            };

            let navigateUp = function () {
                if (curSlide === 1) return;
                scrolledUp = true;
                pagination(curSlide);
                curSlide--;
            };

            setTimeout(function () {
                $app.addClass('initial');
            }, 1500);

            setTimeout(function () {
                animation = false;
            }, 4500);

            $(document).on('mousewheel DOMMouseScroll', function (e) {
                var delta = e.originalEvent.wheelDelta;
                if (animation) return;
                if (delta > 0 || e.originalEvent.detail < 0) {
                    navigateUp();
                } else {
                    navigateDown();
                }
            });

            $(document).on("click", ".pages__item:not(.page__item-active)", function () {
                if (animation) return;
                let target = +$(this).attr('data-target');
                pagination(curSlide, target);
                curSlide = target;
            });
        });
    </script>
@endsection