@extends('layouts.app')

@section('content')
<h2 class="pageTitle"><span>Lightbox Example</span></h2>

<form class="theForm" action="{{ route('process.payment') }}" method='post'>
    @csrf
  <div class="formInner">

  <div class='row'>
    <div class='col-md-6'>
        <div class="form-group">
            <label for='fname'>First Name</label> 
        <input type="text" id='fname' class="form-control" placeholder="First Name" name="fname" value="John" autofocus>
        </div>
    </div>
    <div class='col-md-6'>
        <div class="form-group">
        <label for='lname'>Last Name</label> 
        <input type="text" id='lname' class="form-control" placeholder="Last Name" name="lname" value="Smith">
        </div>
    </div>
  </div>
  <div class='row'>
    <div class='col-md-6'>
        <div class="form-group">
        <label for='saddress'>Address</label> 
        <input type="text" class="form-control" id='saddress' placeholder="Street Address" name="address1" value="123 Collect Js.">
        </div>
    </div>
    <div class='col-md-6'>
        <div class="form-group">
        <label for='city'>City</label> 
        <input type="text" class="form-control" id='city' placeholder="City" name="city" value="SAQ-A">
        </div>
    </div>
  </div>

  <div class='row'>
    <div class='col-md-6'>
    <div class="form-group">
    <label for='state'>State</label> 
      <input type="state" class="form-control" id='state' placeholder="State" name="state" value="IL">
    </div>
    </div>
    <div class='col-md-6'>
    <div class="form-group">
    <label for='zip'>Zip Code</label> 
      <input type="text" class="form-control" id='zip' placeholder="Zip code" name="zip" value="12345">
    </div>
    </div>
  </div>
  <input id='payment_token' name='payment_token' hidden>
  <input id='amount' name='amount' value='4.00' hidden>

  <input type="button" id="payButton" value="Pay Now" class="btn btn-primary btn-block">
  </div>
  

</form>

<div id="paymentTokenInfo"></div>

   
<script>
    // This prints out the contents of the payment token to the page.
document.addEventListener('DOMContentLoaded', function () {
  CollectJS.configure({
    'paymentType': 'cc',
    'callback': function (response) {
      document.getElementById("paymentTokenInfo").innerHTML =
        '<b>Payment Token:</b> ' + response.token +
        '<br><b>Card:</b> ' + response.card.number +
        '<br><b>BIN/EIN:</b> ' + response.card.bin +
        '<br><b>Expiration:</b> ' + response.card.exp +
        '<br><b>Hash:</b> ' + response.card.hash +
        '<br><b>Card Type:</b> ' + response.card.type +
        '<br><b>Check Account Name:</b> ' + response.check.name +
        '<br><b>Check Account Number:</b> ' + response.check.account +
        '<br><b>Check Account Hash:</b> ' + response.check.hash +
        '<br><b>Check Routing Number:</b> ' + response.check.aba;
        document.getElementById('payment_token').value == response.token;
    }
    document.getElementsByClassName('theForm').submit();
  });
});
</script>

@endsection