<?php
require_once("../../app/config.php");
$trx=$_GET['id'];
require_once('include/user_header.php');
require_once('include/user_navbar.php');
require_once('include/user_sidebar.php');
?>
<div class="content-wrapper">

      <!-- Page header -->
      <div class="page-header">
        <div class="page-header-content header-elements-md-inline">
        </div>
      </div>
<div class="content">
<div class="row">
    <div class="col-md-12">
      <!-- Basic layout-->
      <div class="card">
        <div class="card-header header-elements-inline">
          <h6 class="card-title font-weight-semibold">Stripe payment</h6>
              <div class="header-elements">
            </div>
        </div>
        <div class="card-body">
            <form action="../app/payment?id=ipnstripe" method="post" role="form" id="payment-form">
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">CARD NAME</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="name" placeholder="Card Name" autocomplete="off" autofocus required>
                        <input type="hidden" name="user_id" value="<?php echo $row['id'];?>"> 
                        <input type="hidden" name="track" value="<?php echo $id;?>"> 
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">CARD NUMBER</label>
                    <div class="col-lg-10">
                        <input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" autocomplete="off" autofocus required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">EXPIRATION DATE</label>
                    <div class="col-lg-10">
                        <input type="tel" class="form-control" name="cardExpiry" placeholder="MM / YYYY" autocomplete="off" autofocus required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">CVC CODE</label>
                    <div class="col-lg-10">
                        <input type="tel" class="form-control" name="cardCVC" placeholder="CVC" autocomplete="off" autofocus required>
                    </div>
                </div>                
              <div class="text-right">
                <button type="submit" class="btn bg-<?php echo $set['dashboard_color'];?>">Submit<i class="icon-paperplane ml-2"></i></button>
              </div>
            </form>
        </div>
      </div>
      <!-- /basic layout -->
      </div>
    </div>
  </div>
<?php require_once("include/user_footer.php"); ?>
<script>
(function ($) {
    $(document).ready(function () {
        var card = new Card({
            form: '#payment-form',
            container: '.card-wrapper',
            formSelectors: {
                numberInput: 'input[name="cardNumber"]',
                expiryInput: 'input[name="cardExpiry"]',
                cvcInput: 'input[name="cardCVC"]',
                nameInput: 'input[name="name"]'
            }
        });
    });
})(jQuery);
</script>