@extends('web.layouts.container')

@section('header')
    <div class="inner-header text-center" style="background-image: url({{$image ? asset($image) : asset('assets/web/images/about.jpg')}});">
        <h4><span>{{$title ?? __('abouts.inner_page')}}</span></h4>
    </div>
@endsection

@section('content')
    <!-- -------------- about ----------------- -->
    <section class="about section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="img">
                        @if($abouts && $abouts->photos)
                            @foreach($abouts->photos as $photo)
                                <img src="{{asset($photo)}}">
                            @endforeach
                            @else
                            <img src="{{asset('assets/web/')}}/images/ab1.jpg" >
                            <img src="{{asset('assets/web/')}}/images/ab3.jpg"  class="abs-img">
                        @endif


                        <div class="exp text-center">
                            <h6>{{__('abouts.experience')}}</h6>
                            <h3> {{$abouts && $abouts->experience_year ? $abouts->experience_year . ' ' . __('abouts.years') : ''}}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="info">
                        <div class="side-head">
                            <p>{{__('abouts.head')}}</p>
                            <h4>{{__('abouts.some_info')}} </h4>
                        </div>
                        <p class="text mb-3">{!! $abouts && $abouts->description ? $abouts->description['description_'.getCurrentLocale()] : ''  !!}</p>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/')}}/images/an-logo.svg" alt="" class="about-shap">
    </section>
    <!-- -------------- vision ----------------- -->
    <section class="vision section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="items text-center wow fadeInUp">
                        <div class="icons">
                            <img src="{{asset('assets/web/')}}/images/eye-care.svg" alt="">
                        </div>
                        <h3>{{__('abouts.vision')}}</h3>
                        <p class="text mt-4">{{$abouts && $abouts->vision ? strip_tags($abouts->vision['vision_'.getCurrentLocale()]) : ''}}</p>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="items text-center wow fadeInUp" data-wow-delay="0.3s">
                        <div class="icons">
                            <img src="{{asset('assets/web/')}}/images/chat.svg" alt="">
                        </div>
                        <h3>{{__('abouts.our_message')}}</h3>
                        <p class="text mt-4">{{$abouts && $abouts->our_message ? strip_tags($abouts->our_message['our_message_'.getCurrentLocale()]) : ''}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about section-padding">
        <div class="container">
            <div class="img-info">
                <div class="items text-center">
                    <div class="icons">
                        <img src="{{asset('assets/web/')}}/images/cons.svg" alt="">
                    </div>
                    <h2><span class="counter">{{count($statistics) > 0 ? $statistics[0] : 0}}</span>+</h2>
                    <small>{{__('abouts.catering_consulting')}}</small>
                </div>
                <div class="items text-center">
                    <div class="icons">
                        <img src="{{asset('assets/web/')}}/images/conf.svg" alt="">
                    </div>
                    <h2><span class="counter">{{count($statistics) > 1 ? $statistics[1] : 0}}</span>+</h2>
                    <small>{{__('abouts.wedding_and_party_processing')}}</small>
                </div>
                <div class="items text-center">
                    <div class="icons">
                        <img src="{{asset('assets/web/')}}/images/dish.svg" alt="">
                    </div>
                    <h2><span class="counter">{{count($statistics) > 2 ? $statistics[2] : 0}}</span>+</h2>
                    <small>{{__('abouts.restaurants')}}</small>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>

        $(document).ready(function () {
            $('.about .img img:last-of-type').addClass('abs-img');
            $('.counter').countUp({
                delay: 50,
                time: 15000
            });
        });


    </script>
@endsection