@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
{!! RecaptchaV3::initJs() !!}
@section('content')
<main>
<section class="inner_banner">
    @if(!empty($sponsorship->getData('about_banner_image')))
    <div class="bg_ p_img">
      <picture>
        <source srcset="{{webp($sponsorship->getData('about_banner_image'))}}" type="image/webp">
        <source srcset="{{PP($sponsorship->getData('about_banner_image'))}}" type="image/{{FT($sponsorship->getData('about_banner_image'))}}">
        <img src="{{PP($sponsorship->getData('about_banner_image'))}}" loading="lazy" alt="{{lang('about_us_banner_alt_keywords')}}">
      </picture>
    </div>
    @endif

    <div class="container">
      <div class="page_title">
        <h1>
          <span>{{$sponsorship->getTitle()}}</span>
        </h1>
      </div>

    </div>


    <div class="b_social_box">
      <ul>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 19.313 19.313">
              <path
                d="M16.42,5.056A9.573,9.573,0,0,0,1.358,16.605L0,21.563l5.074-1.332a9.541,9.541,0,0,0,4.574,1.164h0a9.662,9.662,0,0,0,9.661-9.57A9.608,9.608,0,0,0,16.42,5.056ZM9.652,19.782A7.94,7.94,0,0,1,5.6,18.675L5.311,18.5,2.3,19.291l.8-2.936-.19-.3A7.97,7.97,0,1,1,17.7,11.825a8.043,8.043,0,0,1-8.044,7.958Zm4.363-5.958c-.237-.121-1.414-.7-1.634-.776s-.379-.121-.539.121-.616.776-.759.94-.28.181-.517.06a6.509,6.509,0,0,1-3.255-2.845c-.246-.422.246-.392.7-1.306A.443.443,0,0,0,7.992,9.6c-.06-.121-.539-1.3-.737-1.776s-.392-.4-.539-.41-.3-.009-.457-.009a.886.886,0,0,0-.638.3,2.687,2.687,0,0,0-.836,2,4.685,4.685,0,0,0,.974,2.474,10.686,10.686,0,0,0,4.087,3.613,4.679,4.679,0,0,0,2.871.6,2.449,2.449,0,0,0,1.612-1.138,2,2,0,0,0,.138-1.138C14.411,14,14.252,13.941,14.014,13.825Z"
                transform="translate(0 -2.25)" fill="#fff" />
            </svg>
          </a>
        </li>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 15.664 29.115">
              <path
                d="M13.257,15.635v-5.56h4.485v-2.8a7.317,7.317,0,0,1,1.964-5.153A6.249,6.249,0,0,1,24.466,0h4.455V5.561H24.466a.981.981,0,0,0-.785.48,1.951,1.951,0,0,0-.349,1.179v2.853h5.589v5.56h-5.59V29.115h-5.59V15.635Z"
                transform="translate(-13.257)" fill="#fff"></path>
            </svg>
          </a>
        </li>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 36.002 26.19">
              <g transform="translate(1.5 1.5)">
                <path
                  d="M33.81,9.63a4.17,4.17,0,0,0-2.91-3C28.32,6,18,6,18,6S7.68,6,5.1,6.69a4.17,4.17,0,0,0-2.91,3,43.5,43.5,0,0,0-.69,7.935,43.5,43.5,0,0,0,.69,8A4.17,4.17,0,0,0,5.1,28.5c2.58.69,12.9.69,12.9.69s10.32,0,12.9-.69a4.17,4.17,0,0,0,2.91-3,43.5,43.5,0,0,0,.69-7.875,43.5,43.5,0,0,0-.69-8Z"
                  transform="translate(-1.499 -6)" fill="none" stroke="#fff" stroke-linecap="round"
                  stroke-linejoin="round" stroke-width="3"></path>
                <path d="M14.625,22.53l8.625-4.905-8.625-4.9Z" transform="translate(-1.499 -6)" fill="none"
                  stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
              </g>
            </svg>
          </a>
        </li>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 29.915 29.915">
              <g transform="translate(1.5 1.5)">
                <path
                  d="M9.729,3H23.186a6.729,6.729,0,0,1,6.729,6.729V23.186a6.729,6.729,0,0,1-6.729,6.729H9.729A6.729,6.729,0,0,1,3,23.186V9.729A6.729,6.729,0,0,1,9.729,3Z"
                  transform="translate(-3 -3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="3"></path>
                <path d="M22.773,16.528a5.383,5.383,0,1,1-4.535-4.535,5.383,5.383,0,0,1,4.535,4.535Z"
                  transform="translate(-3.932 -3.919)" fill="none" stroke="#fff" stroke-linecap="round"
                  stroke-linejoin="round" stroke-width="3"></path>
                <path d="M26.25,9.75h0" transform="translate(-5.391 -3.694)" fill="none" stroke="#fff"
                  stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
              </g>
            </svg>
          </a>
        </li>
        <li>
          <a href="#" class="link_">

            <svg viewBox="0 0 34.775 29.203">
              <path
                d="M33.275,4.5a15.743,15.743,0,0,1-4.535,2.21,6.47,6.47,0,0,0-11.352,4.333v1.444a15.4,15.4,0,0,1-13-6.543s-5.777,13,7.221,18.776A16.812,16.812,0,0,1,1.5,27.608c13,7.222,28.886,0,28.886-16.61a6.5,6.5,0,0,0-.116-1.2,11.15,11.15,0,0,0,3-5.3Z"
                transform="translate(0 -2.872)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                stroke-width="3"></path>
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </section>



