@extends('layouts.site_layout')

@section('title')
{{$settings['site_name']}}
@endsection

@section('style')

@endsection

@section('content')
       <div class="container">
            <div class="row  site-header justify-content-center align-items-center">
                <div class="col-md  p-4">
                        <h1 class="bold">
                            {{$settings['site_title_'.app()->getLocale()]}}

                        </h1>
                        <br>
                        <p class="font14 color-gray" >{!! $settings['site_desc_'.app()->getLocale()] !!}
                        </p>

                        <div class="row ">
                            <a href="{{ $settings['ios_link'] }}" class="m-2 "><img class="link-img " style="max-width: 180px;" src="{{URL::to('site/icons/apple.png')}}" alt=""></a>
                            <a href="{{ $settings['android_link'] }}" class="m-2"><img class="link-img" style="max-width: 180px;" src="{{URL::to('site/icons/google.png')}}" alt=""></a>
                        </div>
                </div>
                <div class="col-md b-header  p-5 text-center">
                    <img src="{{URL::to('assets/uploads/settings/site_header_image.png')}}" style="max-width: 330px;" alt="">
                    <!--<img src="{{asset('site/imgs/bg/header-phone.png')}}" style="max-width: 330px;" alt="">-->
                </div>
            </div>
        </div>

        <div class="p-3  w-100" style="background: #fff;">
            <div class="container w-md-85 m-auto">
                <div class="row justify-content-center text-center">
                   @foreach($sponsers as $sponser)
                    <div class="col-sm-5 col-md m-1 p-2 wow animate__animated animate__backInDown" data-wow-delay=".{{$sponser->id}}s">
{{--                        <img class="w-100 hover-scale" src="{{URL::to('assets/uploads/sponsers'.$sponser->image)}}" alt="">--}}
                       <a href=""><img class="hover-scale" width="100px" height="100px" src="{{$sponser->ImagePath}}" alt=""></a> 
                        {{-- <img class="w-100 hover-scale" src="{{$sponser->image  }}" alt=""> --}}
                    </div>
                   @endforeach
                </div>
            </div>
        </div>

        <div id="aboutUs" class="text-center mt-3 mb-3 p-3  pt-5">
            <div class="about-us">
                <div class="title-cont">
                    <h3 class=" color-gray" >
                    {{trans('site.who_are_we')}}
                    </h3>
                </div>
            </div>
            <div class="text-center pt-3 pb-3">
                <p class="mb-0">
                   {!! $settings['site_about_'.app()->getLocale()]!!}
                </p>
           </div>
        </div>

        <div id="advantage" class=" text-center p-3  pt-5" style="background: #FBFBFB;">

            <div class="title-cont">
                <h3 >{{trans('site.marsol_advantages')}}</h3>
                <p class=" color-gray" >
                {{trans('site.marsol_advantages_desc')}}
                </p>
            </div>

            <div class="container w-md-85 m-auto m-auto ">
                <div class="row ">
                                        @foreach($advantages as $advantage)
                    <div class="col-sm-6 advantages-card col-md  p-2 wow animate__animated animate__backInUp" >
                        <div class="text-align  p-3 round5 shadow1" style="background: #fff;">
                            <div class=" ad-head pt-2 pb-2">
                                <span>{{$index}}</span>
                                {{-- <img class="mb-2" src="{{$advantage->IconPath}}" alt=""> --}}
                            </div>
                            
                            <div>
                                {{--                                <h6> {{$advantage['title_'.app()->getLocale()]}}</h6>--}}
                                <h6> {{$advantage->title}}</h6>
                                <img class="mb-2" style="width: 40px;" src="{{$advantage->iconPath}}" alt="">
                                <p class="font12 color-gray">{{ $advantage->desc }}</p>
                            </div>
                        </div>
                    </div>
                                        @endforeach

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

        <div id="steps" style="background: #fff;">

                       @foreach($steps as $step)
              @if($count % 2 != 0)

                @if ($loop->last)
                    <!-- odd -->
                      <div class=" pl-4 pr-4 pb-0 pt-0" >
                            <div class="row">
                                <div class="col-md order-2 order-md-1 img-parent ">
                                    <img src="{{URL::to('site/imgs/bg/rectTranspatent.png')}}" class="bg-img w-100" alt="">
{{--                                    <img src="{{URL::to('assets/uploads/orderSteps/'.$step->image)}}" class="w-100 bg-img2" alt="">--}}
                                    <img src="{{$step->image_path}}" class="w-50 bg-img2"  alt="" >
                                </div>
                                <div class="col-md d-flex order-1 order-md-2  align-items-center p-3 p-md-5 ">
                                    <div>
                                       <p class="p2">{{trans("site.order_steps")}}</p>
                                        <h2>{{$step['title_'.app()->getLocale()]}}</h2>
                                        <p class="mt-3">{{$step['desc_'.app()->getLocale()]}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                @else
                    <!-- odd -->
                    <div class=" pl-4 pr-4 pb-0 pt-0" >
                                <div class="row">
                                    <div class="col-md order-2 order-md-1 img-parent ">
                                        <img src="{{URL::to('site/imgs/bg/rectTranspatent.png')}}" class="bg-img w-100" alt="">
{{--                                        <img src="{{URL::to('assets/uploads/orderSteps/'.$step->image)}}" class="w-100 bg-img2" alt="">--}}
                                        <img src="{{$step->image_path}}" class="w-50 bg-img2" alt="">
                                    </div>
                                    <div class="col-md d-flex order-1 order-md-2  align-items-center p-3 p-md-5 ">
                                        <div>
                                        <p class="p2">{{trans("site.order_steps")}}</p>
                                            <h2>{{$step['title_'.app()->getLocale()]}}</h2>
                                            <p class="mt-3">{{$step['desc_'.app()->getLocale()]}}</p>
                                        </div>
                                    </div>
                                </div>
                    </div>
                        <div class="line-home d-none d-md-flex w-100">
                            <img src="{{URL::to('site/imgs/icons/line1.png')}}" alt="">
                        </div>
                @endif
                @else
                @if ($loop->last)
                    <!-- even -->
                    <div class=" pl-4 pr-4 pb-0 pt-0" >
                                <div class="row">
                                    <div class="col-md d-flex order-1 order-md-1 align-items-center p-3 p-md-5 ">
                                        <div>
                                            <p class="p2">{{trans("site.order_steps")}}</p>
                                            <h2>{{$step['title_'.app()->getLocale()]}}</h2>
                                            <p class="mt-3">{{$step['desc_'.app()->getLocale()]}}</p>
                                       </div>
                                    </div>
                                    <div class="col-md img-parent  order-2 order-md-1">
                                        <img src="{{URL::to('site/imgs/bg/rectTranspatent.png')}}" class="bg-img w-100" alt="">
{{--                                        <img src="{{URL::to('assets/uploads/orderSteps/'.$step->image)}}" class="w-100 bg-img2" alt="">--}}
                                        <img src="{{$step->image_path}}" class="w-50 bg-img2" alt="">
                                    </div>
                                </div>
                        </div>
                @else
                   <!-- even -->
                        <div class=" pl-4 pr-4 pb-0 pt-0" >
                                <div class="row">
                                    <div class="col-md d-flex order-1 order-md-1 align-items-center p-3 p-md-5 ">
                                        <div>
                                            <p class="p2">{{trans("site.order_steps")}}</p>
                                            <h2>{{$step['title_'.app()->getLocale()]}}</h2>
                                            <p class="mt-3">{{$step['desc_'.app()->getLocale()]}}</p>
                                       </div>
                                    </div>
                                    <div class="col-md img-parent  order-2 order-md-1">
                                        <img src="{{URL::to('site/imgs/bg/rectTranspatent.png')}}" class="bg-img w-100" alt="">
{{--                                        <img src="{{URL::to('assets/uploads/orderSteps/'.$step->image)}}" class="w-100 bg-img2" alt="">--}}
                                        <img src="{{$step->image_path}}" class="w-50 bg-img2" alt="">
                                    </div>
                                </div>
                         </div>

                        <div class="line-home d-none d-md-flex w-100">
                            <img src="{{URL::to('site/imgs/icons/line2.png')}}" alt="">
                        </div>
                @endif
              @endif
                            @endforeach
            <!-- ..... -->

{{--            <div class="p-3 mt-5">--}}
{{--                <div class="container  w-md-75 join-us-cont p-3">--}}
{{--                    <canvas  class="d-none top-corner d-md-block" id="bgCanvas"></canvas>--}}
{{--                    <div class="row align-items-end content-ma">--}}
{{--                        <div class="col-md p-3 p-md-4 getHeight ">--}}
{{--                            <h2 class="">{{trans('site.join_as_delegate')}}</h2>--}}
{{--                            <p class="mt-4 mb-4">--}}
{{--                            {{$settings['join_delegate_'.app()->getLocale()]}}--}}
{{--                            </p>--}}
{{--                            <a href="{{route('delegate_join_request.login')}}"class="button2 font12">--}}
{{--                                {{trans('site.show_more')}}--}}
{{--                                <i class="fa ml-2 mr-2 fa-arrow-left dir-icon"></i>--}}
{{--                            </a>--}}
{{--                        </div>--}}
{{--                        <div class="col-md p-2 d-flex justify-content-center ">--}}
{{--                            <img src="{{URL::to('site/imgs/icons/car-phone.png')}}" style="max-width: 350px;" alt="">--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}

            <!-- صفحات التطبيق -->
                <div class="home-phone-slider text-center pt-5" style="height: 100vh">

                    <div class="title-cont">
                        <h3 >{{trans('site.app_pages')}}</h3>
                        <p class=" color-gray" >      {{$settings['app_pages_desc_'.app()->getLocale()]}} </p>
                    </div>
                    <!-- Swiper -->
                    <div class="swiper mySwiper">
                        <div class="device-cont" >
                            <img src="{{URL::to('site/imgs/icons/device.png')}}" alt="">
                        </div>
                        <div style="cursor:grab;" class="swiper-wrapper">
                            @foreach($pages as $page)
                                <div class="swiper-slide">
                                 {{-- <img src="{{URL::to('assets/uploads/sitePages/'.$page->ImagePath)}}" alt=""> --}}
                                   <img src="{{$page->ImagePath}}" alt="">
                                </div>
                            @endforeach

                        </div>

                    </div>
                </div >


            <div id="statistics" class="p-3  pt-5 statistics">
                <div class="title-cont text-center">
                    <h3 ></h3>
                    <p class=" color-gray" > {{$settings['app_statistics_desc_'.app()->getLocale()]}}</p>
                </div>

                <div class="container  p-3 mb-3">
                    <div class=" row  counters-cont mb-5">
                        <div class="col-sm-5 text-center col-md m-2 p-3 ">
                            <h2 class="color1" ><span id="count1" >{{$users}}</span> <span>+</span> </h2>
                            <h5>{{trans('site.users_count')}}</h5>
                        </div>

                        <div class="col-sm-5 text-center col-md m-2 p-3 ">
                            <h2 class="color1" ><span id="count2" >{{$delegates}}</span> <span>+</span> </h2>
                            <h5>{{trans('site.delegates_count')}}</h5>
                        </div>

                        <div class="col-sm-5 text-center col-md m-2 p-3 ">
                            <h2 class="color1" ><span id="count3" >{{$stores}}</span> <span>+</span> </h2>
                            <h5>{{trans('site.stores_count')}}</h5>
                        </div>

                        <div class="col-sm-5 text-center col-md m-2 p-3 ">
                            <h2 class="color1" ><span id="count4" >{{$settings['downloads']}}</span> <span>+</span> </h2>
                            <h5>{{trans('site.downloads_count')}}</h5>
                        </div>
                    </div>
                </div>
            </div>


            </div>
            <div class="endfooter">
           <div class="container ">
               <div class="row align-items-center">
                   <div class="col-8 d-none d-md-block ">
                       <div class="row">
                           <div class="col-2 text-center">
                               <a href="{{route('site.index')}}"><img src="{{URL::to('assets/uploads/settings/'.$settings['logo'])}}" style="width: 36px;" alt=""></a>
                           </div>
                           <div class="col  d-inline-flex align-items-center justify-content-center">
                               <div class="">
                                   <a class="nav-button" href="{{route('site.index')}}">{{trans('site.Home')}}</a>
                                   <a onclick="scrollFunction4()"  class="nav-button" href="#">{{trans('site.who_are_we')}}</a>
                                   <a onclick="scrollFunction1()" class="nav-button" href="#">{{trans('site.advantages')}}</a>
                                   <a onclick="scrollFunction2()" class="nav-button" href="#">{{trans('site.order_steps')}}</a>
                                   <a onclick="scrollFunction3()" class="nav-button" href="#"> {{trans('site.contact_us')}}</a>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="col text-center">
                       @foreach($socials as $social)
                           {{--                            <a href="{{$social->link}}" class="footer-link"><img src="{{URL::to('assets/uploads/socials'.$social->image)}}" alt=""></a>--}}
                           <a href="{{$social->link}}" class="footer-link"><img src="{{$social->image_path}}" alt=""></a>
                       @endforeach
                   </div>
               </div>
           </div>
       </div>
@endsection
@section('scripts')

    <script>
       function scrollFunction1() {
        let e = document.getElementById("advantage");
        e.scrollIntoView({
          block: 'center',
          behavior: 'smooth',
          inline: 'start'
        });
      }

      function scrollFunction2() {
        let e = document.getElementById("steps");
        e.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
          inline: 'start'
        });
      }

      function scrollFunction3() {
        let e = document.getElementById("statistics");
        e.scrollIntoView({
          block: 'center',
          behavior: 'smooth',
          inline: 'start'
        });
      }
      function scrollFunction4() {
        let e = document.getElementById("aboutUs");
        e.scrollIntoView({
          block: 'center',
          behavior: 'smooth',
          inline: 'start'
        });
      }
    </script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 5,
            spaceBetween: 30,
            loop : true,
            centeredSlides : true,
            autoplay: {
                delay: 2000,
            },
            breakpoints: {
                300: {
                    slidesPerView: 1,
                    spaceBetween: 20
                },
                810: {
                    slidesPerView: 4,
                    spaceBetween: 20
                },
                1200: {
                    slidesPerView: 5,
                    spaceBetween: 30
                }
            },

        });
    </script>

    <script>
        new WOW().init();



        class BackgroundElement{
            constructor(ctx ){
                this.x = Math.floor(Math.random() * (canvas.width - 51)) + 1;
                this.y = Math.floor(Math.random() * (canvas.height - 51)) + 1;
                this.ctx = ctx;
                this.xAdder = .7 * adderSign[Math.floor((Math.random() + .5) * 1)];
                this.yAdder = .7 * adderSign[Math.floor((Math.random() + .5) * 1)];
            }

            draw(){

                this.ctx.beginPath();
                this.ctx.fillStyle = "#ffffff11";
                this.ctx.arc(this.x ,this.y ,80 ,0 ,Math.PI * 2);
                this.ctx.fill();
                this.ctx.closePath();
                this.ctx.beginPath();
                this.ctx.fillStyle = '#FFB72B';
                this.ctx.arc(canvas.width - 25 , 0 ,50 ,0 ,Math.PI * 2);
                this.ctx.fill();
                this.ctx.closePath();
            }

            update(){
                if(this.x < -50 || this.x > canvas.width + 50){
                    this.xAdder *= -1;
                }

                if(this.y < -50 || this.y > canvas.height + 50){
                    this.yAdder *= -1;
                }

                this.x += this.xAdder;
                this.y += this.yAdder;
                this.draw();
            }
        }

        const adderSign = [1 ,-1];
        const canvas = document.getElementById('bgCanvas');
        let cWidth = 0 ,cHeight = 0;
        ctx = canvas.getContext('2d');

        function setOffsets(){
            cWidth = $('.join-us-cont').width() + 30;
            cHeight = $('.getHeight').height() + 50;
            canvas.width = cWidth ;
            canvas.height = cHeight;
        }

        setOffsets();

        window.onresize = setOffsets;

        let bgImgs = [];

        for(let i = 0 ;i < 8 ; i++){
            bgImgs.push( new BackgroundElement(ctx) );
        }

        //// loop on the images and run the update function
        function bgAnimate(){
            requestAnimationFrame(bgAnimate);
            ctx.clearRect(0 ,0 ,window.innerWidth ,window.innerHeight);
            if(bgImgs.length > 0){
                for(let i = 0 ;i < bgImgs.length ;i++){
                    bgImgs[i].update();
                }
            }
        }
        bgAnimate();

    </script>
@endsection