@extends('web_site.layouts.master')
@section('content')
    @php
        $mainData = getMainData();
    @endphp

        <!-- :: Header -------------------------------------------------------------------------->
    <!--Main Slider video-->
    <section class="main-slider-three banner">
        <video autoplay loop muted playsinline>
            <source src="{{$mainData->video_url}}" type="video/mp4">
        </video>

        <div class="main-slider-three__bg-overly"></div>
        <div class="container1">
            @if($mainData->exploreUrl)
                <!-- الزرار -->
                <a href="{{$mainData->exploreUrl}}" target="_blank"
                   class="buttontopvideo">  {{trans('web_site.Explore_more ')}}</a>
            @endif
        </div>
    </section>
    <!-- :: About Us --------------------------------------------------------------------------->
    <section class="about-three pb-0 backab2t">
        <div class="container">
            @if (isset($about) && !empty($about))
                <div class="row flex-direction">
                    <div class="col-xl-12">
                        <div class="about-three__right wow fadeInLeft text-center" data-wow-delay="100ms">
                            <div class="section-title text-left">
                                <div class="section-title__tagline-box">
                                    <div class="section-title__shape"></div>
                                    <span class="section-title__tagline">{{ trans('web_site.Who_We_Are') }}</span>
                                </div>
                                <h2 class="section-title__title"> {{ getDefultheader(optional($about)->title) }}</h2>
                            </div>
                            <div class="titfirabout">
                                {{ getDefultText(optional($about)->description) }}
                                let us write a brief about our trainings the share participant’s testimonial. sLorem
                                ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
                            </div>

                        </div>
                    </div>
                    <!-- <div class="col-xl-5">
                                                    <div class=" wow slideInRight" data-wow-delay="200ms" data-wow-duration="2500ms">
                                                        <img src="{{ optional($about)->image_url }}" class="border-radius15" width="100%" alt="img about" loading="lazy">
                                                    </div>
                                                </div>-->

                </div>
            @endif

            <!--Counter  -->
            @if($statistics)
                <div class="row">
                    <!--Counter One Single Start -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-6 wow fadeInLeft counter-item" data-wow-delay="100ms">
                        <div class="counter-one__single">
                            <div class="counter-one__content-box">
                                <div class="counter-one__content">
                                    <div class="counter-one__count count-box">
                                        <h3 class="count-text" data-stop="{{$statistics->statistic1}}"
                                            data-speed="1500">00</h3>
                                    </div>
                                    <h5 class="counter-one__title">{{trans('dash_site.statistic1')}} </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Counter One Single Start -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-6 wow fadeInLeft counter-item" data-wow-delay="300ms">
                        <div class="counter-one__single">
                            <div class="counter-one__content-box">
                                <div class="counter-one__content">
                                    <div class="counter-one__count count-box">
                                        <h3 class="count-text" data-stop="{{$statistics->statistic2}}"
                                            data-speed="1500">00</h3>
                                    </div>
                                    <h5 class="counter-one__title"> {{trans('dash_site.statistic2')}}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Counter One Single Start -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-6 wow fadeInRight counter-item" data-wow-delay="600ms">
                        <div class="counter-one__single">
                            <div class="counter-one__content-box">
                                <div class="counter-one__content">
                                    <div class="counter-one__count count-box">
                                        <h3 class="count-text" data-stop="{{$statistics->statistic3}}"
                                            data-speed="1500">00</h3>
                                    </div>
                                    <h5 class="counter-one__title"> {{trans('dash_site.statistic3')}}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Counter One Single Start -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-6 wow fadeInRight counter-item" data-wow-delay="900ms">
                        <div class="counter-one__single">
                            <div class="counter-one__content-box">
                                <div class="counter-one__content">
                                    <div class="counter-one__count count-box">
                                        <h3 class="count-text" data-stop="{{$statistics->statistic4}}"
                                            data-speed="1500">00</h3>
                                        <h3>+</h3>
                                    </div>
                                    <h5 class="counter-one__title">{{trans('dash_site.statistic4')}}</h5>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!--Counter One Single Start -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-6 wow fadeInLeft counter-item" data-wow-delay="100ms">
                        <div class="counter-one__single">
                            <div class="counter-one__content-box">
                                <div class="counter-one__content">
                                    <div class="counter-one__count count-box">
                                        <h3 class="count-text" data-stop="{{$statistics->statistic5}}"
                                            data-speed="1500">00</h3>
                                    </div>
                                    <h5 class="counter-one__title">{{trans('dash_site.statistic5')}} </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Counter One Single Start -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-6 wow fadeInLeft counter-item" data-wow-delay="300ms">
                        <div class="counter-one__single">

                            <div class="counter-one__content-box">
                                <div class="counter-one__content">
                                    <div class="counter-one__count count-box">
                                        <h3 class="count-text" data-stop="{{$statistics->statistic6}}"
                                            data-speed="1500">00</h3>
                                    </div>
                                    <h5 class="counter-one__title"> {{trans('dash_site.statistic6')}}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Counter One Single Start -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-6 wow fadeInRight counter-item" data-wow-delay="600ms">
                        <div class="counter-one__single">

                            <div class="counter-one__content-box">

                                <div class="counter-one__content">
                                    <div class="counter-one__count count-box">
                                        <h3 class="count-text" data-stop="{{$statistics->statistic7}}"
                                            data-speed="1500">00</h3>
                                        <h3>%</h3>
                                    </div>
                                    <h5 class="counter-one__title"> {{trans('dash_site.statistic7')}}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Counter One Single Start -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-6 wow fadeInRight counter-item" data-wow-delay="900ms">
                        <div class="counter-one__single">

                            <div class="counter-one__content-box">
                                <div class="counter-one__content">
                                    <div class="counter-one__count count-box">
                                        <h3 class="count-text" data-stop="{{$statistics->statistic8}}"
                                            data-speed="1500">00</h3>
                                        <h3>%</h3>
                                    </div>
                                    <h5 class="counter-one__title">{{trans('dash_site.statistic8')}}</h5>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            @endif
        </div>
    </section>


    <!-- <hr class="custom-divider">-->
    <!------------------------------------------------------------------------------------------------->
    <!-----WHAT WE DO---->
    @if (isset($wedo) && !empty($wedo))
        {{-- @if (isset($wedo) && !empty($item))
                    <div class="row flex-direction1">
                        <!--item-->
                        @foreach ($wedo as $item)
                            <div class="col-md-4">
                                <div class="divwhat">
                                    <h3 class="divwhattitle">
                                        <img src="{{ $item->imageUrl }}" alt="img">
                                        {{ $item->name }}
                                    </h3>

                                    <p>{{ getDefultText(optional($item)->details) }}</p>
                                </div>
                            </div>
                        @endforeach

                    </div>
                @endif --}}
        <section class="about-three pb-0">
            <div class="container">
                <div class="col-xl-9 auto">
                    <div class="about-three__right wow fadeInLeft text-center animated" data-wow-delay="100ms">
                        <div class="section-title text-center">
                            <div class="section-title__tagline-box">
                                <span class="section-title__tagline">{{ trans('web_site.wedo') }}</span>
                            </div>
                            <p class="parfirst">{{ trans('web_site.wedo_section') }}</p>
                        </div>
                    </div>
                </div>
                <div class="row flex-direction1">
                    <!--item-->
                    @foreach ($wedo as $item)
                        <div class="col-md-4">
                            <div class="divwhat">
                                <h3 class="divwhattitle">
                                    <img src="{{ $item->imageUrl }}" alt="img">
                                    {{ $item->name }}
                                </h3>
                                <p>{{ getDefultText(optional($item)->details) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    <!--------------------------------------------------------------------------------------------->
    <!--Services-->
    <section class="services-carousel-page bbaackserv">
        <div class="container wow fadeInUp" data-wow-delay="300ms">
            <div class="section-title text-center">
                <div class="section-title__tagline-box">
                    <div class="section-title__shape"></div>
                    <span class="section-title__tagline">{{ trans('web_site.OurServices') }}</span>
                </div>
                <h2 class="section-title__title">{{ trans('web_site.services_section') }}</h2>
            </div>
            <div class="row">

                @foreach ($Ser_Cat as $category)
                    <div class="col-md-4">
                        <div class="services-two__single high">
                            <div class="services-two__content pdd-ser">
                                <div class="services-two__icon-and-title">
                                    <h3 class="services-two__title font-weight">
                                        <a href="{{ route('services', ['id' => $category->id]) }}">
                                            {{ $category->name }}
                                        </a>
                                    </h3>
                                </div>
                                <div class="services-two__text">

                                </div>

                                <div>
                                    <a href="{{ route('services', ['id' => $category->id]) }}" class="backcatbttn">
                                        <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>
    </section>

    <!---------------------------------------------------------------------------------------------------->
    <!-----WIDE IMPACT TRAININGS---->
    @if (isset($courses) && !empty($courses))
        <section class="about-three">
            <div class="container">
                <div class="col-xl-12">
                    <div class="about-three__right wow fadeInLeft text-center animated" data-wow-delay="100ms">
                        <div class="section-title text-center">
                            <div class="section-title__tagline-box col-md-6">
                                <h2 class="section-title__title mb25-main">
                                    {{ trans('web_site.section_courses') }} </h2>
                            </div>
                            <p class="parfirst">{{ getDefultText(optional($courses)->details) }}</p>
                        </div>
                    </div>
                </div>
                <div class="row flex-direction1">
                    <div class="col-xl-6">
                        <div class="cs_about_thumb wow slideInLeft animated">
                            <div class="imgbackgroundab1 bor-lef-ri"
                                style="background-image: url({{ $courses->image_url }});">
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6">
                        <div class="about-three__right three__mtt wow slideInRight animated">
                            <span class="section-title__tagline">{{ $courses->title }}</span>
                            <h3 class="train-titlee">{{ $courses->sub_title }}</h3>
                            <div class="about-three__text">

                                <p> {{ getDefultText(optional($courses)->details) }}</p>
                                <div class="text-right">
                                    <a href="{{ $courses->link }}" class=" aclrbtn">{{ trans('web_site.read_more') }}<i
                                            class="fas fa-chevron-right ms-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
        </section>
    @endif
    <!------------------------------>
    <hr class="custom-divider">
    <!--WHAT OUR TRAINEES SAY-->
    @if (isset($reviews) && !empty($reviews))
        <section class="testimonial-two">
            <div class="container wow fadeInUp" data-wow-delay="400ms">
                <div class="section-title text-center">
                    <h2 class="section-title__title">What our trainees say</h2>
                </div>
                <div class="testimonial-two__bottom">
                    <div class="thm-swiper__slider swiper-container"
                        data-swiper-options='{
                "slidesPerView": 1,
                "slidesPerGroup": 1,
                "spaceBetween": 0,
                "speed": 2000,
                "loop": true,
                "pagination": {
                    "el": ".swiper-dot-style1",
                    "type": "bullets",
                    "clickable": true
                },
                "navigation": {
                    "nextEl": ".swiper-button-prev1",
                    "prevEl": ".swiper-button-next1"
                },
                "autoplay": { "delay": 2000 },
                "breakpoints": {
                    "0": {"spaceBetween": 0,"slidesPerView": 1,"slidesPerGroup": 1},
                    "375": {"spaceBetween": 0,"slidesPerView": 1,"slidesPerGroup": 1},
                    "575": {"spaceBetween": 0,"slidesPerView": 1,"slidesPerGroup": 1},
                    "768": {"spaceBetween": 20,"slidesPerView": 2,"slidesPerGroup": 2},
                    "992": {"spaceBetween": 20,"slidesPerView": 3,"slidesPerGroup": 3},
                    "1200": {"spaceBetween": 20,"slidesPerView":3,"slidesPerGroup": 3},
                    "1320": {"spaceBetween": 20,"slidesPerView":3,"slidesPerGroup": 3}
                }
            }'>
                        <div class="swiper-wrapper">

                            @foreach ($reviews as $review)
                                <div class="swiper-slide">
                                    <div class="testimonial-two__single testimonial-two__say">
                                        <div class="testimonial-two__quote">
                                            <i class="fas fa-quote-left"></i>
                                        </div>
                                        <div class="testimonial-two__text">
                                            “{!! $review->feedback !!}”
                                        </div>
                                        <div class="testimonial-two__client-box">
                                            <div class="testimonial-two__client-content">
                                                <h3>{{ $review->name }}</h3>
                                                <p>{{ $review->job_title }}</p>
                                            </div>
                                            <div class="testimonial-two__client-img">
                                                <img src="{{ asset($review->image_url ?? 'assets_web/img/user.png') }}"
                                                    alt="img" loading="lazy">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                        <!-- Pagination Dots -->
                        <div class="testimonial-two__dot-style">
                            <div class="swiper-dot-style1"></div>
                        </div>

                        <div class="swiper-slide">
                            <div class="testimonial-two__single testimonial-two__say ">
                                <div class="testimonial-two__quote"><i class="fas fa-quote-left"></i></div>
                                <div class="testimonial-two__text">
                                    “i can say that i really enjoyed
                                    the experience during the training
                                    so much i went and trained my
                                    whole family”
                                </div>

                                <div class="testimonial-two__client-box">
                                    <div class="testimonial-two__client-content">
                                        <h3>Adel Iman</h3>
                                        <p>HR manager at Jokes</p>
                                    </div>
                                    <div class="testimonial-two__client-img">
                                        <img src="{{asset('assets_web/img/user.png')}}" alt="img" loading="lazy">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="testimonial-two__single testimonial-two__say ">
                                <div class="testimonial-two__quote"><i class="fas fa-quote-left"></i></div>
                                <div class="testimonial-two__text">
                                    “i can say that i really enjoyed
                                    the experience during the training
                                    so much i went and trained my
                                    whole family”
                                </div>

                                <div class="testimonial-two__client-box">
                                    <div class="testimonial-two__client-content">
                                        <h3>Adel Iman</h3>
                                        <p>HR manager at Jokes</p>
                                    </div>
                                    <div class="testimonial-two__client-img">
                                        <img src="{{asset('assets_web/img/user.png')}}" alt="img" loading="lazy">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- If we need navigation buttons -->
                    <div class="testimonial-two__dot-style">
                        <div class="swiper-dot-style1"></div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <section class="about-three" style="background: #f4f5f6;">
        <div class="container">
            <div class="section-title text-center">
                <div class="section-title__tagline-box">
                    <div class="section-title__shape"></div>
                    <span class="section-title__tagline">{{ trans('web_site.Our_Blog') }}</span>
                </div>
                <h2 class="section-title__title">{{ trans('web_site.Latest_Our_Articles_and_Updates') }}</h2>
            </div>
            @foreach ($blogs as $item)
                @if (!empty($item->main_image))
                    @php
                        $image_path = Storage::disk('images')->url($item->main_image);

                        $img_url = asset(
                            Storage::disk('images')->exists($item->main_image)
                                ? $image_path
                                : 'assets/images/blank.png',
                        );
                    @endphp
                @else
                    @php $img_url = asset('assets/images/blank.png'); @endphp
                @endif
                <div class="row flex-direction align-items">
                    <div class="col-xl-7">
                        <div class="about-three__right vision-pargraph wow slideInLeft" data-wow-delay="200ms"
                            data-wow-duration="2500ms">
                            <div class="read-more-text">
                                <div class="section-title text-left">

                                    <h3 class="section-title__title">{{ getDefultheader($item->title) }} </h3>
                                </div>
                                <div class="about-three__text">
                                    <div class="text">
                                        {{ Str::words(getDefultText($item->details), 270, '...') }}
                                    </div>
                                </div>

                            </div>

                            <a href="{{ route('one_blog', $item->id) }}"
                                class=" aclrbtn">{{ trans('web_site.read_more') }}<i
                                    class="fas fa-chevron-right ms-2"></i></a>

                        </div>
                    </div>
                    <div class="col-xl-5">
                        <div class="cs_about_thumb wow slideInRight" data-wow-delay="200ms" data-wow-duration="2500ms">
                            <div class="imgbackgroundab1 borderblr" style="background-image: url();">
                            </div>

                        </div>
                    </div>

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

    @if ($partners)
        <!--Clients-->
        <section class="brand-one">
            <div class="container  wow fadeInUp" data-wow-delay="500ms">

                <div class="section-title text-center">
                    <div class="section-title__tagline-box">
                        <div class="section-title__shape"></div>
                        <span class="section-title__tagline">{{ trans('web_site.Our_Clients') }}</span>
                    </div>
                    <h2 class="section-title__title">{{ trans('web_site.Trusted_by_Leading_Organizations') }}</h2>
                </div>

                <div class="brand-one__inner">
                    <div class="thm-swiper__slider swiper-container"
                        data-swiper-options='{"spaceBetween": 100,
            "slidesPerView": 1,
        "slidesPerGroup": 1,
            "spaceBetween": 0,
            "speed": 2000,
            "loop": true,
            "pagination": {
                "el": ".swiper-dot-style1",
                "type": "bullets",
                "clickable": true
            },
        "navigation": {
            "nextEl": "#brand-one__swiper-button-next",
            "prevEl": "#brand-one__swiper-button-prev"
        },
        "autoplay": { "delay": 2000 },
        "breakpoints": {
            "0": {
                "spaceBetween": 20,
                "slidesPerView": 2,
                "slidesPerGroup": 2
            },
            "375": {
                "spaceBetween": 30,
                "slidesPerView": 2,
                "slidesPerGroup": 2
            },
            "575": {
                "spaceBetween": 30,
                "slidesPerView": 2,
                "slidesPerGroup": 2
            },
            "767": {
                "spaceBetween": 30,
                "slidesPerView": 2,
                "slidesPerGroup": 2
            },
            "991": {
                "spaceBetween": 30,
                "slidesPerView": 3,
                "slidesPerGroup": 3
            },
            "1199": {
                "spaceBetween": 30,
                "slidesPerView": 5,
                "slidesPerGroup": 5
            },
            "1290": {
                "spaceBetween": 30,
                "slidesPerView": 5,
                "slidesPerGroup": 5
            }
        }}'>
                        <div class="swiper-wrapper">
                            @foreach ($partners as $partner)
                                <div class="swiper-slide">
                                    <div class="brand-one__img">
                                        <a href="{{ $partner->link ?? '#' }}" target="_blank">
                                            <img src="{{ $partner->image_url }}"
                                                alt="{{ $partner->getTranslation('title', app()->getLocale()) }}"
                                                loading="lazy">
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="testimonial-two__dot-style">
                            <div class="swiper-dot-style1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <hr class="custom-divider">
    @if ($feedbacks)
        <!--Testimonial Two Start-->
        <section class="testimonial-two">
            <div class="container wow fadeInUp" data-wow-delay="400ms">
                <div class="section-title text-center">
                    <div class="section-title__tagline-box">
                        <div class="section-title__shape"></div>
                        <span class="section-title__tagline">{{ trans('web_site.Our_Testimonial') }}</span>
                    </div>
                    <h2 class="section-title__title">{{ trans('web_site.Customer_Reviews') }}</h2>
                </div>
                <div class="testimonial-two__bottom">
                    <div class="thm-swiper__slider swiper-container"
                        data-swiper-options='{
                "slidesPerView": 1,
        "slidesPerGroup": 1,
                "spaceBetween": 0,
                "speed": 2000,
                "loop": true,
                "pagination": {
                    "el": ".swiper-dot-style1",
                    "type": "bullets",
                    "clickable": true
                },

                "navigation": {
                    "nextEl": ".swiper-button-prev1",
                    "prevEl": ".swiper-button-next1"
                },
                "autoplay": { "delay": 2000 },
                "breakpoints": {
                        "0": {
                            "spaceBetween": 0,
                            "slidesPerView": 1,
                "slidesPerGroup": 1
                        },
                        "375": {
                            "spaceBetween": 0,
                            "slidesPerView": 1,
                "slidesPerGroup": 1
                        },
                        "575": {
                            "spaceBetween": 0,
                            "slidesPerView": 1,
                "slidesPerGroup": 1
                        },
                        "768": {
                            "spaceBetween": 20,
                            "slidesPerView": 2,
                "slidesPerGroup": 2
                        },
                        "992": {
                            "spaceBetween": 20,
                            "slidesPerView": 3,
                "slidesPerGroup": 3
                        },
                        "1200": {
                            "spaceBetween": 20,
                            "slidesPerView":3,
                "slidesPerGroup": 3
                        },
                        "1320": {
                            "spaceBetween": 20,
                            "slidesPerView":3,
                "slidesPerGroup": 3
                        }
                    }
            }'>

                        <div class="swiper-wrapper">
                            @foreach ($feedbacks as $feedback)
                                <div class="swiper-slide">
                                    <div class="testimonial-two__single">
                                        <div class="testimonial-two__quote"><i class="fas fa-quote-left"></i></div>
                                        <div class="testimonial-two__text">
                                            {!! $feedback->feedback !!}
                                        </div>

                                        <div class="testimonial-two__client-box">
                                            <div class="testimonial-two__client-content">
                                                <h3>{{ $feedback->name }}</h3>
                                                <p>{{ $feedback->jop_title }}</p>
                                            </div>
                                            <div class="testimonial-two__client-img">
                                                <img src="{{ $feedback->image_url }}" alt="{{ $feedback->name }}"
                                                    loading="lazy">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <!-- If we need navigation buttons -->
                        <div class="testimonial-two__dot-style">
                            <div class="swiper-dot-style1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!--------------------------------------------------------------------------------------->
@endsection