<div class="row">
  <div class="col-md-12">
    <div class="block">
      <div class="block-title">
        <h2>Donation Form</h2>
      </div>

      <!-- The PayPal Donation Button -->

      <form id="myForm" class="form-horizontal form-bordered" action="<?php echo  SITE_URL; ?>/index.php/Donate/ipn" method="POST">
        <!-- <input type="text" id="amountInDollars" /> -->
        <input type="hidden" id="stripeToken" name="stripeToken" />
        <input type="hidden" id="stripeEmail" name="stripeEmail" />
        <input type="hidden" id="amountInCents" name="amountInCents" />
        <!-- <input type="text" id="pilotID" name="pilotID" placeholder="Pilot ID" /> -->




    <!-- The amount of the transaction: -->

    <div class="form-group">
      <div class="alert alert-info">
        <Strong>Attention</strong>
          <br>
          Please verify that the infomation you provide is accurate, also please note that all donations are accepted in the form of USD.
      </div>
      <label class="col-md-3 control-label" for="example-text-input">Donation Amount<br>
      </label>
      <div class="input-group col-md-3 ">
        <span class="input-group-addon"><i class="fa fa-usd"></i></span>
        <input type="text" id="amountInDollars" name="amount" class="form-control" placeholder="50">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-3 control-label" for="example-text-input">Pilot ID<br>
      </label>
      <div class="input-group col-md-3 ">
        <input class="form-control" type="text" id="pilotid" name="pilotid" value="<?php echo Auth::$userinfo->code.''.Auth::$userinfo->pilotid; ?>" disabled/>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-3 control-label" for="example-text-input">Pilot Name<br>
      </label>
      <div class="col-md-3  input-group">
        <input type="text" id="pilotname" name="pilotname" value="<?php echo Auth::$userinfo->firstname.' '.Auth::$userinfo->lastname; ?>" class="form-control" disabled>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-3 control-label" for="example-text-input">Message <br>
      </label>
      <div class="input-group col-md-3 ">
        <textarea id="message" name="message" rows="9" class="form-control" placeholder="What has inspired you to donate.."></textarea>
      </div>
    </div>

    <div class="form-group">
      <button class="btn btn-default btn-md" id="customButton">Donate via &nbsp;<img src="https://cdn.freebiesupply.com/logos/large/2x/stripe-4-logo-png-transparent.png" style="width: 4%; height: auto;" /> </button>
    </div>


      </form>
    </div>
  </div>
</div>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh', // REPLACE THE KEY HERE! iT IS CURRENTLY A TEST KEY
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  token: function(token) {
    $("#stripeToken").val(token.id);
    $("#stripeEmail").val(token.email);
    $("#amountInCents").val(Math.floor($("#amountInDollars").val() * 100));
    $("#myForm").submit();
  }
});

$('#customButton').on('click', function(e) {
  var amountInCents = Math.floor($("#amountInDollars").val() * 100);
  var displayAmount = parseFloat(Math.floor($("#amountInDollars").val() * 100) / 100).toFixed(2);
  // Open Checkout with further options
  handler.open({
    name: '<?php echo SITE_NAME; ?>',
    description: 'Donation amount of $' + displayAmount + ' /-',
    amount: amountInCents,
  });
  e.preventDefault();
});

// Close Checkout on page navigation
$(window).on('popstate', function() {
  handler.close();
});

</script>
