@extends('web.layouts.container')

@section('content')
    <!--Start header -->
    @if(count($sliders))
    <header>
        <div class="swiper-container header-swiper">
            <div class="swiper-wrapper">
                @foreach($sliders as $slider)
                    <div class="swiper-slide">
                        <div class="item" style="background: url({{asset($slider->image)}});">
                            <div class="container">
                                <div class="text-box ">
                                    <h1 class="title">{{$slider->title}}</h1>
                                    @if($slider->url)
                                        <a target="_blank" href="{{$slider->url}}" class="more-butn mt-4"> <img src="{{asset('assets/web/images/icons/right-arrow-2.svg')}}" alt=""/>{{__('main.more_about_us')}}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </header>
    @endif

    <!--Start about-sec -->
    <section class="about-sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="text-box center-vr wow text-focus-in">
                        <h4 class="subtitle mb-3">{{__('pages.why_us')}}</h4>
                        <h2 class="title mb-4">{{$pages[1][0]['why_us_title']}}</h2>
                        <p class="p">{!! $pages[1][0]['why_us_description'] !!}</p>
                        <div class="d-none d-md-block">
                            <div class="our-exp mt-2">
                                <div class="item">
                                    <h2 class="counter">{{$pages[1][0]['why_us_experience_years']}}</h2>
                                    <h6 class="label">{{__('pages.experience_year')}}</h6>
                                </div>
                                <p class="exp-text">{{$pages[1][0]['why_us_experience_years_title']}}</p>
                            </div>
                            <a href="{{route('aboutUs')}}" class="more-butn mt-4"> <img src="{{asset('assets/web/images/icons/right-arrow-2.svg')}}" alt=""/>{{__('main.more_about_us')}}</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="img-box">
                        <img src="{{asset($pages[1][0]['why_us_image'])}}" alt="" class="wow fadeInUp"  />
                    </div>
                    <div class="d-block d-md-none d-lg-none">
                        <div class="text-box mt-5">
                            <div class="our-exp mt-2">
                                <div class="item">
                                    <h2 class="counter">{{$pages[1][0]['why_us_experience_years']}}</h2>
                                    <h6 class="label">{{__('pages.experience_year')}}</h6>
                                </div>
                                <p class="exp-text">{{$pages[1][0]['why_us_experience_years_title']}}</p>
                            </div>
                            <a href="{{route('aboutUs')}}" class="more-butn mt-4"> <img src="{{asset('assets/web/images/icons/right-arrow-2.svg')}}" alt=""/>{{__('main.more_about_us')}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start about-cards -->
    <section class="about-cards about-cards-indx">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="about_card wow fadeInUp"  >
                        <div class="icon"><img src="{{asset($pages[5][0]['vision_icon'] ?? 'assets/web/images/icons/about-1.svg')}}" alt=""/></div>
                        <div class="card-body">
                            <h5 class="title">{{$pages[5][0]['vision_title']}}</h5>
                            <p class="p">{!! wordLimit(html_entity_decode($pages[5][0]['vision_description']), 40) !!}</p>
                            <a href="{{route('aboutUs').'#vision_message_values'}}" class="link-btn mt-4"><img src="{{asset('assets/web/images/icons/right-arrow-2.svg')}}" alt=""/>{{__('main.more_about_us')}}</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="about_card wow fadeInUp"  >
                        <div class="icon"><img src="{{$pages[5][0]['message_icon'] ?? asset('assets/web//images/icons/about-2.svg')}}" alt=""/></div>
                        <div class="card-body">
                            <h5 class="title">{{$pages[5][0]['message_title']}}</h5>
                            <p class="p">{!! wordLimit(html_entity_decode($pages[5][0]['message_description']), 40) !!}</p>
                            <a href="{{route('aboutUs').'#vision_message_values'}}" class="link-btn mt-4"><img src="{{asset('assets/web/images/icons/right-arrow-2.svg')}}" alt=""/>{{__('main.more_about_us')}}</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="about_card wow fadeInUp"  >
                        <div class="icon"><img src="{{asset($pages[5][0]['values_icon'] ?? 'assets/web/images/icons/about-3.svg')}}" alt=""/></div>
                        <div class="card-body">
                            <h5 class="title">{{$pages[5][0]['values_title']}}</h5>
                            <p class="p">{!! wordLimit(html_entity_decode($pages[5][0]['values_description']), 40) !!}</p>
                            <a href="{{route('aboutUs').'#vision_message_values'}}" class="link-btn mt-4"><img src="{{asset('assets/web/images/icons/right-arrow-2.svg')}}" alt=""/>{{__('main.more_about_us')}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start products-sec -->
    <section class="products-sec">
        <div class="container">
            <div class="inner-sec">
                <div class="heading-sec mb-5 wow fadeInDown"  >
                    <h5 class="subtitle">{{__('products.our_products')}}</h5>
                    <h2 class="title">{{__('products.special_products')}}</h2>
                </div>
                <div class="row pt-5">
                    @if(count($homeProducts))
                        @foreach($homeProducts as $homeProduct)
                        <div class="col-md-6 col-lg-3">
                            <a href="{{route('product.show', $homeProduct->id)}}">
                                <div class="prod_card wow fadeInUp"  >
                                    <div class="img-box">
                                        <img src="{{asset($homeProduct->images[0])}}" alt=""/>
                                    </div>
                                    <div class="card-body">
                                        <h6 class="title">{{$homeProduct->name}}</h6>
                                        <p class="p">{{stripText(wordLimit($homeProduct->description, 3))}}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/logo.png')}}" alt="" class="pattern"/>
        <img src="{{asset('assets/web/images/products-bg.png')}}" alt="" class="bg"/>
    </section>
    <!--Start suppliers-sec -->
    <section class="suppliers-sec">
        <div class="container">
            <div class="heading-sec mb-5 wow fadeInDown"  >
                <h5 class="subtitle">{{__('suppliers.head')}}</h5>
                <h2 class="title">{{__('suppliers.suppliers_partners')}}</h2>
            </div>
            <div class="row">
                <div class="col-lg-3 col-7">
                    <div class="suplier_card main_card">
                        <div class="logo">
                            <img src="{{asset($settings['suppliers_thumb'] ?? 'assets/web/images/supplier-1.svg')}}" alt=""/>
                        </div>
                        <div class="card-body">
                            <h6 class="title">{{$settings["suppliers_thumb_title_$lang"] ?? __('suppliers.sabic')}}</h6>
                        </div>
                        <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern"/>
                    </div>
                </div>
                <div class="col-lg-9 col-5">
                    <div class="swiper-container suppliers-swiper pt-5 pb-5 wow fadeIn">
                        <div class="swiper-wrapper">
                            @if(count($suppliers))
                            @foreach($suppliers as $supplier)
                                <div class="swiper-slide">
                                    <div class="suplier_card">
                                        <div class="logo">
                                            <img src="{{asset($supplier->image)}}" alt=""/>
                                        </div>
                                        <div class="card-body">
                                            <h6 class="title">{{$supplier->name}}</h6>
                                        </div>
                                        <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern"/>
                                    </div>
                                </div>
                            @endforeach
                            @endif
                        </div>
                    </div>
                    <!-- Add Arrows -->
                    <!-- <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div> -->
                </div>
            </div>
        </div>
    </section>
    <!--Start testmonials-sec -->
    <section class="testmonials-sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="heading-sec center-vr wow text-focus-in">
                        <h5 class="subtitle">{{__('testimonials.title_1')}}</h5>
                        <h2 class="title">{{__('testimonials.title_2')}}</h2>
{{--                        <p class="p">--}}
{{--                            هناك حقيقة مثبتة منذ زمن طويل وهي  لصفحة ما سيلهي القارئ عن التركيز--}}
{{--                        </p>--}}
                            <!-- Arrows -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="testimonials_slider">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                @if(count($testimonials))
                                @foreach($testimonials as $testimonial)
                                <div class=swiper-slide>
                                    <div class="feedback-card">
                                        <div class="row">
                                            <div class="col-8">
                                                <p class="p">{{stripText($testimonial->comment)}}</p>
                                                <h5 class="name">{{$testimonial->name}}</h5>
                                                <span class="job-title">{{$testimonial->job_title}}</span>
                                            </div>
                                            <div class="col-4">
                                                <img src="{{asset($testimonial->image)}}" alt="" class="client-img">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start partners-sec -->
    <section class="partners-sec">
        <div class="container">
            <div class="heading-sec mb-5 wow fadeInDown"  >
                <h5 class="subtitle">{{__('banks.banks_dealing_with')}}</h5>
                <h2 class="title">{{__('banks.honored_banks')}}</h2>
            </div>
            <div class="swiper-container partners-swiper pt-3 wow fadeIn">
                <div class="swiper-wrapper">
                    @if(count($banks))
                        @foreach($banks as $bank)
                        <div class="swiper-slide">
                            @if($bank->url)
                                <a target="_blank" href="{{$bank->url}}">
                                    <img src="{{asset($bank->image)}}" alt="" class="partner-logo"/>
                                </a>
                                @else
                                <img src="{{asset($bank->image)}}" alt="" class="partner-logo"/>
                            @endif
                        </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!--Start statics-sec -->
    <section class="statics-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-3">
                    <div class="statics_card wow zoomIn"  >
                        <img src="{{asset('assets/web/images/icons/statics-1.svg')}}" alt="" class="icon mb-3"/>
                        <h1 class="counter">{{$settings['completed_projects'] ?? 0}}</h1>
                        <h6 class="label">{{__('settings.completed_projects')}}</h6>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="statics_card wow zoomIn"  >
                        <img src="{{asset('assets/web/images/icons/statics-2.svg')}}" alt="" class="icon mb-3"/>
                        <h1 class="counter">{{$settings['professional_engineers'] ?? 0}}</h1>
                        <h6 class="label">{{__('settings.professional_engineers')}}</h6>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="statics_card wow zoomIn"  >
                        <img src="{{asset('assets/web/images/icons/statics-3.svg')}}" alt="" class="icon mb-3"/>
                        <h1 class="counter">{{$settings['project_request'] ?? 0}}</h1>
                        <h6 class="label">{{__('settings.project_request')}}</h6>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="statics_card wow zoomIn"  >
                        <img src="{{asset('assets/web/images/icons/statics-4.svg')}}" alt="" class="icon mb-3"/>
                        <h1 class="counter">{{$settings['work_branches'] ?? 0}}</h1>
                        <h6 class="label">{{__('settings.work_branches')}}</h6>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start news-sec -->
    <section class="news-sec">
        <div class="container">
            <div class="heading-sec mb-5 wow fadeInDown"  >
                <h5 class="subtitle">{{__('articles.our_news')}}</h5>
                <h2 class="title">{{__('articles.latest_news')}}</h2>
            </div>
            <div class="row">
                @if(count($articles))
                    @foreach($articles as $article)
                    <div class="col-lg-4">
                        <a href="{{route('news.show', [$article->id, $article->slug_text])}}">
                            <div class="blog_card wow fadeInUp"  >
                                <div class="img-box">
                                    <img src="{{asset($article->card)}}" alt="" class="main-img">
                                    <span class="plus"></span>
                                </div>
                                <div class="card-body">
                                    <p class="categ">{{$article->rating}}</p>
                                    <h5 class="title">{{$article->title}}</h5>
                                    <p class="p">{{stripText(wordLimit($article->description, 10))}}</p>
                                    <p class="crd_footer">
                                        <i class="fas fa-plus-square"></i> {{__('articles.news_date') . ' ' .  date('d/m/Y')}}
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <!--Start gallery-sec -->
    <section class="gallery-sec">
        <div class="container">
            <div class="heading-sec mb-5 wow fadeInDown"  >
                <h5 class="subtitle">{{__('photoGalleries.photo_gallery')}} </h5>
                <h2 class="title">{{__('photoGalleries.photo_inside_event')}}</h2>
            </div>
            <div class="swiper-container gallery-swiper wow fadeIn">
                <div class="swiper-wrapper">
                    @if(count($galleries))
                        @foreach($galleries as $gallery)
                            <div class="swiper-slide">
                                <a href="{{asset($gallery->image)}}" class="gallery_card d-block" data-fancybox="gallery">
                                    <img src="{{asset($gallery->image)}}" alt="" class="main-img"/>
                                    <span class="plus"></span>
                                    <h6 class="title">{{$gallery->title}}</h6>
                                </a>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!--Start contact-sec -->
    <section class="contact-sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="text-wrapper">
                        <div class="inner wow text-focus-in">
                            <h3 class="title-text mb-4">{{__('main.request_your_project')}}</h3>
                            <div class="items-wrapper">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="item">
                                            <img src="{{asset('assets/web/images/icons/nav-1.svg')}}" alt="" class="icon">
                                            <div class="text-content">
                                                <p class="label">{{__('main.support_all_day_along')}}</p>
                                                <p class="data">{{$settings['technical_support_phone'] ?? null}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="item">
                                            <img src="{{asset('assets/web/images/icons/nav-2.svg')}}" alt="" class="icon">
                                            <div class="text-content">
                                                <p class="label">{{__('settings.headquarters_address')}}</p>
                                                <p class="data">{{settings('headquarters_address_'.getCurrentLocale()) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="item">
                                            <img src="{{asset('assets/web/images/icons/nav-1.svg')}}" alt="" class="icon">
                                            <div class="text-content">
                                                <p class="label">{{__('settings.work_time')}}</p>
                                                <p class="data">{{settings('work_time_'.getCurrentLocale()) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="contact-wrapper wow fadeInUp"  >
                        <div class="heading-sec">
                            <h6 class="subtitle">{{__('main.contact_us_1')}}</h6>
                            <h4 class="title mb-3">{{__('main.contact_us_all_day')}}</h4>
                        </div>
                        <p class="p">{{__('main.contact_us_hint')}}</p>
                        <div class="num-item mt-4 mb-4">
                            <span class="icon"><img src="{{asset('assets/web/images/icons/call.svg')}}" alt=""/></span>
                            <h5 class="num">{{$settings['site_phone'] ?? null}}</h5>
                        </div>
                        <div class="form-container">
                            <form method="post" action="{{route('send_contact_us')}}" class="contact_us_form">
                                <div class="form-group">
                                    <input name="name" class="form-control" placeholder="{{__('visitorMessages.name')}}"/>
                                </div>
                                <div class="form-group">
                                    <input name="email" class="form-control" placeholder="{{__('visitorMessages.email')}}"/>
                                </div>
                                <div class="form-group">
                                    <input name="phone" class="form-control" placeholder="{{__('visitorMessages.phone')}}"/>
                                </div>
                                <div class="form-group">
                                    <select name="subject" class="form-control" >
                                        <option value="">{{__('visitorMessages.subject')}}</option>
                                        <option value="sales">{{__('main.sales')}}</option>
                                        <option value="complaints_suggestions">{{__('main.complaints_suggestions')}}</option>
{{--                                        <option value="suggestions">{{__('main.suggestions')}}</option>--}}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <textarea name="message" class="form-control" rows="7" placeholder="{{__('visitorMessages.message')}}"></textarea>
                                </div>
                                <button class="submit-btn contact_us_button"><i class="fab fa-telegram-plane"></i> {{__('visitorMessages.message')}} </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/contact-1.png')}}" alt="" class="bg"/>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.counter').countUp({
            time: 1500
        });
    </script>

    <!-- Initialize testimonials_slider  -->
  <script>
    var swiper = new Swiper('.testimonials_slider .swiper-container', {
        direction: 'vertical',
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        speed: 1000,
        pagination: false,
        autoplay: {
            delay: 4000,
        },
        loop: true,
        navigation: {
        nextEl: '.testmonials-sec .swiper-button-next',
        prevEl: '.testmonials-sec .swiper-button-prev',
        },
        breakpoints: {
            0: {
                slidesPerView: 1,
            },
            480: {
                slidesPerView: 1,
            },
            787: {
                slidesPerView: 1,
            },
            991: {
                slidesPerView: 3,
            },
            1200: {
                slidesPerView: 3,
            }
        }
    });
  </script>
@endsection