<?php
/**
 * Created by PhpStorm.
 * User: korok 
 * Date: 7/28/2015
 * Time: 4:16 PM
 */
?>
<div class="footer">
    <div class="footer-slider">
            <?php echo do_shortcode("[WLS id='24']"); ?>
    </div>
    <div class="copy-right">
        <span><?php echo Roots\Sage\Utils\get_theme_option('footer_text'); ?>	</span>
    </div>
</div>

<!-- Modal Box --> 
<div class="remodal" data-remodal-id="remodal-info" role="dialog" >	
	<div class="modal-content">
	  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
	  <div class="modal-content-ajax">
	    	<?php echo Roots\Sage\Utils\get_theme_option('home-block1'); ?>
	  </div>
	</div>  
</div>

<div class="remodal" id="modal-buy" data-remodal-id="remodal-buy" role="dialog" >	
	<div class="modal-content" >
	  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
	  <div class="modal-content-ajax">
	  	<div class="modal-buy-content">	    	
            <div class="col-md-6 col-sm-12 col-xs-12 text-center BECOME_OUR_SPONSOR ">
				<h2> BECOME OUR SPONSOR </h2> 
				<div class="msg-content">
					<?php echo Roots\Sage\Utils\get_theme_option('home-block2'); ?>					
				</div>				
			</div>
			<div class="col-md-6 col-sm-12 col-xs-12 text-center">
				<h2><span class="buy_or">OR</span> PURCHASE INDIVIDUAL TICKETS</h2>	
				<div id="ajax_message">
				</div>	
				<div class="purchase_form_wrap">
				<form id="purchase_form" action="" method="post">
				  
				  	

					<div class='form-row form-row-name'>
					  <div class='col-md-6 col-xs-12  form-group required'>						
						<input class='form-control' size='4' name="first_name" id="first_name" placeholder="First Name" required type='text'>
					  </div>
					  <div class='col-md-6 col-xs-12 form-group required'>						
						<input class='form-control' size='4' name="last_name" id="last_name" placeholder="Last Name" required type='text'>
					  </div>
					</div>

					

					<div class='form-row'>
					  <div class='col-xs-10 form-group required'>						
						<input class='form-control' size='4' name="email" id="email" placeholder="Email" required type='text'>
					  </div>
					</div>
					<div class='form-row'>
					  <div class='col-xs-10 form-group required'>						
						<input class='form-control' size='4' name="phoneNumber" id="phoneNumber" placeholder="Phone Number" required type='text'>
					  </div>
					</div>

					<div class='form-row'>
					  <div class='col-xs-12 form-group required'>						
						<input class='form-control' size='4' name="address1" id="address1" placeholder="Address 1" required type='text'>
					  </div>
					</div>
					<div class='form-row'>
					  <div class='col-xs-12 form-group '>						
						<input class='form-control' size='4' name="address2" id="address2" placeholder="Address 2"  type='text'>
					  </div>
					</div>

					<div class='form-row'>
					  <div class='col-xs-6 form-group required'>						
						<input class='form-control' size='4' name="postcode" id="postcode" placeholder="Postal Code" required type='text'>
					  </div>
					</div>

					<div class='form-row form-row-city'>
					  <div class='col-md-6 col-xs-6 form-group required'>						
						<input class='form-control' size='4' name="city" id="city" placeholder="City" required type='text'>
					  </div>
					  <div class='col-md-3 col-xs-3 form-group'>	
						<select name="state" id="state">
							<option value="">State</option>
							<option value="AL">Alabama</option>
							<option value="AK">Alaska</option>
							<option value="AZ">Arizona</option>
							<option value="AR">Arkansas</option>
							<option value="CA">California</option>
							<option value="CO">Colorado</option>
							<option value="CT">Connecticut</option>
							<option value="DE">Delaware</option>
							<option value="DC">District Of Columbia</option>
							<option value="FL">Florida</option>
							<option value="GA">Georgia</option>
							<option value="HI">Hawaii</option>
							<option value="ID">Idaho</option>
							<option value="IL">Illinois</option>
							<option value="IN">Indiana</option>
							<option value="IA">Iowa</option>
							<option value="KS">Kansas</option>
							<option value="KY">Kentucky</option>
							<option value="LA">Louisiana</option>
							<option value="ME">Maine</option>
							<option value="MD">Maryland</option>
							<option value="MA">Massachusetts</option>
							<option value="MI">Michigan</option>
							<option value="MN">Minnesota</option>
							<option value="MS">Mississippi</option>
							<option value="MO">Missouri</option>
							<option value="MT">Montana</option>
							<option value="NE">Nebraska</option>
							<option value="NV">Nevada</option>
							<option value="NH">New Hampshire</option>
							<option value="NJ">New Jersey</option>
							<option value="NM">New Mexico</option>
							<option value="NY">New York</option>
							<option value="NC">North Carolina</option>
							<option value="ND">North Dakota</option>
							<option value="OH">Ohio</option>
							<option value="OK">Oklahoma</option>
							<option value="OR">Oregon</option>
							<option value="PA">Pennsylvania</option>
							<option value="RI">Rhode Island</option>
							<option value="SC">South Carolina</option>
							<option value="SD">South Dakota</option>
							<option value="TN">Tennessee</option>
							<option value="TX">Texas</option>
							<option value="UT">Utah</option>
							<option value="VT">Vermont</option>
							<option value="VA">Virginia</option>
							<option value="WA">Washington</option>
							<option value="WV">West Virginia</option>
							<option value="WI">Wisconsin</option>
							<option value="WY">Wyoming</option>
						</select>
						<!--<input class='form-control' size='4' name="state" id="state" placeholder="STATE" required type='text'>-->
					  </div>
					  <div class="clear"></div>
					</div>
					

					<div class="form-row form-row-title text-center">
						<h3>PAYMENT INFORMATION</h3>
					</div>


					<div class='form-row quanlity-row'>
					  <div class='form-group text-left'>
						<label class='control-label'>QUANTITY</label>						
					  </div>
					  <div class='form-group expiration'>
						<select name="quantity" id="quantity" >
							  <option value="1"> 1 </option>
                              <option value="2"> 2 </option>
                              <option value="3"> 3 </option>
                              <option value="4"> 4 </option>
                              <option value="5"> 5 </option>
						</select>
						<!--<input type="text" class="form-control" name="quantity" value="1" id="quantity" placeholder="Quantity *">-->
					  </div>
					  <div class='form-group expiration required'>						
							<input type="text" class="form-control" id="price" name="price" value="200" placeholder="Price *" required readonly="true"> 
					  </div>
					  <div class="clear"></div>
					</div>

					<div class='form-row'>
						<div class="col-xs-4 col-md-4 credit-card-text form-group text-left">							
							<label class='control-label'>Credit card</label>
						</div>
						<div class="col-md-8 col-xs-8 form-group text-right">
							<img  class="img-responsive" src="<?php echo THEME_URL ?>/assets/images/credit-card.png" alt="Credit Image" />
						</div>
					</div>

					
					
					<div class='form-row'>
					  <div class='col-xs-12 form-group required'>						
						<input class='form-control' size='4' name="card_holder_name" id="card_holder_name" placeholder="Card Holder Name" required type='text'>
					  </div>
					</div>										
					<div class='form-row form-row-ccv'>					 
					  <div class='col-xs-8 col-md-8 two-item form-group  required'>
						<input type="text" class="form-control" id="card_number" name="card_number" placeholder="Credit Card Number" required>
					  </div>
					  <div class='col-xs-4 col-md-4 two-item form-group  required pull-right'>						
							<input type="text" class="form-control" name="car_ccv" id="car_ccv" placeholder="CVV" required>
					  </div>
					  <div class="clear"></div>
					</div>
					
					<div class='form-row expiration_row'>
					  <div class='pull-left form-group text-left'>
						<label class='control-label'>EXPIRATION</label>						
					  </div>
					  <div class='pull-left form-group expiration '>
                        <select class='form-control' style='4' name="month" id="month">
                              <option value="01"> 1 </option>
                              <option value="02"> 2 </option>
                              <option value="03"> 3 </option>
                              <option value="04"> 4 </option>
                              <option value="05"> 5 </option>
                              <option value="06"> 6 </option>
                              <option value="07"> 7 </option>
                              <option value="08"> 8 </option>
                              <option value="09"> 9 </option>
                              <option value="10"> 10 </option>
                              <option value="11"> 11 </option>
                              <option value="12"> 12 </option>
                        </select>
					  </div>
					  <div class='pull-left form-group expiration '>
                          <select class='form-control' style='4' name="year" id="year">
								
							  <?php  
							  $cur_year = date('Y');							  
							  for($i=$cur_year;$i<=$cur_year+20;$i++) { ?> 
								<option value="<?php echo $i; ?>"> <?php echo $i; ?> </option>                              
							  <?php } ?>
                          </select>
					  </div>
					  <div class="clear"></div>
					</div>
					<div class='form-row'>
				  		<button type="submit" id="buy-submit" class="btn btn-default btn-submit">PROCESS YOUR PAYMENT</button>
				  	</div>
					<input type="hidden" name="action" value="buy_ticket_ajax" />
				</form>	
				</div>

				<div class="purchase_form_thanks hidden" >
					<button id="open-thanks">open-thanks</button>
					Thankyou for your support ! 
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
	  </div>
	</div>  
