        <!-- Title Section -->
        <div class="title-section module">
            <div class="row">
        
                <div class="small-12 columns">
                    <h1>Register</h1>
                </div><!-- Top Row /-->
        
                <div class="small-12 columns">
                    <ul class="breadcrumbs">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Register</a></li>
                    </ul><!-- Breadcrumbs /-->
                </div><!-- Bottom Row /-->
                
            </div><!-- Row /-->
        </div>
        <!-- Title Section Ends /-->
        
        <!-- Content section -->
        <div class="content-area module faq">
	    	<div class="row">
            
        		<div class="medium-9 small-12 columns">
			    	{if $SuccessMessage neq ""}

                    <div class="card-body">

					<div class="isa_success">

					<i class="fa fa-check"></i>

					{$SuccessMessage}		 

					</div>

                    </div>

					{/if}
						{if $ErrorMessage neq ""}

                    <div class="card-body">

					<div class="isa_success">

					<i class="fa fa-check"></i>

					{$ErrorMessage}		 

					</div>

                    </div>

					{/if}
                	<h2>Please Fill the Form below.</h2>
                    <p>Once we receive your information our representative will get back to you within 24 hours.</p>
					<div class="contact-form">
					<form name="regForm" id="regForm" method="post" role="form" onSubmit="return validateFields()">
                     <input type="hidden" name="hdAction" id="hdAction">
                    <div class="row">
					<div class="medium-6 small-12 columns">
                            <label><span class="required"><b>*</b></span>
                                <input type="text"  id="regName" name="regName" value="" placeholder="Your name here..." onKeyUp="text_filter(this);" tabindex="1" />
                            </label>
							 <label><span class="required"><b>*</b></span>
                                <input type="text" id="emailId" name="emailId" value="" placeholder="Your Email Id here..." tabindex="7"/>
                            </label> 
							<label><span class="required"><b>*</b></span>
                                <input type="text" id="mobileNo" name="mobileNo" value="" placeholder="Your Mobile Number here..." onKeyUp="numericFilter(this);checkMobile(this);" maxlength="10" tabindex="8"/>
                            </label>   
							     
							<label><span class="required"><b>*</b></span>
                                <input type="date" id="dob" name="dob" value="" placeholder="Your DOB here..." onKeyUp="numericFilter(this);" tabindex="2" />
                            </label>
							 <label><span class="required"><b>*</b></span>
                                <select id="branchName" name="branchName" value="" tabindex="3">
                                    <option value="0">Chose Branch</option>
									{foreach from=$BranchList item=bName}
                                    <option value="{$bName.id}|{$bName.name}">{$bName.name}</option>
									{/foreach}
                                </select>
                            </label>  
							
						
							<label id="planPeriod" style="display:none;"><span class="required"><b>*</b></span>
                                <select id="pPeriod" name="pPeriod" value="" tabindex="6">
                                    <option value="0">Chose Plan Period</option>
                                    <option value="1">Half Yearly</option>
                                    <option value="2">Annual</option>
                                </select>
                            </label>   
							
                        </div>
                        <div class="medium-6 small-12 columns">
                           
							 <!--<label><span class="required"><b>*</b></span>
                                <input type="text" id="emailId" name="emailId" value="" placeholder="Your Email Id here..." tabindex="7"/>
                            </label>-->  
							<!--<label><span class="required"><b>*</b></span>
                                <input type="text" id="mobileNo" name="mobileNo" value="" placeholder="Your Mobile Number here..." onKeyUp="numericFilter(this);checkMobile(this);" maxlength="10" tabindex="8"/>
                            </label>     
							   <label><span class="required"><b>*</b></span>
                                <input type="password" id="password" name="password" value="" placeholder="Your Password here..." maxlength="15" tabindex="9"/>
                            </label>-->  
							
							 <label><span class="required"><b>*</b></span>
                                <textarea rows="4" id="address" name="address" placeholder="Your Address here ..." tabindex="10"></textarea>
                            </label>   
							
							 <label><span class="required"><b>*</b></span>
                                <input type="text" id="pincode" name="pincode" value="" placeholder="Your Pincode here..." onKeyUp="numericFilter(this);" maxlength="6" tabindex="11"/>
                            </label> 
                        </div>
                        <!--<div class="medium-6 small-12 columns">
                            <label>
                                <input type="text" value="" placeholder="Your last name here..." />
                            </label>
                        </div>-->
                    </div><!-- Row Ends /-->
                        
                    <!--<div class="row">
                        <div class="medium-6 small-12 columns">
                            <label>
                                <input type="text" value="" placeholder="Enter your Website ..." />
                            </label>    
                        </div>
                        <div class="medium-6 small-12 columns">
                            <label>
                                <input type="text" value="" placeholder="Reason contacting us ..." />
                            </label>
                        </div>
                    </div>--><!-- Row Ends /-->
                        
                   
                   
                        
                    <div class="row">
                        <div class="medium-12 small-12 columns">
                            <!--<label>
                                <textarea rows="4" placeholder="Your message ..."></textarea>
                            </label>   --> 
                           <center> <input type="submit" class="button primary" onclick="validateFields();" value="Register" tabindex="12"/> </center>
                        </div>
                    </div><!-- Row Ends /-->
                 </form>
                </div><!-- Contact form /-->
           		</div> <!-- right sidebar ends -->

           	    <!-- icon-box ends -->
            
    	    </div><!-- row / -->
		</div>
        <!-- Content Section Ends /-->
{literal}
<script type="text/javascript">
    function validateFields() {
	var regName=$('#regName').val();
	var dob=$('#dob').val();
	var branchName=$('#branchName').val();
	var pType=$('#pType').val();
	var memPlanName=$('#memPlanName').val();
	var subPlanName=$('#subPlanName').val();
	var pPeriod=$('#pPeriod').val();
    var emailId=$('#emailId').val();
	var mobileNo=$('#mobileNo').val();
	var password=$('#password').val();
	var address=$('#address').val();
	var pincode=$('#pincode').val();

   
	$(".error").remove();
	if(regName=="")
	{
	$('#regName').after('<span class="error">This field is required</span>');
	
	$('#regName').focus();
	
	return false;	
	}
	if(dob=="")
	{
	$('#dob').after('<span class="error">This field is required</span>');
	
	$('#dob').focus();
	
	return false;	
	}
	if(branchName=="" || branchName==0)
	{
	$('#branchName').after('<span class="error">This field is required</span>');
	
	$('#branchName').focus();
	
	return false;	
	}
	if(pType=="" || pType==0)
	{
	$('#pType').after('<span class="error">This field is required</span>');
	
	$('#pType').focus();
	
	return false;	
	}
	if(pType==1)
	{
	if(memPlanName=="" || memPlanName==0)
	{
	$('#memPlanName').after('<span class="error">This field is required</span>');
	
	$('#memPlanName').focus();
	
	return false;	
	}
	}
	if(pType==2)
	{
	if(subPlanName=="" || subPlanName==0)
	{
	$('#subPlanName').after('<span class="error">This field is required</span>');
	
	$('#subPlanName').focus();
	
	return false;	
	}
	if(pPeriod=="" || pPeriod==0)
	{
	$('#pPeriod').after('<span class="error">This field is required</span>');
	
	$('#pPeriod').focus();
	
	return false;	
	}
	}
	
	if(emailId=="")
	{
	$('#emailId').after('<span class="error">This field is required</span>');
	
	$('#emailId').focus();
	
	return false;	
	}
	if(IsEmail(emailId)==false){
                     $('#emailId').after('<span class="error">Please enter valid Email Id</span>');
	                 $('#emailId').focus();
                     return false;
	}		
	if(mobileNo=="")
	{
	$('#mobileNo').after('<span class="error">This field is required</span>');
	
	$('#mobileNo').focus();
	
	return false;	
	}	
	if(mobileNo.length < 10)
	{
	$('#mobileNo').after('<span class="error">Mobile number must be 10 digits</span>');
	
	$('#mobileNo').focus();
	
	return false;	
	}		 
	
	if(password =="")
	{
	$('#password').after('<span class="error">This field is required</span>');
	
	$('#password').focus();
	
	return false;	
	}	
	if(password.length < 8)
	{
	$('#password').after('<span class="error">Pasword should be minimum 8 digits and maximun 15 digits</span>');
	
	$('#password').focus();
	
	return false;	
	}	
	if(address=="" )
	{
	$('#address').after('<span class="error">This field is required</span>');
	
	$('#address').focus();
	
	return false;	
	}
	if(pincode=="" )
	{
	$('#pincode').after('<span class="error">This field is required</span>');
	
	$('#pincode').focus();
	
	return false;	
	}
	if(pincode.length < 6)
	{
	$('#pincode').after('<span class="error">Pincode should be 6 digits</span>');
	
	$('#pincode').focus();
	
	return false;	
	}	
	
	
}

function IsEmail(emailId) {
             var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
             if(!regex.test(emailId)) {
                return false;
             }else{
                return true;
             }
           }
		   
function checkPlanType()	
{
//alert("am here");
var pType=$('#pType').val();
if(pType == 1){
$("#memPlan").css("display","block");	
$("#subPlan").css("display","none");
$("#planPeriod").css("display","none");	
}
if(pType == 2){
$("#subPlan").css("display","block");	
$("#memPlan").css("display","none");
$("#planPeriod").css("display","block");	

}

}	
   
function numericFilter(data)

{

   data.value = data.value.replace(/[^.0-9^.+,-]/ig,"");

}

function text_filter(data)

{

   data.value = data.value.replace(/[^ .a-z]/ig,"");

}
 
</script>

<style>

.isa_success

{

color: #FFFFFF;

background-color: #174873;

}

.error

{

color:#D8000C;

/*background-color:#FFBABA;*/

}

.isa_error

{

color:#D8000C;

background-color:#FFBABA;

}

.isa_success i,.isa_error i

{

margin:10px 22px;

font-size:2em;

/*vertical-align:middle;*/

}

.required

{

color:#FF0000;
float:right;

}

</style>

{/literal}