<div class="modal fade backdrop" data-backdrop="false" id="stripe" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><?= lang('stripe_payment'); ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <div class="paypal_payment">
       	<div class="paypalPaymentarea">
       		<img src="<?= base_url('assets/images/payout/stripe.png') ;?>" alt="">
       		<div class="paypalPaymentDetails">
       			<h4><?= !empty(lang('service_name'))?lang('service_name'):"service name" ;?> : <?= $service['title'] ;?></h4>
       			<div class="sellerInfo">
       				<div class="user_info_details">
       					<div class="left_user_info">
       						<img src="<?= base_url($user['thumb']) ;?>" alt="" />
       						<div class="">
       							<h5><?= !empty($user['name'])?$user['name']:$user['username'] ;?></h5>
       							<p><?= $user['designation'] ;?></p>
       						</div>
       					</div>
       					<div class="right_user_info">
       						<a href="<?= base_url($slug) ;?>"><?= !empty(lang('contact'))?lang('contact'):"Contact";?></a>
       					</div>
       				</div>
       			</div>
       		</div>
       	</div>
       <div class="serviceUserForm" id="stripe_login">
       	
       	<!-- userLogin.php -->
      </div>



      <div class="paymentFormarea" style="display:none;">
      	 <div class="">
	          <div class="card  payment_card_stripe">
	              <div class="card-header">
	                  <h4><?= !empty(lang('stripe'))?lang('stripe'):"stripe payment gateway"?></h4>
	              </div>
	              <form role="form" action="<?= base_url('service/stripe_payment');?>" method="post" class="require-validation" data-cc-on-file="false" id="paymentFrm">
	                  <!-- csrf -->
	                   <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
	                  <!-- csrf -->
	                  <div class="card-body">
	                      <div class='col-md-12 error form-group payment-errors'>
	                          
	                      </div>

	                      <div class="row">
	                          <div class="card_img">
	                              <div class="payment_card_img">
	                                  <img class="img-responsive pull-right" src="<?= base_url('assets/images/payment.png') ;?>">
	                              </div>
	                          </div>
	                      </div>
	                     <div class="row">
	                             <div class='col-md-12 form-group required'>
	                              <label class='control-label'>Name On Card</label>
	                              <input class='form-control' name="stripe_name" id="stripe-name" size='4' type='text' placeholder="Your name on card">
	                          </div>
	                     </div>
	                     <div class="row">
	                         <div class='col-md-12 form-group required'>
	                              <label class='control-label'>Card Number</label>
	                              <input autocomplete='off' name="stripe_cart_no" class='form-control card-number' size='20' type='text' placeholder="xxxx xxxx xxxx xxxx"  id="stripe-card-number" maxlength="19">
	                          </div>
	                     </div>
	                     <div class="row">
	                         <div class='col-xs-12 col-md-4 form-group expiration required p-r-5'>
	                              <label class='control-label'>Month</label>
	                              <input class='form-control' name="stripe_month" id="stripe-card-expiry-month" placeholder='MM' size='2' type='text' maxlength="2">
	                          </div>

	                          <div class='col-xs-12 col-md-4 form-group expiration required p-l-5'>
	                              <label class='control-label'>Year</label>
	                              <input class='form-control' name="stripe_year" id="stripe-card-expiry-year" placeholder='YYYY' size='4' type='text' maxlength="4">
	                          </div>

	                          <div class='col-xs-12 col-md-4 form-group cvc required'>
	                              <label class='control-label'>CVC</label>
	                               <input autocomplete='off'  name="cvc" class='form-control' id="stripe-card-cvc" placeholder='ex. 311' size='4' type='text'>
	                          </div>
	                     </div>


	                  </div><!-- card-body -->
	                  <div class="card-footer">
	                    <input type="hidden" name="amount" value="<?= isset($service['price'])? number_format($service['price']):0;?>">
	                    <input type="hidden" name="username" value="<?= isset($slug)?$slug:"";?>">
	                    <input type="hidden" name="service_id" value="<?= isset($service['id'])?$service['id']:0;?>">
	                    <?php if(is_demo()==0): ?>        
	                      <button class="btn btn-primary btn-lg btn-block" id="payBtn" type="submit" data-publish-key="<?php echo $stripe['public_key'] ?>"><?= !empty(lang('pay_now'))?lang('pay_now'):"Pay Now "?>(<?=  my_currency($service_settings['country_id'],'currency_symbol');?> <?= isset($service['price'])?$service['price']:''; ?>)</button>
	                    <?php endif;?>
	                  </div>
	              </form>
	          </div>
	      </div>
      	</div><!-- paymentFormarea -->

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

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>


<script>
$(function(){
	var public_key = $('#payBtn').data('publish-key');
	if(public_key){
	//set your publishable key
	  Stripe.setPublishableKey(public_key);
	  //callback to handle the response from stripe
	  	function stripeResponseHandler(status, response) {
	      if (response.error) {
	          //enable the submit button
	          $('#payBtn').removeAttr("disabled");
	          //display the errors on the form
	          $(".payment-errors").html(`<div class="single_alert alert alert-danger alert-dismissible">
	            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	              <div class="d_flex_alert">
	                  <h4><i class="icon fas fa-warning"></i> Warning!</h4>
	                  <div class="double_text">
	                    <p>${response.error.message}</p>
	                  </div>
	                </div>
	            </div>`);
	      } else {
	          var form$ = $("#paymentFrm");
	          //get token id
	          var token = response['id'];
	          //insert the token into the form
	          form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
	          //submit form to the server
	          form$.get(0).submit();
	      }
  		}
	  	$(document).ready(function() {

	      //on form submit
	      $("#paymentFrm").submit(function(event) {
	          //disable the submit button to prevent repeated clicks
	          $('#payBtn').attr("disabled", "disabled");
	          
	          //create single-use token to charge the user
	          Stripe.createToken({
	              number: $('#stripe-card-number').val(),
	              cvc: $('#stripe-card-cvc').val(),
	              exp_month: $('#stripe-card-expiry-month').val(),
	              exp_year: $('#stripe-card-expiry-year').val()
	          }, stripeResponseHandler);
	          //submit from callback
	          return false;
	      });
	  	});  

	}

});
</script>