</div>


<div class="remodal" data-remodal-id="remodal-sponsors" role="dialog" id="modal_sponsors" >	
	<div class="modal-content">
	  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
	  <div class="modal-content-ajax">
	    	<?php echo Roots\Sage\Utils\get_theme_option('home-block3'); ?>
	  </div>
	</div>  
</div>

<div class="remodal" id="modal-package" data-remodal-id="remodal-package" role="dialog" >	
	<div class="modal-content" >
		<div class="modal-package-content">
		  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
		  <div class="modal-content-ajax">	
		  	<div class='loading_html'>Loading...</div>	    	
		  </div>
	 	</div>
	</div>  
</div>

<div class="remodal" id="modal-thanks" data-remodal-id="remodal-thanks" role="dialog" >	
	<div class="modal-content" >
		<div class="modal-thanks-content">
		  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
		  <div class="modal-content-ajax">	
		  	<?php echo Roots\Sage\Utils\get_theme_option('thanks-block'); ?>
		  	<!-- 
		  	<div class="text-center">
				<h2 class="title">THANK YOU FOR PARTICIPATING</h2>
		  		<h2 class="sub-title">IN CHAMPIONS IN LIFE NIGHT EVENT!</h2> 
		  		<h3 class="event-time">EVENT DETAILS:</h3>
				<p class="t-bold color-1" style="font-size:36px;">FRIDAY, OCTOBER 16th 2015 </p>
				<p class="t-bold color-1" style="font-size:28px;">SHERATON DOWNTOWN  <br>
				340 NORTH 3rd STREET, <br>
				PHOENIX AZ 85004</p>
				<p class="color-2 p24">IF YOU HAVE ANY QUESTIONS FEEL FREE TO CONTACT:  <br/>
