<div class="modal fade backdrop" data-backdrop="false" id="razorpay" 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('paypal_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/razorpay.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="razorpay_login">
       	<!-- userLogin.php -->
      </div>
	      <div class="paymentFormarea" style="display:none;">
          <?php if(is_demo()==0): ?>
  	      	<button id="rzp-button1" class="btn btn-success"><?= lang('pay_now'); ?> (<?=  my_currency($service_settings['country_id'],'currency_symbol');?> <?= isset($service['price'])? round($service['price']):0;?> )</button>
          <?php endif;?>
	      </div>
       </div>	
      </div>
      
    </div>
  </div>
</div>
<a href="<?php echo base_url() ?>" id="base_url"></a>
<a href="<?= $this->security->get_csrf_hash(); ?>" id="csrf_value"></a>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
	var base_url = $('#base_url').attr('href');
	var csrf_value = $('#csrf_value').attr('href');
	var amount = `<?= isset($service['price'])? round($service['price']):0;?>`;
	var product_id = `<?= isset($service['id'])?$service['id']:0;?>`;
	var username = `<?=  $slug;?>`;
	var totalAmount =  amount*100;
	var options = {
    "key": `<?= $razorpay['key_id'] ;?>`, // Enter the Key ID generated from the Dashboard
    "amount": `${totalAmount}`, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": `<?=  my_currency($service_settings['country_id'],'currency_code') ;?>`,
    "name": `<?= $service['title'] ;?>`,
    "description": "",
    "image": `<?= !empty($user['thumb'])?base_url($user['thumb']):'' ;?>`,
    "csrf_test_name": "csrf_value",
    //"order_id": "15", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "callback_url": `${base_url}service/razorpay_payment`,
    "prefill": {
    	"name": "",
    	"email": "",
    	"contact": ""
    },
    "notes": {
    	"address": ""
    },
    "theme": {
    	"color": "#3399cc"
    },
    "handler": function (response){
    	$.ajax({
    		url: base_url + 'service/razorpay_payment',
    		type: 'post',
    		dataType: 'json',
    		data: {
    			razorpay_payment_id: response.razorpay_payment_id , totalAmount : totalAmount ,product_id : product_id,csrf_test_name: csrf_value, username : username
    		}, 
    		success: function (json) {
    			window.location.href = `${json.url}`;
    		}
    	});
	},
};


var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
	rzp1.open();
	e.preventDefault();
}
</script>