@extends('frontend.layouts.master')
@section('styles')
@parent
{!! RecaptchaV3::initJs() !!}
@stop

@section('content')
 @include('frontend.layouts.social')
<main>
  <section class="inner_banner">
    <div class="bg_ p_img">
      @if(!empty($banner) && !empty($banner->getData('banner_image')))
        <picture>
            <source srcset="{{webp($banner->getData('banner_image'))}}" type="image/webp">
            <source srcset="{{PP($banner->getData('banner_image'))}}" type="image/{{FT($banner->getData('banner_image'))}}">
            <img src="{{PP($banner->getData('banner_image'))}}" loading="lazy" alt="">
        </picture>
        @else
        <picture>
          <source srcset="{{getFrontendAsset('images/communitie_details_banner.webp')}}" type="image/webp">
          <source srcset="{{getFrontendAsset('images/communitie_details_banner.jpg')}}" type="image/jpeg">
          <img src="{{getFrontendAsset('images/communitie_details_banner.jpg')}}" loading="lazy" alt="{{lang('offers_banner_alt_keywords')}}">
        </picture>
        @endif      
    </div>

    <div class="container">
      <div class="page_title">
        <h1>
          <span>{{lang('offer_title_our')}}</span>
        </h1>
        <h5 class="small_title_ sm_">
          <span>{{lang('offer_title_latest_offers')}}</span>
        </h5>
      </div>

    </div>

   
  </section>
  @if(!empty($offers) && $offers->isNotEmpty())
  <section class="page-section first_sec">
    <div class="container-fluid no_pad ">
      <div class="offer_wrap">
        <!-- Swiper -->
        <div class="swiper-container ">
          <div class="swiper-wrapper">
            @foreach($offers as $offer)
            <div class="swiper-slide of_item">
              <a href="#offer_pop" class="inner_ " data-post-id="{{$offer->post_id}}" data-fancybox-modal-pop>
                <div class="img_box p_img offer-image" >
                  <picture>
                    <source srcset="{{webp($offer->getData('offer_image'))}}" type="image/webp">
                    <source srcset="{{PP($offer->getData('offer_image'))}}" type="image/{{FT($offer->getData('offer_image'))}}">
                    <img src="{{PP($offer->getData('offer_image'))}}" loading="lazy" alt="{{$offer->getData('post_title')}}">
                  </picture>
                </div>
                <div class="content_box">
                  <div class="c_">
                    <div class="title">
                      <span>{{$offer->getData('post_title')}}</span>
                    </div>
                    <div class="meta_">
                      <span>{{ printDateMYLang($offer->getData('offer_date'))}}</span>
                    </div>
                  </div>
                  <div class="btn_box">
                    <span class="btn_">
                      {{lang('enquire_now')}}
                    </span>
                  </div>
                </div>
              </a>
            </div>
            @endforeach
            
          </div>
        </div>
        <div class="nav_box  box_center_">
          <div class="nav_ left_"></div>
          <div class="nav_ right_"></div>
        </div>
      </div>
    </div>
  </section>
  @endif
  <div class="popup_box offer_ md_box form_box " id="offer_pop" style="display: none;">
    <div class="inner_">

      <div class="img_box" id="popup-image"></div>
      <div class="content_box">
        <div class="text_box">
          <h3>{{lang('inquire_about_this_offer')}}</h3>
        </div>
        {{Form::open(array('url'=>route('offer-request',[$lang]),'name'=>'offer-request','id'=>'offer-request','role'=>'form','autocomplete'=>'off') )}}
        <div class="f_inner_">
              <input type="hidden" id="offer_id" name="offer_id">
              <div class="input-field ">
                <input id="full_name" name="full_name" type="text">
                <label for="full_name">{{lang('full_name')}}</label>
              </div>
              <div class="input-field ">
                  <input id="user_email" name="user_email" type="email">
                  <label for="user_email">{{lang('email')}}</label>
              </div>
             
              <div class="m_row">
                <div class="input-field ">               
                  <select name="countryCode" id="countrycode">
                  @if(!empty($countryList))
                   @php
                    $uae=$countryList->filter(function ($value, $key) {
                                            return ($value->phonecode == '971');
                                        })->first();
                   @endphp
                   @if(!empty($uae))
                      <option data-countryCode="{{$uae->iso}}" value="+{{$uae->phonecode}}">{{$uae->getData('country_name')}} (+{{$uae->phonecode}})</option>
                   @endif
                   @foreach($countryList as $country)
                      @if($country->phonecode == '971')
                         @continue;
                       @endif
                      <option data-countryCode="{{$country->iso}}" value="+{{$country->phonecode}}">{{$country->getData('country_name')}} (+{{$country->phonecode}})</option>
                   @endforeach
                @endif

                  </select>
                  <label for="phone_number" >{{lang('country_code')}}</label>                              
                </div>
                <div class="input-field ">
                 <input id="phone_number" name="phone_number" type="text">
                 <label for="phone_number" >{{lang('phone_number')}}</label>
                </div>
              </div>
              <div class="input-field">
                  <select id="enquire_type" name="enquire_type" class="select_box_">
                    <option value="" disabled selected>{{lang('enquire_type')}}</option>
                    <option value="Client">{{lang('client')}}</option>
                    <option value="Broker">{{lang('broker')}}</option>
                  </select>
                  <label for="enquire_type">{{lang('enquire_type')}}</label>
              </div>

              <div class="input-field checkbox_field ">
                 <label>
                 <input type="checkbox" class="filled-in" name="commercial_messages" value="Yes" />
                  <span>{{ lang('receive_commercial_electronic_messages') }}</span>
                </label> 
              </div>

            <div class="input-field  checkbox_field">
              <label>
                <input type="checkbox" name="accept_privacy_policy" class="filled-in" value="1" />
                <!-- <span>{{ lang('accept_the_website_cookies_and_privacy_policy') }}</span> -->
                @if ($lang=="ar")
                    <span>باستخدام هذا النموذج، فإنك تقبل <a href="{{route('cookie-policy',$lang)}}" class="link_" target="_blank">نص تعريف الارتباط</a> و <a href="{{route('privacy-policy',$lang)}}" class="link_" target="_blank">سياسة الخصوصية</a>.</span>    
                @elseif ($lang=="ru")
                    <span>Используя эту форму, вы принимаете <a href="{{route('cookie-policy',$lang)}}" class="link_" target="_blank">политику использования файлов cookie</a> и <a href="{{route('privacy-policy',$lang)}}" class="link_" target="_blank">конфиденциальности веб-сайта</a>.</span>    
                @else
                    <span>By using this form, you accept the <a href="{{route('cookie-policy',$lang)}}" class="link_" target="_blank">Website Cookies</a> and <a href="{{route('privacy-policy',$lang)}}" class="link_" target="_blank">Privacy Policy</a>.</span>
                @endif              
              </label>
            </div>

                            
              <div class="input-field text-right">
              {!! RecaptchaV3::field('offerRequest') !!}
                <button type="submit" class="dir-btn  dir-btn--filled"
                  role="button">{{lang('submit')}}<span></span><span></span><span></span><span></span><b
                    aria-hidden="true">{{lang('submit')}}</b><b aria-hidden="true">{{lang('submit')}}</b><b aria-hidden="true">{{lang('submit')}}</b><b
                    aria-hidden="true">submit</b></button>
              </div>
          </div>
          <div class="aj_loader ">
            <div class="inner_loader">
              <div class="c_loader"></div>
            </div>
          </div>
          {!! Form::close() !!}
      </div>
    </div>
    <button type="button" data-fancybox-close="" class="fancybox-button fancybox-close-small" title="Close"><svg
        xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
        <path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
      </svg></button>
  </div>
