{% extends 'base.html' %}
{% load rolemgmt_tags %}
{% load rmtmgmt_tags %}
{% 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">

<!-- 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>
.button2link {
  background: none;
  border: none;
  padding: 0;
  font-family: arial, sans-serif;
  color: #069;
  cursor: pointer;
  outline-color: transparent;
}


  	.input-group .fa-search{
  		display: table-cell;
	}
    .btn-adjustment {width: 13%;float: right;margin: -30px 11px 0px 0px;padding-left:15px;}

	.circle-text {
				display: table-cell;
				height: 20px; /*change this and the width
				for the size of your initial circle*/
				width: 20px;
				text-align: center;
				vertical-align: middle;
				border-radius: 50%;
				background: #808080;
				color: #fff;
				font: 12px "josefin sans", arial; /*change this
				for font-size and font-family*/
				}

				input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
/* hide added cancel button */
span.clear {
    display: none;
}
/* Only show cancel button when focused */
.focused span.clear {
    position: relative;
    left: -18px;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
}
/* Add a hover color */
.focused span.clear:hover {
    color: red;
}

  </style>

<style>
    @media only screen and (min-width: 240px) and (max-width: 900px) {
	.add-resume{width:17%;font-size:90%;margin-top:-20px;}
	.add-client{width:20%;font-size:90%;margin-top:-20px;}
	}
  </style>
<style>
    @media only screen and (min-width: 1000px) {
    .add-client{width:20%;}
    }
  </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">
                <h3 class="box-title restitle">
                    <b>{{ title }}</b>
                    {% if search_tag %}
                    : {{ count }} found for <span style="font-size:10;">{{ skills }}</span>
                    {% endif %}
                </h3>
            </div>
            <a href="/upload_logs/" class="btn btn-social btn-dropbox btn-adjustment add-client" style="text-align:center;width:10%;">Upload Logs</a>
            {% if not request.user|get_client_specific_tag %}
                <a href="/view-requirement/" class="btn btn-social btn-dropbox btn-adjustment add-client" style="text-align:center;width:14%;">
                    View Requirements
                </a>
            {% endif %}
            <button class="btn btn-block btn-social btn-dropbox btn-adjustment add-resume"
                    style="text-align:center;" onclick="upload_bulk_resume();">
                Upload Bulk Resumes
            </button>
            <!-- Upload Bulk Resume Modal -->
            <div class="modal fade" id="id_bulk_resumes_upload_modal" role="dialog">
                <div class="modal-dialog" style="width:30%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>

                            <h4 class="modal-title">
                                <b>Bulk Upload</b>
                            </h4>


                        </div>
                        <div id="id_bulk_upload_error_message">
                            <form method="POST" action="/upload_bulk_resumes/" id="id_form_upload_bulk_resumes" enctype="multipart/form-data">{% csrf_token %}
                                <div class="modal-body">
                                    <table>
                                        <tr>
                                            <td><input type="radio" name="category" id="id_requirement" value=1 onchange="show_requirement();"></td>
                                            <td> &nbsp;for Requirement</td>
                                        </tr>
                                        <tr>
                                            <td> <input type="radio" name="category" id="id_hotpool" value=2 onchange="show_requirement();"></td>
                                            <td> &nbsp;for Hotpool</td>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="category" id="id_bank" value=3 checked onchange="show_requirement();"></td>
                                            <td> &nbsp;for Resume Bank </td>
                                        </tr>
                                    </table>
                                    <span id="id_requirement_hide" style="display:none;">
										  Requirement : <select name="requirement" id="id_select_requirement" class="form form-control">
											  {% for requirement in requirements %}
												<option value="{{ requirement.0 }}">{{ requirement.1 }}</option>
											  {% endfor %}
										  </select>
									  </span><br>
                                    <div id="id_files_error_msg"></div>
                                    Resume Directory :
                                    <label for="id_resume_directory" class="form form-control"><span id="id_span_directory">Choose Directory</span></label>
                                    <input type="file" name="resume_directory" id="id_resume_directory" required
                                           class="form form-control" webkitdirectory mozdirectory  style="display:none;"><br>
                                    <div id="id_tags_error_msg"></div>
                                    #Tags : <input type="text" name="skill_tags" id="id_skill_tags" required class="form form-control"><br>
                                    <input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>
                                    <div style="margin-left:45%;"><img id="id_progress_bar_loading" src="/static/images/3.gif" style="display:none;"/></div>

                                </div>
                                <div class="modal-footer">
                                    <input type="button" value="Upload Resumes" class="btn btn-default pull-left" id="id_submit_bulk_resumes"/>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end of bulk upload resume modal -->

            <!-- Start of rating report -->

            <div class="modal fade" id="id_rating_modal" role="dialog">
                <div class="modal-dialog" style="width:30%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title"><b>Breif View</b></h4>
                        </div>
                        <div class="modal-body" id="id_rating_body">
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </div>
            <!-- end of rating report -->
            {% with request.user|get_role as role %}
            {% if role == "Talent Acquisition" or role == "TA" %}
            <button type="submit" style="height:31px; width:16%;" name="view_alloc_req"
                    class="btn btn-block btn-social btn-dropbox btn-adjustment view-allocated-req"
                    data-toggle="modal" data-target="#view_alloc_req">
                View Allocated Requirements
            </button>
            {% endif %}
            {% endwith %}

            <a href="/resume-management/add/" class="btn btn-block btn-social btn-dropbox btn-adjustment add-resume"
               style="text-align:center;margin-top:-30px;">
                Add Resume
            </a>
            <div class="modal fade" id="view_alloc_req" role="dialog">
                <div class="modal-dialog" style="width:50%;">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title"><b>Allocated Requirements</b></h4>
                        </div>
                        <div class="modal-body">
                            <div id="id_load_req">
                                <table id="example11" class="table table-bordered table-striped" style="width:100%;">
                                    <thead>
                                    <tr>
                                        <th>Requirement</th>
                                        <th>Requirement ID</th>
                                        <th>Client Name</th>
                                        <th>Accept</th>
                                        <th>Reject</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for r in req %}
                                    <tr id="id_alloc_req_{{r.requirement.id}}">
                                        <td>{{ r.requirement.position_name }}</td>
                                        <td>{{ r.requirement.client_requirement_id }}</td>
                                        <td>{{ r.requirement.client }}</td>
                                        <td>
                                            <button type="submit" id="id_accept_req" name="accept_req" onclick="update_req_status({{r.requirement.id}}, {{request.user.id}}, 1);">Accept</button>
                                        </td>
                                        <td>
                                            <button type="submit" id="id_reject_req_{{r.requirement.id}}" name="reject_req" onclick="update_req_status({{r.requirement.id}}, {{request.user.id}}, 2);">Reject</button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="col-sm-6">
                    <span class="pull-left" style="margin-left:-1%;">
                        <span style="display:inline-block; margin-top: 10px;">

                            <span class="autocomplete">
                                {% if search_key %}
                                   Search : <input style="width:60%;" size="60" class="form form-control" id="id_search_tag" value="{{search_key}}" type="text" placeholder="Enter search keyword">
                                {% else %}
                                   Search : <input style="width:60%;" size="60" class="form form-control" id="id_search_tag" type="text" placeholder="Enter search keyword">
                                {% endif %}
                                <span><i style="color:#5c80f3; margin-left:-2%;"></i></span>
