{!! Theme::section('community.pannel.plan.plan-menu',['page'=>'']) !!}

{!! Theme::section('community.pannel.plan.payment-methods-menu',['page'=>'card']) !!}

<div class="add-card-container">
    
	<!--<div class="box-title" style="font-size:18px; font-weight:normal;">
		Add a New Card:		
    </div>-->

	<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
	{!! Theme::section('community.pannel.plan.change-card-stripe-js') !!}

	<style type="text/css">
		.searchBoxContainer2 .MicrosoftMap{
			position:relative !important;	
		}
	</style>

	<!--<div class='account-info-row'>	
		 <span class="add-card-details-heading">Add a New Card</span>
	</div>-->

	<div class="payment_method_add_form">
	
		@if(Session::has('message'))
		   <div class="alert alert-dismissible alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{Session::get('message')}}
		   </div>
		   <br />
	    @endif
	
    	<div style="color:#FF0000">
        	 Steps: Provide card details, verify card add the billing address, and save. 
        </div>
        
		<form action="{{$community->present()->url('communitypaymentaddcard')}}" method="POST" id="paymentForm">    
{{ csrf_field() }}
			<div class="form-heading">Card Details</div>
			 
			<div class='account-info-row'>	
				<input type="text" class="form-control account-form-field" placeholder="Card number*" name="card_number" id="card_number" autocomplete='off'/>
			</div>

			<div class='account-info-row community-card-details-info-row'>	   		
				<div class="form-group">
					<div class="row">
						<div class="col-sm-4 col-xs-4">
							<label>Expiry Month <span class="text-danger">*</span></label>
						 
							 <select name="card_month" id="card_month" class="form-control cards-exp-month-year-box" required="required">
								<option value="">Select Month</option>
								<option value="01">01</option>
								<option value="02">02</option>
								<option value="03">03</option>
								<option value="04">04</option>
								<option value="05">05</option>
								<option value="06">06</option>
								<option value="07">07</option>
								<option value="08">08</option>
								<option value="09">09</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option value="12">12</option>
							</select>
							
							<span id="errorCardExpMonth" class="text-danger"></span>
						</div>
						
						<div class="col-sm-4 col-xs-4">  
							<label>Expiry Year <span class="text-danger">*</span></label>
															
							<select name="card_year" id="card_year" class="form-control cards-exp-month-year-box" required="required">
																<option value="">Select Year</option>
								@for($y=$current_year;$y < $last_year;$y++)
									<option value="{{$y}}">{{$y}}</option>
								@endfor   
							</select>
							
							<span id="errorCardExpYear" class="text-danger"></span>
						</div>
						
						<div class="col-sm-4 col-xs-4">
							<label>CVC <span class="text-danger">*</span></label>
							<input type="password" name="card_cvv" id="card_cvv" class="form-control accept_only_numbers card-cvv-number" placeholder="123" maxlength="4" onkeypress="return validateNumber(event);" required="required" autocomplete="off">
							<span id="errorCardCvc" class="text-danger"></span>     
						</div>    
					</div> 

					<div class="form-group validate-card-btn-row">
						<span class="validate-card-msg"></span>
						<input type="button" class="btn black-color-button validate-card-btn" onclick="return ValidateCard()"  value="Verify Card">
					</div>			
				</div>		
			</div>
			
			<div class='account-info-row'>	
				  <input class="form-check-input" type="checkbox" value="1" id="set_as_default_payment_method" name="set_as_default">
				  <label class="form-check-label" for="set_as_default_payment_method">
					 Set as default payment method
				  </label>
			</div>
			
			<div class="form-heading">
					Billing Address
						
					@if($default_card)
						<input type="button" class="btn btn-sm get-default-card-dtls" data-url="{{$community->present()->url('getdefaultcarddetails')}}" value="Use Existing Details"/>
					@endif		
			</div>
			
			<div class='account-info-row'>	
				<input type="text" class="form-control account-form-field" placeholder="Name on the card*" name="card_name" id="card_name" autocomplete='off'/>
			</div>

			<div class='account-info-row'>	
				  <div class="form-group searchBoxContainer2">		
					<input type="text" class="autoaddress-street2 form-control account-form-field" placeholder="Billing address*" name="billing_address" id="addressSearchBox2" autocomplete='off'/>
				  </div>  
			</div>

			<div class='account-info-row'> 	
				<input type="text" class="autoaddress-city2 form-control account-form-field" placeholder="City*" name="billing_city" id="billing_city" autocomplete='off'/>
			</div>

			 <div class='account-info-row'>	
				<input type="text" class="autoaddress-state2 form-control account-form-field" placeholder="State/province*" name="billing_state" id="billing_state" autocomplete='off'/>
			</div>

			<div class='account-info-row'>	
				<input type="text" class="autoaddress-country2 form-control account-form-field" placeholder="Country*" name="billing_country" id="billing_country" autocomplete='off'/>
			</div>

			<div class='account-info-row'>	
				<input type="text" class="autoaddress-zipcode2 form-control account-form-field" placeholder="Zip/Pin Code*" name="billing_zip" id="billing_zip" autocomplete='off'/>
			</div>
			
			<div class='account-info-row-error-card'></div>

			<div class='account-info-row add-card-btns-row'>
				<a href="{{$community->present()->url('communitypayment')}}" class="btn cancel-add-card-btn red-color-button">Cancel</a>
				<input type="button" value='Save' class='save-payment-method-btn btn black-color-button' onclick="stripePay(event)" />
                
                <div style="margin-top:10px; float:left;">Note: We don't store full card numbers-only an encrypted validation token that cannot be reused elsewhere</div>	
			</div>
		</div>	
	</div>
	

</div>