@extends($layout, ['og_img' => !empty($webinar->seoMetadataMetaImage) ? optional(reset($webinar->seoMetadataMetaImage))->url :  optional(reset($container->seoMetadataMetaImage))->url])

@section('content')
<div id="app" class="webinar-lp single">
@include('partials.webinar.header_single')
@include('partials.webinar.content_single')
@include('partials.webinar.footer')
</div>
@endsection

@prepend('styles')
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" type="text/css"/>
@endprepend

@prepend('scripts')
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
new Vue({
  el: '#app',
  mixins: [mixForm],
  data: {
    isOpen: false,
    display: 'lead',
    token: null,
    webinar: @if(count($webinar->slots) == 1) {{ reset($webinar->slots)->zoomId }} @else null @endif,
    display: 'form',
    zoomResponse: [],
  },
  created: function () {
    $(function () {
      $('#hero-tq, #webinar-tq-items').hide();
      //$('#hero-context, #webinar').hide();

      // $('.drop').click(function(){
      //   $(this).toggleClass('rotated');
      // });

      // $('.testimonial-items, .webinar-items').slick({
      //   lazyLoad: 'ondemand',
      //   slidesToShow: 3,
      //   slidesToScroll: 1,
      //   arrows: true,
      //   autoplay: true,
      //   autoplaySpeed: 5000,
      //   speed: 400,
      //   adaptiveHeight: true,
      //   dots: false,
      //   prevArrow: "<div class='slick-nav-button prev'><i class='fa fa-angle-left' aria-hidden='true'></i></div>",
      //   nextArrow: "<div class='slick-nav-button next'><i class='fa fa-angle-right' aria-hidden='true'></i></div>",
      //   responsive: [{
      //       breakpoint: 800,
      //       settings: {
      //         slidesToShow: 2,
      //         slidesToScroll: 1
      //       }
      //     },
      //     {
      //       breakpoint: 600,
      //       settings: {
      //         slidesToShow: 1,
      //         slidesToScroll: 1
      //       }
      //     },
      //   ]
      // });

    });
  },
  methods: {

    // clickTrack: function (value, e) {
		// 	var el = e.target
		// 	console.log(el)
			
		// 	axios.post('{{ url("/track") }}', {
		// 		tr_target: value, 
		// 		tr_container: 'pareto', 
		// 		tr_link: el.href, 
		// 		tr_url: '{{ url()->current() }}', 
		// 		tr_utm: '{{ Request::getQueryString() }}'
		// 	})
		// 	.then(function (response) {
		// 		console.log(response)
		// 	})
    // },

    // toggle: function() {
    //   this.isOpen = !this.isOpen
    // },

    sendLeadToOwlsight: function() {
      // console.log(response.data)
      var formEl = document.forms.webinarForm
      var formData = new FormData(formEl)
      console.log(JSON.stringify(this.zoomResponse))
      formData.append('webinar_response',JSON.stringify(this.zoomResponse))
      this.startWait()

			axios.post('{{ env('OWLSIGHT_WEBINAR_PUSH_URL') }}', formData)
			.then(response => {
        this.endWait()
        this.display = 'survey'
        console.log(response.data)
        // toastr.success('Add successful')
        to_anchor('top');
			})      
    },

    sendRegistrantToZoom: function(response) {
      // this.token = response.data.token
      console.log(response.data)
      var formEl = document.forms.webinarForm;
      var formData = new FormData(formEl);
      this.startWait()

      // this.display = 'survey'
			axios.post('{{ url("/add_registrant") }}', formData)
			.then(response => {
        console.log(response.data)
        this.endWait()
        var err = 0
        response.data.forEach((item) => {
          if (item.code != undefined) {
            err = 1
            toastr.error(item.message)
          } else {
            this.zoomResponse.push(item)
            $('#hero-context, #webinar').hide();
            $('#hero-tq, #tq-items, #webinar-tq-items').show();
          }
        });

        if (err == 0) {
          this.sendLeadToOwlsight()
          // toastr.success('Add successful')
        }
			})

    },

    successSurveyCapture: function(response) {
      this.display = 'survey_tq'
    }

  }
});

function to_anchor(anchor_id){
  var tag = $('#'+anchor_id+'');
  $('html,body').animate({scrollTop: tag.offset().top -120}, 'slow');
}
</script>

@endprepend