<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="UTF-8">
	<!-- <meta name="viewport" content="width=device-width"> -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="shortcut icon" href="images/favicon-live.png" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css" />
	<link rel="stylesheet" type="text/css" href="css/materialPreloader.min.css" />
	<link rel="stylesheet" type="text/css" href="css/animate.css" />
	<link rel="stylesheet" type="text/css" href="css/checkbox-radio.css" />
	<link rel="stylesheet" type="text/css" href="css/fonts.css" />
	<link rel="stylesheet" type="text/css" href="fonts/fontastic/styles.css?v=<?php echo filemtime('fonts/fontastic/styles.css'); ?>" />
	<link rel="stylesheet" type="text/css" href="css/style.css?v=<?php echo filemtime('css/style.css'); ?>" />

	<title>Activation</title>
</head>
<body class="bg_body">
<?php include "header.php"; ?>
	<div class="container page page_activate">
		<div class="col-xs-12 form">
			<div class="form_header">
				<h3>Activation</h3>
				<span class="help-info">(* - fields are required)</span>
				<div class="form_header_divider"></div>
			</div>
			<form data-toggle="validator" role="form" class="form-activate" id="form-activate">
				<input type="hidden" name="projectNumber" id="projectNumber" value="22">
				<input type="hidden" name="dealerToken" id="dealerToken" value="">
				<input type="hidden" name="domain" id="domain" value="quikprotect.co">
				<input type="hidden" name="deviceType" id="deviceType" value="">
				<input type="hidden" name="assetType" id="assetType" value="Car">
				
				<div class="form_section">
					<h2>Purchased from</h2>
					<div class="form_divider"></div>
					<div class="row">
						<div class="form-group col-xs-12">
					  	  	<label for="dealerName" class="control-label">Dealer Name<span class="color-red">*</span></label>
					  	  	<input type="text" class="form-control clearAfter" id="dealerName" name="dealerName" placeholder="" required maxlength="100">
					  	</div>
					</div>
						
				</div>
				<div class="form_section">
					<h2>account</h2>
					<div class="form_divider"></div>
					<div class="row">
						<div class="form-group col-xs-12">
						  	<label for="account" class="control-label">Login Name / Email<span class="color-red">*</span></label>
						  	<input type="text" class="form-control clearAfter" id="account" name="account" placeholder="" maxlength="100" required >
						</div>
					</div>						
				</div>
				<div class="form_section">
					<h2>Contact</h2>
					<div class="form_divider"></div>
					<div class="row">
						<div class="form-group col-xs-12">
					  	  	<label for="country" class="control-label">Country<span class="color-red">*</span></label>
					  	  	<select id="country" name="country" class="selectpicker form-control" data-live-search="true" title="- Select your country -" data-size="5" required>
						      	<?php include "country-list.php"; ?>
						    </select>
						    
					  	</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-12 col-sm-6">
							<label for="mobile" class="control-label phoneLabel">Mobile<span class="color-red">*</span></label>
						  	<input id="phoneCode" type="text" name="phoneCode" class="form-control phoneCode" maxlength="100" value="+61" readonly>
						  	<input type="tel" class="form-control mobile clearAfter only_numbers" id="mobile" name="mobile" placeholder="" required maxlength="100">
					  	</div>
					  	<div class="form-group col-xs-12 col-sm-6">
					  	  	<label for="email" class="control-label">Clients Email<span class="color-red">*</span></label>
					  	  	<input type="email" class="form-control clearAfter" id="email" name="email" placeholder="" data-error="That email address is invalid" required maxlength="200">
					  	  	<div class="help-block with-errors"></div>
					  	</div>
					</div>						
						
				</div>
				<div class="form_section">
					<h2>asset</h2>
					<div class="form_divider"></div>
					<div class="row">
						<div class="form-group col-xs-12 col-sm-6">
					  	  	<label for="imei" class="control-label">IMEI <span class="help-info">(recorded on device)<span class="color-red">*</span></span></label>
					  	  	<input type="text" class="form-control clearAfter" id="imei" name="imei" value="" maxlength="16" required>
					  	  	<!-- <h1>Remove the 0 at the start of the IMEI number and enter the remaining 15 digits</h1> -->
					  	</div>
						<div class="form-group col-xs-12 col-sm-6">
					  	  	<label for="name" class="control-label">Name / Registration<span class="color-red">*</span></label>
					  	  	<input type="text" class="form-control clearAfter" id="name" name="name" placeholder="" required maxlength="200">
					  	</div>
					</div>			

					<div class="row form-group">						
						<div class="col-xs-12">
							<label for="describe1" class="control-label">Asset Type<span class="color-red">*</span></label>
						</div>					  	  	
						<div class="col-auto">
							<div class="asset-type-icon-wrapper active" data-type="Car" data-toggle="tooltip" title="Car">
								<i class="icon icon-car"></i>
							</div>								
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Truck" data-toggle="tooltip" title="Fleet">
								<i class="icon icon-fleet"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Boat" data-toggle="tooltip" title="Boat">
								<i class="icon icon-boat"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Jetski" data-toggle="tooltip" title="Jetski">
								<i class="icon icon-jetski"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Plant and Equipment" data-toggle="tooltip" title="Plant">
								<i class="icon icon-plant"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Bus" data-toggle="tooltip" title="Bus">
								<i class="icon icon-bus"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Bike" data-toggle="tooltip" title="Bike">
								<i class="icon icon-moto"></i>
							</div>									
						</div>							
						<!-- <div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="16" data-toggle="tooltip" title="Dron">
								<i class="icon icon-dron"></i>
							</div>									
						</div> -->
						<!-- <div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="32" data-toggle="tooltip" title="Plane">
								<i class="icon icon-plane"></i>
							</div>									
						</div> -->
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Containor" data-toggle="tooltip" title="Container">
								<i class="icon icon-container"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Trailer" data-toggle="tooltip" title="Trailer">
								<i class="icon icon-trailer1"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Caravan" data-toggle="tooltip" title="Caravan">
								<i class="icon icon-caravan"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Dump Truck" data-toggle="tooltip" title="Dump Truck">
								<i class="icon icon-dumptruck"></i>
							</div>									
						</div>
						
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Personal" data-toggle="tooltip" title="Personal">
								<i class="icon icon-person"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Pet" data-toggle="tooltip" title="Pet">
								<i class="icon icon-pet"></i>
							</div>									
						</div>
						<div class="col-auto ">
							<div class="asset-type-icon-wrapper" data-type="Other" data-toggle="tooltip" title="Other">
								<i class="icon icon-other"></i>
							</div>									
						</div>					  	  						  	
					</div>

					<div class="row">
						<div class="form-group col-xs-12 col-sm-3">
					  	  	<label for="describe1" class="control-label">Make<span class="color-red">*</span></label>
					  	  	<input type="text" class="form-control clearAfter" id="describe1" name="describe1" placeholder="" required maxlength="200">
					  	</div>
					  	<div class="form-group col-xs-12 col-sm-3">
					  	  	<label for="describe2" class="control-label">Model<span class="color-red">*</span></label>
					  	  	<input type="text" class="form-control clearAfter" id="describe2" name="describe2" placeholder="" required maxlength="200">
					  	</div>
					  	<div class="form-group col-xs-12 col-sm-3">
					  	  	<label for="describe3" class="control-label">Color<span class="color-red">*</span></label>
					  	  	<input type="text" class="form-control clearAfter" id="describe3" name="describe3" placeholder="" required maxlength="200">
					  	</div>
					  	<div class="form-group col-xs-12 col-sm-3">
					  	  	<label for="describe4" class="control-label">Year<span class="color-red">*</span></label>
					  	  	<input type="text" class="form-control clearAfter only_numbers" id="describe4" name="describe4" placeholder="" required maxlength="200">
					  	</div>
					</div>
						
					<div class="row">
						<div class="form-group  col-xs-12 col-sm-6">
					  	  	<label for="solution" class="control-label">Solution Type <a target="_blank" href="https://quiktrak.com.au/plans.php#plans" class="help-info">(view Solution Types)</a><span class="color-red">*</span></label>
					  	  	<select id="solution" name="solution" class="selectpicker form-control" title="- Select Solution Type -" data-size="8" disabled required>
					  	  		<!-- <option value="BikeProtect" >BikeProtect</option>
					  	  							      	<option value="boatloc8" >BoatLoc8</option>
					  	  							      	<option value="boatprotect" >BoatProtect</option>
					  	  							      	<option value="boatwatch" >BoatWatch</option>
					  	  							      	<option value="carwatch" >CarWatch</option>
					  	  							      	<option value="fleetwatch" >FleetWatch</option>
					  	  							      	<option value="fleetwatch_ibutton"  data-subtext="(with iButton)">FleetWatch </option>
					  	  							      	<option value="fuelwatch_fuel"  data-subtext="(with Fuel)">FuelWatch </option>
					  	  							      	<option value="plantloc8" >PlantLoc8</option>
					  	  							      	<option value="plantprotect" >PlantProtect</option>
					  	  							      	<option value="plantwatch" >PlantWatch</option>
					  	  							      	<option value="quikloc8" >QuikLoc8</option>
					  	  							      	<option value="quikprotect" >QuikProtect</option>
					  	  							      	<option value="quiktrak" >QuikTrak</option>		 -->
						    </select>
						    <!-- <div class="help-block with-errors"></div> -->
					  	</div>
						<div class="form-group  col-xs-12 col-sm-6">
					  	  	<label for="servicePlan" class="control-label">Service Plan<span class="color-red">*</span></label>
					  	  	<select id="servicePlan" name="servicePlan" class="selectpicker form-control" title="- Select Service Plan -" data-size="8" disabled required>
					  	  		<!-- <option value="0000000000000" data-plantype="0">Protect</option>
					  	  						      	<option value="QUIKLOC800000" data-plantype="8">Loc8</option>
					  	  						      						      	<option value="1C783FA4TRAK" data-plantype="1">Track Only Annual</option>
					  	  						      						      	<option value="LR6Z8YPFC8PHJ" data-plantype="3">Track Only Monthly</option>
					  	  						      						      	<option value="2Y6Z8YPFC8P2Y" data-plantype="10">Track Only 2 years</option>
					  	  						      						      	<option value="4Y6Z8YPFC8P4Y" data-plantype="11">Track Only 3 years</option>
					  	  						      						      	<option value="1C8D3EDEMOTI" data-plantype="2">Full Alarm Monitoring Annual</option>
					  	  						      						      	<option value="33ENPEYR38SRC" data-plantype="5">Full Alarm Monitoring Monthly</option>	 -->
						    </select>
						    <!-- <div class="help-block with-errors"></div> -->
					  	</div>
					  	
					</div> 	

					<div class="row">
						<div class="form-group col-xs-12 col-sm-6">
					  	  	<label for="fitoptions" class="control-label">Fitment Options:</label>
					  	  	<select id="fitoptions" name="fitoptions" class="selectpicker form-control" title="- Select Fitment Options -" data-size="8" multiple disabled>
					  	  		<!-- <option value="2" >Alarm Integration</option>
					  	  		<option value="16">Fitment After Isolator</option>
					  	  		<option value="8" >Not Connected to Ignition/Accessory Power</option>
					  	  		<option value="1" >Remote Immobilisation</option>				  	  		
					  	  		<option value="4" >SOS Button</option>
								
								<option value="128" >Bilge Alarm</option>
					  	  		<option value="32" >Engine Theft</option>
					  	  		<option value="1" >Remote Immobilisation</option>
					  	  		<option value="256" >Shore Power Disconnect</option>
					  	  		<option value="64" >Siren</option> -->
						    </select>
						</div>
						<div class="form-group col-xs-12 col-sm-6">
					  	  	<label for="instalLocation" class="control-label">Installation Location <span class="hint-icon-wrapper" data-toggle="tooltip" title="Location of device within the asset"><i class="icon icon-hint"></i></span></label>
					  	  	<input type="text" class="form-control clearAfter" id="instalLocation" name="instalLocation" placeholder=""  maxlength="200">
					  	</div>
					</div>

					<div class="row">
						<div class="form-group col-xs-12 ">
							<label for="notes" class="control-label">Notes</label>
							<textarea name="notes" id="notes" class="form-control clearAfter"  maxlength="500"></textarea>
						</div>
					</div>

					<div class="row groupAutoSuspend" style="display: none;">
						<div class="form-group col-xs-12 ">
						    <div class="checkbox">						    
						      	<label class="control-label padding-left-0">
						        	<input type="checkbox" id="autosuspend" name="autosuspend" >
						        	<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
						        	Auto Suspend
						      	</label>
							     <div class="help-block with-errors"></div>
						    </div>					    
						</div>
					</div>
					  	
				  	<!-- <div class="form-group">
				  	  	<label for="deviceType" class="control-label">Device Type:</label>
				  	  	<input type="text" class="form-control clearAfter" id="deviceType" name="deviceType" data-code="" placeholder="" readonly maxlength="100">
				  	</div> -->
					  	
				</div>

				<div class="form_section form_section_payment ">					
						
					<h2 class="animated flipInX">Payment Type</h2>
					<div class="form_divider"></div>
					<div class="row">
						<div class="form-group col-xs-12">
							<div class="radio animated flipInX">
						      	<label class="control-label padding-left-0">
						        	<input type="radio" name="paymentType" value="1" required>
						        	<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
						        	<span>Credit Card</span>
						      	</label>
						    </div>
							<!-- <div class="radio animated flipInX">
											    					      	<label class="control-label">
											    					        	<input type="radio" name="paymentType" value="2" required>
											    					        	<span>Bank Direct Debit</span>
											    					      	</label>
											    					    </div>	 -->
						    <div class="radio animated flipInX">
						    	<label class="control-label padding-left-0">
						        	<input type="radio" name="paymentType" value="3" required>
						        	<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
						        	<span>By Invoice</span>
						      	</label>
						    </div>
						</div>
					</div>
						
					<div class="paymentFieldWrapper creditCardWrapper ">
						<div class="row">
							<div class="form-group col-xs-12">
								<div class="radio animated flipInX">
							      	<label class="control-label padding-left-0">
							        	<input type="radio" name="ccType" value="Visa" >
							        	<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
							        	<span><img src="images/visa.png" alt=""></span>
							      	</label>
							    </div>
							    <div class="radio animated flipInX">
							    	<label class="control-label padding-left-0">
							        	<input type="radio" name="ccType" value="MasterCard" >
							        	<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
							        	<span><img src="images/mc.png" alt=""></span>
							      	</label>
							    </div>
							    <div class="radio animated flipInX">
							    	<label class="control-label padding-left-0">
							        	<input type="radio" name="ccType" value="Amex" >
							        	<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
							        	<span><img src="images/amex.png" alt=""></span>
							      	</label>
							    </div>
							</div>
						</div>
						<div class="row">
							<div class="form-group col-xs-12 col-sm-6">
						  	  	<label for="ccNumber" class="control-label animated flipInX ">Credit Card Number<span class="color-red">*</span></label>
						  	  	<input type="text" class="form-control clearAfter animated flipInX " id="ccNumber" name="ccNumber" placeholder=""  maxlength="200">
							</div>
							<div class="form-group col-xs-12 col-sm-6">
						  	  	<label for="ccCVV" class="control-label animated flipInX ">CVV<span class="color-red">*</span></label>
						  	  	<input type="text" class="form-control clearAfter animated flipInX " id="ccCVV" name="ccCVV" placeholder=""  maxlength="200">
							</div>
						</div>
						<div class="row">
							<div class="form-group col-xs-12 col-sm-6">
						  	  	<label for="ccExpiryDate" class="control-label animated flipInX ">Expiry Date<span class="color-red">*</span></label>
						  	  	<input type="text" class="form-control clearAfter animated flipInX " id="ccExpiryDate" name="ccExpiryDate" placeholder=""  maxlength="200">
							</div>
							<div class="form-group col-xs-12 col-sm-6">
						  	  	<label for="ccNameOnCard" class="control-label animated flipInX ">Name on Card<span class="color-red">*</span></label>
						  	  	<input type="text" class="form-control clearAfter animated flipInX " id="ccNameOnCard" name="ccNameOnCard" placeholder=""  maxlength="200">
							</div>
						</div>								
							
					</div>
					<!-- <div class="paymentFieldWrapper bankDirectWrapper ">
								<div class="form-group">
							  	  	<label for="bankAccountName" class="control-label animated flipInX ">Bank Account Name:</label>
							  	  	<input type="text" class="form-control clearAfter animated flipInX " id="bankAccountName" name="bankAccountName" placeholder=""  maxlength="200">
								</div>
								<div class="form-group">
							  	  	<label for="bankName" class="control-label animated flipInX ">Bank Name:</label>
							  	  	<input type="text" class="form-control clearAfter animated flipInX " id="bankName" name="bankName" placeholder=""  maxlength="200">
								</div>
								<div class="form-group">
							  	  	<label for="bankBSB" class="control-label animated flipInX ">BSB:</label>
							  	  	<input type="text" class="form-control clearAfter animated flipInX " id="bankBSB" name="bankBSB" placeholder=""  maxlength="200">
								</div>
								<div class="form-group">
							  	  	<label for="bankAccountNumber" class="control-label animated flipInX">Account Number:</label>
							  	  	<input type="text" class="form-control clearAfter animated flipInX " id="bankAccountNumber" name="bankAccountNumber" placeholder=""  maxlength="200">
								</div>
							</div>			 -->
					<div class="paymentFieldWrapper byInvoiceWrapper ">
						<div class="row">
							<div class="form-group col-xs-12 col-sm-6">
						  	  	<label for="invoiceName" class="control-label animated flipInX ">Invoice Name<span class="color-red">*</span></label>
						  	  	<input type="text" class="form-control clearAfter animated flipInX " id="invoiceName" name="invoiceName" placeholder=""  maxlength="200">
							</div>
							<div class="form-group col-xs-12 col-sm-6">
						  	  	<label for="invoiceNumber" class="control-label animated flipInX ">Invoice Number</label>
						  	  	<input type="text" class="form-control clearAfter animated flipInX " id="invoiceNumber" name="invoiceNumber" placeholder=""  maxlength="200">
							</div>
						</div>
						<div class="row">
							<div class="form-group col-xs-12 col-sm-6">
						  	  	<label for="invoiceRUT" class="control-label animated flipInX ">Tax ID</label>
						  	  	<input type="text" class="form-control clearAfter animated flipInX " id="invoiceRUT" name="invoiceRUT" placeholder=""  maxlength="200">
							</div>
							<div class="form-group col-xs-12 col-sm-6">
						  	  	<label for="invoiceEmail" class="control-label animated flipInX">Email Address for Invoice<span class="color-red">*</span></label>
						  	  	<input type="email" class="form-control clearAfter animated flipInX " id="invoiceEmail" name="invoiceEmail" data-error="That email address is invalid" placeholder=""  maxlength="200">
						  	  	<div class="help-block with-errors"></div>
							</div>
						</div>
							
							
					</div>
				</div>

				<div class="form_section  margin-bottom-40">
					<div class="form-group ">
						<div class="checkbox">
					      	<label class="control-label padding-left-0">
					        	<input type="checkbox" id="terms" name="terms" required>
					        	<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
					        	I agree to be bound by the Terms and Conditions which can be found at <a target="_blank" href="https://quiktrak.com.au/">quiktrak.com.au</a>
					      	</label>					      
					    </div>
					</div>						
				</div>
	

			  	<div class="form_section">
				  	<div class="form-group margin-0 ">
				  	  	<button type="submit" class="btn form_submit">
				  	  		<img class="preloader vis_hidden" src="images/loader.gif" alt="">
				  	  		<span class="submit_text">Submit</span>
				  	  	</button>
				  	  	<div class="help-block info"></div>
				  	</div>
				</div>
			</form>

		</div>
	</div>
<?php include "footer.php"; ?>

	<!-- <script src="js/jquery-1.12.0.min.js"></script> -->
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/validator.min.js"></script>
	<script src="js/bootstrap-select.min.js"></script>
	<script src="js/materialPreloader.min.js"></script>
	<script src="js/initialScript.js?v=<?php echo filemtime('js/initialScript.js'); ?>"></script>
	<script src="js/activate-test.js?v=<?php echo filemtime('js/activate.js'); ?>"></script>

	<!-- mask input -->
	<script src="js/maskedinput.js"></script>



</body>
</html>