<!--                                <span><img style="margin-left: 8%;" src="/static/high-rank/images/search_dots.jpeg"></span>-->
                            </span>
                        </span>
                    </span>
                    <!--<form onsubmit="get_resumes(); return false;">-->
                        <!--Search : <input type="search" id="id_search_box" class="form form-control" style="width:60%;"-->
                                        <!--placeholder="Enter Search Keyword">-->
                    <!--</form>-->
                    <!--
                    <div class="input-group" style="width:60%;">
                          <input type="text" class="form-control" placeholder="Search Keyword" aria-describedby="basic-addon2"
                        id="id_search_box">
                          <span class="input-group-addon fa fa-search" id="basic-addon2" onclick="get_resumes();"></span>
                    </div>
                    -->
                </div>
                <div id="id_search_resumes">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Contact Details</th>
                            {% if not search_tag %}
                            <th>Requirement</th>
                            {% endif %}
                            <th>Exp / CTC / ECTC / NP</th>
                            {% if not search_tag %}
                            <th style="width:140px;">Stage</th>
                            <th style="width:140px;">State</th>
                            <th>TA</th>
                            {% else %}
                            <th>Reached Stage</th>
                            <th>Attach to Requirement</th>
                            {% endif %}
                            <th>Action</th>
                            <th style="display:none;">hide</th>
                            {% if auto_suggest_tag %}
                            <th>Rating</th>
                            {% endif %}
                        </tr>
                        </thead>
                        <tbody>
                        {% for r in resume %}

                        <tr id="id_tr_resume_{{ r.id }}">
                            <td>
                                {{ r.first_name }} {{ r.last_name }}<br>
                                <!--					{% if r.hot_pool %}-->
                                <!--						<input type="checkbox" name="hot_pool_tag" id="id_hot_pool_tag{{r.id}}" onchange="change_hot_pool_tag({{r.id}});" checked>-->
                                <!--						<span id="hot_pool_span{{ r.id }}">Hot Pool</span>-->
                                <!--					{% else %}-->
                                <!--						<input type="checkbox" name="hot_pool_tag" id="id_hot_pool_tag{{r.id}}" onchange="change_hot_pool_tag({{r.id}});">-->
                                <!--						<span id="hot_pool_span{{r.id}}">Add to Hot Pool</span>-->
                                <!--					{% endif %}-->
                                {% if search_tag %}
                                <!--						{% for matched_skill in skill_list|search_matched_skills:r.skills %}-->
                                <!--					  		<b>{{ matched_skill }}</b>&nbsp;&nbsp;&nbsp;-->
                                <!--						{% endfor %}-->
                                {% endif %}
                            </td>
                            <!--<td>{{ r.mobile }}<br>{{ r.email }}</td>-->
                            <td >{{ r.mobile }}<br>{{ r.email }}<input id="email{{r.id}}" hidden readonly value="{{ r.email }}"></td>
                            {% if not search_tag %}
                            <td>{{ r.requirement }}</td>
                            {% endif %}
                            <td>{{ r.experience }} / {{ r.ctc }} / {{ r.ectc }} / {{ r.notice_period }}</td>
                            {% if not search_tag %}
                            <td>
                                <table>
                                    {% with r.get_stage as resume_stages_list %}
                                    <tr id="id_td_stage_{{ r.id }}">
                                        <td style="vertical-align: top;">
                                            <div style="margin-top:5px;">
                                                <label class="badge">{{resume_stages_list.0.2}}</label>
                                            </div>
                                        </td>
                                        <td width="100px;">
                                            <select style="width:140px" class="popupclass form-control input-sm" name="resume_stage" id="resume_stage{{r.id}}"
                                                    onchange="updatestatus({{ r.id }}, '{{ r.stage.stage }}');">
                                                {% for stage in resume_stages_list %}
                                                <option value="{{stage.0}}" sta_name="{{ stage.1 }}">{{stage.1}}</option>
                                                {% endfor %}
                                            </select>
                                            <div id="stage_timing{{r.id}}" style="margin-left:0px;font-size:12px;">
                                                <button value="+" onclick="get_all_stage_timings({{r.id}});" id="id_expand_stage_timings_{r.id}}">
                                                    +
                                                </button>
                                                {{ r|stage_timing|safe }}
                                            </div>
                                            <div id="all_stage_timing{{r.id}}" style="margin-left:0px;font-size:12px;"></div>
                                            <button value="-" onclick="collapse_timings({{r.id}});" id="id_collapse_timings_{{r.id}}" style="display:none;">
                                                -
                                            </button>
                                        </td>
                                    </tr>
                                    {% endwith %}
                                </table>
                            </td>
                            <td width="100px;" id="id_tr_status_{{r.id }}">
                                <select class="form-control input-sm" name="interview_status" id="interview_status{{r.id}}"
                                        onchange="updateinterviewstatus({{r.id}});" style="width:170px;">
                                    {% for status in r.get_status %}
                                    {% if status.1 == r.status %}
                                    <option value="{{status.0}}" selected>{{status.1}}</option>
                                    {% else %}
                                    <option value="{{status.0}}">{{status.1}}</option>
                                    {% endif %}
                                    {% endfor %}
                                </select>
                                {% if r.stage.stage == 'Joining' or r.stage.stage == "Offer" %}
                                {% with r.id|join_date_time as jo %}
                                {% if jo %}
                                Joining Date: {{ jo }}
                                {% endif %}
                                {% endwith %}
                                {% else %}
                                {% with r.id|sch_date_time as sch %}
                                {% if sch %}
                                Scheduled Timing:<div id="sch_date_time_show">{{ sch }}</div>
                                {% endif %}
                                {% endwith %}
                                {% endif %}
                            </td>

                            <td>{{ r.created_by.get_full_name }}</td>
                            {% else %}
                            <td>{{ r.released_stage.stage }}</td>
                            <td><select name="attch_req" id="attach_req{{r.id}}" style="width:100%;" onchange="add_req_resume({{r.id}});">
                                {% for req in req_obj %}
                                {% if r.requirement.id == req.id %}
                                <option value={{req.id}} selected>{{ req }}</option>
                                {% else %}
                                <option value={{req.id}}>{{ req }}</option>
                                {% endif %}
                                {% endfor %}
                            </select></td>
                            {% endif %}
                            <td style="width:15%;">

                                <a href="/download_resume/?resume_id={{ r.id }}"><i class="fa fa-fw fa-download" style="color: green;"></i>Download</a> |
                                <a href="/resume-management/edit/{{ r.id }}/"><i class="fa fa-fw fa-edit" style="color: #000000;"></i>Edit</a>
                                {% if r.get_resume_history %}
                                | <a onclick="history_popup({{ r.id }}, {{ r.requirement.id }});">
                                <input id="history_popup_email_input{{ r.id }}" hidden readonly value="{{ r.email }}">
                                <i class="fa fa-fw fa-history" style="color: blue;"></i><span style="cursor:pointer;">History</span></a><br>
                                {% else %}
                                | <a><i class="fa fa-fw fa-history" style="color: blue;"></i>History</a><br>
                                {% endif %}
                                <!--| <a href="/resume-management/view/{{ r.id }}/"><i class="fa fa-fw fa-eye" style="color: darkred;"></i>View</a>-->

                                <!--for interview and test status-->
                                {% if r.assessment_schedule_id %}
                                {% if r.assessment_status %}
                                    |<a onclick="test_popup( {{ r.assessment_schedule_id }}, '{{ r.email }}')">
                                        <i class="fa fa-trophy" style="color:blue;"></i><span style="cursor:pointer;">Test Details </span>
                                    </a>
                                {% else %}
                                    |<i class="	fa fa-trophy" style="color:grey;"></i><span>Test Details</span>
                                {% endif %}
                                {% endif %}

                                {% if r.interview_schedule_id %}
                                {% if r.interview_status %}
                                    |<a onclick="interview_popup( {{ r.interview_schedule_id }}, '{{ r.email }}')" >
                                        <i class="fa fa-trophy" style="color:blue;"></i><span style="cursor:pointer;">Interview Details</span>
                                    </a>
                                {% else %}
                                    |<i class="fa fa-trophy" style="color:grey;"></i><span>Interview Details</span>
                                {% endif %}
                                {% endif %}

                            </td>
                            <td style="display:none;">{{ r.get_stage.0.1 }}</td>
                            {% if auto_suggest_tag %}
                            <td>
                                {{ r.id|get_rating }}<span class="fa fa-star" style="color:orange;"></span>
                                <a onclick="show_rating_modal({{ r.id }}, 1)">Brief Report</a>
                                <a onclick="show_rating_modal({{ r.id }}, 2)">Detail Report</a>
                            </td>
                            {% endif %}
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <!-- /.box-body -->
                    <!-- pagination -->
                    <div class="pagination pull-right">
				<span class="step-links">
					{% if resume.has_previous %}
						<a href="?page=1" class="btn btn-primary">&laquo; first</a>
						<a href="?page={{ resume.previous_page_number }}" class="btn btn-primary">previous</a>
					{% endif %}
					<span class="current">
						Page {{ resume.number }} of {{ resume.paginator.num_pages }}.
					</span>
					{% if resume.has_next %}
						<a href="?page={{ resume.next_page_number }}" class="btn btn-primary">next</a>
						<a href="?page={{ resume.paginator.num_pages }}" class="btn btn-primary">last &raquo;</a>
					{% endif %}
				</span>
                    </div>
                </div>
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

    <div class="modal fade" id="history_popup_modal" role="dialog">
        <div class="modal-dialog bdd001">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close history_popup_modal_close">&times;</button>
                    <h4 class="modal-title"><b>Interview History</b></h4>
                </div>
                <div class="modal-body table-responsive" id="history_popup_modalbody">
                    <table class="table">
                        <tr>
                            <th>Candidate Name</th>
                            <th id="popup_cand_name"></th>
                        </tr>
                        <tr>
                            <th>Experience</th>
                            <th id="popup_exp"></th>
                        </tr>
                    </table>
                    <table id="example12" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Stage</th>
                            <th>State</th>
                            <th>Date</th>
                            <th>Remarks</th>
                            <th>Remarks by</th>
                            <th>Attachment</th>
                        </tr>
                        </thead>
                        <tbody id="history_popup_modal_data">
                        </tbody>
                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default history_popup_modal_close">Close</button>
                </div>
            </div>
        </div>
    </div>

    {% include "sch_joi_com_modal.html" %}

    <div class="modal fade prop_container" id="prop_container" role="dialog">
        <div class="modal-dialog" style="width:30%;">
        </div>
    </div>


    <div class="modal fade" id="id_error_modal" role="dialog">
        <div class="modal-dialog bdd001">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><b>Candidate Results- Error</b></h4>
                </div>
                <div class="modal-body table-responsive" id="">
                    <h4 style="color:red;text-align:center;">Details Not Found</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- models code end -->


    <!-- 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>-->
  <!--$(function () {-->
  <!--$('#example1').DataTable({-->
  <!--"scrollX": true,-->
  <!--"pageLength": 50,-->
  <!--"searching": false,-->
   <!--"paging": false,-->
   <!--"bInfo": false,-->
  <!--"order": [[0, "asc"]],-->
  <!--"aoColumnDefs": [-->
      <!--{ "bSearchable": false, "aTargets": [ 5 ] }-->
    <!--]-->

  <!--});-->
  <!--})-->
