@extends('web.layouts.main')
@section('content')
@push('title') {{__('web.home')}} @endpush

 <header>
        <div class="containerr">
            <div class="swiper_head">
                <div class="swiper-wrapper">
                    @foreach($sliders as $row)
                    <div class="swiper-slide">
                        <div class="head-content valign" style="background-image: url({{asset($row->image)}});">
                            <div class="container w-100">
                                <div class="row">
                                    <div class="col-lg-8">
                                        <!--<div class="info">
                                            <h2> @if(getCurrentLocale() == 'ar') <img src="{{url('')}}/assets/web/images/logo_word.png" alt=""> @endif {{__('web.slider_1')}}</h2>
                                            <p class="text">{{__('web.slider_description')}}</p>
                                            <a href="{{url(getCurrentLocale().'/aboutus')}}" class="butn color bg-dark border-0 ml-2"><span>{{__('web.more')}}</span></a>
                                            <a href="{{url(getCurrentLocale().'/form')}}" class="butn color border-0"><span>{{__('web.subscribeprize')}}</span></a>
                                        </div>-->
                                    </div>
                                </div>
                            </div>
                        <!--@if(getCurrentLocale() == 'ar')    <img src="{{url('')}}/assets/web/images/logo_text.png" alt="" class="logo_text">@endif -->
                        </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="info">
                            <p> {{__('web.aboutus')}}</p>
                            <h2>{{__('web.prize')}} <span>{{__('web.ammar')}}</span></h2>
                            <div class="text">
                                {!! aboutdescription($about->id) !!}
                            </div>
                            <a href="{{url(getCurrentLocale().'/aboutus')}}" class="butn color mt-4"><span> {{__('web.more')}}</span></a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img">
                            <img src="{{asset($about->image_1)}}" class="main_img" alt="">
                            <img src="{{asset($about->image)}}" class="sub_img" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/about_shap.png" alt="" class="about_shap">
        </section>
        
        <section class="about-cards pb-5">
            <div class="container">
                <div class="row">
                    
                    @foreach($pages as $row)
                    <div class="col-lg-4">
                        <div class="about_card wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
                            <div class="icon-outer">
                                <img src="{{asset($row->image)}}" alt="" class="icon">
                            </div>
                            <div class="content text-center">
                                <h5 class="title"><b>{{aboutname($row->id)}}</b></h5>
                                <p class="p color-gray2">{!! pagedescription($row->id) !!}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
    </section>
            
        <section class="about-cards bg-light section_padding">
            <div class="container">
                <h3 class="sec_title text-center mb-5"><b>مسارات الجائزة</b></h3>
                <div class="row">
                    @foreach($tracks as $row)
                    <div class="col-lg-4">
                       <a href="">
                            <div class="about_card wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
                                <div class="icon-outer">
                                    <img src="{{url('')}}/assets/web/images/reg1.svg" alt="" class="icon">
                                </div>
                                <div class="content text-center">
                                    <h5 class="title"><b> {{aboutname($row->id)}}  </b></h5>
                                    <p class="p color-gray2">
                                         {!! pagedescription($row->id) !!}
                                    </p>
                                </div>
                            </div>
                       </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
        <!-- -------------- partners ----------------- -->
        <section class="partners section_padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="section_head text-center mb-5">
                            <h2>{{__('web.category')}}</h2>
                            
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="row">
                        @foreach($categories as $row)
                        <div class="col-lg-6">
                            <div class="items">
                                <h4 class="text-center">{{categoryname($row->id)}}</h4>
                                <div class="swiper_part">
                                    <div class="swiper-wrapper">
                                        @foreach(products($row->id) as $product)
                                        <div class="swiper-slide">
                                            <div class="info w-100 justify-content-center d-flex">
                                                <!--<div class="cont">-->
                                                <!--    <h6>{{productname($product->id)}} </h6>-->
                                                <!--    <small class="text">{!! productdescription($product->id) !!}</small>-->
                                                <!--</div>-->
                                                <div class="img">
                                                    <img src="{{asset($product->image)}}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    <div class="text-center mt-3">
                                        <span class="swiper_next"><i class="fas fa-chevron-right"></i></span>
                                        <span class="swiper_prev"><i class="fas fa-chevron-left"></i></span>
                                    </div>
                                </div>
                                <img src="{{url('')}}/assets/web/images/part_shap.png" alt="" class="part_shap">
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/part_back.png" alt="" class="part_back">
        </section>
        <!-- -------------- news ----------------- -->
        <section class="news section_padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="section_head text-center mb-5">
                            <h2>{{__('web.articles')}}</h2>
                           
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="row">
                        @foreach($articles as $row)
                        <div class="col-lg-4">
                            <div class="items">
                                  <a href="{{url(getCurrentLocale().'/blog/'.$row->id)}}" class="d-block">
                                <div class="img">
                                    <img src="{{asset($row->image)}}" alt="">
                                </div>
                                <div class="info">
                                    <div class="text-center">
                                        <strong class="butn sub_butn"><span>{{date('F j, Y',strtotime($row->created_at))}}</span></strong>
                                    </div>
                                    <h6 class="title">
                                        {{articlename($row->id)}}
                                    </h6>
                                    <p class="text">
                                        {!!  substr(strip_tags(articledescription($row->id)), 0, 300);  !!} ... {{__('web.more')}}
                                    </p>
                                </div>
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                    <div class="text-center mt-4">
                        <a href="{{url(getCurrentLocale().'/blog')}}" class="butn color mt-4"><span>{{__('web.more')}}</span></a>
                    </div>
            </div>
        </section>
        <!-- -------------- numbers ----------------- -->
        <section class="numbers section_padding bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 valign">
                        <div class="info">
                            <h3 class="main-color">{{__('web.numbers')}}</h3>
                           
                            <div class="num_items">
                                <div class="row">
                                    <div class="col-lg-3 col-6">
                                        <div class="items text-center">
                                            <div class="icon mb-3">
                                                <img src="{{url('')}}/assets/web/images/num/1.svg" alt="">
                                            </div>
                                            <div class="info">
                                                <h3> K <span class="counter">{{settings('subscribe')}}</span> </h3>
                                                <p>{{__('web.count')}} {{__('web.subscriber')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-6">
                                        <div class="items text-center">
                                            <div class="icon mb-3">
                                                <img src="{{url('')}}/assets/web/images/num/2.svg" alt="">
                                            </div>
                                            <div class="info">
                                                <h3> K <span class="counter">{{settings('charity')}}</span> </h3>
                                                <p>{{__('web.count')}} {{__('web.charity')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-6">
                                        <div class="items text-center">
                                            <div class="icon mb-3">
                                                <img src="{{url('')}}/assets/web/images/num/3.svg" alt="">
                                            </div>
                                            <div class="info">
                                                <h3> <span class="counter">{{settings('seasons')}}</span> </h3>
                                                <p>{{__('web.count')}} {{__('web.seasons')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-6">
                                        <div class="items text-center">
                                            <div class="icon mb-3">
                                                <img src="{{url('')}}/assets/web/images/num/4.svg" alt="">
                                            </div>
                                            <div class="info">
                                                <h3> <span class="counter">{{settings('prizes')}}</span> </h3>
                                                <p>{{__('web.count')}} {{__('web.prizes')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img">
                            <img src="{{url('')}}/assets/web/images/num.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- -------------- winners ----------------- -->
        <section class="winners section_padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="section_head text-center mb-5">
                            <h2>{{__('web.winners')}}</h2>
                           
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="swiper_winners" style="height:25pc">
                    <div class="swiper-wrapper">
                        @foreach($winners as $row)
                        <div class="swiper-slide">
                            <div class="items text-center">
                                <div class="img">
                                    <img src="{{asset($row->image)}}" alt="">
                                </div>
                                <div class="info mt-3">
                                    <h5 class="m-0">{{winnername($row->id)}}</h5>
                                    <p class="text">{{winneryear($row->id)}} </p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        <!-- -------------- success ----------------- -->
      
        
        
        
        
        <section class="success section_padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="section_head text-center mb-5">
                            <h2>{{__('web.partners')}}</h2>
                            <p>{{__('web.partners_desc')}}</p>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="swiper_success">
                        <div class="swiper-wrapper">
                            @foreach($partners as $row)
                            <div class="swiper-slide">
                                <a href="#" class="items d-block">
                                    <div class="img">
                                        <img src="{{asset($row->image)}}" alt="">
                                    </div>
                                </a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <span class="swiper_next"><i class="fas fa-chevron-right"></i></span>
                    <span class="swiper_prev"><i class="fas fa-chevron-left"></i></span>
                </div>
            </div>
        </section>
        <!-- -------------- subscribe ----------------- -->
        <section class="subscribe section_padding bg-light">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="section_head text-center mb-5">
                            <h2>{{__('web.subscribe_us')}}</h2>
                            <p>{{__('web.subscribe_desc')}}</p>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <form onsubmit="subscribedata(this)" method="post" action="{{url(getCurrentLocale().'/subscribe')}}" class="form">
                            @CSRF
                            <div class="form-group">
                                <input type="email" name="email" class="form-control" placeholder="{{__('web.email')}}">
                                <button type="submit" class="butn color"><span>{{__('web.subscribe')}}</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/sub_shap.png" alt="" class="sub_shap">
        </section>
  <div class="modal fade modal_login" id="mailerrors" 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.emailrequired')}} </h4>
                        <a href="#" class="butn sub_butn" data-dismiss="modal"><span>{{__('web.fillunputs')}}  </span></a>
                    </div>
                </div>
            </div>
        </div>
        
  <div class="modal fade modal_login" id="payfailed" 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" style="color:#333">{{__('web.notvalid')}} <a href="{{url(getCurrentLocale().'/contactus')}}" style="color:#007bff;font-size:18px;text-decoration:underline">{{__('web.contactus')}}</a> </h4>
                        
                    </div>
                </div>
            </div>
        </div>
        <!--  modal_success -->
        <div class="modal fade modal_login" id="mailsuccess" 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>
@if(Session::has('error'))
 $("#payfailed").modal('show');
 @endif
  function savedata(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)
          {
            
            $("#modal_success").modal('show');
            window.setTimeout(function(){location.reload()},1000)
               }
          ,error: function (data) {
              
              $('#modal_fail').modal('show');
              $('.is-invalid').removeClass('is-invalid');
   $.each(data.responseJSON.errors, function(key,value) {
     
     $('#'+key).addClass('is-invalid');
     
 }); 
 
 
 
}
        })


    }
     function subscribedata(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)
          {
            
            $("#mailsuccess").modal('show');
             window.setTimeout(function(){location.reload()},1000)
               }
          ,error: function (data) {
              
 
  $("#mailerrors").modal('show');
 
}
        })


}
    function typingselect(elem){
        let id = $(elem).val();
        if(id == '0'){
            $('#types').css('display','block');   
        }
        else{
            $('#types').css('display','none');
        }
    }
    function changecountry(elem){
        let id = $(elem).val();
       
       
       
     
      $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/cities/')) !!}+'/'+id,
          type: 'GET',              
          data: 'dataform',   
         
          success:function(data)
          {
              
              $('#city_id').html(data);
            //$('#time_date').html(data.date_time+', <span >'+data.time+' <small><b>'+data.type+'</b></small></span>');
            
               }
          
        })


    }
</script>
@endpush
@stop