@extends('welcome')

@section('content')
<style>
.login-box, .register-box {
    width: 360px;
    margin: 11% auto;
}
button.close {
    background: #f36d21 none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-size: 22px;
    height: 35px;
    opacity: 1;
    position: absolute;
    right: 90px;
    top: -19px;
    width: 35px;
    z-index: 9999;
    color: #fff !important;
    outline: none;
    text-shadow: none;
    font-size: 18px;
    z-index: 9999999;
    background: #158cbb !important;
    opacity: 1;
}
button.close:hover{
	opacity: 1;
	background: #158cbb !important;
	color: #fff !important;
}
</style>
<section class="switchable bg--secondary space--md backgroundBdy"> 
			<div class="container">
			    <div class="row">
				    <div class="col-md-12"> 
					    <h2 class="title-head pdB-00">Simple<span>  plans for everyone </span></h2>
						<div class="seperator">
							<span><i class="fa fa-clipboard"></i></span>
						</div>
						
					     	<p class="cntpricing mrB50" style="text-align: justify;">We take all measures reasonably necessary to protect User Personal
								Information from unauthorized access, alteration, or destruction; maintain data
								accuracy, and help ensure the appropriate use of User Personal Information. We
								follow generally accepted industry standards to protect the personal
								information submitted to us, both during transmission and once we receive it.
								No method of transmission, or method of electronic storage, is 100% secure.  	
                                <span class="imhholder" style="margin: 20px 0px 20px 0px; float: left; width: 100%;"><img src="{{ URL::asset('/images/diwali-offer.png') }}" alt="" />		</span>						
							</p>
					
					</div>
			        <div class="col-md-12 col-md-offset-3" style="clear:both;">   
  					    <div class="row clearfix">
					        <div class="col-md-3">
								<div class="subscriptionHoldr">
									<div class="item">
										<div class="sg-package">
											<div class="sg-package__header sg-target-sh5">
												<h4>6 Months<span> PLAN</span></h4>
												<span>Starting at <b>₹ 5999/-</b> <br>GST Included </br></span>
											</div>
											<div class="sg-package__specs">
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-rupee"></i><span>Price</span>
													</div>
													<div>
														<span class="sg-boxed">₹ 5999/- </span>
													</div>
												</div>
												
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-rupee"></i><span>GST</span>
													</div>
													<div>
														<span>18%</span>
													</div>
												</div>												
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-clock-o"></i><span> Tenure</span>
													</div>
													<div>
														<span>6 Months</span>
													</div>
												</div>
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-circle-o-notch fa-spin"></i><span>Updates</span>
													</div>
													<div>
														<span><b>1 Updates</b></span>
													</div>
												</div> 
												<div class="sg-action">
													<a href="javascript:void(0);" target="_blank" data-toggle="modal" data-target="#myModal"class="sg-button sg-button--darkblue plan_button" data-val="0">Buy Now!</a>
												</div>
											</div>
										</div>
									</div>
								</div> 
							</div>
							
					        <div class="col-md-3">
								<div class="owl-item active">
									<div class="item">
										<div class="sg-package">
											<div class="sg-package__header sg-target-sh5">
												<h4>1 Year<span> PLAN</span></h4>
												<span>Starting at <b>₹ 11999/-</b> <br> GST Included </br></span>
											</div>
											<div class="sg-package__specs">
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-rupee"></i><span>Price</span>
													</div>
													<div>
														<span class="sg-boxed">₹  11999/- </span>
													</div>
												</div>
												
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-rupee"></i><span>GST</span>
													</div>
													<div>
														<span>18% </span>
													</div>
												</div>
												
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-clock-o"></i><span>Tenure</span>
													</div>
													<div>
														<span>12 Months</span>
													</div>
												</div>
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-circle-o-notch fa-spin"></i><span>Updates</span>
													</div>
													<div>
														<span><b> 2 Updates</b></span>
													</div>
												</div> 
												<div class="sg-action">
													<a href="javascript:void(0);" target="_blank" data-toggle="modal" data-target="#myModal"class="sg-button sg-button--darkblue plan_button" data-val="1">Buy Now!</a>
													 
												</div>
											</div>
										</div>
									</div>
								</div> 
							</div>						
					    </div>
					</div>
			    </div>
			</div>
		</section>	
		
		<!----MODEL PAYTM PAYMENT --->   
		  <!-- Modal -->
		  <div class="modal fade" id="myModal" role="dialog">
			<div class="modal-dialog">
			
			  <!-- Modal content-->
			  <div class="modal-content1"> 
				  <button type="button" class="close" data-dismiss="modal">&times;</button> 
				<div class="modal-body1">

					<div class="login-box">
					  <div class="login-logo" style="background: #000;margin-bottom:0px;">
						<a class="imgLogo" href="/">
						   <img src="{{ URL::asset('/images/BL.png') }}" alt="">
						</a>
					  </div>
					  <!-- /.login-logo -->
					  <div class="login-box-body">
						<p class="login-box-msg">Fill out below fields</p>

						<form id="planForm" action="{{route('planRequestSend')}}" 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="plan_id" id="plan_id" >
						 <input type="hidden" name="plan_value" id="plan_value" >
						 <input type="hidden" name="session_id" id="session_id" value="{{Session::getId()}}">
						    <div class="form-group has-feedback">
							    <input type="text" name="name"  autocomplete="off" class="form-control" placeholder="Name" id="" required data-error="Please enter your name"> 
						    </div> 
							
						    <div class="form-group has-feedback">
							    <input type="text" name="email"  autocomplete="off" class="form-control" placeholder="Email" id="" required data-error="Please enter your email"> 
						    </div> 

						    <div class="form-group has-feedback">
							    <input type="text" name="phone" autocomplete="off" class="form-control" placeholder="Phone" id="" required data-error="Please enter your phone"> 
						    </div> 							
 
						    <div class="form-group has-feedback">  
								<textarea style="padding-right: 12px;" placeholder="Message :-  I want 6 Months PLAN or 12 Months PLAN." class="form-control" name="message" rows="5" id="" data-error="Please enter your message" required></textarea>
						    </div>
							
							<div class="form-group has-feedback">  
								<div class="captcha">
								   <span>{!! captcha_img() !!}</span>
								   <button type="button" class="btn btn-success"><i class="fa fa-refresh" id="refresh"></i></button>
								</div>
						    </div>

							<div class="form-group has-feedback">  
								<input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha"> 
						    </div>							
							
						  <div class="row"> 
							<div class="col-xs-4 pull-right">
							  <button type="submit" class="btn btn-primary btn-block btn-flat">Submit</button>
							</div> 
						  </div>
						</form>
					  </div> 
					</div>				
			    </div> 
			  </div>
			  
			</div>
		  </div> 		
		<!----END MODEL PAYTM PAYMENT --->
		

<script>
$(document).ready(function(){ 
	var price = 0; 
	$('.plan_button').click(function(){
		$('#plan_id').val($(this).data('val'));
		if($(this).data('val') == 0){
			price = 5999;
		}else if($(this).data('val') == 1){
			price = 11999;
		}
		$('#plan_value').val(price);
	});
	
	$('#planForm').validate({ // initialize the plugin
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                digits: true,
				maxlength: 10,
				minlength: 10
                
            },
            message: {
                required: true,
            },
        }
    });
	
	$('#refresh').click(function(){
		$.ajax({
			 type:'GET',
			 url:'refreshcaptcha',
			 success:function(data){
				$(".captcha span").html(data.captcha);
			 }
		});
	});
});
</script>

@endsection