<span class="color-1">VERONICA DE LA O</span> @ (602)943-5472 OR <span class="color-1">vdelao@ucpofcentralaz.org</span><br/>
				<span class="color-2 p20">WE WOULD BE CONTACTING YOU WITH SITING INFORMATION AS THE DATE OF THE EVENT APPROACHES</span></p>				
			</div>
			-->
		  </div>
	 	</div>
	</div>  
</div>





<script>
jQuery('document').ready(function($){
		var inst = $('[data-remodal-id=remodal1]').remodal();
		var inst2 = $('[data-remodal-id=remodal2]').remodal();
		$('.open-modal2').click(function(){
			inst.close();
			inst2.open();
		});
		$(document).on('opening', '.remodal', function () {
		  $('body').css('padding-right',0);
		});
});
</script>


<!-- End Modal Box -->

</div>

<style>

#modal_sponsors  h3{font-size: 46px !important;    position: relative;    margin-bottom: 35px;     padding-bottom: 15px;}

#modal_sponsors h3::after {
    position: absolute;
    content: "";
    height: 2px;
    background: #b3b3b3 none repeat scroll 0% 0%;
    left: 27%;
    bottom: -6px;
    width: 50%;
}
.line_bottom{
	height: 2px;
    border-top: 2px solid #b3b3b3;
    width: 78%;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
#modal-thanks .modal-content h2 {
    font-size: 36px;
    font-weight: bold;
    line-height: 45px;
    position: relative;
    margin:  0;
    color: #094965;
}
#modal-thanks .modal-content h2.title {
    padding-top: 10px;
}
#modal-thanks .modal-content h2.sub-title {
    padding-bottom: 10px;
}
#modal-thanks .modal-content h2.sub-title::after {
    position: absolute;
    content: "";
    height: 2px;
    background: #d1dae3 none repeat scroll 0% 0%;
    left: 30%;
    bottom: -6px;
    width: 40%;
}
#modal-thanks .modal-content h3.event-time {
    margin:0;
    padding:20px 0;
    font-size: 31px;
    color:#1b8a9e;
}
.color-1 {
    color:#094965;
}
.color-2 {
    color:#3898aa;
}
.modal-content .p24 {
    font-size: 24px;
}
.modal-content .p20 {
    font-size: 20px;
}
</style>