@extends($layout)

@section('content')
<div id="app">
  <div id="page">
    @include('partials.header')
    <div id="main">
        @include('partials.float_menu')
        @include('partials.hero')
        @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('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
                @case('bg_cta')
                    @include('partials.bg_cta', ['section' => $section])
                    @break
                @case('n3_cards')
                    @include('partials.n3_cards', ['section' => $section])
                    @break
                @case('n2_cards')
                    @include('partials.n2_cards', ['section' => $section])
                    @break
                @case('featured_asset')
                    @include('partials.featured_asset', ['section' => $section])
                    @break
                @case('featured_video')
                    @include('partials.featured_asset_video', ['section' => $section])
                    @break
                @default
            @endswitch
        @endforeach        
      @include('partials.footer')
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
      <div id="pdf-container"></div>
  </div>
</div>

<div id="alert" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body text-center my-5">
        <h2 id="modal-body-headline"></h2>
        <h4 id="modal-body-message mt-3">A CareATC representative will be in touch with you soon.</h4>
      </div>
    </div>
  </div>
</div>


@endsection

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

    $(document).ready(function(){
        
        // PDF modal display
        var param = $.uriGet('pdf-asset');
        var page = $.uriGet('page');
        var meeting = $.uriGet('meeting_request');

        if (meeting == 1) {
          $("#bg_cta_button").click();
          return;
        }

        if (param != '' && param != null) {
            $("#exampleModal").modal('show');
        }

        if (page == null || page == '' || page == undefined) page = 1;

        var options = {
            page: page
        };

        @if(isset($featured_asset))
        $("#exampleModal").modal('show');
        PDFObject.embed("{{ asset("storage/$featured_asset_file_name") }}", "#pdf-container",options);
        @endif


        // Gets the video src from the data-src on each button
        var $videoSrc;

        // On Load when page load
        @if(isset($featured_asset_video))
            $videoSrc = $(".video-btn").data("src");
          $("#assetVideoModal").modal('show');
        @endif
        
        $('.video-btn').click(function () {
            $videoSrc = $(this).data("src");
        });

        // when the modal is opened autoplay it  
        $('#assetVideoModal').on('shown.bs.modal', function (e) {
            // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
            $("#video").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
        })

        // stop playing the youtube video when I close the modal
        $('#assetVideoModal').on('hide.bs.modal', function (e) {
            // a poor man's stop video
            $("#video").attr('src', $videoSrc);
        })

  });    

  new Vue({
    el: "#app",
    data: {
      submitted: 0,
      waiting: false,
    },
    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)
          })
      },
      requestMeeting: function (value, e) {
        this.clickTrack(value, e)
        this.waiting = true
        axios.post('{{ url("/schedule_meeting/" . $code) }}', {
            pid: '{{ $pid }}',
            @if(isset($featured_asset))
            owlsight_id: {{ $featured_asset->owlsightId }},
            @else
            owlsight_id: {{ env('DEFAULT_ASSET_OWLSIGHT_ID') }},
            @endif
          })
          .then(function (response) {
            this.waiting = false
            if(response.data.success == true) {
              $("#modal-body-headline").text('Thank you for your request')
              $("#modal-body-message").show()
            } else {
              $("#modal-body-headline").text(response.data.message)
              $("#modal-body-message").hide()
            }
            $("#alert").modal('show');

          }.bind(this))
      }
    }
  })
</script>

<script>
  var bitFlag = false;
  var lastScrollTop = 0;
  var timeoutId;
  $navigation = $("#float-menu");
  $header = $("#header");
  $althero = $("#alt-hero");
  $headerwrapper = $("#header-container-wrapper");

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

    var intWindowTop = $(window).scrollTop();
    var intElementBottom = $navigation.offset().top + $navigation.innerHeight();
    var heroHeight = 320;
    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", "#000000");
        // $althero.css("display", "block").css("position", "sticky").css("top", "82px");

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

        $navigation.css("position", "fixed").css("top", "80px");
        // $althero.css("display", "block").css("position", "sticky").css("top", "82px");
        $headerwrapper.css("background-color", "rgba(0,0,0,0.9)");
        // $althero.css("display", "block").css("position", "sticky").css("top", "0");
        // $header.css("display", "none");

      } else {

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

      }

      // scroll up
    } else {

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

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

      } else {

        $navigation.css("position", "absolute").css("top", "450px");
        $header.css("display", "block");
        $headerwrapper.css("background-color", "transparent");
        // $althero.css("display", "none");

      }

    }

    lastScrollTop = intWindowTop;
    });
  }

</script>
@endprepend