{% extends 'base.html' %}

{% block midpart %}

<!-- Font Awesome -->
<link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="/static/dist/css/skins/_all-skins.min.css">
<link href="/static/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
    .error {color: red;}
  </style>

<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">


<div class="row">
    <div class="col-xs-12">
        <div class="box box-success">
            <div class="box-header with-border">
                <h3 class="box-title"> <b>{{ title }}</b></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <form action="." role="form" autocomplete="off" method="POST" enctype="multipart/form-data" id="id_add_resume" >{% csrf_token %}
                    {% for field in form %}
                    <div class="form-group col-xs-6">
                        <label>{{ field.label_tag }}</label>
                        {% if field.help_text %}
                        <label class="control-label" for="inputWarning" style="color:#F39C12;">
                            <i class="fa fa-bell-o"></i>
                            {{ field.help_text }} <span style="color: red;"> {{ field.errors|striptags }}</span>
                        </label>
                        {% endif %}
                        {{ field }}
                    </div>
                    {% endfor %}
                    <!--
                                        <span style="display: inline-block;max-width: 100%;margin-bottom: 5px;font-weight: 700;">Education Details</span>
                                  <div id="id_edu_div">
                                    {% if education_obj %}
                                    {% for education in education_obj %}
                                      <div  id="id_edu_div_{{ education.id }}">
                                        <span class="col-md-12"><span class="pull-right" onclick="remove_div('id_edu_div_{{ education.id }}');">X</span></span>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <input type="text" name="degree" class="form-control" placeholder="Degree" required value="{{ education.qualification }}" />
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <input type="text" name="college-name" class="form-control" placeholder="School / College Name" required value="{{ education.institute }}" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <input type="text" name="percentage" class="form-control" placeholder="Percentage" required value="{{ education.percentage }}" />
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <input type="text" name="year" class="form-control" placeholder="Year of passing" required value="{{ education.year_of_passing }}" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <textarea name="education" cols="76" rows="12" required>{{ education.description }}</textarea>
                                            </div>
                                        </div>
                                        <hr>
                                      </div>
                                    {% endfor %}
                                    {% endif %}
                                  </div>
                                  <div id="id_edu_insert"></div>
                                  <a class="btn btn-primary" onclick="insert_edu_content();">Add One More Education</a>
                                  <br>
                                    <span style="display: inline-block;max-width: 100%;margin-bottom: 5px;font-weight: 700;">Job Experience Details</span>
                                {% if experience_obj %}
                                <div id="id_exp_div">
                                {% for experience in experience_obj %}
                                  <div  id="id_exp_div_{{ experience.id }}">
                                  <span class="col-md-12"><span class="pull-right" onclick="remove_div('id_exp_div_{{ experience.id }}');">X</span></span>
                                  <div class="row">
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <input type="text" name="job-title" class="form-control" placeholder="Job title" required value="{{ experience.title }}" />
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <input type="text" name="job-company" class="form-control" placeholder="Company" required value="{{ experience.company }}" />
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-sm-6">
                                      <div class="form-group">
                                        <input type="text" name="start-date" class="form-control class_calendar" placeholder="Start Date (yyyy-mm-dd)" required value="{{ experience.start_date|date:'Y-m-d' }}" />
                                      </div>
                                    </div>
                                    <div class="col-sm-6">
                                      <div class="form-group">
                                        <input type="text" name="end-date" class="form-control class_calendar" placeholder="End Date (yyyy-mm-dd)" required value="{{ experience.end_date|date:'Y-m-d' }}" />
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-md-12">
                                      <textarea name="job_experience" cols="76" rows="12" required>{{ experience.description }}</textarea>
                                    </div>
                                  </div>
                                  <hr>
                                  </div>
                                {% endfor %}
                                </div>
                                {% endif %}
                                <div id="id_exp_insert"></div>
                                  <a class="btn btn-primary" onclick="insert_exp_content();">Add One More Experience</a>

                                 <br>
                                    <span style="display: inline-block;max-width: 100%;margin-bottom: 5px;font-weight: 700;">Project Details</span>
                                {% if project_obj %}
                                <div id="id_pro_div">
                                {% for project in project_obj %}
                                  <div  id="id_pro_div_{{ project.id }}">
                                  <span class="col-md-12"><span class="pull-right" onclick="remove_div('id_pro_div_{{ project.id }}');">X</span></span>
                                  <div class="row">
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <input type="text" name="project-title" class="form-control" placeholder="project title" required value="{{ project.title }}"/>
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <input type="text" name="project-client" class="form-control" placeholder="project client" required value="{{ project.client }}"/>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-sm-6">
                                      <div class="form-group">
                                        <input type="text" name="team-size" class="form-control" placeholder="Team Size" required value="{{ project.team_size }}"/>
                                      </div>
                                    </div>
                                    <div class="col-sm-6">
                                      <div class="form-group">
                                        <input type="text" name="duration" class="form-control" placeholder="Duration" required value="{{ project.duration }}"/>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-sm-6">
                                      <div class="form-group">
                                        <input type="text" name="role" class="form-control" placeholder="project role" required value="{{ project.role }}"/>
                                      </div>
                                    </div>
                                    <div class="col-sm-6">
                                      <div class="form-group">
                                        <input type="text" name="skills_used" class="form-control" placeholder="Skills Used" required value="{{ project.skills_used }}"/>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-md-12">
                                      <textarea name="project_description" cols="76" rows="12" required>{{ project.description }}</textarea>
                                    </div>
                                  </div>

                                  <hr>
                                  </div>
                                {% endfor %}
                                </div>
                                {% endif %}
                                <div id="id_pro_insert"></div>
                                  <a class="btn btn-primary" onclick="insert_pro_content();">Add One More Project</a>
                                </div>

                     -->
                    <button type="submit" class="btn btn-block btn-primary" style="width: 20%;float: right; margin: 12px 14px 0px 0px;">
                        Submit
                    </button>
                </form>

                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

    <!-- inserting education details div -->
    <div id="id_div_edu_hide" style="display:none;">
        <div id="id_div_edu">
            <span class="col-md-12"><span class="pull-right" onclick="remove_div('id_div_edu');">X</span></span>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="degree" class="form-control" placeholder="Degree" required />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="college-name" class="form-control" placeholder="School / College Name" required />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="percentage" class="form-control" placeholder="Percentage" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="year" class="form-control" placeholder="Year of passing" required/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <textarea name="education" cols="76" rows="12" required></textarea>
                </div>
            </div>
        </div>
    </div>
    <!-- inserting education details ends here -->

    <!-- Hide for inserting experience div -->
    <div style="display:none;" id="id_hide_exp_div">
        <div id="id_exp_div">
            <span class="col-md-12"><span class="pull-right" onclick="remove_div('id_exp_div');">X</span></span>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="job-title" class="form-control" placeholder="Job title" required />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="job-company" class="form-control" placeholder="Company" required/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="start-date" class="form-control class_calendar" placeholder="Start Date (yyyy-mm-dd)" required />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="end-date" class="form-control class_calendar" placeholder="End Date (yyyy-mm-dd)" required />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <textarea name="job_experience" cols="76" rows="12" required></textarea>
                </div>
            </div>
        </div>
    </div>
    <!-- experience hiding ends -->

    <!-- Hide for inserting Projects div -->
    <div style="display:none;" id="id_hide_pro_div">
        <div id="id_pro_div">
            <span class="col-md-12"><span class="pull-right" onclick="remove_div('id_pro_div');">X</span></span>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="project-title" class="form-control" placeholder="project title" required />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="project-client" class="form-control" placeholder="project client" required/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="team-size" class="form-control" placeholder="Team Size" required />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="duration" class="form-control" placeholder="Duraion" required />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="role" class="form-control" placeholder="project role" required />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="skills_used" class="form-control" placeholder="Skills Used" required />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <textarea name="project_description" cols="76" rows="12" required></textarea>
                </div>
            </div>
        </div>
    </div>
    <!-- inserting project details end -->

    <!-- projects hiding ends -->
    <!-- jQuery 3 -->
    <script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <!-- SlimScroll -->
    <script src="/static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="/static/bower_components/fastclick/lib/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="/static/dist/js/adminlte.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="/static/dist/js/demo.js"></script>
    <!-- page script -->
    <script src="/static/js/jquery.mask.js"></script>
    <script src="/static/js/jquery.validate.min.js"></script>


    <script type="text/javascript">
  $(document).ready(function(){
      $("form#id_add_resume").validate({
          rules: {
               requirement: {required: true},
               first_name: {required: true},
               last_name: {required: true},
               email: {required: true},
               mobile: {required: true},
               skills: {required: true},
               experience: {required: true},
               dob: {required: true},
               ctc: {required: true},
               ectc: {required: true},
               notice_period: {required: true},
               current_location: {required: true},
           }
      });
  });
   