@stop

@section('scripts')
@parent

<script type="text/javascript" src="{{ asset('assets/frontend/swal/sweetalert2.all.min.js') }}"></script>
@include('frontend.partials.jquery_custom_validators')
@include('frontend.scripts.datepicker')
<script>
  $( document ).ready(function() {
            $('#offer-request  [name=g-recaptcha-response]').addClass('offerRequest');
        });
    
  $(function () {
   /*  $('.datepicker').datepicker({
      container: 'body'
    }); */
    
    $(function () {
        $('.input-field select').formSelect();
      })

    $('.select_box_').formSelect();
    $("[data-fancybox-modal-pop]").fancybox({
      modal: true,
      beforeLoad:function(instance, slide){
          var obj =slide.opts.$orig;
          var image =obj.find('.offer-image').html();
          var offerId =obj.data('post-id');
          $('#popup-image').html(image);
          $('#offer_id').val(offerId);
          $('.input-field select').formSelect();
          
      },
    });
    // offer slider
    var offer_slider = new Swiper(".offer_wrap .swiper-container", {
      slidesPerView: 1,
      spaceBetween: 60,
      navigation: {
        nextEl: ".offer_wrap .nav_.right_",
        prevEl: ".offer_wrap .nav_.left_",
      },
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        980: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        1025: {
          slidesPerView: 1,
          spaceBetween: 60,
        },
      },
    });
  })
    
  
    
