@extends('web.layouts.container')

@section('content')

    <!-- Start Header -->
    <header class="header">
        <div class="swiper-container swiper-header">
            <div class="swiper-wrapper">
                @if(count($sliders))
                    @foreach($sliders as $slider)
                        <div class="swiper-slide">
                            <div class="header-content">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-10 m-auto">
                                            <div class="text-box text-center">
                                                @php
                                                    /** @var TYPE_NAME $slider */
                                                    $sliderTitle = explode('@@', $slider->title, 5);
                                                @endphp
                                                <h1 class="title">
                                                    @isset($sliderTitle[0]) {{$sliderTitle[0]}} @endisset
                                                    <span class="color-blue">@isset($sliderTitle[1]) {{$sliderTitle[1]}} @endisset</span>
                                                    <span class="color-orange">@isset($sliderTitle[2]) {{$sliderTitle[2]}} @endisset</span>
                                                    @isset($sliderTitle[3]) {{$sliderTitle[3]}} @endisset<br>
                                                    <span class="thin">@isset($sliderTitle[4]) {{$sliderTitle[4]}} @endisset</span>
                                                </h1>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <img src="{{asset($slider->image)}}" alt="" class="bg">
                            </div>

                        </div>
                    @endforeach
                @endif

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>


    </header>
    <!-- Start about-sec -->
    <section class="about-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="img-box main-box">
                        <img src="{{asset($homeInfos->who_we_are_image)}}" alt="" class="main-img">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="text-box center-vr"   >
                        <h3 class="sec-title wow fadeInUp">@isset($whoWeAreFirstTitle[0]) {{$whoWeAreFirstTitle[0]}} @endisset <b> @isset($whoWeAreFirstTitle[1]) {{$whoWeAreFirstTitle[1]}} @endisset</b></h3>
                        <h3 class="title mt-3 mb-4 wow fadeInUp">{{$homeInfos->who_we_are_second_title}}</h3>
                        <p class="p mb-1 wow fadeInUp">
                            {!! stripText($homeInfos->who_we_are_description, 500) !!}
                        </p>
                        <div class="button_su more-btn  mt-4 wow fadeInUp">
                            <span class="su_button_circle "></span>
                            <a href="{{route('whoWeAre', [1, getSlug('about')])}}" class="button_su_inner">
                                <span class="button_text_container">{{__('main.read_more')}}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start drives-sec -->
    <section class="about-cards drives-sec">
        <div class="container">
            <div class="heading text-center mb-5 pb-3 wow fadeInUp"   >
                <h1 class="sec-title ">{{__('main.find_out')}}   <b> {{__('main.what_drives_us')}}  </b> </h1>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-4">
                    <div class="card text-center">
                        <img src="{{asset($drives->mission_icon ?? 'assets/web/images/icons/card_about_1.svg')}}" alt="" class="icon"/>
                        <div class="card-body">
                            <h6 class="title text-capitalize">{{$drives->mission_title}}</h6>
                            <p class="p">{!! $drives->mission_description !!}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-center">
                        <img src="{{asset($drives->vision_icon ?? 'assets/web/images/icons/card_about_2.svg')}}" alt="" class="icon"/>
                        <div class="card-body">
                            <h6 class="title text-capitalize">{{$drives->vision_title}}</h6>
                            <p class="p">{!! $drives->vision_description !!}</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- Start values-sec -->
    <section class="values-sec about-cards">
        <div class="container">
            <div class="heading text-center mb-5 pb-3 wow fadeInUp">
                <h1 class="sec-title text-capitalize">@isset($ourValues[0]) {{$ourValues[0]}} @endisset<b class="text-capitalize"> @isset($ourValues[1]) {{$ourValues[1]}}@endisset </b> </h1>
            </div>
            <div class="slider_cont position-relative px-5">
                <div class="swiper-container values-swiper">
                    <div class="swiper-wrapper pb-5">
                        @if(count($values))
                            @foreach($values as $value)
                                <div class="swiper-slide">
                                    <div class="card">
                                        <img src="{{asset($value->image)}}" alt="" class="icon"/>
                                        <div class="card-body">
                                            <h6 class="title">{{$value->title}}</h6>
                                            <p class="p">{{stripText($value->description)}}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>
    <!-- Start explore-sec -->
    <section class="explore-sec">
        <div class="container">
            <div class="heading text-center mb-5 pb-3 wow fadeInUp">
                <h1 class="sec-title "> {{__('main.explore')}}  <b> {{__('main.what_we_do')}}  </b> </h1>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('service.index'), [], true)}}">
                    <div class="explore_card card1">
                        <img src="{{ asset($serviceDetails->image) }}" alt="" class="main-img"/>
                        <div class="content">
                            <h6 class="title">{{$serviceDetails->first_title}}</h6>
                            <img src="{{asset('assets/web/images/shape_4.png')}}" alt="" class="bg"/>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('client.index'), [], true)}}">
                    <div class="explore_card card2">
                        <img src="{{ asset($clientsDetails->image) }}" alt="" class="main-img"/>
                        <div class="content">
                            <h6 class="title">{{$clientsDetails->title}}</h6>
                            <img src="{{asset('assets/web/images/shape_3.png')}}" alt="" class="bg"/>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('project.index'), [], true)}}">
                    <div class="explore_card card3">
                        <img src="{{ asset($projectDetails->image) }}" alt="" class="main-img"/>
                        <div class="content">
                            <h6 class="title">{{$projectDetails->title}}</h6>
                            <img src="{{asset('assets/web/images/shape_4.png')}}" alt="" class="bg"/>
                        </div>
                    </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- Start join-sec -->
    <!--<section class="join-sec">-->
    <!--    <div class="container">-->
    <!--        <div class="inner">-->
    <!--            <div class="row">-->
    <!--                <div class="col-md-6 order-2 order-lg-0">-->
    <!--                    <div class="text-box wow fadeInUp mt-5">-->
    <!--                        <h1 class="title ">-->
    <!--                            @isset($partOfOurTeamTitle[0]) {{$partOfOurTeamTitle[0]}} @endisset <br>-->
    <!--                            <span class="color-orange">@isset($partOfOurTeamTitle[1]) {{$partOfOurTeamTitle[1]}} @endisset</span>-->
    <!--                        </h1>-->
    <!--                        <p class="det">{!! stripText($homeInfos->part_our_team_description) !!}</p>-->
    <!--                        <div class="button_su more-btn  mt-2">-->
    <!--                            <span class="su_button_circle "></span>-->
    <!--                            <a target="_blank" href="{{isset($settings['career_url']) ? $settings['career_url'] : '#'}}" class="button_su_inner">-->
    <!--                                <span class="button_text_container">{{__('main.apply_now')}}</span>-->
    <!--                            </a>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--                <div class="col-md-6 order-0 order-lg-2">-->
    <!--                    <img src="{{asset($homeInfos->part_our_team_image)}}" alt="" class="main-img wow zoomIn mt-4"/>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->
    
    <!-- Start getin_banner -->
        <section class="getin_banner"  style="background-image: url({{asset($homeInfos->part_our_team_image)}});">
            <div class="container-fluid">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-5 offset-md-1">
                            <div class="text-box">
                                <h1 class="title ">
                                    {!! stripText($homeInfos->part_our_team_title) !!}
                                </h1>
                                <p class="det">
                                    {!! stripText($homeInfos->part_our_team_description) !!}
                                </p>
                                <div class="button_su more-btn  mt-2">
                                    <span class="su_button_circle "></span>
                                    <a href="{{isset($settings['career_url']) ? $settings['career_url'] : '#'}}" class="button_su_inner">
                                      <span class="button_text_container">{{__('main.apply_now')}}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    <!--Start impact-sec -->
    <section class="impact-sec">
        <div class="container">
            <div class="heading text-center mb-5 pb-3 wow fadeInUp"   >
                <h1 class="sec-title text-capitalize"> @isset($ourImpactTitle[0]) {{$ourImpactTitle[0]}} @endisset  <b> @isset($ourImpactTitle[1]) {{$ourImpactTitle[1]}} @endisset  </b> </h1>
            </div>
            <div class="row">
                <div class="col-lg-4 ">
                    <div class="impact_card">
                        <div class="icon-container wow zoomIn">
                            <img src="{{asset($impact->sustainability_icon ?? 'assets/web/images/icons/services-cards-1.png')}}" alt="" class="icon"/>
                        </div>
                        <div class="content wow fadeInUp">
                            <h6 class="title"><b>{{$impact->sustainability_home_title}}</b></h6>
                            <p class="det">{{stripText($impact->sustainability_home_description)}}</p>
                            <div class="button_su more-btn  mt-3">
                                <span class="su_button_circle "></span>
                                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('ourImpact', [1, getSlug('impact')]), [], true)}}" class="button_su_inner">
                                    <span class="button_text_container">{{__('main.learn_more')}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 ">
                    <div class="impact_card">
                        <div class="icon-container wow zoomIn">
                            <img src="{{asset($impact->vision_icon ?? 'assets/web/images/icons/services-cards-2.png')}}" alt="" class="icon"/>
                        </div>
                        <div class="content wow fadeInUp">
                            <h6 class="title"><b>{{$impact->vision_home_title}}</b></h6>
                            <p class="det">{{stripText($impact->vision_home_description)}}</p>
                            <div class="button_su more-btn  mt-3">
                                <span class="su_button_circle "></span>
                                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('ourImpact', [2, getSlug('impact')]), [], true)}}" class="button_su_inner">
                                    <span class="button_text_container">{{__('main.learn_more')}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 ">
                    <div class="impact_card">
                        <div class="icon-container wow zoomIn">
                            <img src="{{asset($impact->news_icon ?? 'assets/web/images/icons/services-cards-3.png')}}" alt="" class="icon"/>
                        </div>
                        <div class="content wow fadeInUp">
                            <h6 class="title"><b>{{$impact->news_home_title}}</b></h6>
                            <p class="det">{{stripText($impact->news_home_description)}}</p>
                            <div class="button_su more-btn  mt-3">
                                <span class="su_button_circle "></span>
                                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('ourImpact', [3, getSlug('impact')]), [], true)}}" class="button_su_inner">
                                    <span class="button_text_container">{{__('main.learn_more')}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Start anniversay-sec -->
    <section class="anniversay-sec">
        <div class="container">
            <div class="row align-items-center no-gutters">
                <div class="col-md-3">
                    <div class="img">
                        <img class="w-100" src="{{ asset($homeInfos->anniversary_image ?? 'assets/web/images/7-01.png') }}" alt="">
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="inner">
                        <div class="content">
                            <div class="text-box text-center wow fadeInUp">
                                <h1 class="title mb-4">
                                    <span class="thin">@isset($anniversaryTitle[0]) {{$anniversaryTitle[0]}} @endisset</span>  <span class="color-orange">@isset($anniversaryTitle[1]) {{$anniversaryTitle[1]}} @endisset</span>
                                    @foreach($anniversaryTitle as $key => $annTitle)
                                        @if($key == 0 || $key == 1) @continue @endif
                                        {{($annTitle ?? null)}}
                                    @endforeach
                                </h1>
                                <p class="p">{!! stripText($homeInfos->anniversary_description) !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start clients-pg -->
    <section class="clients-pg about-pg py-5">
            <div class="container">
                <div class="">
                    <div class="heading text-center mb-5 pb-3 wow fadeInUp"   >
                        <h1 class="pg-title">{{ $clientsDetails->title }}</h1>
                        <p class="heading-p mt-3 col-md-9 m-auto">{!! stripText($clientsDetails->description) !!}</p>
                    </div>
                    <div class="slider_cont clients_slider position-relative px-5">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                @if($clients)
                                @foreach($clients as $client)
                                <div class="swiper-slide">
                                    <div class="client_card">
                                        <img src="{{asset($client->image)}}" alt="" class="logo center-vr"/>
                                    </div>
                                </div>
                                @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </section>
    <!-- Start about-sec -->
    <!--<section class="about-sec">-->
    <!--    <div class="container">-->
    <!--        <div class="row">-->
    <!--            <div class="col-md-6">-->
    <!--                <div class="img-box main-box" style="height: 400px;">-->
    <!--                    <img src="{{asset($homeInfos->ambitious_dream_image)}}" alt="" class="main-img"   >-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="col-md-6">-->
    <!--                <div class="text-box mt-5"   >-->
    <!--                    <h3 class="sec-title wow fadeInUp"> @isset($ambitiousDreamFirstTitle[0]) {{$ambitiousDreamFirstTitle[0]}} @endisset  <b> @isset($ambitiousDreamFirstTitle[1]) {{$ambitiousDreamFirstTitle[1]}} @endisset</b></h3>-->
    <!--                    <h3 class="title mt-3 mb-4 wow fadeInUp">{{$homeInfos->ambitious_dream_second_title}}</h3>-->
    <!--                    <p class="p mb-1 wow fadeInUp">{!! stripText($homeInfos->ambitious_dream_description) !!} </p>-->
    <!--                    <div class="button_su more-btn  mt-4 wow fadeInUp">-->
    <!--                        <span class="su_button_circle "></span>-->
    <!--                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('whoWeAre', [1, getSlug('about')]), [], true)}}" class="button_su_inner">-->
    <!--                            <span class="button_text_container">{{__('main.read_more')}}</span>-->
    <!--                        </a>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->
@endsection

@section('inner_js')
    <script>
        $('.counter').countUp({
            delay: 10,
            time: 2000
        });
    </script>
    
    <script>
    var swiper = new Swiper('.clients_slider .swiper-container', {
        // slidesPerView: 5,
        spaceBetween: 30,
        centeredSlides: true,
        speed: 1000,
        pagination: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        mousewheel: false,
        keyboard: true,
        autoplay: {
            delay: 5000,
        },
        loop: true,
        breakpoints: {
            0: {
                slidesPerView: 1,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 2,
            },
            991: {
                slidesPerView: 3,
            },
            1200: {
                slidesPerView: 3,
            }
        }
    });
</script>
@endsection