@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>

  #splash h1 { font-weight: bold;}
  #product_video{ width: 280px; }
  #title{ font-size: 2.4rem; font-weight: bold; margin-top: 15px; }
  #price{ text-align: center; font-size: 1.4em; }
  #buy_button{ text-align: center; font-size: 1.4em; }

  a {font-size: 1.4rem; padding: 30px 100px; }


  /******** Media Query for Mobile ********/
  @media only screen and (min-width: 300px) and (max-width: 600px) {
      #product_video{ width: 180px; }
      #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; }


      a {font-size: 1.2rem;}
  }


</style>

@endsection



@section('content')

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


<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; font-size: 2em;  cursor: pointer; font-family: 'Open Sans', sans-serif;">i</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['videoURL'] }}" type="video/mp4">
      <!-- </iframe> -->
      Your browser does not support HTML5 video.
      </video>

      <p id="title">{{ $data['title'] }}</p><br/>
      <p id="price">£{{ $data['price'] }}</p><br/>
      <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">
                <h5>Placeholder</h5>
          </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(){
      // $('#splash').delay(100).fadeIn(800, function(){
      //     $('#splash').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