</script>

    <script type="text/javascript">
  $(document).ready(function(){

      $("input#id_dob").attr("type", "date");
      $("input#id_mobile").mask('0000000000', {'placeholder': '__________'});

  });

document.getElementById('id_resume').onchange = function() {
var file = document.getElementById("id_resume").files[0];
var data = new FormData();
data.append('file', file);
$.ajax({
    url : "/get_resume_data/",
    processData : false,
    contentType : false,
    type : 'POST',
	dataType: "json",
    data : data,
	success : function(data)
		{
			document.getElementById("id_email").value = data.email;
			document.getElementById("id_mobile").value = data.mobile;
			document.getElementById("id_experience").value = data.exp;
			document.getElementById("id_skills").value = data.skills;
			document.getElementById("id_first_name").value = data.first_name;
			document.getElementById("id_last_name").value = data.last_name;
			document.getElementById("id_current_location").value = data.location;
			document.getElementById("id_dob").value = data.dob;
		},
}).done(function(json) {
});

};
</script>

    <script>
function get_name(data)
{
	var email = data.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
	var first = email[0].split('@')[0];
	if (first.indexOf(".") > -1){
		var first_name = first.split(".")[0];
		var second_name = first.split(".")[1];
	}
	else if(first.indexOf("_") > -1){
		var first_name = first.split("_")[0];
		var second_name = first.split("_")[1];
	}
	else if(first.indexOf("-") > -1){
		var first_name = first.split("-")[0];
		var second_name = first.split("-")[1];
	}
	else {
		var first_name = first;
		var second_name = '';
	}
	second_name = second_name.replace(/[0-9]/g, '');
	first_name = first_name.replace(/[0-9]/g, '');
	document.getElementById("id_last_name").value = second_name;
	return first_name;
}
function get_email_data(data)
{
    return data.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
}
function get_pno(data)
{
    return data.match(/[\+]?\d{10}|\(\d{3}\)\s?-\d{6}/);
}
function get_skills(doc_data)
{
    var input_string = "came";
   $.ajax({
        url : "/getskills/",
        type : "POST",
        dataType: "json",
		async: false,
        data : {
				client_response : input_string,
				csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success : function(json)
				{
					var obj_array =  json.response;
					var skill_list = new String();
					$.each(obj_array, function (index, value)
					{
						if(doc_data.toLowerCase().match(value))
							{
								skill_list = skill_list.concat(value,",");
							}
					});

					document.getElementById("id_skills").value = skill_list.substring(0, skill_list.length - 1);;

                },
                error : function(xhr,errmsg,err) {
                    alert(xhr.status + ": " + xhr.responseText);
                }
           });

}
</script>

    <script>

    $(document).ready(function(){
        $("input.class_calendar").attr("type", "date");
      });
    function insert_edu_content()
    {
      var div_html = $( "#id_div_edu_hide" ).html();
      $("#id_edu_insert").append(div_html);
     }

    function insert_exp_content()
    {
      var div_html = $( "#id_hide_exp_div" ).html();
      $("#id_exp_insert").append(div_html);
     }

    function insert_pro_content()
    {
      var div_html = $( "#id_hide_pro_div" ).html();
      $("#id_pro_insert").append(div_html);
     }

     function remove_div(div_id)
      {
        $("#"+div_id).remove();
      }
</script>

    {% endblock midpart %}