<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<!--Begin Checkout-->

<div class="container">
  <p class="help" style="color:#ffffff;">
    Please review your bill and pay </p>
  <div class="box card-panel z-depth-3">
    <div class="merchant">
      <img id="crickets" src="http://ishtyaqhabib.com/assets/images/forcodepen/cricketsCafe.png" />
      <h5 class="center-align">Crickets Café</h5>
      <p>Feb 10, 2016 9:36 PM</p>
    </div>
    <div class="invoice">
      <table class="highlight">
        <thead>
          <tr>
            <th>QTY</th>
            <th>ITEM</th>
            <th class="right-align">PRICE</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2</td>
            <td>Large Mocha Latte</td>
            <td class="right-align">$4.25</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Banana Nut Muffin</td>
            <td class="right-align">$2.00</td>
          </tr>
          <tr>
            <td></td>
            <td class="right-align">Tax</td>
            <td class="right-align">$0.50</td>
          </tr>
          <tr>
            <td></td>
            <td class="right-align bold">Total</td>
            <td class="right-align bold">$6.75</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="payment">
      <h5>Payment Information</h5>
      <div class="credit-card-box card-panel z-depth-2 animation-element slide-left">
        <div class="flip">
          <div class="front">
            <div class="logo">
              <img src="http://cdn.flaticon.com/svg/39/39134.svg" alt="" />
            </div>
            <div class="number input-field">
              <label for="card-number">Card Number</label>
              <input type="text" id="card-number" class="input-card-number" maxlength="4" />
              <input type="text" id="card-number-1" class="input-card-number" maxlength="4" />
              <input type="text" id="card-number-2" class="input-card-number" maxlength="4" />
              <input type="text" id="card-number-3" class="input-card-number" maxlength="4" />
            </div>
            <div class="cvv input-field">
              <label for="card-cvv">CVV</label>
              <input type="text" id="card-cvv" class="input-card-cvv" maxlength="3" />
            </div>
            <div class="card-holder input-field">
              <label for="name">Card Holder</label>
              <input type="text" name="name" id="name">
            </div>

            <div class="card-expiration-date input-field">
              <select id="month">
                <option></option>
          <option>Jan</option>
          <option>Feb</option>
          <option>Mar</option>
          <option>Apr</option>
          <option>May</option>
          <option>Jun</option>
          <option>Jul</option>
          <option>Aug</option>
          <option>Sep</option>
          <option>Oct</option>
          <option>Nov</option>
          <option>Dec</option>
              </select>
              <select>
                          <option></option>
          <option>2016</option>
          <option>2017</option>
          <option>2018</option>
          <option>2019</option>
          <option>2020</option>
          <option>2021</option>
          <option>2022</option>
          <option>2023</option>
          <option>2024</option>
          <option>2025</option>
              </select>
              <label>Expires</label>
            </div>

          </div>

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

    <div class="button checkout row">
      <button class="col s12 btn-large green btn waves-effect waves-dark register"><span>Checkout</span> <i class="fa fa-check"></i></button>
    </div>
  </div>

</div>

<script>
  $(document).ready(function() {
        $('select').material_select();
    });
</script>

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

body {
  width:100%;
    background-image:url(https://i.imgur.com/3jhku0g.gif);
  background-size:cover;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  position: absolute;
  /*     top: 50%; */
  left: 50%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transition: 1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
  -moz-transition: 1s all ease-in-out;
}

.box {
  display: flex;
  flex-direction: column;
}

.card-panel {
  padding-bottom: 0px;
}

#crickets {
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

table td:nth-child(1) {
  width: 34px;
}

table td:nth-child(3) {
  width: 65px;
}

.bold {
  font-weight: bold;
  font-size: 20px;
}

.credit-card-box {
  width: 400px;
  height: 280px;
  background: linear-gradient(135deg, #03A9F4, #1976D2);
  border-radius: 15px;
  color: #fff !important;
  text-shadow: 0 1px 1px hsla(0, 0, 0, 0.3);
}

.input-field.cvv,
.input-field.number,
.input-field.card-holder,
.input-field.card-expiration-date {
  display: inline-block;
}

.input-field.cvv {
  top: -6px;
  margin-left: 6px !important;
}

.input-field label {
  color: #fff;
  left: 0rem;
}

.select-wrapper+label {
  top: -1.8rem;
}

.select-wrapper span.caret {
  top: 2px;
  color: #fff;
}

input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search],
textarea.materialize-textarea,
.select-wrapper input.select-dropdown {
  border-bottom: 1px solid #fff;
}

.input-card-number {
  font-size: 30px !important;
  width: 70px !important;
  display: inline-block;
  margin-right: 5px !important;
}

.input-card-cvv {
  width: 30px !important;
  display: inline-block;
}

.card-holder {
  width: 150px !important;
  margin-right: 10px;
}

.card-expiration-date {
  display: inline !important;
}

.card-expiration-date .select-wrapper,
.card-expiration-date input {
  display: inline !important;
  width: 50px !important;
}

.card-expiration-date .select-wrapper {
  margin-right: 5px;
}

.card-expiration-date ul,
.card-expiration-date li span {
  width: 50px !important;
}

.logo img {
  position: relative;
  top: 0px;
  left: 290px;
  width: 60px;
  filter: invert(1);
  -moz-filter: invert(1);
  -webkit-filter: invert(1);
}

.checkout {
  margin: 0px;
}

.btn-large {
  margin: 10px 0%;
  /*   width: 100%; */
}

.help {
  text-align: center;
}

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, -10px, 100px);
  -webkit-transform: translate3d(100px, -10px, 100px);
  -o-transform: translate(100px, -10px);
  -ms-transform: translate(100px, -10px);
  transform: translate3d(100px, -10px, 100px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.credit-card-box.animation-element:hover {
    -moz-transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
  -moz-transform: translate3d(0px, -2px, 0px);
  -webkit-transform: translate3d(0px, -2px, 0px);
  -o-transform: translate(0px, -2px);
  -ms-transform: translate(0px, -2px);
  transform: translate3d(0px, -2px, 0px);
  box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);

//Does fluid credit card number input
$('.input-card-number').on('keyup change', function() {
  t = $(this);
  
  //focuses next input when the fourth number is put in
  if (t.val().length > 3) {
    t.next().focus();
  }
});

var $animation_elements = $('.animation-element');
var $window = $(window);

//On scroll into view animatior
//Used to drop credit card on receipt
function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');