@extends('web.layouts.container')

@section('css')
    <style>
        :root {
            --primary : {{$settings['current_first_color'] ?? $settings['default_first_color'] ?? '#2D2E35'}};
            --secondary: {{$settings['current_second_color'] ?? $settings['default_second_color'] ?? '#1e1f23'}};
        }
    </style>
@endsection

@section('content')
    <!--Start header -->
    <header class="header">
        <div class="container">
            <div class="swiper-container header-swiper">
                <div class="swiper-wrapper">
                    @if(count($sliders))
                        @foreach($sliders as $slider)
                            <div class="swiper-slide">
                                <div class="item">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="img-box">
                                                <img src="{{asset($slider->image)}}" alt="" class="sec-img"/>
                                                <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern_t"/>
                                                <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern_b"/>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="text-box center-vr">
                                                <h1 class="title text-white mb-4">
{{--                                                    <b>ديكورات  وجودة <br> فخمة</b>--}}
                                                    <b>{{$slider->title}}</b>
                                                </h1>
                                                <p class="det">{{stripText($slider->description)}}</p>
                                                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('about'), [], true)}}" class="butn white-butn mt-4"><span> <i class="fas fa-plus"></i> {{__('main.show_project')}} </span></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="contact-data">
                <a href="mailto::{{isset($settings['site_email']) ? $settings['site_email'] : 'Sketch@info.com'}}" class="link">{{isset($settings['site_email']) ? $settings['site_email'] : 'Sketch@info.com'}}</a>
                <a href="tel:{{isset($settings['site_phone']) ? $settings['site_phone'] : '(966) 589 69 85'}}" class="link">{{isset($settings['site_phone']) ? $settings['site_phone'] : '(966) 589 69 85'}}</a>
            </div>
            <div class="social-links">
                <a target="_blank" href="{{isset($settings['instagram']) ? $settings['instagram'] : '#'}}"><i class="fab fa-instagram"></i></a>
                <a target="_blank" href="{{isset($settings['twitter']) ? $settings['twitter'] : '#'}}"><i class="fab fa-twitter"></i></a>
                <a target="_blank" href="{{isset($settings['facebook']) ? $settings['facebook'] : '#'}}"><i class="fab fa-facebook-f"></i></a>
                <a target="_blank" href="mailto::{{isset($settings['site_email']) ? $settings['site_email'] : 'Sketch@info.com'}}"><i class="far fa-envelope"></i></a>
                <a target="_blank" href="https://api.whatsapp.com/send?phone={{isset($settings['whatsapp']) ? $settings['whatsapp'] : ''}}&text="><i class="fab fa-whatsapp"></i></a>

            </div>
        </div>
    </header>

    @if($about)
        <!--Start about-sec -->
        <section class="about-sec section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="text-box">
                            <h6 class="subtitle wow fadeInUp">{{__('visitorMessages.head')}}</h6>
                            <h1 class="title wow fadeInDown"><b>{{$about->title}}</b></h1>
                            <p class="det wow fadeInUp">
                                <b>{{stripText($about->description)}}</b>
                            </p>
                            <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('about'), [], true)}}" class="butn borderd-butn mt-4 wow zoomIn"><span> {{__('main.more_about_us')}} </span></a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img-box center-vr">
                            <img src="{{asset($about->image)}}" alt="" class="sec-img wow zoomIn"/>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/pattern-2.png')}}" alt="" class="bg"/>
        </section>
    @endif

    @if(count($services))
        <!--Start services-sec -->
        <section class="services-sec section">
            <div class="container">
                <div class="sec-heading text-center mb-5">
                    <h6 class="subtitle wow fadeInUp">{{__('main.our_special_services')}}</h6>
                    <h1 class="title wow fadeInDown"><b>{{__('main.special_service_hint_1')}}</b></h1>
                    <p class="p wow fadeInUp">{{__('main.special_service_hint_2')}}</p>
                </div>
                <div class="swiper-container services-swiper wow fadeInUp">
                    <div class="swiper-wrapper">
                        @foreach($services as $service)
                            <div class="swiper-slide">
                                <div class="service_card">
                                    <img src="{{asset($service->image)}}" alt="" class="icon"/>
                                    <h6 class="title mb-0">{{$service->title}}</h6>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern wow fadeInLeft"/>
        </section>
    @endif

    @if(count($projects))
        <!--Start projects-sec -->
        <section class="projects-sec section">
            <div class="container">
                <div class="sec-heading text-center mb-5">
                    <h6 class="subtitle wow fadeInUp">{{__('main.projects')}}</h6>
                    <h1 class="title wow fadeInDown"><b>{{__('main.projects_service_hint_1')}}</b></h1>
                    <p class="p wow fadeInUp">{{__('main.projects_service_hint_2')}}</p>
                </div>
                @foreach($projects as $project)
                <div class="col-md-8 {{$loop->even ? 'ms-auto' : ''}}">
                    <div class="proj_card wow fadeIn">
                        <img src="{{asset($project->images[0])}}" alt="" class="sec-img"/>
                        <div class="text-box wow fadeInDown">
                            <h5 class="title"><b>{{$project->title}}</b></h5>
                            <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('ourProjectShow', $project->id), [], true)}}" class="butn white-butn mt-4"><span> <i class="fas fa-plus"></i> {{__('main.show_project')}} </span></a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </section>
    @endif


    @if(count($articles))
        <!--Start blog-sec -->
        <section class="blog-sec section">
            <div class="container">
                <div class="sec-heading text-center mb-5">
                    <h6 class="subtitle wow fadeInUp">{{__('main.news')}}</h6>
                    <h1 class="title wow fadeInDown"><b>{{__('main.news_hint_1')}}</b></h1>
                    <p class="p wow fadeInUp">{{__('main.news_hint_2')}}</p>
                </div>
                <div class="row mb-4">
                    @foreach($articles as $article)
                        <div class="col-md-4">
                            <div class="blog_card wow fadeInUp">
                                <div class="img-box">
                                    <img src="{{asset($article->image)}}" alt="" class="sec-img"/>
                                    <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('newsShow', $article->id), [], true)}}" class="butn white-butn mt-4"><span> <i class="fas fa-plus"></i>  {{__('main.more')}} </span></a>
                                </div>
                                <div class="card-body">
                                    <h5 class="title"><b>{{stripText($article->description, 50)}}</b></h5>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('news'), [], true)}}" class="butn white-butn m-auto"><span> <i class="fas fa-plus"></i> {{__('main.all_news')}} </span></a>
            </div>
        </section>
    @endif


    @if(count($testimonials))
        <!--Start feedback-sec -->
        <section class="feedback-sec section">
            <div class="container">
                <div class="swiper-container feedback-swiper">
                    <div class="swiper-wrapper pb-5">
                        @foreach($testimonials as $testimonial)
                            <div class="swiper-slide">
                                <div class="item">
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="text-box center-vr">
                                                <div class="sec-heading mb-5">
                                                    <h6 class="subtitle wow fadeInUp">{{__('main.testimonials')}}</h6>
                                                    <h1 class="title wow fadeInDown"><b>{{__('main.testimonials_hint_1')}}</b></h1>
                                                    <p class="p wow fadeInUp">{{__('main.testimonials_hint_2')}}</p>
                                                </div>
                                                <p class="det">
                                                    <b>{{$testimonial->comment}}</b>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="img-box">
                                                <img src="{{asset($testimonial->image)}}" alt="" class="sec-img zi-5"/>
                                                <div class="content">
                                                    <h5 class="name mb-1"><b>{{$testimonial->name}}</b></h5>
                                                    <p class="job mb-0">{{$testimonial->job_title}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern wow fadeInLeft"/>
        </section>
    @endif

@endsection

@section('inner_js')

@endsection