@extends($layout)

@section('content')
@include($theme_path . 'setup')
<div id="app">
  <div id="page">
    @include($theme_path . 'partials.header')
    <div id="main">
        @include($theme_path . 'partials.hero')
        @include($theme_path . 'partials.float_menu')
        @foreach($sections as $key => $section)
            @switch($section->system->type)
                @case('n3_columns')
                    @include($theme_path . 'partials.n3_columns', ['section' => $section])
                    @break
                @case('n2_columns')
                    @include($theme_path . 'partials.n2_columns', ['section' => $section])
                    @break                    
                @case('simple_intro')
                    @include($theme_path . 'partials.simple_intro', ['section' => $section])
                    @break
                @case('sales_contact_section')
                    @include($theme_path . 'partials.sales_contact', ['section' => $section])
                    @break
                @case('html_block')
                    @include($theme_path . 'partials.html_block', ['section' => $section])
                    @break
                @case('bg_cta')
                    @include($theme_path . 'partials.bg_cta', ['section' => $section])
                    @break
                @case('n3_cards')
                    @include($theme_path . 'partials.n3_cards', ['section' => $section])
                    @break
                @case('n2_cards')
                    @include($theme_path . 'partials.n2_cards', ['section' => $section])
                    @break
                @case('featured_asset')
                    @include($theme_path . 'partials.featured_asset', ['section' => $section])
                    @break
                @case('featured_video')
                    @include($theme_path . 'partials.featured_asset_video', ['section' => $section])
                    @break
                @case('logos')
                    @include($theme_path . 'partials.logos', ['section' => $section])
                    @break
                @case('embedded_form')
                    @include($theme_path . 'partials.embedded_form', ['section' => $section])
                    @break
                @case('testimonials')
                    @include($theme_path . 'partials.testimonials', ['section' => $section])
                    @break
                @case('featured_testimonial')
                    @include($theme_path . 'partials.featured_testimonial', ['section' => $section])
                    @break
                @case('calculator')
                    @include($theme_path . 'partials.calculator', ['section' => $section])
                    @break
                @case('heading_cta_style_1')
                    @include($theme_path . 'partials.heading_cta_style_1', ['section' => $section])
                    @break
                @case('title_items_container')
                    @include($theme_path . 'partials.title_items_container', ['section' => $section])
                    @break
                @case('heading_cta_style_2')
                    @include($theme_path . 'partials.heading_cta_style_2', ['section' => $section])
                    @break
                @default
            @endswitch
        @endforeach        
      @include($theme_path . '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,
      foNewPatientReg: 1,
      foNewPatientRegSecDef: 80,
      foNewPatientRegSec: 143.75,

      foApptScheduled: 30,
      foApptScheduledSecDef: 30,
      foApptScheduledSec: 85,

      foAuthEntered: 3,
      foAuthEnteredSecDef: 120,
      foAuthEnteredSec: 156.375,

      erPatientDoc: 20,
      erPatientDocSecDef: 240,
      erPatientDocSec: 339.625,

      erPrecriptionEntered: 41,
      erPrecriptionEnteredSecDef: 45,
      erPrecriptionEnteredSec:  140.25,

      erRefSent: 2,
      erRefSentSecDef: 120,
      erRefSentSec: 154.625,

      erChargeCaptured: 20,
      erChargeCapturedSecDef: 60,
      erChargeCapturedSec: 62.875,

      boClaimSubmitted: 1,
      boClaimSubmittedSecDef: 10,
      boClaimSubmittedSec: 14.375,

      boDenialworked: 2,
      boDenialworkedSecDef: 60,
      boDenialworkedSec: 90.5,

      boPaymentPosted: 12,
      boPaymentPostedSecDef: 60,
      boPaymentPostedSec: 118.875,
    },
    created: function () {
      // this.foNewPatientRegSec = this.foNewPatientRegSecDef
      // this.foApptScheduledSec = this.foApptScheduledSecDef
      // this.foAuthEnteredSec = this.foAuthEnteredSecDef
    },
    computed: {
      // a computed getter
      foSavedMin: function () {
        totalSec = this.foNewPatientReg*(this.foNewPatientRegSec - this.foNewPatientRegSecDef) + 
                    this.foApptScheduled*(this.foApptScheduledSec - this.foApptScheduledSecDef) + 
                    this.foAuthEntered*(this.foAuthEnteredSec - this.foAuthEnteredSecDef)

        return (totalSec/60).toFixed(2)
      },
      erSavedMin: function () {
        totalSec = this.erPatientDoc*(this.erPatientDocSec - this.erPatientDocSecDef) + 
                    this.erPrecriptionEntered*(this.erPrecriptionEnteredSec - this.erPrecriptionEnteredSecDef) + 
                    this.erRefSent*(this.erRefSentSec - this.erRefSentSecDef) +
                    this.erChargeCaptured*(this.erChargeCapturedSec - this.erChargeCapturedSecDef)

        return (totalSec/60).toFixed(2)
      },
      boSavedMin: function () {
        totalSec = this.boClaimSubmitted*(this.boClaimSubmittedSec - this.boClaimSubmittedSecDef) + 
                    this.boDenialworked*(this.boDenialworkedSec - this.boDenialworkedSecDef) + 
                    this.boPaymentPosted*(this.boPaymentPostedSec - this.boPaymentPostedSecDef)

        return (totalSec/60).toFixed(2)
      }
    },
    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))
      },

      toggle: function () {
        console.log('Test')
      }
      
    }
  })
</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