@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">
                <div class="col-md-6">
                    <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-6">
                    <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="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 Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></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">
                @if(count($works))
                    <div class="col-md-4">
                        <div class="explore_card card1">
                            <img src="{{asset($works[0]['image'])}}" alt="" class="main-img"/>
                            <div class="content">
                                <h6 class="title">{{$works[0]['title']}}</h6>
                                <img src="{{asset('assets/web/images/shape_4.png')}}" alt="" class="bg"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="explore_card card2">
                            <img src="{{asset($works[1]['image'])}}" alt="" class="main-img"/>
                            <div class="content">
                                <h6 class="title">{{$works[1]['title']}}</h6>
                                <img src="{{asset('assets/web/images/shape_3.png')}}" alt="" class="bg"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="explore_card card3">
                            <img src="{{asset($works[2]['image'])}}" alt="" class="main-img"/>
                            <div class="content">
                                <h6 class="title">{{$works[2]['title']}}</h6>
                                <img src="{{asset('assets/web/images/shape_4.png')}}" alt="" class="bg"/>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </section>
    <!-- Start join-sec -->
    <section class="join-sec">
        <div class="container">
            <div class="inner">
                <div class="row">
                    <div class="col-md-6">
                        <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">
                        <img src="{{asset($homeInfos->part_our_team_image)}}" alt="" class="main-img wow zoomIn mt-4"/>
                    </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="inner">
                <div class="content row">
                    <div class="col-md-8 m-auto">
                        <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> @isset($anniversaryTitle[2]) {{$anniversaryTitle[2]}} @endisset
                            </h1>
                            <p class="p">{{stripText($homeInfos->anniversary_description)}}</p>
                        </div>
                    </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>
@endsection