@extends('web.layouts.container')
@section('css')
    <style>
        html{
            scroll-behavior: smooth;
        }
    </style>
@endsection
@section('content')
    <!-- Start header -->
    <header class="header">
        <div class="inner">
            <div class="container">
                <div class="header-inner text-center">
                    <h1 class="title mb-3 wow puff-in-center">{{$about->home_title_1 ?? ''}}</h1>
                    <p class="det mb-4 wow zoomIn">{{$about->home_description_1 ?? ''}}</p>
                    <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('aboutUs'), [], true)}}" class="butn borderd-butn m-auto wow fadeInUp"><span class="text"> {{__('main.more_about_us')}} </span><span class="hvr"></span></a>
                </div>
            </div>
            <img src="{{asset($about->home_image_1 ?? '')}}" alt="" class="hand-img wow fadeInLeft"/>
            <img src="{{asset('assets/web/images/icon.png')}}" alt="" class="pattern-icon"/>
        </div>


    </header>
    <!-- Start about-sec -->
    <section class="about-sec section">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <img src="{{asset($about->home_image_2 ?? '')}}" class="sec-img wow fadeIn" alt=""/>
                </div>
                <div class="col-md-7">
                    <div class="text-box center-vr wow text-focus-in">
                        <h1 class="title mb-4">
{{--                            نظام نقاط بيع وإدارة <br> متاجر سحابي--}}
                            {{$about->home_title_2 ?? ''}}
                        </h1>
                        <p class="det mb-4">{{$about->home_description_2}}</p>
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('aboutUs'), [], true)}}" class="butn borderd-blue-butn"><span class="text"> {{__('main.read_more')}} </span><span class="hvr"></span></a>

                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/icon.png')}}" alt="" class="pattern-icon wow slideInLeft"/>
    </section>
    <!-- Start services-sec -->
    <section class="services-sec section" id="service_section">
        <div class="inner">
            <div class="container">
                <div class="sec-heading text-center mb-5">
                    <h2 class="title wow puff-in-center">{{__('features.title_1')}}</h2>
                    <p class="det wow zoomIn">{{__('features.title_1')}}</p>
                </div>
                <div class="row">
                    @if(count($features))
                        @foreach($features as $feature)
                            <div class="col-md-4">
                                <div class="service_card wow fadeInUp">
                                    <div class="icon-outer mb-4">
                                        <img src="{{asset($feature->image)}}" alt="" class="icon"/>
                                    </div>
                                    <div class="content">
                                        <h5 class="title">{{$feature->title}}</h5>
                                        <p class="det mb-0">{{$feature->description}}</p>
                                    </div>
                                    <span class="hvr"></span>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!-- Start why-marketzy -->
    @if(count($photoGalleries))
    <section class="why-marketzy section">
        <div class="container">
            <div class="sec-heading text-center mb-5">
                <h2 class="title text-white wow puff-in-center">{{__('main.why_marketzy')}}</h2>
            </div>
            <div class="swiper-container features-swiper">
                <div class="swiper-wrapper pb-5">
                    @foreach($photoGalleries as $key => $photoGallery)
                        <?php
                        /** @var TYPE_NAME $photoGallery */
                        $galleryTitle = explode('@@', $photoGallery->title);
                        $galleryDescription = explode('@@', $photoGallery->description);
                        $galleryImage = explode('@@', $photoGallery->image);
                        ?>
                            <div class="swiper-slide">
                                <div class="item">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="text-box mt-5">
                                                <h3 class="title text-white mb-4">{{$galleryTitle[0]}}</h3>
                                                <p class="det">{{$galleryDescription[0]}}</p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <img src="{{asset($galleryImage[0])}}" alt="" class="sec-img"/>
                                        </div>
                                    </div>
                                    <div class="row mt-5 ">
                                        <div class="col-md-6">
                                            <img src="{{$galleryImage[1]}}" alt="" class="sec-img"/>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="text-box mt-5">
                                                <h3 class="title mb-4">{{$galleryTitle[1]}}</h3>
                                                <p class="det dark-text-50">{{$galleryDescription[1]}} </p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                    @endforeach
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    @endif
    <!-- Start feedback-sec -->
    @if(count($testimonials))
    <section class="feedback-sec section">
        <div class="container">
            <div class="sec-heading text-center mb-5">
                <h2 class="title wow puff-in-center">{{__('testimonials.customers_opinions')}}</h2>
                <p class="det wow zoomIn">{{__('testimonials.hint')}}</p>
            </div>
            <div class="row">
                <div class="col-md-5">
                    <div thumbsSlider="" class="swiper mySwiper sm-slide-swiper">
                        <div class="swiper-wrapper">
                            @foreach($testimonials as $testimonial)
                                <div class="swiper-slide">
                                    <div class="sm-item inFlex">
                                        <img src="{{asset($testimonial->image)}}" alt="" class="feedback-img"/>
                                        <div class="content">
                                            <h5 class="name mb-1">{{$testimonial->name}}</h5>
                                            <p class="job-title mb-0">{{$testimonial->description}}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="swiper mySwiper2 lg-slide-swiper">
                        <div class="swiper-wrapper">
                            @foreach($testimonials as $testimonial)
                                <div class="swiper-slide">
                                    <div class="text-box center-vr">
                                        <p class="det">{{$testimonial->comment}}</p>
                                        <span class="quote-icon tl"><i class="fas fa-quote-right"></i></span>
                                        <span class="quote-icon br"><i class="fas fa-quote-left"></i></span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    <!-- Start clients-sec -->
    @if(count($partners))
    <section class="clients-sec section">
        <div class="container">
            <div class="sec-heading text-center mb-5">
                <h2 class="title wow puff-in-center">{{__('partners.head')}}</h2>
                <p class="det wow zoomIn">{{__('partners.hint')}}</p>
            </div>
            <div class="swiper-container clients-swiper">
                <div class="swiper-wrapper">
                    @foreach($partners as $partner)
                        <div class="swiper-slide">
                            <img src="{{asset($partner->image)}}" alt="" class="clients-img"/>
                        </div>
                    @endforeach

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

@section('inner_js')


@endsection
