@extends('layout')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
@section('title', ' | ' . $data['numberID'])

@section('style')

<style>

  * {color: #fff !important;}
  html, body {background: #000;}
  #splash h1 { font-weight: bold;}
  #product_video{ width: 350px; }
  #title{ font-size: 2.4em; font-weight: bold; margin-top: 20px; }
  #price{ text-align: center; font-size: 1.4em; }
  #buy_button{ text-align: center; font-size: 1.4em; }
  #information {font-size: 3em;}
  a, a:active, a:hover {font-size: 2.4em; padding: 30px 100px; text-decoration: none; color: #000; font-weight: bold;}

  h4 {font-size:2.4em;}

  #switched { width: 100%; height: 100%; background: #000; position: fixed; z-index: 9999;}
  #switched h3 {font-size: 3em; margin-top: 50px; margin-top: 50px;  }
  #switched img {width: 100px; margin-top: 30px;  }


  /******** Media Query for Mobile ********/
  @media only screen and (min-width: 300px) and (max-width: 600px) {
      #product_video { width: 300px; }
      #title{ font-size: 1.8rem; font-weight: bold; margin-top: 15px; }
      #price{ text-align: center; font-size: 1.2rem; }
      #buy_button{ text-align: center; font-size: 1.2rem; }
      #information {font-size: 2em;}

      a, a:active, a:hover {font-size: 1.8em;}
      h4 {font-size:1.4em;}

      #switched h3 {font-size: 1.5em !important; }
  }


</style>

@endsection



@section('content')

<button class="x_close" type="button"><span class="sr-only">Close</span>&#9587;</button>


<div id="switched">
  <div class="table_wrapper">
      <div class="table_container">
        <!-- <img src="{{URL::asset('/images/loader.gif')}}"/> -->

          <h3>Certified Ready&reg; </h3>

      </div>
  </div>
</div>


<div id="splash" class="table_wrapper" style="display: none;">
    <div class="table_container">
        <h3>This product is Smart Ready&reg; certified</h3>
    </div>
</div>



<div id="main"  class="table_wrapper" style="display: none;">
  <div id="information" style="z-index: 2; position: absolute; padding: 30px; right: 0; top: 0; cursor: pointer; ">Info</div>
  <!-- <button class="x_close" type="button"><span class="sr-only">Close</span>&#9587;</button> -->
    <div class="table_container">

      <video id="product_video" autoplay muted playsinline>
      <source src="{{ $data['videoURLHug'] }}" type="video/mp4">

      Your browser does not support HTML5 video.
      </video>

      <!-- <p id="title">{{ $data['title'] }}</p><br/> -->
      <p id="title">{{ $data['category'] }}</p><br/>

      <p id="price">£{{ $data['price'] }}</p><br/>
      <!-- <a href="/buy/{{ $data['numberID'] }}/flow">{{ $data['buttonText'] }}</a> -->
      <a href="/buy/{{ $data['numberID'] }}/flow">Buy</a>


      <!-- <p id="buy_button" class="pointer">Buy</p> -->

      <div style="position: absolute; top: 100%; height: 100%; width: 100%;" >
          <div class="table_wrapper">
              <div class="table_container">
                <img style="width: 360px; margin-top: -80px; margin-bottom: 80px; padding: 80px;" src="{{URL::asset('/images/play_white.png')}}"/>
                <h4>{{ $data['description'] }}</h4>
          </div>
        </div>
      </div>

  </div> <!-- end table_container -->
</div> <!-- end product_screen -->



@endsection



@section('script')
<script type="text/javascript">

//click X to go to ...
  $('.x_close').on('click', function (e) {
      window.location.href = '/';
      e.preventDefault(e);
  });

//splash screen flow
  $('document').ready(function(){
          $('#switched').delay(1000).fadeOut(800, function(){
              $('#main').fadeIn(800);
          });
  });


  $("#information").on("click", function(event) {
    event.preventDefault(); //Prevent default action of anchor
    $("html, body").animate({
        scrollTop: $(document).height()  //Get the document height
    }, "slow"); //Animates the scroll
    /* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
});


  // $('#buy_button').on('click', function (e) {
  //   $('#main').fadeOut(800, function(){
  //       window.location.href = '{{ $data['numberID'] }}/flow/';
  //   });
  // });



  var product_video = document.getElementById("product_video");
  product_video.play();

// play video if clicked
  $('video').click(function(){
      var product_video = document.getElementById("product_video");
      product_video.play();
  });

    </script>
@endsection