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


<main>
        <!--Start Header-->
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="img-box">
                            <img src="{{url('')}}/assets/web/images/header-img.png" alt="" class="main-img wow zoomIn" data-wow-duration="2s"> 
                            <img src="{{url('')}}/assets/web/images/header-img-r.png" class="header-img-r wow fadeInRight" data-wow-duration="2s" data-wow-delay=".5s">
                            <img src="{{url('')}}/assets/web/images/header-img-l.png" class="header-img-l wow fadeInLeft" data-wow-duration="2s" data-wow-delay=".5s">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="text-box">
                            <h5><span>{{__('web.dr')}}/ </span> <b>{{__('web.wael')}} </b></h5>
                            <h1>
                                {{__('web.job')}} <br> {{__('web.ourmission')}}     
                            </h1>
                            <div>
                                {!! aboutdescription($about->id) !!}
                                  </div>
                            <a href="{{url(getCurrentLocale().'/booking')}}" class="link-btn mt-4">{{__('web.book_session')}}  </a>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/lines-pattern.png" alt="" class="lines">
        </header>
        <!--Start services-sec -->
        <section class="services-sec">
            <div class="container">
                <div class="row mt-5">
                    <div class="col-lg-6">
                        <div class="text-box center-vr wow fadeIn" data-wow-duration="2s">
                            <h2><b>{{__('web.service_desc')}} </b></h2>
                            <p class="p">
                               {{__('web.service_desc2')}} 
                            </p>
                            <a href="{{url(getCurrentLocale().'/service')}}" class="more-btn mt-3">{{__('web.see_more')}} </a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img-box">
                            <img src="{{url('')}}/assets/web/images/services-sec.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--Start methods-sec -->
        <section class="services-sec methods-sec ">
            <div class="container">
                <div class="text-center wow fadeInUp" data-wow-duration="2s">
                    <h2><b> {{__('web.method_used')}}  </b></h2>
                    <p>{{__('web.method_used_desc')}} </p>
                </div>
                <div class="row mt-5">
                    @foreach($methods as $row)
                    <div class="col-lg-4">
                        <div class="service-card wow fadeInLeft" data-wow-duration="2s">
                            <img src="{{asset($row->image)}}" alt="" class="icon">
                            <div class="card-body">
                                <h5>{{methodname($row->id)}}</h5>
                                <p>
                                   {{methoddescription($row->id)}}
                                </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                   
                </div>
                <a href="{{url(getCurrentLocale().'/method')}}" class="more-btn mt-3">{{__('web.see_more')}} </a>
            </div>
        </section>
        <!--Start courses-sec -->
        <section class="courses-sec">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-5 pr-0 pl-0">
                        <img src="{{url('')}}/assets/web/images/courses-sec.png" alt="" class="courses-img wow fadeInRight" data-wow-duration="2s"> 
                    </div>
                    <div class="col-md-7">
                        <div class="text-box">
                            <h1 class="mb-5">
                                <b>{{__('web.courses')}} </b> {{__('web.offers')}} <br> {{__('web.type')}}
                            </h1>
                            <p>
                               {{__('web.courses_desc1')}}<br>{{__('web.courses_desc2')}}
                            </p>
                            <a href="{{settings('courses')}}" class="link-btn mt-5"> {{__('web.show_courses')}} </a>

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--Start charities-sec -->
        <section class="charities-sec">
            <div class="container">
                <div class="text-center wow fadeInUp" data-wow-duration="2s">
                    <h2><b>{{__('web.charity')}} </b></h2>
                    <p>{{__('web.charity_desc')}}</p>
                </div>
                <div class="swiper-container mt-5">
                    <div class="swiper-wrapper">
                        @foreach($charity as $row)
                        <div class="swiper-slide">
                            <a href="{{$row->url}}" class="charity-img">
                                <img src="{{asset($row->image)}}" alt="">
                            </a>
                        </div>
                        @endforeach
                        
                       
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
        <!--Start insta-sec -->
        <section class="insta-sec">
            <div class="container">
                <div class="inner">
                    <div class="text-center mb-5 wow fadeInUp" data-wow-duration="2s">
                        <h2><b>{{__('web.gallery')}} </b></h2>
                        <p>{{__('web.gallery_desc')}}</p>
                      
                    </div>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            @foreach($sliders as $row)
                            <div class="swiper-slide">
                                <div class="insta-card">
                                    <div class="img-box">
                                        <img src="{{asset($row->image)}}" alt="">
                                        <a href="{{$row->url}}" class="insta-link">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                    </div>
                                    <div class="card-body">
                                        <span class="date">{{date('Y-m-d',strtotime($row->created_at))}}</span>
                                        <h6 class="mb-0">{{slidername($row->id)}}</h6>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/insta-sec-bg.png" alt="" class="bg">
        </section>
        <!--Start newsletter-sec -->
        <section class="newsletter-sec">
            <div class="container">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-6 m-auto">
                            <div class="text-box wow flipInY" data-wow-duration="2s">
                                <h2>{{__('web.subscribe_now')}}</h2>
                                <p>إ{{__('web.subscribe_desc')}}</p>
                                <form onsubmit="savedate(this)" action="{{url(getCurrentLocale().'/subscribe')}}" method="post">
                                    @CSRF
                                    <div class="form-group mt-4">
                                        <input name="email" type="email" class="form-control" placeholder="{{__('web.email')}} "/>
                                        <button class="submit-btn">{{__('web.subscribe')}}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
         <div class="modal fade modal_login" id="modal_fail" 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>{{__('web.fill_inputs')}} </h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade modal_login" id="modal_success" 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 style="background-color:#d4edd9">{{__('web.success')}} </h4>
                    </div>
                </div>
            </div>
        </div>
    </main>
@push('js')
<script>
    function savedate(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');
     
 }); 
 
 
 
}
        })


    }
</script>
@endpush

@stop