@if(Session::has('message'))
  <div class="alert alert-dismissible alert-success" style="text-align: center; background-color: #CDB6DE;  border-color: #CDB6DE;"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  
  		<span style="text-align:center; color:#000; font-size: 16px;">{{Session::get('message')}}</span>
    </div>
  <br />
@endif
             
<div class="event-contribute-by-stripe">

	<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    {!! Theme::section('post.events.stripe-js',['post'=>$post]) !!} 
    
    <div id="accordion" class="stripe-form-fund-account">
           
        <div class="box-content">
           <div class="stripe-form">    
             <form action="{{$post->present()->url()}}/eventcontribute/{{$event->id}}" method="POST" id="paymentForm">         
                {{ csrf_field() }}
                <div class="form-group" style="font-weight:bold;">
                    <label style="font-weight:bold; font-size:18px;">Enter your donation<span class="text-danger">*</span></label>
                    
                    
                    <div class="checkoutCurrencyFieldWrapper">
                    	<div class="checkoutCurrencyFieldCurrency">
                        	<span class="checkoutCurrencyFieldSymbol">
                            	@if($event->currency=="INR")
                            		<i class="fa fa-inr" aria-hidden="true"></i>
                                @else
                                	$
                                @endif    
                             </span> 
                            <span class="checkoutCurrencyFieldAbbr">{{$event->currency}}</span>
                        </div>
                        
                        <input type="text" name="donationamount" id="donationamount" class="checkoutCurrencyFieldInput accept_only_numbers" maxlength="50" autocomplete="off">
                        
                        <span class="checkoutCurrencyFieldDecimal">.00</span>
                    </div>
                   
                </div>
                
                <div class="form-heading">Card Details</div>
                
                <div class="form-group">
                    <label>Card Number <span class="text-danger">*</span></label>
                    <input type="text" name="cardNumber" id="creditcardNumber" class="form-control" placeholder="1234 5678 9012 3456" maxlength="20" onkeypress="" required="required" autocomplete="off">
                    <span id="errorCardNumber" class="text-danger"></span>
                </div>
                
                <div class="form-group">
                	<div class="row crowdfunding-card-row">
                        <div class="col-sm-4 col-xs-4">
                            <label>Expiry Month <span class="text-danger">*</span></label>
                                                      
                            <select name="cardExpMonth" id="cardExpMonth" 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="cardExpYear" id="cardExpYear" class="form-control cards-exp-month-year-box" required="required">
									                                    <option value="">Select Year</option>
                                    <option value="{{$current_year}}">{{$current_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="cardCVC" id="cardCVC" class="form-control" placeholder="123" maxlength="4" onkeypress="return validateNumber(event);" required="required" autocomplete="off">
                            <span id="errorCardCvc" class="text-danger"></span>     
                        </div>    
                    </div>      
                </div>
                                                  
                <div class="form-heading">Customer Details</div>
                
                <div class="form-group">
                    <label>Name on Card <span class="text-danger">*</span></label>
                    <input type="text" name="customerName" id="customerName" class="form-control" @if(\Auth::check()) value="{{\Auth::user()->fullname}}" @else value="" @endif required="required" placeholder="Provide card holder name" autocomplete="off">
                    <span id="errorCustomerName" class="text-danger"></span>
                </div>
                
                <div class="form-group">
                    <label>Email Address <span class="text-danger">*</span></label>
                    <input type="text" name="emailAddress" id="emailAddress" class="form-control" @if(\Auth::check()) value="{{\Auth::user()->email_address}}" @else value="" @endif required="required" placeholder="Provide email address" autocomplete="off">
                    <span id="errorEmailAddress" class="text-danger"></span>
                </div>
                
                <div class="form-group">
                    <label>Address <span class="text-danger">*</span></label>
                    <div class="searchBoxContainer">
                    	<input name="customerAddress" id="addressSearchBox" class="form-control" required="required" placeholder="Provide your address" autocomplete="off" style="max-width:100%; width:93%;"/>
                    	<span id="errorCustomerAddress" class="text-danger"></span>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>City <span class="text-danger">*</span></label>
                    <input type="text" name="customerCity" id="customerCity" class="form-control autoaddress-city" value="" required="required" placeholder="Enter your city" autocomplete="off">
                    <span id="errorCustomerCity" class="text-danger"></span>
                </div>
           
                <div class="form-group">
                    <label>Zip <span class="text-danger">*</span></label>
                    <input type="text" name="customerZipcode" id="customerZipcode" class="form-control autoaddress-zipcode" value="" required="required" placeholder="Enter your zip code" autocomplete="off">
                    <span id="errorCustomerZipcode" class="text-danger"></span>
                </div>
            
                <div class="form-group">
                    <label>State</label>
                    <input type="text" name="customerState" id="customerState" class="form-control autoaddress-state" value="" required="required" placeholder="Enter your state" autocomplete="off">
                </div>
           
                <div class="form-group">
                    <label>Country <span class="text-danger">*</span></label>
                    <input type="text" name="customerCountry" id="customerCountry" class="form-control autoaddress-country" value="" required="required" placeholder="Enter your country" autocomplete="off">
                    <span id="errorCustomerCountry" class="text-danger"></span>
                </div>
                
                <div class="form-group">
                    <label class="checkbox-inline fundraiser-name-label">
                      	<input class="show_my_contributor_name" type="checkbox" name="show_my_contributor_name" value="0">
                      	Don't display my name publicly on the fundraiser
                    </label>
                    
                    <i class="fa fa-info-circle fundraiser-public-name-note-btn" aria-hidden="true"></i>
                
                    <div class="fundraiser-public-name-note">
                        Your name will only be visible to the organizer, any team members and the beneficiary
                    </div> 
                </div>
                    
                <hr>
              
                <input type="hidden" name="price" id="stripe_price" value="">
                <input type="hidden" name="total_amount" id="stripe_total_amount" value="">
                <input type="hidden" name="currency_code" value="{{$event->currency}}">
                <input type="hidden" name="item_details" value="">
                <input type="hidden" name="item_number" value="162245">
                <input type="hidden" name="order_number" value="353713">               
                <input type="hidden" name="plan" value="" />
                <input type="hidden" name="payment_type" value="" />               
                <input type="button" name="payNow" id="payNow" class="stripePayNowBtn btn red-color-button" onclick="stripeContributeEvent(event)" value="Donate Now" style="width:100%" />
                <!--<span style="float:right;">Processed through Stripe</span>-->
                
                <br /><br />
                        
             </form>
           </div>  
        </div>       
    </div>   
</div>