@extends('web.layouts.container')
@section('content')
    <section class="about-pg section">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-7">
                    <h1 class="about_title color-secondary wow left_to_right_apperance">
                        {{$aboutPage->title}}
                    </h1>
                </div>
                <div class="col-lg-4">
                    <div class="exp_card text-center pt-3 mt-5">
                        <h1 class="about_counter color-primary">
                            <span class="counter">{{$aboutPage->meta['experience_years']}}</span> +
                        </h1>
                        <h4 class="label">{{__('pages.experience_years')}}</h4>
                    </div>
                </div>
            </div>
            <div class="box mb-5 wow left_to_right_apperance">
                <div class="first_boxes zi-5 row col-lg-10 m-auto">
                    <div class="col-lg-4 col-6">
                        <div class="about_card bg_primary wow left_to_right_apperance trans_delay_3 pages_desc_details">
                            <h1 class="title text-white"> {{$ourMissionTitle[0]}} <br> {{$ourMissionTitle[1] ?? null}} </h1>
                            <p class="p text-white mb-0">
                                {!! wordLimit($ourMissionPage->description, 11) !!}
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-6">
                        <div class="about_card bg-dark wow left_to_right_apperance trans_delay_3 pages_desc_details">
                            <h1 class="title text-white"> {{$ourVisionTitle[0]}} <br> {{$ourVisionTitle[1] ?? null}} </h1>
                            <p class="p text-white mb-0">
                                {!! wordLimit($ourVisionPage->description, 11) !!}
                            </p>
                        </div>
                    </div>
                </div>
                <img src="{{asset($aboutPage->image)}}" alt="" class="sec-img"/>
                <div class="scnd_boxes">
                    <div class="row justify-content-around align-items-end">
                        <div class="col-lg-3">
                            <div class="static_card">
                                <h1 class="num color-secondary counter">{{$aboutPage->meta['employees_count']}}</h1>
                                <p class="p">{{__('pages.employees_count')}}</p>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="static_card">
                                <h1 class="num color-secondary counter">{{$aboutPage->meta['sites_count']}}</h1>
                                <p class="p">{{__('pages.sites_count')}}</p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="about_card bg_secondary wow left_to_right_apperance trans_delay_3 pages_desc_details">
                                <h1 class="title text-white">{{$ourValuesPage->title}}</h1>
                                <p class="p text-white mb-0">
                                    {!! wordLimit($ourValuesPage->description, 36) !!}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-box">
                <div class="head_box mb-5 col-lg-7">
                    <h6 class="subtitle mb-3 color-primary text-uppercase wow fadeInUp">{{$aboutPage->page_title}}</h6>
                    <h1 class="title mb-3 color-secondary wow fadeInUp">
                        {{$aboutPage->title}}
                    </h1>
                    <h6 class="det fw-light wow fadeInUp">
                        {!! $aboutPage->description !!}
                    </h6>
                </div>
                <div class="pt-4 col-lg-11">
                    <div class="content-box br_secondary mb-4 our_mission_desc_details">
                        <h4 class="title color-secondary wow fadeInUp">{{$ourMissionPage->title}}</h4>
                        {!! $ourMissionPage->description !!}
                    </div>
                    <div class="content-box br_primary mb-4 our_vision_desc_details">
                        <h4 class="title color-secondary wow fadeInUp">{{$ourVisionPage->title}}</h4>
                        {!! $ourVisionPage->description !!}
                    </div>
                    <div class="content-box br_secondary mb-4 our_values_desc_details">
                        <h4 class="title color-secondary wow fadeInUp">{{$ourValuesPage->title}}</h4>
                        {!! $ourValuesPage->description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        $(document).ready(function () {
            $('.pages_desc_details p').addClass('p text-white mb-0');
            $('.our_mission_desc_details p').addClass('det wow fadeInUp');
            $('.our_vision_desc_details p').addClass('det color-primary wow fadeInUp');
            $('.our_values_desc_details p:even').addClass('det color-primary wow fadeInUp');
            $('.our_values_desc_details p:odd').addClass('det wow fadeInUp');
        })
    </script>
@endsection