{% load staticfiles %}
{% include 'userauth/layout/header.html' %}
<style type="text/css">
	.validationerr{
		border: 1px solid red !important;
	}
</style>
<div id="err"></div>
<div class="bg"></div>

<div class="login">
    <div class="container">
        <div class="row">
            <div class="login-wrap">
            
                <div class="logo">
                    <div class="col-md-12">
                        <a href="/userauth/login">
                            <img src="{% static '/images/logo.png' %}" alt="">
                        </a>
                    </div>
                </div>

                <div class="pos-rel">
                     <form class="login-container" method="POST" action="" id="form1" data-toggle="validator">
                     <input type='hidden' name='csrfmiddlewaretoken' value='{{csrf_token}}'>
                        <div class="row">

                            <div class="col-md-12">
                                <h5>Create your CallLuge Account</h5>
                               
                                
                                <div class="form-group">
                                    <div class="input-group cl-inp-grp">
                                        <span><i class="icon-name"></i></span>
                                        <input data-label="User Name" tabindex="1" maxlength="60" class="form-input" value="" type="text" placeholder="Name" name="user_name" id="user_name" data-error="Please enter your Name." required="">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group cl-inp-grp">
                                        <span><i class="icon-company"></i></span>
                                        <input tabindex="2" maxlength="60" class="form-input" value="" type="text" placeholder="Company Name" name="company_name" data-error="Please enter your Company Name." required="">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group cl-inp-grp">
                                        <span><i class="icon-phone"></i></span>
                                        <input tabindex="3" class="form-input no-spin" pattern="^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$" maxlength="15" type="text" placeholder="Phone Number" name="phone_number" data-error="Please enter your Phone Number." required="">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <!-- end of new account fields -->
                                <div class="form-group">
                                    <div class="input-group cl-inp-grp">
                                        <span><i class="icon-username"></i></span>
                                        <input tabindex="4" maxlength="120" class="form-input" value="" type="email" placeholder="Email Address" name="email" id="email" data-error="Please enter your Email Address." required="">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                
                                <div class="sign-radio">
                                    <div class="custom-checkbox">
                                        <input tabindex="5" type="radio" name="individual_business" id="radio1" checked value="individual">
                                        <label for="radio1">Individual</label>
                                    </div>
                                    <div class="custom-checkbox">
                                       <input tabindex="6" type="radio" name="individual_business" id="radio2" value="business">
                                       <label for="radio2">Agency Business</label>
                                    </div>
                                </div>

                            </div>                            

                            <div class="col-md-12 form-bottom">
                                <div class="agree-txt">
                                    <p>By creating a CallLuge account, you're agreeing to accept the <a href="#">CallLuge terms of service.</a></p>
                                </div>                            
                                <div class="btn-wrap sign-btn">
                                    <button tabindex="7" class="hvr-sweep-to-right button ripple primary" type="submit" name="">CREATE AN ACCOUNT</button>
                                </div>    
                            </div>

                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
{% include 'userauth/layout/footer.html' %}

<script>
$(document).ready(function(){

// $("#form1").submit(function(){
// 	var rep = NullValidate();
// 	if(rep){
// 		return true;
// 	}else{
// 	return false;
// }
// });


// ============old unused======
/*    $("#form1").submit(function(){
  		//return false;  	
    	var first_name = $("#user_name").val()
    	var email = $("#email").val()
    	if(first_name == '')
    	{
    		$("#user_name_err").html('Name Cannot be Null!')
    		var first_name_null = 1
    		//return false
    	}
    	if(email == '')
    	{
			$("#email_err").html('Email Cannot be Null!')
			var email_null = 1
			//return false		
    	}
    	else
    	{
			var status = validateForm();
			if(status == false)
			{
				$("#email_err").html('Not a Valid Email Address!')
				return false;
			}
    	}

    	if(first_name_null == 1 || email_null == 1)
    	{
    		return false
    	}
    });*/
});

// function NullValidate() {
	
	
// $(".validate").each(function() {
// 	var temp = 0
//     if ($(this).val() == '')
//     {
//     	temp = 1;
//     	$(this).addClass("validationerr");
//     }
//     else
//     { 
//     	$(this).removeClass("validationerr");
//     }
// });

// len_div = $('.validationerr').length;
// if(len_div==0){
// 	return true;
// }else{
// 	return false;
// }
// }

// function validateForm() {
// 	//return true;

//     var x = $("#email").val();
//     var atpos = x.indexOf("@");
//     var dotpos = x.lastIndexOf(".");
//     if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
//         //alert("Not a valid e-mail address");
//         return false;
//     }
// }

</script>