<!--</script>-->

      <script>
        function autocomplete(inp, arr) {
  /*the autocomplete function takes two arguments,
  the text field element and an array of possible autocompleted values:*/
  var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*close any already open lists of autocompleted values*/
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*create a DIV element that will contain the items (values):*/
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*append the DIV element as a child of the autocomplete container:*/
      this.parentNode.appendChild(a);
      /*for each item in the array...*/
      for (i = 0; i < arr.length; i++) {
        /*check if the item starts with the same letters as the text field value:*/
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*create a DIV element for each matching element:*/
          b = document.createElement("DIV");
          /*make the matching letters bold:*/
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
          b.addEventListener("click", function(e) {
              /*insert the value for the autocomplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
              closeAllLists();
              search_function();
          });
          a.appendChild(b);
        }
      }
  });
  /*execute a function presses a key on the keyboard:*/
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*If the arrow DOWN key is pressed,
        increase the currentFocus variable:*/
        currentFocus++;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /*If the arrow UP key is pressed,
        decrease the currentFocus variable:*/
        currentFocus--;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 13) {
        /*If the ENTER key is pressed, prevent the form from being submitted,*/
        //e.preventDefault();
        if (currentFocus > -1) {
          /*and simulate a click on the "active" item:*/
          if (x) x[currentFocus].click();
          search_function();
        }
      }
  });

  function addActive(x) {
    /*a function to classify an item as "active":*/
    if (!x) return false;
    /*start by removing the "active" class on all items:*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*add class "autocomplete-active":*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*a function to remove the "active" class from all autocomplete items:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  /*execute a function when someone clicks in the document:*/
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
      //search_function();

  });
}
var search_tags = {{ search_tags|safe }};
var tags = search_tags;
autocomplete(document.getElementById("id_search_tag"), tags);


