@extends('web.layouts.container')

@section('header')
    <div class="container">
        <div class="inner">
            <div class="top">
                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}">{{__('main.home')}}</a>
                <span>{{$aboutPage->title}}</span>
            </div>
{{--            <h2>{{$aboutPage->title}}</h2>--}}
{{--            <p>{{stripText($aboutPage->description)}}</p>--}}
        </div>
    </div>
@endsection

@section('content')
    <section class="about_pg ">
        <!--Start manager-undertook-->
        <section class="manager-undertook">
            <div class="container">
                <div class="heading-sec">
                    <h4>{{__('abouts.get_to_know_us')}}</h4>
                </div>
                <div class="row">
                    <div class="col-md-5">
                        <div class="image-content">
                            <img src="{{asset('assets/web/images/logo.png')}}" class="main-img">
                            <a data-video-src="{{asset($about->video)}}" data-toggle="modal" href="#about_video_modal" class="play-btn about_video_play_link">
                                <i class="fas fa-play"></i>
                            </a>
                            <div class="modal fade about_video_modal" id="about_video_modal">
                                <div class="modal-dialog modal-xl">
                                    <div class="modal-content">
                                        <div class="modal-body"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="content-wrapper ">
                            <div class="text-content wow fadeInRight" data-wow-duration="2.5s">
                                <h4>{{$about->first_title}}</h4>
                                <h1>{{$about->second_title}}</h1>
                                <p>{!! $about->description !!}</p>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-10 m-auto">
                        <div class="counter-wrapper wow fadeInUp" data-wow-duration="2s">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="item">
                                        <img src="{{$about->client_image ? asset($about->client_image) : 'assets/web/images/icons/counter-icon-2.svg'}}" class="icon">
                                        <div class="text">
                                            <h5>+ <span class="counter">{{$about->client}}</span></h5>
                                            <p>{{$about->client_title ?? __('abouts.client_count')}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="item">
                                        <img src="{{$about->consultation_image ? asset($about->consultation_image) : 'assets/web/images/icons/counter-icon-1.svg'}}" class="icon">
                                        <div class="text">
                                            <h5>+ <span class="counter">{{$about->consultation}}</span></h5>
                                            <p>{{$about->consultation_title ?? __('abouts.consult')}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="item">
                                        <img src="{{$about->projects_image ? asset($about->projects_image) : 'assets/web/images/icons/counter-icon-3.svg'}}" class="icon">
                                        <div class="text">
                                            <h5>+ <span class="counter">{{$about->projects}}</span></h5>
                                            <p>{{$about->projects_title ?? __('abouts.project_numbers')}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <img src="{{asset('assets/web/images/pattern-1.png')}}" class="pattern-l">
        </section>
        <!--Start teamwork-sec-->
        <section class="teamwork-sec">
            <div class="container">
                <div class="heading-sec wow zoomIn " data-wow-duration="2s">
                    <h4>{{__('staffs.head')}}</h4>
                </div>
                <div class="teamwork-carousel owl-carousel owl-theme wow fadeIn" data-wow-duration="2s">
                    @if(count($staffs))
                        @foreach($staffs as $staff)
                            <div class="item">
                                <a href="{{route('staff.show', $staff->id)}}">
                                    <div class="card">
                                        <img src="{{asset($staff->image)}}" class="team-img">
                                        <div class="card-body">
                                            <h5>{{$staff->name}}</h5>
                                            <p>{{$staff->job_title}}</p>
                                            <div class="social-links">
                                                @if($staff->email)
                                                    <a href="mailto:{{$staff->email}}"><i class="far fa-envelope"></i></a>
                                                @endif
                                                @if($staff->linkedin)
                                                    <a target="_blank" href="{{$staff->linkedin}}"><i class="fab fa-linkedin-in"></i></a>
                                                @endif
                                                @if($staff->twitter)
                                                    <a target="_blank" href="{{$staff->twitter}}"><i class="fab fa-twitter"></i></a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>
    </section>
@endsection

@section('inner_js')
    <script>
        let url = "{{asset($aboutPage->image)}}";
       $('header').addClass('inner_header').attr('style', 'background: url('+url+')');
        $('.navs-container').addClass('inner_nav');

        $('.about_video_play_link').click(function (e) {
            e.preventDefault();
            let videoSrc = $(this).data('video-src');
            $('.about_video_modal .modal-body').html(`<video class="w-100" controls autoplay src="`+videoSrc+`"></video>`);
        });

        $('.about_video_modal').on('hide.bs.modal', function () {
            $('.about_video_modal .modal-body').html('');
        });
        $('.counter').countUp({
            delay: 10,
            time: 2000
        });
    </script>
@endsection