@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'}};
        }

        html{
            scroll-behavior: smooth;
        }
    </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>{{$slider->title}}</b></h1>
                                                <p class="det">{!! stripText(html_entity_decode($slider->description)) !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="contact-data">
                @if($settings['site_email'] ?? null)
                    <a href="mailto::{{$settings['site_email']}}" class="link">{{$settings['site_email']}}</a>
                @endif
                @if($settings['site_phone'] ?? null)
                    <a href="tel::{{$settings['site_phone']}}" class="link">{{$settings['site_phone']}}</a>
                @endif
            </div>

        </div>
    </header>
    <!--Start clients-sec -->
    <section class="clients section">
        <div class="container">
            <div class="sec-heading text-center mb-5">
                <h6 class="subtitle wow fadeInUp">{{__('partners.head')}}</h6>
                <h1 class="title wow fadeInDown"><b>{{__('partners.head')}}</b></h1>
            </div>
            <div class="clients_slider">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        @if(count($partners))
                            @foreach($partners as $partner)
                                <div class="swiper-slide">
                                    <a href="{{asset($partner->image)}}" data-fancybox="" class="img">
                                        <img src="{{asset($partner->image)}}" alt="">
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>
    <!--Start about-sec -->
    <section class="about-sec section bg-light" id="about-us">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="text-box">
                        <h6 class="subtitle wow fadeInUp">{{$pages[0]->page_title}}</h6>
                        <h1 class="title wow fadeInDown mb-5"><b>{{$pages[0]->title}}</b></h1>
                        <p class="det wow fadeInUp">{{$pages[0]->description}}</p>
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="about_card wow fadeInLeft">
                                    <div class="icon">
                                        <img src="{{asset($pages[1]->image)}}" alt="">
                                    </div>
                                    <h5 class="label"><b>{{$pages[1]->title}}</b></h5>
                                    <p class="p">{{$pages[1]->description}}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="about_card wow fadeInRight">
                                    <div class="icon">
                                        <img src="{{asset($pages[2]->image)}}" alt="">
                                    </div>
                                    <h5 class="label"><b>{{$pages[2]->title}}</b></h5>
                                    <p class="p">{{$pages[2]->description}} </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="img-box">
                        <div class="logo_box">
                            <img src="{{asset($pages[0]->image)}}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start services-sec -->
    <section class="services-sec section">
        <div class="container">
            <div class="sec-heading text-center mb-5 wow fadeInUp">
                <h6 class="subtitle wow fadeInUp">{{__('services.head')}}</h6>
                <h1 class="title wow fadeInDown"><b>{{__('services.services_title')}}</b></h1>
                <p class="p wow fadeInUp">{{__('services.services_title_1')}}</p>
            </div>
            <div class="row">
                @if(count($services))
                    @foreach($services as $service)
                        <div class="col-lg-6">
                            <div class="service_card wow fadeInUp">
                                <img src="{{asset($service->image)}}" alt="" class="icon"/>
                                <h5 class="title"> {{$service->title}} </h5>
                                <div class="text">{!! html_entity_decode($service->description) !!}</div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="text-center mt-5 pt-4">
                <a href="{{route('service.index')}}" class="butn borderd-drbutn m-auto"><span> <i class="fas fa-plus"></i>  {{__('main.see_more')}} </span></a>
            </div>
        </div>
        <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern wow fadeInLeft"/>
    </section>

    <section class="numbers-sec section">
        <div class="container">
            <div class="content">
                <div class="sec-heading text-center mb-5 wow fadeInUp">
                    <h6 class="subtitle">{{__('main.our_numbers')}}</h6>
                    <h1 class="title"><b>{{__('main.special_numbers')}}</b></h1>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="num_card wow fadeInUp">
                            <div class="icon">
                                <img src="{{asset($pages[4]->image)}}" alt="">
                            </div>
                            <div class="info">
                                <h2> {{$pages[4]->meta['symbol']}} <span class="counter">{{$pages[4]->description}}</span> </h2>
                                <p>{{$pages[4]->title}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="num_card wow fadeInUp" data-wow-delay="0.2s">
                            <div class="icon">
                                <img src="{{asset($pages[5]->image)}}" alt="">
                            </div>
                            <div class="info">
                                <h2> {{$pages[5]->meta['symbol']}} <span class="counter">{{$pages[5]->description}}</span> </h2>
                                <p>{{$pages[5]->title}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="num_card border-0 wow fadeInUp" data-wow-delay="0.4s">
                            <div class="icon">
                                <img src="{{asset($pages[6]->image)}}" alt="">
                            </div>
                            <div class="info">
                                <h2> {{$pages[6]->meta['symbol']}} <span class="counter">{{$pages[6]->description}}</span> </h2>
                                <p>{{$pages[6]->title}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('inner_js')
    <script>

        $('.sidebar_about_link').click(function () {
            $('.close-butn').trigger('click');
        });
        // -------- counter --------
        $('.counter').countUp({
            delay: 10,
            time: 2000
        });
    </script>
@endsection