$("#id_search_tag").on('keypress', function(e){
<!--alert('sdf');-->
    if(e.which == 13){
        search_function();
    }
});
function search_function(){
    var key = $("#id_search_tag").val();
    window.location = '/resume-management/?page=1&search=' + key;

}
    </script>


    <script>

function show_rating_modal(rid, show_tag)
{
	$.ajax({
           		url : "/show_rating_details/",
                type : "POST",
                dataType: "json",
				async: false,
                data : {
						rid : rid,
						tag : show_tag,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success : function(json)
				{
					var html_code = json.response;
					$("#id_rating_body").html(html_code);
					$('#id_rating_modal').modal('show');
				},
                error : function(xhr,errmsg,err) {
                    alert(xhr.status + ": " + xhr.responseText);
                }
    });
}

function upload_bulk_resume()
{
	$('#id_bulk_resumes_upload_modal').modal('show');
}

function updatestatus(rid, stage)
{
   var stage_id = $("#resume_stage"+rid).val();
   var next_stage = $("#resume_stage"+rid + " option:selected").attr("sta_name");
   $("#id_comment_rid").val(rid);
   $("#id_comment_comments").val("");
   var r = confirm("Changing the resume stage from "+ stage + " to " + next_stage);
   if (r == true ){
						$('#id_com_modal_stage').val(stage_id);
						$('#commentModal').modal('show');
	}

}


 <!--madhur changes-->

function updateinterviewstatus(rid)
{
	var status = $("#interview_status"+rid).val();
	var stage = $("#resume_stage"+rid).val();
	$("#id_sch_comments").val("");
	$("#id_sch_date_time").val("");
	$("#id_sch_date").val("");
	$("#id_comment_comments").val("");
	$.ajax({
           		url : "/get_sch_tag/",
                type : "POST",
                dataType: "json",
				async: false,
                data : {
						status : status,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success : function(json)
				{
					var tag = json.response;
					var joining_tag = json.joining_tag;
					if (tag)
					{
						$("#id_sch_rid").val(rid);
						$("#id_sch_status").val(status);
						if(joining_tag)
						{
							$("#id_span_date_time").hide();
							$("#id_span_date").show();
							$("#id_sch_date_time").prop('required',false);
							$("#id_sch_date").prop('required',true);
							$("#id_sch_email_id").prop("required", false);
						}
						else
						{
							$("#id_span_date").hide();
							$("#id_span_date_time").show();
							$("#id_sch_date").prop('required',false);
							$("#id_sch_date_time").prop('required',true);
						}
						$("#scheduleModal").modal("show");
					}
					else
					{
						$("#id_comment_rid").val(rid);
						$('#id_com_modal_status').val(status);
						$("#id_com_modal_stage").val(stage);
						$('#commentModal').modal('show');
					}

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

}

function add_req_resume(rid)
{
   var req_id = $("#attach_req"+rid).val();
   $.ajax({
                        url : "/attach_resume_requirement/",
                        type : "POST",
                        dataType: "json",
						async: false,
                        data : {
                            req_id : req_id,
							rid : rid,

                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json)
							{
								alert(json.response);
                            },
                              error : function(xhr,errmsg,err) {
                                alert(xhr.status + ": " + xhr.responseText);
                            }
                    });
}
</script>

    <script>
$(document).ready(function(){
	$('.dataTables_length').addClass('pull-left');
	$('.dataTables_filter').parent().addClass('col-sm-12');
	$('.dataTables_filter').parent().removeClass('col-sm-6');
	var now = new Date();
	var month = (now.getMonth() +1);
	var hours = now.getHours();
	var minutes = now.getMinutes();
	if (minutes < 10){
		minutes = "0" + minutes;
	}
	if (hours < 10){
		hours = "0" + hours;
	}
	if (month < 10){
		month = "0" + month;
	}
	var date = now.getDate();
	if (date < 10){
		date = "0" + date;
	}
	var datetime = now.getFullYear() + "-" + month + "-" + date;
	 var date = datetime.toString();
     $("input#joining_date").attr("min",date);
	 $("input#sch_date_time").attr("min",date+"T" +hours + ":" + minutes +":" + "00");
});
</script>

    <script>
function get_all_stage_timings(rid)
{
	$.ajax({
        url : "/get_all_stage_timings/",
        type : "POST",
        dataType: "json",
		async: false,
        data : {
            rid : rid,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success : function(json)
		{
			var obj_array = json.response;
			$("#stage_timing"+rid).hide();
			$("#all_stage_timing"+rid).html(obj_array);
			$("#id_collapse_timings_"+rid).show();
        },
        error : function(xhr,errmsg,err) 
		{
            alert(xhr.status + ": " + xhr.responseText);
        }
    });
}

function collapse_timings(rid)
{
	$("#all_stage_timing"+rid).html("");
	$("#id_collapse_timings_"+rid).hide();
	$("#stage_timing"+rid).show();
}

</script>
    <script src="/static/js/spin.min.js"></script>
    <script>

function change_hot_pool_tag(rid)
{
   $.ajax({
        url : "/change_hot_pool_tag/",
        type : "POST",
        dataType: "json",
		async: false,
        data : {
            rid : rid,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success : function(json)
		{
			if (json.hotpool_tag)
			{
				$("#hot_pool_span"+rid).html('Hot Pool');
			}
			else
			{
				$("#hot_pool_span"+rid).html('Add to Hot Pool');
			}
        },
        error : function(xhr,errmsg,err) 
		{
            alert(xhr.status + ": " + xhr.responseText);
        }
    });
}

function sleep(delay) {
  	var start = new Date().getTime();
    while (new Date().getTime() < start + delay);
}

function get_resumes()
{
	var opts = {
		lines: 11 // The number of lines to draw
		, length: 7 // The length of each line
		, width: 4 // The line thickness
		, radius: 9 // The radius of the inner circle
		, scale: 1 // Scales overall size of the spinner
		, corners: 1 // Corner roundness (0..1)
		, color: '#000' // #rgb or #rrggbb or array of colors
		, opacity: 0 // Opacity of the lines
		, rotate: 0 // The rotation offset
		, direction: 1 // 1: clockwise, -1: counterclockwise
		, speed: 1 // Rounds per second
		, trail: 60 // Afterglow percentage
		, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
		, zIndex: 2e9 // The z-index (defaults to 2000000000)
		, className: 'spinner' // The CSS class to assign to the spinner
		, top: '50%' // Top position relative to parent
		, left: '50%' // Left position relative to parent
		, shadow: false // Whether to render a shadow
		, hwaccel: false // Whether to use hardware acceleration
		, position: 'absolute' // Element positioning
	}
	var target = document.getElementById('prop_container')
	var keyword = $("#id_search_box").val();
	$("#id_search_box").prop("readonly", true);
	var spinner = new Spinner(opts).spin(target);
	$.ajax({
		url : "/get_search_resumes/",
		type : "POST",
		dataType: "json",
		//async: false,
		data : {
			keyword : keyword,
			csrfmiddlewaretoken: '{{ csrf_token }}'
		},
		beforeSend: function() {
			spinner.spin(target);
			$("#prop_container").modal("show");
		},
		success : function(json)
		{
			setTimeout(function(){
			$("#id_search_resumes").html("");
			$("#id_search_resumes").html(json.response);
			$(".prop_container").modal("hide");
			spinner.stop();
			$(".modal-backdrop").hide();
			$("#id_search_box").prop("readonly", false);
			}, 2000)

		},
		error : function(xhr,errmsg,err)
		{
			alert(xhr.status + ": " + xhr.responseText);
			spinner.stop();
			$("#id_search_box").prop("readonly", false);
		},

	});

}


function show_requirement()
{
	var checked = $("#id_requirement").is(":checked");
	if(checked)
	{
		$("#id_requirement_hide").show();
	}
	else
	{
		$("#id_requirement_hide").hide();
	}
}

$('#id_resume_directory').change(function() {
	var files = $('#id_resume_directory')[0].files;
	$("#id_span_directory").html(files.length +" files selected");
});

$("#id_submit_bulk_resumes").click(function() {
	var directory = $("#id_resume_directory").val();
	$('#X-Progress-ID').val('brisa@1230');
	var tags = $("#id_skill_tags").val();
	if (directory && tags)
	{
		$("#id_tags_error_msg").html("");
		$("#id_files_error_msg").html("");
		$("#id_progress_bar_loading").show();
		$("#id_form_upload_bulk_resumes").submit();

		var count = 600; // set seconds
    	var counter = setInterval(function() {
        	$("#id_bulk_upload_error_message").html("<b style='color:red;margin-left: 15%;'>Timeout Error, Please refresh the page and try again</b><br><br>");
    	}, 1000 * count);

	}
	else
	{
		if(directory)
		{
			$("#id_files_error_msg").html("");
		}
		else
		{
			$("#id_files_error_msg").html("<b style='color:red;'>Please Select Directory</b>");
		}
		if(tags)
		{
			$("#id_tags_error_msg").html("");
		}
		else
		{
			$("#id_tags_error_msg").html("<b style='color:red;'>Please Select Tags</b>");
		}
	}
});

<!--for test status and interview status-->
function test_popup(assessment_schedule_id, email)
{
    $.ajax({
            url : "/fetch_assessment_test_details/",
            type : "POST",
            async: true,
            dataType: "json",
            data :
            {
					assessment_schedule_id : assessment_schedule_id,
					email : email,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(json)
            {
                if (json.error_tag == 1 )
                {
                    $("#id_error_modal").modal('show');
                }
                else
                {
                    $('#test_status').text(json.test_status);
                    if(json.test_status==='Performed'){
                        $("#assessment_schedule_id_input_test_results").val(json.assessment_schedule_id);
                        $("#email_input_test_results").val(email);
                        $('#test_result').text(json.result);
                        $('#test_score').text(json.score);
                    }
                    $("#test_details_modal").modal('show');
                }
            },
            error : function(xhr,errmsg,err)
            {
                alert(xhr.status + ": " + xhr.responseText);
            }
    });
}
$(".test_popup_modal_close").click(function(){
	$("#test_details_modal").modal('hide');
	$('#test_status').text("");
	$('#test_result').text("");
	$('#test_score').text("");
});

function interview_popup(sch_id)
{
    $.ajax({
            url : "/fetch_interview_details/",
            type : "POST",
            async: true,
            dataType: "json",
            data :
            {
					interview_schedule_id : sch_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(json)
            {
                if (json.error_tag == 1 )
                {
                    $("#id_error_modal").modal('show');
                }
                else
                {
                    var interview_status = json.interview_status
                    var interview_result = json.interview_result
                    $('#send_interview_id').val(json.interview_schedule_id);
                    $('#interview_status').html('Completed');
                    if (interview_result == 1){
                        $('#interview_result').html('Selected');
                    }
                    else if (interview_result == 2){
                        $('#interview_result').html('Hold');
                    }
                    else if (interview_result == 0){
                        $('#interview_result').html('Rejected');
                    }
                    else{
                       $('#interview_result').html('');
                    }
                    $("#interview_details_modal").modal('show');
                }
            },
            error : function(xhr,errmsg,err)
            {
                alert(xhr.status + ": " + xhr.responseText);
            }
    });
}

$(".interview_popup_modal_close").click(function(){
	$("#interview_details_modal").modal('hide');
	<!--$('#interview_status').text("");-->
	<!--$('#interview_result').text("");-->
});


function history_popup(rid, req_id)
{
var dt = $("#example12").DataTable();
dt.destroy();
$.ajax({
            url : "/history_popup/",
            type : "POST",
            dataType: "json",
			async: false,
            data : {
					rid : rid,
					req_id : req_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                   },
                   success : function(json)
				   {
						var obj_array =  json.response;
						var final_data = " ";
						$.each(obj_array, function (index, value)
						{
							var data = "<tr>";
							data = data +"<td>"+value[2]+"</td><td>"+value[3]+"</td>";
							data = data +"<td>"+value[4]+"</td><td>"+value[5]+"</td><td>"+value[7]+"</td><td>";
							if (value[6])
							{
								data = data + "<a href='/"+value[6]+"'><img width='25px'src='/static/images/download_button.jpg'/></a>";
							}
							data = data + "</td></tr>";
							final_data = final_data + data;

						});
						$('#history_popup_modal_data').html(final_data);
						$('#popup_cand_name').html(obj_array[0][0]);
						$('#popup_exp').html(obj_array[0][1]);


						$("#history_popup_modal").modal('show');
						$('#example12').DataTable({"order": []});
						$('.dataTables_filter').parent().addClass('pull-left');
						$('.dataTables_length').parent().addClass('pull-right');
						$('.dataTables_length').addClass('pull-right');
						$('.dataTables_filter').addClass('pull-left');
                    },
                    error : function(xhr,errmsg,err) {
							alert(xhr.status + ": " + xhr.responseText);
                    }
       });
}

$(".history_popup_modal_close").click(function(){
	$("#history_popup_modal").modal('hide');
	document.getElementById("result_in_form").hidden = true;
});

$(function () {
  $('#example11').DataTable({

	});
});

function interview_result(interview_id){
    var interview_id = interview_id
    window.open('/display_interview_result/' + interview_id + '/','_blank');
}

function update_req_status(rid, user_id, tag)
{

	$.ajax({
            url : "/update_req_status/",
            type : "POST",
            dataType: "json",
            async: false,
            data : {
                rid : rid,
                user_id : user_id,
                tag : tag,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(json)
            {
                if (json.tag == 1)
                {
					$('#id_alloc_req_'+rid).hide();

                }
                else
                {
                	$('#id_alloc_req_'+rid).hide();

                }

            },
            error : function(xhr,errmsg,err)
            {
                alert(xhr.status + ": " + xhr.responseText);
            }
        });
        <!--location.reload(true);-->
}
</script>
    {% endblock midpart %}