@extends('user')
@section('content')

@include('partials.breadcrumb')
<div class="price">
	<div class="container">
	<div class="row">
		<div class="col-md-8 offset-md-2">
				<div class="well">
					<h1 class="text-center">Stripe Payment</h1><br>

					<div class="row">
						<div class="col-md-8 offset-2">
							<div class="card-wrapper"></div>
						</div>
					</div>
					<br>


					<form role="form" id="payment-form" method="POST" action="{{ route('ipn.stripe')}}" >
						{{csrf_field()}}
						<input type="hidden" value="{{ $track }}" name="track">
						<div class="row">
							<div class="col-md-6">
									<label for="name">CARD NAME</label>
									<div class="input-group">
										<input
												type="text"
												class="form-control input-lg custom-input"
												name="name"
												placeholder="Card Name"
												autocomplete="off" autofocus
										/>
										<div class="input-group-prepend">
										<span class="input-group-text custom-input"><i class="fa fa-font"></i></span>
										</div>
									</div>

							</div>
							<div class="col-md-6">
									<label for="cardNumber">CARD NUMBER</label>
									<div class="input-group">
										<input
												type="tel"
												class="form-control input-lg custom-input"
												name="cardNumber"
												placeholder="Valid Card Number"
												autocomplete="off"
												required autofocus
										/>
										<div class="input-group-prepend">
										<span class="input-group-text custom-input"><i class="fa fa-credit-card"></i></span>
										</div>
									</div>
							</div>
						</div>
						<br>

						<div class="row">
							<div class="col-md-6">
									<label for="cardExpiry">EXPIRATION DATE</label>
									<input
											type="tel"
											class="form-control input-lg input-sz custom-input"
											name="cardExpiry"
											placeholder="MM / YYYY"
											autocomplete="off"
											required
									/>
							</div>
							<div class="col-md-6 pull-right">

									<label for="cardCVC">CVC CODE</label>
									<input
											type="tel"
											class="form-control input-lg input-sz custom-input"
											name="cardCVC"
											placeholder="CVC"
											autocomplete="off"
											required
									/>

							</div>
						</div>
						<br>
						<button class="btn btn-primary custom-btn btn-lg btn-block" type="submit"> PAY NOW </button>

					</form>

				</div>

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

@stop

@section('script')
<script type="text/javascript" src="{{ asset('assets/user/stripe/payvalid.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/user/stripe/paymin.js') }}"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="{{ asset('assets/user/stripe/payform.js') }}"></script>
<script type="text/javascript" src="https://rawgit.com/jessepollak/card/master/dist/card.js"></script>
<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>
@endsection