$('#phone_number').mask("000000000000000");    
$('#offer-request').validate({
			errorPlacement: function(error, element) {	
			error.appendTo(element.parent());
			},
			ignore:{},
			rules :{
				
				'g-recaptcha-response': {
                    required: true,
                },
			  'full_name':{
					required:true,
					alphanumeric:true,
				},
				'user_email':{
					required:true,			
					myEmail:true,	
				},
				'phone_number':{
					required:true,
					minlength: 9
				},
        'enquire_type':{
          required:true,
        },
        // 'commercial_messages': {
        //     required: true,
        // },
        'accept_privacy_policy': {
            required: true,
        },        
        /*
        'how_to_reach_you':{
					required:true,
				},
        'date':{
					required:true,
				},
        'time':{
					required:true,
				},
				*/
			
			},
			messages:{
				'full_name':{
					required:"{{ trans('messages.field_required') }}",
					alphanumeric:"{{ trans('messages.no_spcl_char') }}",
				},
				'last_name':{
					required:"{{ trans('messages.field_required') }}",
					alphanumeric:"{{ trans('messages.no_spcl_char') }}",
				},
				
				'user_email':{
					required:"{{ trans('messages.field_required') }}",
					myEmail:"{{ trans('messages.invalid_email') }}",
					email:"{{ trans('messages.invalid_email') }}",
				},
				'phone_number':{
					required:"{{ trans('messages.field_required') }}",
					minlength:"{{ trans('messages.no_min_length') }}",
				},
        'enquire_type':{
          required:"{{ trans('messages.field_required') }}",
        },
        // 'commercial_messages': {
        //     required: "{{ trans('messages.field_required') }}",
        // },
        'accept_privacy_policy': {
            required: "{{ trans('messages.field_required') }}",
        },         
        /*
        'how_to_reach_you':{
					required:"{{ trans('messages.field_required') }}",
				},
        'date':{
					required:"{{ trans('messages.field_required') }}",
				},
        'time':{
					required:"{{ trans('messages.field_required') }}",
				},
        */
        
			},
			submitHandler:function(form){
				
				$('.aj_loader').addClass('show');
				activeForm = form;
				$('.userMessage').html('').hide();
				if (grecaptcha.getResponse) {
				
					activeForm = null;
					var $form = $(form);
					dataToSend = $(form).serializeArray();
					
			
					sendAjax($form.attr('action'),'POST',dataToSend,function(response){
						$('.aj_loader').removeClass('show');
           
						
						if(response.status==true)
						{
							$form[0].reset();
                            $.fancybox.close();
							$('.uploadFileName').html('');
							$('.uploadPercentage').html('');
							$('.uploadProgressWrapper').html('');
                  swal.fire({
                      title: response.warning,
                      html: response.userMessages,
                      confirmButtonText: "{{lang('ok')}}",
                      confirmButtonColor:'#000',
                      closeOnConfirm: false
                  });
						}else{
                $.each(response.formMessages, function( index, value ){
                        $('#'+index+'-error').remove();
                        $('#'+index).parent().prepend('<label id="'+index+'-error" class="error er-label" for="'+index+'">'+value+'</label>');
                        $('#'+index).addClass('error');
                    });
                    if(response.userMessages){
                      swal.fire({
                          title: response.warning,
                          html: response.userMessages,
                          confirmButtonText: "{{lang('ok')}}",
                          confirmButtonColor:'#000',
                          closeOnConfirm: false
                      });
                    }

            }
              
					});
					grecaptchaExecute('offerRequest');
				}
				else{
					grecaptchaExecute('offerRequest');
				}
				return false;
			}
		}); 

    
</script>
@stop