@extends('web.layouts.main')
@section('content')
  
  
      
    <main>
        <!-- ---------- about ----------- -->
        <section class="about section_padding bg-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 order-1 order-lg-0">
                        <div class="info wow fadeInLeft slow">
                            <h2> <span>{!! $page_2->descriptions(currentLanguage()['id'])->title !!}</span></h2>
                            <div class="text">
                                {!! $page_2->descriptions(currentLanguage()['id'])->description !!}
                            </div>

                            <h5>{!! $page_3->descriptions(currentLanguage()['id'])->title !!}</h5>
                            <div class="text">
                                {!! $page_3->descriptions(currentLanguage()['id'])->description !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 order-0 order-lg-1">
                        <div class="img wow zoomIn slow">
                            <img src="{{asset($page_2->image)}}" alt="">
                        </div>
                    </div>
                    <div class="col-lg-4 order-2">
                        <div class="info wow fadeInRight">
                            <h2> <span>{!! $page_4->descriptions(currentLanguage()['id'])->title !!}</span> </h2>
                            <div class="text">
                                {!! $page_4->descriptions(currentLanguage()['id'])->description !!}
                            </div>

                            <h5>{!! $page_5->descriptions(currentLanguage()['id'])->title !!}</h5>
                            <div class="text">
                                {!! $page_5->descriptions(currentLanguage()['id'])->description !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ------------ products ----------- -->
        <section class="products section_padding" id='menu'>
            <div class="container">
                <div class="section_head mb-5">
                    <h2>الأكثر مبيعا</h2>
                </div>
                @foreach($meals as $key=>$row)
                @if($key%2 == 0)
                <div class="product_row wow fadeIn">
                    <div class="row align-items-center  justify-content-between">
                        <div class="col-lg-4">
                            <div class="info">
                                <h4>{{mealdescriptions($row->id,'name')}} </h4>
                                <div class="text">
                                    {{mealdescriptions($row->id,'description')}}
                                </div>
                                <div class="price">
                                     {{$row->cost}} <small> sr </small>
                                </div>
                                <!--<a href="#" class="butn">-->
                                <!--    <span>إطلب الآن</span>-->
                                <!--</a>-->
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="img">
                                <img src="{{asset($row->image)}}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                
                @else
                <div class="product_row wow fadeIn">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="img">
                                <img src="{{asset($row->image)}}" alt="">
                            </div>
                        </div>
                        <div class="col-lg-4 offset-lg-1">
                            <div class="info">
                                <h4>{{mealdescriptions($row->id,'name')}}</h4>
                                <div class="text">
                                    {{mealdescriptions($row->id,'description')}}
                                </div>
                                <div class="price">
                                    {{$row->cost}} <small> sr </small>
                                </div>
                                <!--<a href="#" class="butn">-->
                                <!--    <span>إطلب الآن</span>-->
                                <!--</a>-->
                            </div>
                        </div>
                    </div>
                </div>
                 @endif
                @endforeach
            </div>
        </section>


        <!-- ------------ features ----------- -->
        <section class="features" id="services">
            <div class="container">
                <div class="section_head mb-5">
                    <h2>مميزاتنا</h2>
                </div>
                <div class="content">
                    <div class="row">
                        @foreach($services as $row)
                        <div class="col-lg-4">
                            <div class="feature_card wow fadeInUp" data-wow-delay="0">
                                <div class="icon">
                                    <i class="fas fa-coffee"></i>
                                </div>
                                <div class="info">
                                    <h6>{!! $row->descriptions(currentLanguage()['id'])->name !!}</h6>
                                    <div class="text">
                                        {!! $row->descriptions(currentLanguage()['id'])->description !!} 
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>


        <!-- ------------ clients ----------- -->
        <section class="clients section_padding" id="reviews">
            <div class="container">
                <div class="section_head mb-5">
                    <h2>تقييمات العملاء</h2>
                </div>
                <div class="clients_slider wow fadeIn">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            @foreach($reviews as $row)
                            <div class="swiper-slide">
                                <div class="client_card">
                                    <div class="author">
                                        <div class="img">
                                            <img src="{{asset($row->image)}}" alt="">
                                        </div>
                                        <div class="cont">
                                            <p>{!! $row->descriptions(currentLanguage()['id'])->user !!}</p>
                                            <div class="stars">
                                                @for($i=0;$i<$row->rate;$i++)
                                                <i class="fas fa-star"></i>
                                                @endfor
                                                @for($i=0;$i< (5-$row->rate);$i++)
                                                <i class="far fa-star"></i>
                                                @endfor
                                            </div>
                                        </div>
                                    </div>
                                    <div class="info">
                                        <h6>{!! $row->descriptions(currentLanguage()['id'])->job !!}</h6>
                                        <div class="text">
                                            {!! $row->descriptions(currentLanguage()['id'])->description !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <!-- ---- pagination ---- -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>

    </main>
   
   
  @push('js')
  
   <script>
        // <!-- ------- chart js pie script -------------- -->
       
        let primary = {!! json_encode(settings('primary')) !!};
        let secondary = {!! json_encode(settings('secondary')) !!};
    </script>
  
  
  <script>
  
        function categoryFetch(elem){
            let target = $(elem).attr('data-id');
            
      $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/categoryFetch')) !!}+'/'+target,
          type: 'GET',              
          data: 'dataform',
          success:function(data)
          {
              $(elem).attr('data-id',parseInt(target)+1);
           $('#meals').html(data);
          }
        })
        }
        function subMailing(elem){
        event.preventDefault(); 
       var action = $('#formMail').attr('action');
       var urls = action;
       var dataform = $('#formMail').serialize();
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           $('#success_modal_mail').modal('show');
              
                 setTimeout(
  function()
  {
      location.reload();
  }, 1000);
             
          }
          ,error:function(data) {
             $('#error_modal_mail').modal('show');
              $('#error_mail').html('');
    $('#error_mail').css("display", "block");
   
   $.each(data.responseJSON.errors, function(key,value) {
       console.log(key);
     $('#error_mail').append('<h4 class="title text-center mt-3">'+value+'</h4>');
     
     
 }); 
 
}
        })
        }
        function contacts(elem){
        event.preventDefault(); 
       var action = $(elem).attr('action');
       var urls = action;
       var dataform = $(elem).serialize();
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           $('#confirmModal').modal('show');
              
                 setTimeout(
  function()
  {
      location.reload();
  }, 1000);
             
          }
          ,error:function(data) {
             $('#cancelModal').modal('show');
              $('#error').html('');
   
   $.each(data.responseJSON.errors, function(key,value) {
       console.log(key);
     $('#error').append('<h4 class="title text-center mt-3">'+value+'</h4>');
     
     
 }); 
 
}
        })
        }
  </script>
  @endpush
@stop