<?php
/**
 * The template used for displaying page content
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header <?php if (! has_post_thumbnail()){ echo "margin-top-title"; } ?>">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header><!-- .entry-header -->

	<?php //twentysixteen_post_thumbnail(); ?>

	<div class="entry-content">
		<?php if(isset($_SESSION['error']) ){
			echo $_SESSION['error'] ;
			unset($_SESSION['error'] );
		} ?>
		<form action="" method="post" id='donateForm'>
			<div class="form-group">
				<label for="" class="control-label">Select Membership</label>
				<select name="donner_membership_type" id="donner_membership_type" class='form-control'>
					<option value="Member for life: $25" data-amount='2500'>Member for life: $25</option>
					<option value="Member + Water Advocate: $50" data-amount='5000'>Member + Water Advocate: $50</option>
					<option value="Member + Ecosystem Steward: $100" data-amount='10000'>Member + Ecosystem Steward: $100</option>
					<option value="Member + Earth Day All-Star: $365" data-amount='36500'>Member + Earth Day All-Star: $365</option>
					<option value="Member + Program Supporter: $500" data-amount='50000'>Member + Program Supporter: $500</option>
					<option value="Member + Sustainer: $1000" data-amount='100000'>Member + Sustainer: $1000</option>
				</select>
			</div>
			<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
				<label for="" class="control-label">Name</label>
				<input type="text" class="form-control" name="donner_name" required>
			</div>
			<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12"><label for="" class="control-label">Address</label><textarea  class="form-control" name='donner_address'></textarea>
			</div>

			<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
				<label for="" class="control-label">City</label>
				<input type="text" class="form-control" name='donner_city'>
			</div>
			<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
				<label for="" class="control-label">State</label>
				<input type="text" class="form-control" name='donner_state'>
			</div>
			<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
				<label for="" class="control-label">Zipcode</label>
				<input type="text" class="form-control" name='donner_zipcode'>
			</div>
			<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
				<label for="" class="control-label">Email</label>
				<input type="text" class="form-control" name='donner_email' id='donner_email'>
			</div>
			<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
				<label for="" class="control-label">Phone</label>
				<input type="text" class="form-control" name='donner_phone'>
			</div>
			<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<label for="" class="control-label">Message</label>
				<textarea  class="form-control" name='donner_message'></textarea>
			</div>
			<input type="hidden" id="stripeToken" name="stripeToken"/>
			<input type="hidden" id="stripeEmail" name="stripeEmail"/>
		<!-- <script
		src="https://checkout.stripe.com/checkout.js" class="stripe-button"
		data-key="pk_test_7RN7jkMYENGzrlgcBZwam2Mk"
		data-amount="999"
		data-name="Our Children's Earth"
		data-description="Widget"
		data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
		data-locale="auto">
	</script> -->


	<script src="https://checkout.stripe.com/checkout.js"></script>
	<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
	<button id="customButton" class='btn btn-primary'>DONATE</button>
	</div>

	<script>
		(function($){
			var handler = StripeCheckout.configure({
				key: 'pk_test_7RN7jkMYENGzrlgcBZwam2Mk',
				image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
				locale: 'auto',
				token: function(token) {
					document.getElementById("stripeToken").value = token.id;
					document.getElementById("stripeEmail").value = token.email;
					document.getElementById("donateForm").submit();
				}
			});
			var amountEl = document.getElementById('donner_membership_type');


// document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:

  // handler.open({
  //   name: 'Our Children\'s Earth',
  //   description: amountEl.value,
  //   amount: amountEl.getAttribute('data-amount'),
  //   email: document.getElementById('donner_email').value
  // });
  // e.preventDefault();
// });
// 
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
	handler.close();
});
$(function(){
	$("#donateForm").validate({
		rules:{
			donner_name:'required',
			donner_address:'required',
			donner_city:'required',
			donner_state:'required',
			donner_zipcode:'required',
			donner_email:{
				'required':true,
				'email':true
			},
			donner_phone:'required',
			donner_message:'required'			
		},
		errorPlacement: function(error, element) {
		 //just nothing, empty
		},
		submitHandler:function(form){
			handler.open({
				name: 'Our Children\'s Earth',
				description: amountEl.value,
				amount: amountEl.getAttribute('data-amount'),
				email: document.getElementById('donner_email').value
			});
		}
	});
})

}(jQuery))

</script>

</form>
<?php
wp_link_pages( array(
	'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
	'after'       => '</div>',
	'link_before' => '<span>',
	'link_after'  => '</span>',
	'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
	'separator'   => '<span class="screen-reader-text">, </span>',
	) );
	?>
</div><!-- .entry-content -->

<?php
edit_post_link(
	sprintf(
		/* translators: %s: Name of current post */
		__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
		get_the_title()
		),
	'<footer class="entry-footer"><span class="edit-link">',
	'</span></footer><!-- .entry-footer -->'
	);
	?>

</article><!-- #post-## -->