<section class="page-section tr_top ">
  <div class="container lm_width">
  <div class="intro">
        <div class="text_box lg_">
          {!! $sponsorship->getData('description') !!}
        </div>
      </div>
  </div>
</section>

@if(!empty($sponsors) && $sponsors->count() > 0)
<section class="page-section sponser_sec">
	<div class="container">
		<div class="sponser_inner_">

      @foreach($sponsors as $item)
			<div class="box_">
          <a href="#sponsor_pop" data-fancybox data-type="ajax" data-src="{{route('display-popup', [$lang, 'type' => 'sponsors', 'id' => $item->getId()])}}" class="inner_ link_tilt">
            <div class="img_box p_img">
              <picture>
                  <source srcset="{{webp($item->getData('company_image'))}}" type="image/webp">
                  <source srcset="{{PP($item->getData('company_image'))}}" type="image/{{FT($item->getData('company_image'))}}">
                  <img src="{{PP($item->getData('company_image'))}}" loading="lazy" alt="{{lang('sponsor_alt_keywords')}}">
              </picture>
            </div>
          </a>
			</div>
      @endforeach


		</div>
	</div>
</section>
@endif

  @if(!empty($videoGallery) && $videoGallery->isNotEmpty())
  <section class="page-section video_slide_section" id="videos">
    <div class="container-fluid no_pad">
      <div class="title_box ">
        <h3 class="section-title">
          <!-- <span>{{lang('latest')}}</span> -->
        </h3>
        <h5 class="small_title_">
          <span>{{lang('videos')}}</span>
        </h5>
      </div>

      <div class="video_wrap">
        <!-- Swiper -->
        <div class="swiper-container ">
          <div class="swiper-wrapper">
            @foreach($videoGallery as $video)
            <div class="swiper-slide v_item">
              <a href="{{youtubeEmbedUrlFromUrl($video->getData('video_link'))}}" data-fancybox="gallery" class="inner_ ">
                <div class="img_box p_img">
                  <picture>
                  <source srcset="{{webp($video->getData('sponsor_video_banner'))}}" type="image/webp">
                  <source srcset="{{PP($video->getData('sponsor_video_banner'))}}" type="image/{{FT($video->getData('sponsor_video_banner'))}}">
                  <img src="{{PP($video->getData('sponsor_video_banner'))}}" loading="lazy" alt="{{$video->getData('post_title')}}">
                  </picture>
                </div>

                <div class="icons_box">
                  <svg viewBox="0 0 155 155">
                    <g transform="translate(-471 -6337)">
                      <path d="M20.03,6.055a4,4,0,0,1,6.941,0l16.6,28.956A4,4,0,0,1,40.1,41H6.9a4,4,0,0,1-3.47-5.989Z"
                        transform="translate(578 6389) rotate(90)" fill="#fff" />
                      <g transform="translate(471 6337)" fill="none" stroke="#fff" stroke-width="2">
                        <circle cx="77.5" cy="77.5" r="77.5" stroke="none" />
                        <circle cx="77.5" cy="77.5" r="76.5" fill="none" />
                      </g>
                    </g>
                  </svg>
                </div>
                <div class="content_box">
                  <div class="c_">
                    <div class="title">
                      <span>{{$video->getData('post_title')}}</span>
                    </div>

                  </div>
                </div>

              </a>
            </div>
            @endforeach
          </div>
        </div>
      </div>

    </div>
  </section>
  @endif

