@extends('web.layouts.container')
    @section('breadcrumb')
        <nav class="nav-breadcrumb" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{__('abouts.inner_page')}}</li>
            </ol>
        </nav>
    @endsection

    @section('content')
        <main>
            <!--start about wrapper-->
            <section class="about-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                            <div class="text-content wow fadeInUp" data-wow-duration="3s">
                                <span>{{__('abouts.brief_about_us')}}</span>
                                <h4><i class="fas fa-play"></i>{{__('abouts.mkn_education_platform')}}</h4>
                                <p>{!! $about ?? null ? $about->description['description_'.getCurrentLocale()] : '' !!}</p>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                            <div class="image-content">
                                <img src="{{$about && count($about->photos) > 2 ? asset($about->photos[1]) : asset('assets/web/images/about-img-1.jpg')}}" class="about-img wow fadeInLeft" data-wow-duration="2s" alt="about first image">
                                <img src="{{$about && count($about->photos) > 2 ? asset($about->photos[2]) : asset('assets/web/images/about-img-2.jpg')}}" class="small-img wow fadeInLeft" data-wow-duration="2s" data-wow-delay=".5s" alt="about second image">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--start services-wrapper-->
            <section class="services-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                            <div class="card text-center wow fadeInLeft" data-wow-duration="2s">
                                <div class="icon">
                                    <img src="{{asset('assets/web/images/about-icon-1.svg')}}" alt="{{__('abouts.online_courses')}}">
                                </div>
                                <h6>{{__('abouts.online_courses')}}</h6>
                                <p>{{count($details) > 2 ? $details[2] : 0}}</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                            <div class="card text-center wow fadeInUp" data-wow-duration="2s" data-wow-delay="1s">
                                <div class="icon">
                                    <img src="{{asset('assets/web/images/about-icon-2.svg')}}" alt="{{__('abouts.guaranteed_success')}}">
                                </div>
                                <h6>{{__('abouts.guaranteed_success')}}</h6>
                                <p>{{count($details) > 2 ? $details[1] : 0}}</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                            <div class="card text-center wow fadeInRight" data-wow-duration="2s">
                                <div class="icon">
                                    <img src="{{asset('assets/web/images/about-icon-3.svg')}}" alt="{{__('abouts.best_teachers_about')}}">
                                </div>
                                <h6>{!! __('abouts.best_teachers_about') !!}</h6>
                                <p>{{count($details) > 2 ? $details[0] : 0}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--start statics-->
            <section class="statics">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <div class="card wow zoomIn" data-wow-duration="2s">
                                <div class="text">
                                    <span class="counter">{{count($statistics) > 3 ? $statistics[3] : 0}}</span>
                                    <h5>{!! __('abouts.best_teachers') !!}</h5>
                                </div>
                                <img src="{{asset('assets/web/images/icons/statics-1.png')}}" class="statics-img" alt="{{__('abouts.best_teachers')}}">

                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <div class="card wow zoomIn" data-wow-duration="2s" data-wow-delay=".5s">
                                <div class="text">
                                    <span class="counter">{{count($statistics) > 3 ? $statistics[2] : 0}}</span>
                                    <h5>{!! __('abouts.special_courses') !!}</h5>
                                </div>
                                <img src="{{asset('assets/web/images/icons/services-1.png')}}" class="statics-img" alt="__('abouts.special_courses')">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <div class="card  wow zoomIn" data-wow-duration="2s" data-wow-delay="1s">
                                <div class="text">
                                    <span class="counter">{{count($statistics) > 3 ? $statistics[1] : 0}}</span>
                                    <h5>{!! __('abouts.special_students') !!}</h5>
                                </div>
                                <img src="{{asset('assets/web/images/icons/student.svg')}}" class="statics-img" alt="{{__('abouts.special_students')}}">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <div class="card  wow zoomIn" data-wow-duration="2s" data-wow-delay="1.5s">
                                <div class="text">
                                    <span class="counter">{{count($statistics) > 3 ? $statistics[0] : 0}}</span>
                                    <h5>{!! __('abouts.years_of_experience') !!}</h5>
                                </div>
                                <img src="{{asset('assets/web/images/icons/experience.png')}}" class="statics-img" alt="{{__('abouts.years_of_experience'}}">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--start team-->
            <section class="team">
                <div class="container">
                    <div class="text text-center">
                        <h4 class="wow fadeInUp" data-wow-duration="2s">{{__('abouts.our_special_team')}}</h4>
                        <p class="wow fadeInDown" data-wow-duration="2s">{{__('abouts.meat_best_teachers')}}</p>
                    </div>
                    <div class="team-carousel owl-carousel owl-theme pt-4">
                        @if(count($teams) > 3)
                            @foreach($teams as $team)
                                <div class="item">
                                    <div class="card">
                                        <div class="image-content">
                                            <img src="{{asset($team['image']) ?? asset('assets/web/images/team-1.jpg')}}" alt="team-1 image">
                                            <div class="overlay">
                                                @php
                                                    /** @var TYPE_NAME $team */
                                                    $social = explode('@@', $team['social']);
                                                @endphp
                                                <a href="{{count($social) > 3 ? $social[0] : ''}}">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                                <a href="{{count($social) > 3 ? $social[1] : ''}}">
                                                    <i class="far fa-envelope"></i>
                                                </a>
                                                <a href="{{count($social) > 3 ? $social[2] : ''}}">
                                                    <i class="fas fa-phone"></i>
                                                </a>
                                                <a href="{{count($social) > 3 ? $social[3] : ''}}">
                                                    <i class="fab fa-instagram"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5>{{$team['name']['name_'.getCurrentLocale()]}}</h5>
                                            <p>{{$team['job']['job_'.getCurrentLocale()]}}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            @else
                            <div class="item">
                                <div class="card">
                                    <div class="image-content">
                                        <img src="{{asset('assets/web/')}}/images/team-1.jpg" alt="">
                                        <div class="overlay">
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                            <a href="#">
                                                <i class="far fa-envelope"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fas fa-phone"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fab fa-instagram"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5>George Dust</h5>
                                        <p>Psychology / Professor</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="card">
                                    <div class="image-content">
                                        <img src="{{asset('assets/web/')}}/images/team-1.jpg" alt="">
                                        <div class="overlay">
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                            <a href="#">
                                                <i class="far fa-envelope"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fas fa-phone"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fab fa-instagram"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5>George Dust</h5>
                                        <p>Psychology / Professor</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="card">
                                    <div class="image-content">
                                        <img src="{{asset('assets/web/')}}/images/team-2.jpg" alt="">
                                        <div class="overlay">
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                            <a href="#">
                                                <i class="far fa-envelope"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fas fa-phone"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fab fa-instagram"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5>George Dust</h5>
                                        <p>Psychology / Professor</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="card">
                                    <div class="image-content">
                                        <img src="{{asset('assets/web/')}}/images/team-3.jpg" alt="">
                                        <div class="overlay">
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                            <a href="#">
                                                <i class="far fa-envelope"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fas fa-phone"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fab fa-instagram"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5>George Dust</h5>
                                        <p>Psychology / Professor</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="card">
                                    <div class="image-content">
                                        <img src="{{asset('assets/web/')}}/images/team-4.jpg" alt="">
                                        <div class="overlay">
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                            <a href="#">
                                                <i class="far fa-envelope"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fas fa-phone"></i>
                                            </a>
                                            <a href="#">
                                                <i class="fab fa-instagram"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5>George Dust</h5>
                                        <p>Psychology / Professor</p>
                                    </div>
                                </div>
                            </div>

                        @endif
                    </div>
                </div>
            </section>
        </main>
    @endsection


    @section('inner_js')
        <script>
            $(document).ready(function () {
                $('.navs-container').addClass('page-heading')
            })
        </script>
    @endsection