<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Subscrition Page</title>
	<script src= 
	"https://code.jquery.com/jquery-3.7.1.min.js"
	            integrity= 
	"sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
	            crossorigin="anonymous"> 
	        </script> 
	<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
	<div class="container">
		<div class="row" style="margin: 100px; padding: 20px; border: 1px solid black;">
			<div id="card-element"></div>
			<div id="card-errors" style="color: red;"></div>
			<button id="submitcard" style="margin: 20px; padding: 30px; float: right; background-color: green">Save</button>
		</div>
	</div>

	<script type="text/javascript">
		if (window.Stripe) {

			var stripe_instant = Stripe("{{ env('STRIPE_PUBLIC_KEY')}}");

			// create stripe instant
			var elements = stripe_instant.elements();

			var card = elements.create('card', {
				hidePostalCode: true
			});

			card.mount('#card-element');

			card.addEventListener('change', function (event) {
				var displayError = document.getElementById('card-errors');
				if(event.error) {
					displayError.textContent = event.error.message;
 				}else{
 					displayError.textContent = '';
 				}
			})

			var cardsubmit = document.getElementById('submitcard');

			cardsubmit.addEventListener('click', function(evn){
				stripe_instant.createToken(card).then(function(result){
					if(result.error){
						var displayErrors = document.getElementById('card-errors');
						displayErrors.textContent = result.error.message;	
					}else{
						console.log(result);
						createSubscription(result.token)
					}
				})
			})

			function createSubscription(token){
				$.ajax({
					url: "{{ route('create_customer')}}",
					type: "POST",
					data: { data:token, _token:"{{ csrf_token() }}" },
					success: function(response){
						if(response.success){

						}else{
							alert("error in cards")
						}
					}
				})
			}
		}
	</script>

</body>
</html>