<section class="page-section spondor_form">
  <div class="container">
    <div class="contact_info_wrap">
      <h2>{{lang('wants_to_be_a')}}<strong>{{lang('sponsor')}}?</strong></h2>
      <h4>{{lang('contact_us_now')}}</h4>

      <div class="from_wrap">
      {{Form::open(array('url'=>route('sponsorship-inquiry',[$lang]),'name'=>'sponsorship-inquiry','id'=>'sponsorship-inquiry','role'=>'form','autocomplete'=>'off') )}}
          <div class="f_inner_">
            <div class="input-field ">
                <input id="si_name" name="si_name" type="text">
                <label for="si_name">{{lang('full_name')}}</label>
            </div>
            <div class="input-field ">
                <input id="si_email" name="si_email" type="text">
                <label for="si_email">{{lang('email')}}</label>
            </div>
            <div class="input-field ">
                <input id="si_phone_number" name="si_phone_number" type="text">
                <label for="si_phone_number">{{lang('contact_number')}}</label>
            </div>
            <div class="input-field ">
                <input id="si_company_name" name="si_company_name" type="text">
                <label for="si_company_name">{{lang('company_name')}}</label>
            </div>
            <div class="input-field ">
                <textarea id="si_message" name="si_message"  class="materialize-textarea"></textarea>
                <label for="si_message">{{lang('message')}}</label>
            </div>
			{!! RecaptchaV3::field('sponsorship-inquiry') !!}
            <div class="input-field text-right">
              <button type="submit" class="dir-btn" 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">{{lang('submit')}}</b></button>
            </div>
          </div>
        {{Form::close()}}
      </div>
      <div class="spnsr_tg">
        <p>{{lang('or_you_can_write_us_to')}} <a href="mailto:info@reportageuae.com">info@reportageuae.com</a></p>
      </div>
    </div>
  </div>
</section>

</div>

<div class="aj_loader ">
      <div class="inner_loader">
      <div class="c_loader"></div>
      </div>
  </div>

</main>
@stop

@section('scripts')
@parent
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl={{$lang}}" async defer></script>
<script type="text/javascript" src="{{ asset('assets/frontend/swal/sweetalert2.all.min.js') }}"></script>
@include('frontend.partials.jquery_custom_validators')
<script>

    $(function () {
        $('.tool_wrap select').selectric({ disableOnMobile: false, nativeOnMobile: false });

        $('[data-play]').on('click', function (e) {
            e.preventDefault();
            var this_ = $(this),
                p_target_ = this_.closest('.video_grid'),
                video_ = p_target_.find('video'),
                pl_text = "{{lang('watch_showreel')}} {{lang('watch_showreel')}} {{lang('watch_showreel')}}",
                pa_text = "{{lang('pause_showreel')}} {{lang('pause_showreel')}} {{lang('pause_showreel')}}";


            p_target_.toggleClass('playing_');

            if (p_target_.hasClass('playing_')) {
                $(video_).trigger('play');
                this_.find('textPath').html(pa_text);
            } else {
                $(video_).trigger('pause');
                this_.find('textPath').html(pl_text);
            }


        });
    });
</script>

