@extends('web.layouts.layout')
@section('content')

    <main>

        <!-- Start Header -->
        <header class="header section" data-scroll-index="0">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="txt_box mb-5 ">
                            <h6 class="subtitle mb-3"> <i class="fa-solid fa-angles-left"></i> {{__('web.shipping_all_places')}} </h6>
                            <h1 class="title color-dark fw-bold my-4"> {!! $welcome->title !!} </h1>
                            <div class="p col-lg-11">
                                {!! $welcome->description !!}
                            </div>
                            <div class="butns d-flex align-items-center mt-4">
                                <a href="{{$settings['download_link']}}" target="_blank" class="butn primary_butn me-4"> 
                                    <span> {{__('web.download_app')}} <i class="fa-light fa-arrow-down-to-line me-0 ms-2"></i>  </span>
                                </a>
                                <a href="{{$settings['video_link']}}" target="_blank" class="vid_butn"> 
                                    <span> <i class="fa-solid fa-circle-play fs-2"></i>  {{__('web.show_video')}} </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img_box">
                            <img src="{{asset($welcome->image)}}" class="secImg" alt=""/>
                            <img src="{{asset($welcome->image_2)}}" class="imgScreen imgScreen1" alt="" />
                            <img src="{{asset($welcome->image_3)}}" class="imgScreen imgScreen2" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Start section -->
        <section class="statics_sec section" >
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="item">
                            <div class="icon_box">
                                <img src="{{url('')}}/assets/web/images/icons/statics-1.svg" class="icon" alt="" />
                            </div>
                            <div class="txt">
                                <h2 class="counter fw-bold"> +{{$settings['users']}} </h2>
                                <h6 class="label"> {{__('web.user')}} </h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="item">
                            <div class="icon_box">
                                <img src="{{url('')}}/assets/web/images/icons/statics-2.svg" class="icon" alt="" />
                            </div>
                            <div class="txt">
                                <h2 class="counter fw-bold"> +{{$settings['providers']}} </h2>
                                <h6 class="label"> {{__('web.provider')}} </h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="item">
                            <div class="icon_box">
                                <img src="{{url('')}}/assets/web/images/icons/statics-3.svg" class="icon" alt="" />
                            </div>
                            <div class="txt">
                                <h2 class="counter fw-bold"> +{{$settings['order']}} </h2>
                                <h6 class="label"> {{__('web.selling')}} </h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="item">
                            <div class="icon_box">
                                <img src="{{url('')}}/assets/web/images/icons/statics-4.svg" class="icon" alt="" />
                            </div>
                            <div class="txt">
                                <h2 class="counter fw-bold"> +{{$settings['download']}} </h2>
                                <h6 class="label"> {{__('web.download_apps')}} </h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="app_sec section">
            <div class="container-fluid px-0">
                <div class="row justify-content-end align-items-center">
                    <div class="col-lg-5">
                        <div class="txt_box">
                            <h1 class="title mb-3 fw-bold"> {!! $user->title !!}  </h1>
                            <div class="p">
                                {!! $user->description !!}
                            </div>
                            <div class="down_butns d-flex mt-5">
                                <a href="{{$settings['google_play']}}" target="_blank">
                                    <img src="{{url('')}}/assets/web/images/icons/down_play.png" class="img" alt="" />
                                </a>
                                <a href="{{$settings['apple_store']}}" target="_blank">
                                    <img src="{{url('')}}/assets/web/images/icons/down_apple.png" class="img" alt="" />
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img_box">
                            <img src="{{asset($user->image)}}" class="secImg" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="app_sec app_sec2 section">
            <div class="container-fluid px-0">
                <div class="row justify-content-start align-items-center">
                    <div class="col-lg-6">
                        <div class="img_box">
                            <img src="{{asset($provider->image)}}" class="secImg" alt="" />
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="txt_box">
                            <h1 class="title mb-4 fw-bold"> {!! $provider->title !!} </h1>
                            <div class="p">
                                {!! $provider->description !!}
                            </div>
                            <a href="{{route('web.regist.phone')}}" class="butn primary_butn mt-5"> <span> التسجيل كمزود الخدمة </span> </a>
                        </div>
                    </div>
             
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="features_sec section" data-scroll-index="1">
            <div class="container">
                <h2 class="sec_title text-center color-dark fw-bold mb-5">
                    {{__('web.important_benifits')}}  <span class="text-white">{{__('web.app')}}</span> 
                </h2>
                <div class="swiper-container features_swiper">
                    <div class="swiper-wrapper pb-5">
                        @foreach($cards as $row)
                            <div class="swiper-slide">
                                <div class="feature_card">
                                    <div class="icon_box"> <img src="{{asset($row->image)}}" class="icon" alt="" /> </div>
                                    <h5 class="title fw-bold mb-3"> {!! $row->title !!} </h5>
                                    <div class="p">
                                        {!! $row->description !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="screens_sec section" id="benifits">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="txt_box mb-5 pe-lg-5">
                            <h1 class="title mb-4 fw-bold"> {!! $app->title !!} </h1>
                            <div class="p pe-lg-5">
                                {!! $app->description !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="screens_box">
                            <div class="swiper-container screens_swiper">
                                <div class="swiper-wrapper ">
                                    @foreach($galleries as $row)
                                        <div class="swiper-slide">
                                            <div class="img_box">
                                                <img src="{{asset($row->image)}}" alt="" class="screen_img"/>
                                            </div>
                                        </div>
                                    @endforeach
            
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="downloading_sec section" id="downloading_sec" >
            <div class="container">
                <div class="inner">
                    <div class="row zi-5 justify-content-between">
                        <div class="col-lg-3">
                            <img src="{{asset($download->image)}}" class="secImg hand_img" alt="" />
                        </div>
                        <div class="col-lg-5">
                            <div class="txt_box ">
                                <h1 class="title fs-2 text-white mb-4 fw-bold"> {!! $download->title !!} </h1>
                                <div class="p text-white-50">
                                    {!! $download->description !!}
                                </div>
                                <div class="down_butns d-flex mt-5">
                                    <a href="{{$settings['google_play']}}" target="_blank">
                                        <img src="{{url('')}}/assets/web/images/icons/down_play.png" class="img" alt="" />
                                    </a>
                                    <a href="{{$settings['apple_store']}}" target="_blank">
                                        <img src="{{url('')}}/assets/web/images/icons/down_apple2.png" class="img" alt="" />
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <img src="{{asset($download->image_2)}}" class="secImg screen_img" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="feedback_sec section" id="reviews" data-scroll-index="2">
            <div class="container">
                <h1 class="fs-2 mb-5 fw-bold">  {{__('web.opinion')}}   <span class="color-primary">  {{__('web.clients')}} </span> </h1>
                <div class="swiper-container feedback_swiper pb-5">
                    <div class="swiper-wrapper">
                        @foreach($reviews as $row)
                            <div class="swiper-slide">
                                <div class="feedback_card">
                                    <img src="{{asset($row->image)}}" class="avatar" alt="" />
                                    <div class="stars">
                                        @for($i=1;$i<=$row->rate;$i++)
                                            <i class="fa-solid fa-star active"></i>
                                        @endfor
                                        @for($i=1;$i<=(5-$row->rate);$i++)
                                            <i class="fa-solid fa-star"></i>
                                        @endfor
                                    </div>
                                    <h5 class="name my-4"> {!! $row->user !!} </h5>
                                    <div class="p">
                                        {!! $row->description !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>

    </main>


@endsection
