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

  <header>
        <img src="{{url('')}}/assets/web/images/header_back.png" alt="" class="head_back">
        <div class="container">
            <div class="swiper_head">
                <div class="swiper-wrapper">
                    @foreach($sliders as $row)
                    <div class="swiper-slide">
                        <div class="head-content">
                            <div class="row justify-content-around">
                                <div class="col-lg-6">
                                    <div class="img">
                                        <img class="main_img" src="{{asset($row->image)}}" alt="">
                                        <img src="{{url('')}}/assets/web/images/logo_shap1.svg" alt="" class="l_shape">
                                        <img src="{{url('')}}/assets/web/images/logo_shap1.svg" alt="" class="r_shape">
                                    </div>
                                </div>
                                <div class="col-lg-5 valign">
                                    <div class="info">
                                        <strong>{{__('web.project')}}</strong>
                                        <h2>{{__('web.look')}}<br> {{__('web.hajj')}}</h2>
                                        <p class="text">{{__('web.desc')}}ِ</p>
                                        <a class="butn color mt-4" href="{{url(getCurrentLocale().'/aboutus')}}"><span>{{__('web.aboutus')}}</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="swiper_pagination text-center"></div>
            </div>

        </div>
    </header>
    <!--End-Header-->

    <!--Contents-->
    <main>
        <!-- -------------- about --------------- -->
        <section class="about section_padding">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="img">
                            <img class="main_img wow fadeIn" src="{{asset($about->image)}}" alt="">
                            <img src="{{url('')}}/assets/web/images/about_shap.svg" data-wow-delay="1s" alt="" class="l_shap wow zoomIn">
                            <img src="{{url('')}}/assets/web/images/about_shap.svg" data-wow-delay="1s" alt="" class="r_shap wow zoomIn">
                        </div>
                    </div>
                    <div class="col-lg-6 valign">
                        <div class="info wow fadeInUp">
                            <h3>{{aboutname($about->id)}}</h3>
                            <p class="text">
                               {!! aboutdescription($about->id) !!}
                            </p>
                            <a class="butn sub_butn mt-4" href="{{url(getCurrentLocale().'/aboutus')}}"><span>{{__('web.more')}}</span></a>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/about_shap_l.png" alt="" class="about_shap_l wow fadeInLeft" data-wow-duration="1s">
        </section>
        <!-- -------------- vision --------------- -->
        <section class="vision section_padding bg_gray">
            <div class="container">
                <div class="content">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="items wow fadeInUp" data-wow-delay="0s">
                                <div class="icons">
                                    <img src="{{url('')}}/assets/web/images/icons/1.svg" alt="">
                                </div>
                                <h3>{{__('web.vision')}}</h3>
                                <p class="text">
                                   {{__('web.vision_desc')}}
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="items wow fadeInUp" data-wow-delay="0.2s">
                                <div class="icons">
                                    <img src="{{url('')}}/assets/web/images/icons/2.svg" alt="">
                                </div>
                                <h3>{{__('web.message')}}</h3>
                                <p class="text">
                                    {{__('web.message_desc')}}
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="items wow fadeInUp" data-wow-delay="0.4s">
                                <div class="icons">
                                    <img src="{{url('')}}/assets/web/images/icons/3.svg" alt="">
                                </div>
                                <h3>{{__('web.goals')}}</h3>
                                <p class="text">
                                   {{__('web.goals_desc')}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/vision.png" alt="" class="vision_shap wow fadeInLeft">
        </section>
        <!-- -------------- news --------------- -->
        <section class="news section_padding">
            <div class="container">
                <div class="section_head text-center mb-5 wow fadeInUp">
                    <h4>{{__('web.articles')}}</h4>
                </div>
                <div class="content">
                    <div class="swiper_news">
                        <div class="swiper-wrapper">
                           @foreach($blogs as $row)
                            <div class="swiper-slide">
                                <div class="items">
                                    <div class="img">
                                        <img src="{{asset($row->image)}}" alt="">
                                        <div class="date">
                                            {{date('Y-m-d',strtotime($row->created_at))}}
                                        </div>
                                    </div>
                                    <div class="info">
                                        <div class="time">
                                            <i class="far fa-clock"></i> <span>{{date('g:i a',strtotime($row->created_at))}}</span>
                                        </div>
                                        <h4 class="tit">
                                            {{articlename($row->id)}}
                                        </h4>
                                        <div class="by d-flex">
                                            <div class="imgg">
                                                <img src="{{asset($row->user)}}" alt="">
                                            </div>
                                            <span>
                                                {{__('web.by')}} : {{articleuser($row->id)}} 
                                            </span>
                                        </div>
                                        <div class="text">
                                         {!!  substr(strip_tags(articledescription($row->id)), 0, 300);  !!}
                                        </div>
                                        <a href="{{url(getCurrentLocale().'/article/'.$row->id)}}" class="more"> <i class="fas fa-long-arrow-alt-right"></i> {{__('web.more')}}</a>
                                    </div>
                                </div>
                            </div>
                           @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- -------------- clients --------------- -->
        <section class="clients section_padding bg_gray">
            <div class="container">
                <div class="section_head text-center mb-5 wow fadeInUp">
                    <h4> {{__('web.reviews')}} </h4>
                </div>
                <div class="content">
                    <div class="swiper_clients">
                        <div class="swiper-container gallery-thumbs">
                            <div class="swiper-wrapper">
                                 @foreach($reviews as $row)
                                <div class="swiper-slide">
                                    <div class="text">
                                        {!! reviewdescription($row->id) !!}
                                    </div>
                                    <div class="by d-flex">
                                        <div class="imgg">
                                            <img src="{{asset($row->image)}}" alt="">
                                        </div>
                                        <div class="inf">
                                            <p>
                                                {{reviewuser($row->id)}}
                                            </p>
                                            <small>
                                                {{reviewjob($row->id)}}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                
                            </div>
                        </div>
                        <div class="swiper-container gallery-main">
                            <div class="swiper-wrapper">
                                @foreach($reviews as $row)
                                <div class="swiper-slide">
                                    <div class="img">
                                        <img src="{{asset($row->image)}}" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="text">
                                           {!! reviewdescription($row->id) !!}
                                            </div>
                                        <div class="by d-flex">
                                            <div class="inf">
                                                <p>
                                                    {{reviewuser($row->id)}}
                                                </p>
                                                <small>
                                                   {{reviewjob($row->id)}}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="swiper_prev"><i class="fas fa-arrow-right"></i></div>
                        <div class="swiper_next"><i class="fas fa-arrow-left"></i></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- -------------- partners --------------- -->
        <section class="partners bg_main section_padding">
            <div class="container">
                <div class="section_head light text-center mb-5 wow fadeInUp">
                    <h4>{{__('web.filepartners')}}</h4>
                </div>
                <div class="content wow fadeIn">
                    <div class="swiper_partenrs">
                        <div class="swiper-wrapper">
                            @foreach($files as $row)
                            <div class="swiper-slide">
                                <a href="#" class="img">
                                    <img src="{{asset($row->image)}}" alt="" class="main_img">
                                    <img src="{{url('')}}/assets/web/images/pr_shap.png" alt="" class="back_shap">
                                </a>
                            </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/pr_shap3.png" alt="" class="prt_shap">
        </section>
        <!-- -------------- partners --------------- -->
        <section class="partners section_padding">
            <div class="container">
                <div class="section_head text-center mb-5 wow fadeInUp">
                    <h4>{{__('web.actionpartners')}}</h4>
                </div>
                <div class="content wow fadeIn">
                    <div class="swiper_partenrs">
                        <div class="swiper-wrapper">
                             @foreach($sections as $row)
                            <div class="swiper-slide">
                                <a href="#" class="img">
                                    <img src="{{asset($row->image)}}" alt="" class="main_img">
                                    <img src="{{url('')}}/assets/web/images/pr_shap2.png" alt="" class="back_shap">
                                </a>
                            </div>
                            @endforeach
                            
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/pr_shap3.png" alt="" class="prt_shap">
        </section>
        <!-- -------------- subscribe --------------- -->
       <section class="subscribe section_padding">
            <div class="container">
                <div class="section_head light text-center mb-3 wow fadeInUp">
                    <h4>{{__('web.subscribe_us')}}</h4>
                </div>
                <div class="content">
                    <div class="row justify-content-center">
                        <div class="col-lg-6">
                            <form onsubmit="subscribe(this)" action="{{url(getCurrentLocale().'/subscribe')}}" method="post">
                                @CSRF
                                <div class="form-group wow fadeInUp">
                                    <button>{{__('web.subscribe')}} </button>
                                    <input type="email" name="email" placeholder=" {{__('web.email')}} ">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/sub_r.png" alt="" class="sub_r wow fadeInRight">
            <img src="{{url('')}}/assets/web/images/sub_l.png" alt="" class="sub_l wow fadeInLeft">
        </section>


  <div class="modal fade modal_login" id="modalemailfail" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/alert.svg" alt="">
                        </div>
                        <h4 class="text-danger">{{__('web.enteremail')}}   </h4>
                        <a href="#" class="butn sub_butn" data-dismiss="modal"><span>{{__('web.fillinput')}}   </span></a>
                    </div>
                </div>
            </div>
        </div>

        <!--  modal_success -->
        <div class="modal fade modal_login" id="modalemailsuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/checked.svg" alt="">
                        </div>
                        <h4>{{__('web.success')}} </h4>
                    </div>
                </div>
            </div>
        </div>
        
        
    </main>
@push('js')
<script>
    
    function subscribe(elem){
               event.preventDefault();
   
         let action = $(elem).attr('action');
       
       let urls = action;
       
       let dataform = new FormData( $(elem)[0]);
        
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          contentType: false, 
          processData: false, 
          success:function(data)
          {
            
            $("#modalemailsuccess").modal('show');
            window.setTimeout(function(){location.reload()},1000)
               }
          ,error: function (data) {
              
              $('#modalemailfail').modal('show');
              
 
 
 
}
        })
    }
</script>
@endpush
@stop