<script>
var activeForm = null;
function formSubmit(){
    grecaptcha.execute();
    if(activeForm)
    {
        $(activeForm).submit();
    }
    return true;
}
$.validator.addMethod('wordCount', function(value, element, params){
  // var typedWords = jQuery.trim(value).split(' ').length;
  var typedWords = 0;
  value = jQuery.trim(value);
  value = value.replace('.',' ');
  value = value.replace('-',' ');
  value = value.replace('_',' ');
  value = value.replace('\\n',' ');
  value = value.replace('\\r',' ');
  var arr = value.split(' ');
    $(arr).each(function(i,v){
    if(v){
      typedWords++;
    }
  });

  return value == '' || (typedWords >= params[0] && typedWords <= params[1]);
}, $.validator.format('{{lang('please_write')}} {0} to {1} {{lang('words')}}.'));

  $('#phone_number').mask("000000000000000");
$('#sponsorship-inquiry').validate({
      errorPlacement: function(error, element) {
      error.appendTo(element.parent());
      },
      ignore:{},
      rules :{
        'si_name':{
          required:true,
          alphanumeric:true,
        },
        'si_company_name':{
          required:true,
          alphanumeric:true,
        },
        'si_email':{
          required:true,
          myEmail:true,
        },
        'si_phone_number':{
          required:true,
          minlength: 9
        },
        'si_message':{
          //required:true,
          alphanumericMessageBox:true,
          wordCount:[1, 250]
        }
      },
      messages:{
        'si_name':{
          required:"{{ trans('messages.field_required') }}",
          alphanumeric:"{{ trans('messages.no_spcl_char') }}",
        },
        'si_company_name':{
          required:"{{ trans('messages.field_required') }}",
          alphanumeric:"{{ trans('messages.no_spcl_char') }}",
        },

        'si_email':{
          required:"{{ trans('messages.field_required') }}",
          myEmail:"{{ trans('messages.invalid_email') }}",
          email:"{{ trans('messages.invalid_email') }}",
        },
        'si_phone_number':{
          required:"{{ trans('messages.field_required') }}",
          minlength:"{{ trans('messages.no_min_length') }}",
        }
      },
      submitHandler:function(form){

        $('.aj_loader').addClass('show');
        activeForm = form;
        $('.userMessage').html('').hide();
        if (grecaptcha.getResponse())
        {
          activeForm = null;
          var $form = $(form);
          dataToSend = $(form).serializeArray();
           dataToSend.push({ name: "g-recaptcha-response", value: grecaptcha.getResponse() });

          sendAjax($form.attr('action'),'POST',dataToSend,function(response){
            $('.aj_loader').removeClass('show');
            grecaptcha.reset();

            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
                      });
                    }

            }

          });
        }
        else{
          grecaptcha.reset();
          grecaptcha.execute();
        }
        return false;
      }
    });
</script>

<script>
  $(function () {
    // Executive slider
    var project_slider = new Swiper(".executive_wrap .swiper-container", {
      slidesPerView: 4,
      spaceBetween: 20,
      /* navigation: {
           nextEl: ".projects_wrapper .nav_.right_",
           prevEl: ".projects_wrapper .nav_.left_",
       },*/
       autoplay: {
   delay: 3000,
 },
       pagination: {
          el: '#slider_p_2',
          clickable: true,
        },

      breakpoints: {
     250: {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        300: {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        980: {
          slidesPerView: 3,
          spaceBetween: 20,
        },
        1025: {
          slidesPerView: 4,
          spaceBetween: 20,
        },
      },
       on: {
        init: function () {
          setTimeout(function() {
            if($('#slider_p_2').find('.swiper-pagination-bullet').length == 1) {
              $('#slider_p_2').closest('.nav_tool').hide();
            }
          },100)
        },
      },
    });

  })

  $(function () {
    $('.link_tilt').tilt({
		axis: 'y',
        perspective: 500
    });

    var video_slider = new Swiper(".video_wrap .swiper-container", {
      slidesPerView: 1,
      spaceBetween: 60,
      watchOverflow: true,
      navigation: {
        nextEl: ".video_wrap .nav_.right_",
        prevEl: ".video_wrap .nav_.left_",
      },
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        980: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        1025: {
          slidesPerView: 1,
          spaceBetween: 60,
        },
      },
    });
  })
</script>

@stop