@extends('welcome')

@section('content')
<style>
.arrow-pay{
    position: absolute; 
    left: 0;
    top: 50%;
    margin-left: 50px;
    margin-top: -20px;
	}
	.arrow-pay img{width:100px;}
	#payment_iframe
    { 
	    height:581px;
		border:none; 
		background:#fff;
		width:100%;
		margin-top:40px;
		
    } 
	.success_pro{
		width:100%;
		float:left;
		text-align:center;
		margin: 20px 0px;
	}
	.success_pro img{width:100px;}
	.payUser{width:100%;display:block;font-family: 'Montserrat', sans-serif;position:relative;margin-top: 10px;}
	.patInr{
			font-size: 30px;
			color: rgb(0, 184, 248);;
			font-weight: bold;
			display: block;
		}
		.payUser em{color: #757474;}
div.main-container {
    overflow: inherit !important;
}
</style>
        <div class="switchable bg--secondary space--md backgroundBdy" style="padding: 30px 0px;"> 
			<div class="container">
			    <div class="row"> 
				    <div class="col-md-12">
					    <h2 class="title-head pdB-00" style="color: #223367;text-align: center;"> Pay Amount with<span style="color:rgb(0, 184, 248);;">  Paytm</span></h2>
						<div class="seperator">
							<span><i class="fa fa-clipboard"></i></span>
						</div> 
					
					</div>				
			        <div class="col-md-12"> 
					
					    <h2 style="font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 22px;margin-bottom:20px;text-align:center;">You have selected <span style="color:rgb(0, 184, 248);;">  
						@if(base64_decode($params->plan_id) ==0) 
						<b>6 Months</b>
						@else
							<b>12 Months</b>
						@endif
						</span> PLAN </h2>
						
						<div class="success_pro">
					       <!---<img src="{{ URL::asset('/images/payment-successful.png') }}" alt="">-->
					       <img src="{{ URL::asset('/images/img_inr.png') }}" alt="">
						   <span class="payUser"><em> You will be paying </em><span class="patInr"><i class="fa fa-inr" aria-hidden="true"></i> 
						   @if(base64_decode($params->plan_id) ==0) 
						   5999/-
						   @else
							   11999/-
						   @endif
						   </span></span>
						</div>
						<p class="cntpricing" style="text-align: justify;margin-bottom:24px;">We take all measures reasonably necessary to protect User Lorem Ipsum is simply dummy text of the printing and typesetting industry.   only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.  					
						</p>

				<div class="col-sm-4 col-md-offset-4">
					<div class="cntpricing">
						@if($params->id !='')   
								<form id="transactionForm" action="{{route('updatePlanRequestSend')}}" method="post"  data-toggle="validator" novalidate="true">
								{{ csrf_field() }}
										@if (count($errors) > 0)
										<div class="alert alert-danger">
											<strong>Whoops!</strong> There were some problems with your input.								
													@foreach ($errors->all() as $error)
														<p>{{ $error }}</p>
													@endforeach								
										</div>
										@endif

										@if(session()->has('message'))
											<div class="alert alert-success">
												{{ session()->get('message') }}
											</div>
										@endif
								 <input type="hidden" name="id" value="{{base64_decode($params->id)}}" >
									<label>Enter Order Id After Paying on Paytm</label>
									<div class="form-group has-feedback">
										<input type="text" name="tx_id"  autocomplete="off" class="form-control" placeholder="Enter Transaction Id " id="" required data-error="Please enter your Transaction id"> 
									</div> 
		 
								  <div class="row"> 
									<div class="col-xs-4 pull-right">
									  <button type="submit" class="btn btn-primary btn-block btn-flat" style="background:rgb(0, 184, 248);;border:rgb(0, 184, 248);">Submit</button>
									</div> 
								  </div>
								</form> 
							@endif
					</div>
                </div>					
					</div> 
									
			    </div>
			</div>
			
			        <div class="clickClass" style="text-align:center; position: relative;">   
                        <!---<span class="arrow-pay"><img src="{{ URL::asset('/images/right-arrow.png') }}" alt=""> </span>					
						 <img src="{{ URL::asset('/images/paytm-M-frame.png') }}" alt=""> --->
						 
						 
						<iframe id="payment_iframe" src="https://securegw.paytm.in/link/84387/LL_1182613">
						<style>
						.main-container {overflow: inherit !important;}
						</style>
						</iframe>
						

					</div>	
			
		</div>	
<script>

$(document).ready(function(){
	var iframe = $('#payment_iframe');
	var iframe_select = iframe.contents().find('#linkPaySubmit'); 
	iframe_select.click(function() {
  console.log('change callback triggered!');
});
	$('#transactionForm').validate({ // initialize the plugin
        rules: {
            tx_id: {
                required: true
            },
        }
    });
	var iframe=$('#payment_iframe');
	
	$(document).on('click','#linkPaySubmit',function(){
		alert(iframe.html());
	});
	iframe.load(function(){ 
		iframe.contents().find( "div.main-container" ).css( "overflow", "inherit !important" );
		//iframe.contents().find('input#tAmount').val(5999); 
		//iframe.contents().find('#mobileNumber').val('5999'); 
	})
});
</script>
 

 
@endsection