@extends('layouts.landing')
@section('styles')
	<script src="/assets/css/stripe-checkout.css"></script>
	<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
@endsection

@section('content')
 
	<!-- Intro Courses -->
	<section class="intro-section secondary-bg pt-94 pb-100 md-pt-64 md-pb-70">
		<div class="container"> 
			<!-- Content Column -->
			<div class="col-lg-8 md-mb-50 mt-64 bg-white"> 
				<!-- Cource Overview -->
				<div id="rs-checkout" class="text-center rs-checkout orange-color pt-5 pb-100 md-pt-70 md-pb-70"> 
					<h4 class="text-gray-600">Thank you for enrolling to</h4> 
					<h4 class="text-gray-600"> {!! $course->name !!}</h4> 
					<p>Please proceed to pay  <strong>{{ config('app.currency') }} {{ number_format($courseEnrollment->price) }}</strong> Inorder to secure your admission.</p> 
					<hr />
					<h4>Pay by credit/debit card</h4> 
					<div class="card-body p-3 alert-primary mx-auto mb-4" id="payment-form" style="max-width:500px;">
						<h6 class="text-success">Secure payment via stripe</h6>
						<form class="form-horizontal"  method="post">
							@php
								$stripe_account_key = '';
								$stripeAccount = App\Models\PaymentGatewayAccount::whereHas('paymentGateway', function($query){ $query->where('code', 'stripe'); })->orderBy('rank', 'ASC')->first();
								if($stripeAccount){
									$stripe_account_key = $stripeAccount->key;
								}
							@endphp					
							@csrf 
							<div class="row mt-4 mx-0 my-2"> 
								<div class="col-sm-12"> 
									<label class="checkbox checkbox-outline checkbox-success">
										<input class="checkbox-spin terms-check" type="checkbox" name="terms" id="terms" required>	 
										<span></span>&nbsp; I agree to {{ config('app.name') }} <a href="/terms" target="_blank" >terms and conditions</a>
									</label>       
								</div>     
							</div>						
							<div class="row mb-4 mx-0">   
								<div class="col-md-12">  
									<label class="col-form-label col-sm-12" for="card-element">*Credit or debit card</label>
									<input type="hidden" id="p_key" name="p_key" value="{{ $stripe_account_key }}">
									<div class="col-12 py-3 bg-white" id="card-element">
									  <!-- A Stripe Element will be inserted here. --> 
										<h5 class="text-center text-success">
											<i class="fa fa-spinner fa-spin"></i> Connecting to secure gateway
										</h5>
									</div> 
									<!-- Used to display form errors. -->
									<div id="card-errors" class="signal-red" role="alert"></div> 
								</div> 
							</div>
							<div class="row mt-4 mx-0 my-4"> 
								<div class="col-sm-12">
									<label class="checkbox checkbox-outline checkbox-success">
										<input class="checkbox-spin subscribe-check" type="checkbox" name="subscribe" id="subscribe" checked >	 
									  <span></span>&nbsp; Automatically charge this card for subsequent payments
									</label>   
								</div>     
							</div>						
							<div class="form-group row"> 
								<div class="col-sm-12 text-center">
									<div class="col-sm-12 text-white mx-0 my-2 rounded" style="display:none" id="error-display"></div>	
									<button type="button" class="mx-3 btn btn-sm btn-success" id="pay-button"  
										data-url="" data-redirect="">
										<i class="fa fa-cc-stripe fa-fw"></i> Pay  Now
									</button>  
								</div>
							</div>					 
						</form>
					</div>  					
					<h4>Other Methods of Payment</h4>
					<ul><strong>a). Bank Deposit</strong>
						<li>{{ config('app.name') }} A/C no. 1034969895 KCB Bank.</li> 
					</ul>
					<ul class="mt-4"><strong>b). M-PESA</strong>
						<li>Paybill no. 9989663. A/C: Student's Full name.</li> 
					</ul>
				</div> 
			</div>               
		</div>
	</section>
	<!-- End intro Courses -->
 
@endsection

@section('scripts')
	<script src="/js/stripe-checkout.js?"></script>
@endsection