@extends($layout)
@section('content')

<div id="app">
  @include('partials.header')

  @include('partials.pareto.paper')
  @include('partials.pareto.overview')
  @include('partials.pareto.why')
  @include('partials.pareto.case-studies')
  @include('partials.pareto.testimonial')
  @include('partials.pareto.webinar')
  @include('partials.pareto.talk')

  @include('partials.footer')
</div>
@endsection


@prepend('styles')
<link rel="stylesheet" href="{{ asset('css/modal-video.min.css') }}" type="text/css">
<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="{{ asset('js/modal-video.min.js') }}"></script>
<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,
  },
  created: function () {
    $(function () {

      $('.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
    },

    successLeadCapture: function(response) {
      this.token = response.data.token
      this.display = 'survey'
    },

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

  }
});
</script>

<script>
new ModalVideo('.play', {
  channel: 'vimeo',
  nocookie: true
});
</script>
@endprepend