@extends('web.layouts.container')

@section('header')
    <header>
        <div class="swiper-head">
            <div class="swiper-wrapper">
                @if($sliders->count())
                    @foreach($sliders as $slide)
                        <div class="swiper-slide">
                            <div class="head-content has-overlay wow fadeIn valign" style=" background-image: url({{asset($slide->image)}}); ">
                                <div class=" container-fluid w-100">
                                    <div class="row ">
                                        <div class="col-lg-7">
                                            <div class="info ">
                                                <div class="content ">
                                                    <h5 class="mb-4">{{$slide->title}}</h5>
                                                    <p>{{$slide->description}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="swiper-slide">
                        <div class="head-content has-overlay wow fadeIn v-bottom" style=" background-image: url({{asset('assets/web/images/slider.png')}}); ">
                            <div class=" container-fluid w-100">
                                <div class="row ">
                                    <div class="col-lg-7 ">
                                        <div class="info ">
                                            <div class="content ">
                                                <h5 class="mb-4"> تنظيم الأفراح وإستشارات المطاعم </h5>
                                                <p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="head-content has-overlay wow fadeIn v-bottom" style=" background-image: url({{asset('assets/web/images/slider.png')}}); ">
                            <div class=" container-fluid w-100">
                                <div class="row ">
                                    <div class="col-lg-7 ">
                                        <div class="info ">
                                            <div class="content ">
                                                <h5 class="mb-4"> تنظيم الأفراح وإستشارات المطاعم </h5>
                                                <p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next "><span></span></div>
            <div class="swiper-button-prev "><span></span></div>
        </div>
    </header>
@endsection

@section('content')
    <!-- -------------- message ----------------- -->
    <section class="message section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="info wow zoomIn slow">
                        <h4>{{__('main.ceo_message')}} </h4>
                        <p class="text">
{{--                            {!! $ceo_message ? \Illuminate\Support\Str::limit($ceo_message, 300) : '' !!}--}}
                            {!! $ceo_message ? $ceo_message : '' !!}
                        </p>
                        <p><a class="text-uppercase text-primary" href="{{route('ceoMessage')}}"><h6>{{__('main.read_more')}}</h6></a></p>
                        <span class="icon">
                                <i class="fas fa-quote-left"></i>
                            </span>
                        <div class="message-owner">
                            <h6>{{__('main.ceo_name')}}</h6>
                            <small>{{__('main.ceo_job')}}</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="img wow">
                        <img src="{{asset('assets/web/images/logo-light.svg')}}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/trans-logo.svg')}}" alt="" class="trans-logo">
        <!-- <div class="l-shap"></div> -->
    </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">{{$vision ? strip_tags($vision) : ''}}</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">{{$our_message ? strip_tags($our_message) : ''}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- -------------- services ----------------- -->
    <section class="services section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="serv-items">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="items wow">
                                    <a href="{{count($services) > 0 ? route('ourService', $services[0]['service_id']) : '#'}}">
                                        <div class="content">
                                            <div class="icons">
                                                <img src="{{asset('assets/web/')}}/images/serv/1.svg" alt="">
                                            </div>
                                            <p>{{count($services) > 0 ? $services[0]['title'] : __('main.restaurants')}}</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="items wow">
                                    <a href="{{count($services) > 1 ? route('ourService', $services[1]['service_id']) : '#'}}">
                                        <div class="content">
                                            <div class="icons">
                                                <img src="{{asset('assets/web/')}}/images/serv/3.svg" alt="">
                                            </div>
                                            <p>{{count($services) > 1 ? $services[1]['title'] : __('main.restaurant_consulting')}}</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="items wow">
                                    <a href="{{count($services) > 2 ? route('ourService', $services[2]['service_id']) : '#'}}">
                                        <div class="content">
                                            <div class="icons">
                                                <img src="{{asset('assets/web/')}}/images/serv/2.svg" alt="">
                                            </div>
                                            <p>{{count($services) > 2 ? $services[2]['title'] : __('main.organizing_weddings_parties')}}</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="info wow fadeInUp">
                        <div class="side-head">
                            <p>{{__('main.services')}}</p>
                        </div>

                        <h3></h3>
                        <p class="text mt-4 mb-5">{!! $servicePage ? $servicePage : '' !!} </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

{{--    <!-- -------------- gallery -------------- -->--}}
{{--    <div class="ser-gallery section-padding mt-0">--}}
{{--        <div class="container">--}}
{{--            <div class="side-head mb-5">--}}
{{--                <p>{{__('photoGalleries.head')}}</p>--}}
{{--                <h4>{{__('main.last_project_pic')}}</h4>--}}
{{--            </div>--}}

{{--            <div class="row no-gutters">--}}
{{--                <div class="col-lg-6">--}}
{{--                    <div class="img large wow fadeInUp slow">--}}
{{--                        <img src="{{count($photoGallery) > 0 ? asset($photoGallery[0]['image']) : asset('assets/web/images/about.jpg')}}" alt="">--}}
{{--                        <a class="icon" data-fancybox="gallery" href="{{count($photoGallery) > 0 ? asset($photoGallery[0]['image']) : asset('assets/web/images/about.jpg')}}">--}}
{{--                            <img src="{{asset('assets/web/')}}/images/focus.svg" alt="">--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="col-lg-6">--}}
{{--                    <div class="row no-gutters">--}}
{{--                        <div class="col-lg-6">--}}
{{--                            <div class="img small wow fadeInUp slow">--}}
{{--                                <img src="{{count($photoGallery) > 1 ? asset($photoGallery[1]['image']) : asset('assets/web/images/contact.jpg')}}" alt="">--}}
{{--                                <a class="icon" data-fancybox="gallery" href="{{count($photoGallery) > 1 ? asset($photoGallery[1]['image']) : asset('assets/web/images/contact.jpg')}}">--}}
{{--                                    <img src="{{asset('assets/web/')}}/images/focus.svg" alt="">--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-lg-6">--}}
{{--                            <div class="img small wow fadeInUp slow">--}}
{{--                                <img src="{{count($photoGallery) > 2 ? asset($photoGallery[2]['image']) : asset('assets/web/images/ab1.jpg')}}" alt="">--}}
{{--                                <a class="icon" data-fancybox="gallery" href="{{count($photoGallery) > 2 ? asset($photoGallery[2]['image']) : asset('assets/web/images/ab1.jpg')}}">--}}
{{--                                    <img src="{{asset('assets/web/')}}/images/focus.svg" alt="">--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-lg-12">--}}
{{--                            <div class="img small wow fadeInUp slow">--}}
{{--                                <img src="{{count($photoGallery) > 3 ? asset($photoGallery[3]['image']) : asset('assets/web/images/ab2.jpg')}}" alt="">--}}
{{--                                <a class="icon" data-fancybox="gallery" href="{{count($photoGallery) > 3 ? asset($photoGallery[3]['image']) : asset('assets/web/images/ab2.jpg')}}">--}}
{{--                                    <img src="{{asset('assets/web/')}}/images/focus.svg" alt="">--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="row no-gutters">--}}
{{--                <div class="col-lg-8">--}}
{{--                    <div class="row no-gutters">--}}
{{--                        <div class="col-lg-12">--}}
{{--                            <div class="img small wow fadeInUp slow">--}}
{{--                                <img src="{{count($photoGallery) > 4 ? asset($photoGallery[4]['image']) : asset('assets/web/images/ab3.jpg')}}" alt="">--}}
{{--                                <a class="icon" data-fancybox="gallery" href="{{count($photoGallery) > 4 ? asset($photoGallery[4]['image']) : asset('assets/web/images/ab3.jpg')}}">--}}
{{--                                    <img src="{{asset('assets/web/')}}/images/focus.svg" alt="">--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-lg-6">--}}
{{--                            <div class="img small wow fadeInUp slow">--}}
{{--                                <img src="{{count($photoGallery) > 5 ? asset($photoGallery[5]['image']) : asset('assets/web/images/consul.png')}}" alt="">--}}
{{--                                <a class="icon" data-fancybox="gallery" href="{{count($photoGallery) > 5 ? asset($photoGallery[5]['image']) : asset('assets/web/images/consul.png')}}">--}}
{{--                                    <img src="{{asset('assets/web/')}}/images/focus.svg" alt="">--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-lg-6">--}}
{{--                            <div class="img small wow fadeInUp slow">--}}
{{--                                <img src="{{count($photoGallery) > 6 ? asset($photoGallery[6]['image']) : asset('assets/web/images/slider.png')}}" alt="">--}}
{{--                                <a class="icon" data-fancybox="gallery" href="{{count($photoGallery) > 6 ? asset($photoGallery[6]['image']) : asset('assets/web/images/slider.png')}}">--}}
{{--                                    <img src="{{asset('assets/web/')}}/images/focus.svg" alt="">--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="col-lg-4">--}}
{{--                    <div class="img large wow fadeInUp slow">--}}
{{--                        <img src="{{count($photoGallery) > 7 ? asset($photoGallery[7]['image']) : asset('assets/web/images/about.jpg')}}" alt="">--}}
{{--                        <a class="icon" data-fancybox="gallery" href="{{count($photoGallery) > 7 ? asset($photoGallery[7]['image']) : asset('assets/web/images/about.jpg')}}">--}}
{{--                            <img src="{{asset('assets/web/')}}/images/focus.svg" alt="">--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

    <!-- -------------- team ----------------- -->
    <section class="team section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="team-img">
                        <div class="items wow">
                            <div class="img">
                                <img src="{{asset('assets/web/')}}/images/team/1.png" alt="">
                            </div>
                            <div class="info text-center">
                                <h6>نايف أحمد العصيمي</h6>
                                <small>{{__('main.founder')}}</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="info wow fadeInUp">
                        <div class="side-head">
                            <p>{{__('main.team_work')}}</p>
                        </div>
                        <h3>{{__('main.know_team')}}</h3>
                        <p class="text mt-4 mb-5">{!! $teamPage ? $teamPage->description : '' !!}</p>
                        <a href="{{$teamPage ? route('pages', $teamPage->page_name) : '#'}}" class="butn color"><span> <i class="fas fa-arrow-right"></i>{{__('main.team_work')}}</span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- -------------- consul ----------------- -->
    <section class="consul section-padding">
        <div class="container">
            <div class="content valign">
                <div class="cont text-center w-100">
                    <h2>{{__('main.free_consultation')}}</h2>
                    <a href="{{$contactPage ? route('pages', $contactPage->page_name) : '#'}}" class="butn color mt-5"><span>{{__('main.consultation')}}</span></a>
                </div>
                <img src="{{asset('assets/web/')}}/images/consul.png" alt="" class="back1">
                <img src="{{asset('assets/web/')}}/images/consul.png" alt="" class="back2">
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.counter').countUp({
            delay: 50,
            time: 15000
        });
    </script>
@endsection