{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% block content %}


   <article class="resume-wrapper text-center position-relative">
	    <div class="resume-wrapper-inner mx-auto text-left bg-white shadow-lg">
		    
			<form method="post" action="../resume/"  enctype="multipart/form-data" onSubmit="return validateForm();">
				{% csrf_token %}
				<div style="width: 400px;">
				</div>
				<div style="text-align: center; padding-bottom: 18px;font-size : 24px;">Resume Form</div>
				<div style="padding-bottom: 10px;padding-top: 10px;font-size : 18px;background-color: lightblue; ">Personal details</div>
				<div style="display: flex; padding-bottom: 18px;width : 450px;">
				<div style=" margin-left : 12.5%; margin-right : 1%; width : 49%;">First name<span style="color: red;"> *</span><br/>
				<input type="text" id="data_1" name="data_1" style="width: 100%;" class="form-control"/>
				</div>
				<div style=" margin-left : 1%; margin-right : 0; width : 49%;">Last name<span style="color: red;"> *</span><br/>
				<input type="text" id="data_2" name="data_2" style="width: 100%;" class="form-control"/>
				</div>
				 
                  
				</div>
				<div style=" margin-left : 5%; margin-right : 0; width : 49%;padding-bottom: 18px;">Contact<span style="color: red;"> *</span><br/>
                    <input type="number" id="data_3" name="data_3" style="width: 41%;" class="form-control"/>
					</div>
				<div style=" margin-left : 5%; margin-right : 0; width : 49%;padding-bottom: 18px;">DOB<span style="color: red;"> *</span><br/>
					<input type="date" id="data_4" name="data_4" style="width: 100%;" class="form-control"/>
				</div>	
				<div style="margin-left : 5%;padding-bottom: 18px;padding-bottom: 18px;">Email<span style="color: red;"> *</span><br/>
					<input type="email" id="data_5" name="data_5" style="width : 450px;" class="form-control"/>
					</div>
					<div style="padding-bottom: 10px;padding-top: 10px;font-size : 18px;background-color: lightblue;">Educational details</div>	
                <div style=" margin-left : 5%; margin-right : 0; width : 49%;">Skills<span style="color: red;"> *</span><br/>
                    <input type="text" id="data_6" name="data_6" style="width: 100%;" class="form-control"/>
                    </div>
				<br>	
				<div style=" margin-left : 5%; margin-right : 0; width : 80%;padding-bottom: 18px;">Qualifications<span style="color: red;"> *</span><br/><br>
				 <table>
                    <tr>
                        <th> Qualification </th>
                        <th> University </th>
                        <th> Institute </th>
                        <th> Year </th>
                        <th> CPI </th>
                        
                    </tr>
                    <tr>
                        <td> Post Graduation </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                    </tr>
                    <tr>
                        <td> Graduation </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                    </tr>
                    <tr>
                        <td> 12th </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                    </tr>
                    <tr>
                        <td> 10th </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                        <td> <input type="text" class="form-control"/> </td>
                    </tr>
				 </table>
				</div>
				 <div style="margin-left : 5%;padding-top: 18px;padding-bottom: 18px;">Major Projects<span style="color: red;"> *</span><br/><br>
					<input type="text" id="data_7" name="data_7" style="width : 450px;height: 100px;" class="form-control"/> <br>
					<input type="text" id="data_8" name="data_8" style="width : 450px;height: 100px;" class="form-control"/> <br>
				</div>
					<div style="padding-bottom: 10px;padding-top: 10px;font-size : 18px;background-color: lightblue;">Misc details</div>
					
					<div style="margin-left : 5%;padding-top: 18px;padding-bottom: 18px;">Work Experience<br/><br>
						<input type="text" id="data_10" name="data_10" style="width : 450px;height: 100px;" class="form-control"/> <br>
						<input type="text" id="data_11" name="data_11" style="width : 450px;height: 100px;" class="form-control"/>	
				<br>	<div style=" padding-bottom: 18px; margin-right : 0; width : 49%;">Relevant courses Taken<br/>
						<input type="text" id="data_12" name="data_12" style="width: 100%;" class="form-control"/>
						</div>
						<br>	<div style=" padding-bottom: 18px; margin-right : 0; width : 49%;">Positions of Responsibility<br/>
							<input type="text" id="data_13" name="data_13" style="width: 100%;" class="form-control"/>
							</div>
							<br>	<div style=" padding-bottom: 18px; margin-right : 0; width : 49%;">Awards and Achievements<br/>
								<input type="text" id="data_14" name="data_14" style="width: 100%;" class="form-control"/>
								</div>				
            
				<div style="padding-bottom: 18px;"><input name="skip_Submit" value="Submit" type="submit"/></div>
				</form>
		    
    

</body>
</html> 



<script type="text/javascript">
 function validateForm() {
 $( ".has-error" ).removeClass("has-error");
if (isEmpty(document.getElementById('data_3').value.trim())) {
 alert('First name is required!');
 document.getElementById('data_3').parentNode.className += " has-error";
 return false;
}
if (isEmpty(document.getElementById('data_4').value.trim())) {
 alert('Last name is required!');
 document.getElementById('data_4').parentNode.className += " has-error";
 return false;
}
if (isEmpty(document.getElementById('data_5').value.trim())) {
 alert('Email is required!');
 document.getElementById('data_5').parentNode.className += " has-error";
 return false;
}
if (!validateEmail(document.getElementById('data_5').value.trim())) {
 alert('Email must be a valid email address!');
 document.getElementById('data_5').parentNode.className += " has-error";
 return false;
}
if (isEmpty(document.getElementById('data_6').value.trim())) {
 alert('Phone is required!');
 document.getElementById('data_6').parentNode.className += " has-error";
 return false;
}
if (isEmpty(document.getElementById('data_9').value.trim())) {
 alert('Position you are applying for is required!');
 document.getElementById('data_9').parentNode.className += " has-error";
 return false;
}
return true;
 }
 function isEmpty(str) { return (str.length === 0 || !str.trim()); }
 function validateEmail(email) {
 var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,15}(?:\.[a-z]{2})?)$/i;
 return isEmpty(email) || re.test(email);
}
</script>

	
	</div>
  
{% endblock content %}