@extends('web.layouts.container')

@section('header')
    <div class="header-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="header-carousel owl-carousel owl-theme">
                        @if(count($sliders))
                            @foreach($sliders as $slider)
                                <div class="item">
                                    <div class="text">
                                        <h2>{{$slider->title}}</h2>
                                        <p>{!! $slider->description !!}</p>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/pattern-1.png')}}" class="pattern-l">
        <img src="{{asset('assets/web/images/pattern-1.png')}}" class="pattern-r">
    </div>
@endsection

@section('content')
    <!--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">
                            <h5>{{$about->first_title}}</h5>
                            <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="{{'assets/web/images/pattern-1.png'}}" class="pattern-l">
    </section>
    <!--Start services-sec-->
    <section class="services-sec">
        <div class="container">
            <div class="heading-sec wow zoomIn" data-wow-duration="2s">
                <h4>{{__('services.our_services')}}</h4>
            </div>
            <div class="row justify-content-center">
                @if(count($services))
                    @foreach($services as $service)
                        <div class="col-lg-4 col-md-6">
                            <a href="{{route('service.index').'?hash='.stripText(strtolower($service->hash_name), 10, true)}}">
                                <div class="card">
                                    <img src="{{asset($service->images[0])}}" alt="" class="icon">
                                    <div class="wrapper">
                                        <h5>{{$service->name}}</h5>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
        <img src="{{'assets/web/images/pattern-1.png'}}" class="pattern-l">
        <img src="{{'assets/web/images/pattern-1.png'}}" class="pattern-r">
    </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>
    <!--Start methodology-sec-->
    <section class="methodology-sec">
        <div class="container">
            <div class="heading-sec wow zoomIn" data-wow-duration="2s">
                <h4>{{__('main.work_way')}}</h4>
            </div>
            <div class="inner">
                <div class="row">
                    @if(count($workWays))
                        @foreach($workWays as $workWay)
                            <div class="col-lg-3 col-md-6">
                                <div class="item
                                    @if($loop->iteration == 1) first @endif
                                @if($loop->iteration == 2) second @endif
                                @if($loop->iteration == 3) third @endif
                                @if($loop->iteration == 4) last @endif
                                    wow flipInY" data-wow-duration="2s">
                                    <div class="image-content">
                                        <img src="{{asset($workWay->image)}}" class="main-img">
                                        <span class="number">{{$loop->iteration}}</span>
                                    </div>
                                    <div class="text text-center">
                                        <h5>{{$workWay->title}}</h5>
                                        <p>{!! $workWay->description !!}</p>
                                    </div>
                                    <img src="{{asset('assets/web/images/methodology-arrow.png')}}" class="arrow wow clipping" data-wow-duration=".5s" data-wow-delay=".5s">
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!--Start blog-sec-->
    <section class="blog-sec">
        <div class="container">
            <div class="heading-sec wow zoomIn" data-wow-duration="2s">
                <h4>{{__('articles.shar_blog')}}</h4>
            </div>
            <div class="blog-carousel owl-carousel owl-theme wow fadeIn" data-wow-duration="2s">
                @if(count($articles))
                    @foreach($articles as $article)
                        <div class="item">
                            <a href="{{route('blog.show', $article->id)}}">
                                <div class="card">
                                    <div class="image-content">
                                        <img src="{{$article->image}}" class="main-blog">
                                        <sapn class="date">{{date('d M', strtotime($article->created_at))}}</sapn>
                                    </div>
                                    <div class="card-body">
                                        <span class="date">{{date('d M, Y', strtotime($article->created_at))}}</span>
                                        <h5>{{$article->title}}</h5>
                                        <p>{{stripText($article->description, 100)}}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <!--Start partners-sec-->
    <section class="partners-sec">
        <div class="container">
            <div class="heading-sec wow zoomIn" data-wow-duration="2s">
                <h4>{{__('partners.head')}}</h4>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @if(count($partners))
                        @foreach($partners as $partner)
                            <div class="swiper-slide">
                                <img src="{{asset($partner->image)}}">
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>

        $('.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
