{!! 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;">
		Edit 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 style="color:#FF0000">
        	 Steps: Provide card details, verify card add the billing address, and save. 
        </div>
	<br>
    
	<div class='account-info-row'>	
		 <span class="add-card-details-heading">Edit Card: {{$card->card_number}}</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
	
		<form action="{{$community->present()->url('communitypaymenteditingcard')}}/{{$card->id}}" 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="Provide your 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" @if($card->expiry_month=="01") selected @endif>01</option>
								<option value="02" @if($card->expiry_month=="02") selected @endif>02</option>
								<option value="03" @if($card->expiry_month=="03") selected @endif>03</option>
								<option value="04" @if($card->expiry_month=="04") selected @endif>04</option>
								<option value="05" @if($card->expiry_month=="05") selected @endif>05</option>
								<option value="06" @if($card->expiry_month=="06") selected @endif>06</option>
								<option value="07" @if($card->expiry_month=="07") selected @endif>07</option>
								<option value="08" @if($card->expiry_month=="08") selected @endif>08</option>
								<option value="09" @if($card->expiry_month=="09") selected @endif>09</option>
								<option value="10" @if($card->expiry_month=="10") selected @endif>10</option>
								<option value="11" @if($card->expiry_month=="11") selected @endif>11</option>
								<option value="12" @if($card->expiry_month=="12") selected @endif>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}}" @if($card->expiry_year==$y) selected @endif>{{$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" value="{{$card->cvv}}"/>
							<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>	
					<br>	
				</div>		
			</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' value="{{$card->card_name}}"/>
			</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' value="{{$card->billing_address}}"/>
				  </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' value="{{$card->city}}"/>
			</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' value="{{$card->state}}"/>
			</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' value="{{$card->country}}"/>
			</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' value="{{$card->zip}}"/>
			</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>