@extends($layout)

@section('content')
<div id="app">
  <div class="main-wrapper" data-top="992">
    @include('partials.header')
    <div id="main">
        @include('partials.float_menu')
        @include('partials.hero')
        <div class="container">
        @foreach($sections as $key => $section)
            @switch($section->system->type)
                @case('n3_columns')
                    @include('partials.n3_columns', ['section' => $section])
                    @break
                @case('n2_columns')
                    @include('partials.n2_columns', ['section' => $section])
                    @break
                @case('n1_columns')
                    @include('partials.n1_columns', ['section' => $section])
                    @break
                @case('simple_intro')
                    @include('partials.simple_intro', ['section' => $section])
                    @break
                @case('sales_contact_section')
                    @include('partials.sales_contact', ['section' => $section])
                    @break
                @case('html_block')
                    @include('partials.html_block', ['section' => $section])
                    @break
                @default
            @endswitch
            <div class="mt-5 papercut"></div>
        @endforeach
        </div>
    </div>
    @include('partials.footer')
  </div>
</div>
@endsection

@prepend('scripts')
<script src="https://www.2x.marketing/js/app.js?id=8078740fbb4ad77aaf03"></script>
<script src="https://www.2x.marketing/js/jquery.mb.YTPlayer.js"></script>
<script src="https://www.2x.marketing/js/foxlazy.js"></script>
<script src="https://www.2x.marketing/js/magnific.js"></script>
<script src="https://www.2x.marketing/js/equalHeightsPlugin.js"></script>
<script src="https://www.2x.marketing/js/jquery.fitvids.js"></script>
<script src="https://www.2x.marketing/js/jquery.sliphover.min.js"></script>
<!--<script src="https://www.2x.marketing/js/script.js?17"></script>-->


<script src="{{ asset('js/video.popup.js') }}"></script>
<script>
  var $=jQuery.noConflict();

  $(function() {
      $(".video").videoPopup({
      // autoplay on open
      autoplay: true,
      // shows video controls
      showControls: true,
      // width
      width: 1000
      });
  });
  
</script>

<script>
  new Vue({
    el: "#app",
    methods: {
      clickTrack: function (value, e) {
        var el = e.target
        console.log(el)
        axios.post('{{ url("/track/" . $code) }}', {
            tr_target: value,
            tr_container: '{{ $code }}',
            tr_link: el.href,
            tr_url: '{{ url()->current() }}',
            tr_utm: '{{ Request::getQueryString() }}'
          })
          .then(function (response) {
            console.log(response)
          })
      }
    }
  })
</script>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

<script src="{{ asset('js/script.js') }}"></script>
<script>
  var bitFlag = false;
  var lastScrollTop = 0;
  var timeoutId;
  $navigation = $("#float-menu");
  $header = $("#header");
  $althero = $("#alt-hero");
  $headerwrapper = $("#header_top_bg");

  if(window.innerWidth > 768) {
    $(window).scroll(function (event) {

    var intWindowTop = $(window).scrollTop();
    var intElementBottom = $navigation.offset().top + $navigation.innerHeight();
    var heroHeight = 435;
    var headerHeight = $header.innerHeight();

    // scroll down
    if (intWindowTop > lastScrollTop) {

      // At the bottom of page
      if (intWindowTop + $(window).height() == $(document).height()) {

        $navigation.css("position", "fixed").css("top", "160px");
        $header.css("display", "block");
        $headerwrapper.css("background-color", "#ffffff");
        $althero.css("display", "none").css("position", "sticky").css("top", "82px");

        // Below hero
      } else if (intWindowTop > heroHeight) {

        $navigation.css("position", "fixed").css("top", "80px");
        $althero.css("display", "none").css("position", "sticky").css("top", "0");
        $header.css("display", "none");

      } else {

        $navigation.css("position", "absolute").css("top", "530px");

      }

      // scroll up
    } else {

      // Below hero
      if ((intWindowTop + 64) > heroHeight) {

        $navigation.css("position", "fixed").css("top", "160px");

      } else {

        $navigation.css("position", "absolute").css("top", "550px");
        $header.css("display", "block");
        $headerwrapper.css("background-color", "#ffffff");
        $althero.css("display", "none");

      }

    }

    lastScrollTop = intWindowTop;
    });
  }

</script>
@endprepend