{% extends 'base.html' %}

{% load rmtmgmt_tags %}
{% load rolemgmt_tags %}

{% block midpart %}

  <!-- DataTables -->
  <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">

  <style>
    .btn-adjustment {width: 13%;float: right;margin: -30px 11px 0px 0px;padding-left:15px;}
    .add-client {margin-top: -30px; }

	meter.meter1::-webkit-meter-optimum-value {
					background: green;

				}
					meter.meter1::-moz-meter-bar { /* Firefox Pseudo Class */
				background: green;

				}

				meter.meter2::-webkit-meter-optimum-value {
					background: #FFBF00;

				}
					meter.meter2::-moz-meter-bar { /* Firefox Pseudo Class */
				background: #FFBF00;

				}

				meter.meter3::-webkit-meter-optimum-value {
					background: red;

				}
					meter.meter3::-moz-meter-bar { /* Firefox Pseudo Class */
				background: red;

				}

				meter{
					height: 5px;
				}

				.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*/
				}

  </style>
  <style>
 	@media only screen and (max-width: 900px) {
	.add-resume{width:20%;font-size:90%;margin-top:-20px;}
	.add-client{width:17%;font-size:90%;margin-top:-20px;}
	}
  </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"> <b>{{ title }}</b></h3>
            </div>

              <span class="pull-left" style="margin-left:2%;">
                        <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>

            <a href="/client-management/" class="btn btn-social btn-dropbox btn-adjustment add-client" style="text-align:center;">
              View Client
            </a>
            <a href="/requirement-management/add/" class="btn btn-block btn-social btn-dropbox btn-adjustment add-resume" style="text-align:center;">
              Add Requirement
            </a>
            <a href="/auto_suggest/" class="btn btn-social btn-dropbox btn-adjustment add-client" style="text-align:center;" target="_blank">
                Auto Suggest
            </a>

            {% with request.user|get_role as role %}
				{% if role == "Business Development" and request.company.id != 1 %}
				  <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 %}

            <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 requir %}
								   <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="pc_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="pc_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 id="id_load_requirements">
              <table id="example1" class="table table-bordered table-striped ">
                <thead>
                <tr>
                  <th>Allocation</th>
				  <th></th>
                  <th>Client Name</th>
				  <th>Requirement ID</th>
                  <th>Group Name - Manager</th>
                  <th>Position</th>
                  <th>Skills</th>
                  <th>Experience</th>
                  <th>Selections / Total Positions</th>
                  <th>Position Status</th>
                  <th>Action</th>
				  <th style="display:none;">hide</th>
                </tr>
                </thead>
                <tbody>
                {% for r in req %}

                <tr>
                  <td>
                      <a onclick="update_req_alloc({{r.id}}, 1);" style="cursor:pointer;">Internal
                      {% if r.allocated %}
                      <label class="badge">
                          {% if r.id|internal_count:request.company ==  0 %}
                            +
                          {% else %}
                            {{ r.id|internal_count:request.company }}
                          {% endif %}
                      </label>
                      {% else %}
                      <label class="badge">+</label></a>
                      {% endif %}
                      {% if r.company == request.company %}
                          <a onclick="update_req_alloc({{r.id}}, 2);" style="cursor:pointer;">External
                          {% if r.allocated %}
                          <label class="badge">
                              {% if r.id|external_count ==  0 %}
                                +
                              {% else %}
                                {{ r.id|external_count }}
                              {% endif %}
                          </label>
                          {% else %}
                          <label class="badge">+</label></a>
                          {% endif%}
                      {% else %}
                        <a onclick="update_req_alloc({{r.id}}, 2);" style="cursor:pointer;display:none;">External
                          {% if r.allocated %}
                          <label class="badge">
                              {% if r.id|external_count ==  0 %}
                                +
                              {% else %}
                                {{ r.id|external_count }}
                              {% endif %}
                          </label>
                          {% else %}
                          <label class="badge">+</label></a>
                          {% endif%}
                      {% endif %}
                  </td>
				  <td>
                    {% with r.id|req_age as req_age %}
                        {% if req_age <= 15 %}
							<label class="badge" style="background: green;">{{ req_age }}d</label>
					  	{% elif req_age > 15 and req_age <= 30 %}
					  		<label class="badge" style="background: #FFBF00;;">{{ req_age }}d</label>
					  	{% else %}
					  		<label class="badge" style="background: red;">{{ req_age }}d</label>
					  	{% endif %}
                        <font style="font-size:80%;">{{ r.get_position_status_display }}</font>
                        {% if r.today_tag and r.position_status != 4%}
                            <input type="checkbox" name="tod_tag" id="id_tod_tag{{r.id}}" onchange="change_tod_tag({{r.id}});" checked>
                            <span id="to_day_span{{ r.id }}">Priority</span>
                        {% elif r.position_status != 4 %}

                            <input type="checkbox" name="tod_tag" id="id_tod_tag{{r.id}}" onchange="change_tod_tag({{r.id}});">
                            <span id="to_day_span{{r.id}}"></span>

                        {% endif %}
<!--                        {% with r.id|req_style_check as req_style_check %}-->
<!--                            {% if req_style_check == 1 %}-->
<!--                                <meter value="{{ req_age }}" min="0" max="{{ req_age }}" class="meter1"></meter>-->
<!--                            {% elif req_style_check == 2 %}-->
<!--                                <meter value="{{ req_age }}" min="0" max="{{ req_age }}" class="meter2"></meter>-->
<!--                            {% else %}-->
<!--                                <meter value="{{ req_age }}" min="0" max="{{ req_age }}" class="meter3"></meter>-->
<!--                            {% endif %}-->
<!--                        {% endwith %}-->
                    {% endwith %}
				  </td>
                  <td>{{ r.client }}</td>
				  <td>{{ r.client_requirement_id }}</td>
                    <td>{{ r.name }} - {{ r.manager }}</td>
                  <td>{{ r.position_name }}</td>
                  <td>
                      {% if r.skills %}
                        {{ r.skills }}
                      {% else %}
                          {% for skill in r|get_skill_p_levels %}
                            <br>
                            {{ skill.skill.skill_name }} - {{ skill.proficiency_level.level }}
                          {% endfor %}
                      {% endif %}
                  </td>
                  <td>{{ r.min_exp }}</td>
                  <td>{{ r.id|selections }} /{{ r.open_position }}</td>
                  <td>
					<select name="req_status" id="id_req_status_{{ r.id }}"onchange="updatepositionstatus({{r.id}});">
						{% for postion in req_status %}
							{% if postion.0 == r.position_status %}
								<option value={{ postion.0 }} selected>{{ postion.1 }}</option>
							{% else %}
								<option value={{ postion.0 }}>{{ postion.1 }}</option>
							{% endif %}
						{% endfor %}
					</select>
				  </td>
                  <td>
                    <a href="/requirement-management/edit/{{ r.id }}/"><i class="fa fa-fw fa-edit" style="color: #000000;"></i>Edit</a> |
                    <a href="/requirement-management/view/{{ r.id }}/" ><i class="fa fa-fw fa-eye" style="color: darkred;"></i>View</a>
                  </td>
				  <td style="display:none;">{{ r.get_position_status_display }}</td>
                </tr>
                {% endfor %}
                </tbody>
              </table>
                </div>
                <div class="pagination pull-right">
                    <span class="step-links">
                        {% if req.has_previous %}
                            <a href="?page=1" class="btn btn-primary">&laquo; first</a>
                            <a href="?page={{ req.previous_page_number }}&search={{search_key}}" class="btn btn-primary">previous</a>
                        {% endif %}
                        <span class="current">
                            Page {{ page }} of {{ no_of_pages }}.
                        </span>
                        {% if req.has_next %}
                            <a href="?page={{ req.next_page_number }}&search={{search_key}}" class="btn btn-primary">next</a>
                            <a href="?page={{ no_of_pages }}" class="btn btn-primary">last &raquo;</a>
                        {% endif %}
                    </span>
                </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>


<!-- Comments modal for changing the requirement status -->
<div class="modal fade" id="id_req_comment_modal" role="dialog">
    <div class="modal-dialog" style="width:30%;">
    <!-- 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>Comments</b></h4>
            </div>
            <form method="POST" name="form_req_comments" action="/update_requirement_status/" enctype="multipart/form-data">{% csrf_token %}
            <div class="modal-body">
                <input type="hidden" name="status" id="id_status">
                <input type="hidden" name="req_id" id="id_req"><br>
                <textarea rows="4" cols="50" name="comments" maxlength="2000" minlength="30" placeholder="Add comments"
                          id="id_req_comments" required></textarea><br>
                <input type="file" name="remarks_file">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" id="add_comment_button" onclick="update_requirement_status();">Add comments</button>
                <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="id_modal_ta_pc_fl" role="dialog">

</div>

<!-- 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,-->
         <!--"searching": true,-->
         <!--// "pageLength": 50,-->
         <!--"paging": true,-->
         <!--"bInfo": true,-->
        <!--"aoColumnDefs": [-->
                            <!--{ "bSearchable": false, "aTargets": [ 9 ] },-->
                            <!--{ targets: [0], type: 'natural' }-->
                        <!--],-->
         <!--"aaSorting": [],-->
    <!--});-->
    <!--if ( $(window).width() > 739) {-->
        <!--$('.dataTables_length').parent().prepend('<select onchange="get_requirements();" id="id_select_requirement" class="form form-control pull-left" style="height:31px;"><option value="1" selected>OPEN</option><option value="2">HOLD</option><option value="3">RESUME</option><option value="4">CLOSED</option><option value="0">ALL</option></select>');-->
     <!--}-->
     <!--else {-->
        <!--$('.dataTables_filter').parent().prepend('<select onchange="get_requirements();" id="id_select_requirement" class="form form-control pull-left" style="height:31px;"><option value="1" selected>OPEN</option><option value="2">HOLD</option><option value="3">RESUME</option><option value="4">CLOSED</option><option value="0">ALL</option></select>');-->
     <!--}-->
   <!--})-->
<!--</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 = '/requirement-management/?&search=' + key;

}


</script>

<script>

function updatepositionstatus(rid)
{
	var status = $("#id_req_status_" + rid).val();
	$("#id_status").val(status);
	$("#id_req").val(rid);
	$('#id_req_comment_modal').modal('show');
}

function update_requirement_status()
{
    var rid = $("#id_req").val();
    var status = $("#id_req_status_" + rid).val();
    var comments = $("#id_req_comments").val();
    var formValid = document.forms["form_req_comments"].checkValidity();
    if( formValid )
	{
        $.ajax({
            url : "/update_requirement_status/",
            type : "POST",
            dataType: "json",
            async: false,
            data : {
                rid : rid,
                status : status,
                comments : comments,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(json)
            {
                $("#id_req_comment_modal").modal("hide");
                alert(json.response);
            },
            error : function(xhr,errmsg,err)
            {
                alert(xhr.status + ": " + xhr.responseText);
            }
        });
    }
    else
    {
        alert("Comments should be more than 30 characters");
    }
}
</script>

<script>

function change_tod_tag(req_id)
{
   $.ajax({
        url : "/change_today_tag/",
        type : "POST",
        dataType: "json",
		async: false,
        data : {
            req_id : req_id,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success : function(json)
		{
			if (json.show_tag)
			{
				$("#to_day_span"+req_id).html('Priority');
			}
			else
			{
				$("#to_day_span"+req_id).html('');
			}
        },
        error : function(xhr,errmsg,err) 
		{
            alert(xhr.status + ": " + xhr.responseText);
        }
    });
}

function get_requirements()
{
    var status = $("#id_select_requirement").val();
    $.ajax({
		url : "/get_search_requirements/",
		type : "POST",
		dataType: "json",
		//async: false,
		data : {
			status : status,
			csrfmiddlewaretoken: '{{ csrf_token }}'
		},
		success : function(json)
		{
			$("#id_load_requirements").html("");
			$("#id_load_requirements").html(json.response);
		},
		error : function(xhr,errmsg,err)
		{
			alert(xhr.status + ": " + xhr.responseText);
		},

	});
}

function update_req_alloc(rid, tag)
{


          $('#id_modal_ta_pc_fl').modal('show');

        $.ajax({
            url : "/update_req_alloc/",
            type : "POST",
            dataType: "json",
            async: false,
            data : {
                rid : rid,
                tag : tag,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(json)
            {
                $("#id_modal_ta_pc_fl").html(json.response);
            },
            error : function(xhr,errmsg,err)
            {
                alert(xhr.status + ": " + xhr.responseText);
            }
        });
}
</script>

<script>
function allocate(rid, tag)
{
    var table = $('#example2').DataTable();
    var allPages = table.rows().nodes();
    var ta = [];
    $.each($("input[name='ta']:checked", allPages), function(){
                ta.push($(this).val());
            });

    var not_ta = [];
    $.each($("input[name='ta']:not(:checked)", allPages), function(){
                not_ta.push($(this).val());
            });


    var table = $('#example3').DataTable();
    var allPages = table.rows().nodes();
    var pc = [];
    $.each($("input[name='pc']:checked", allPages), function(){
                pc.push($(this).val());
            });


    var table = $('#example4').DataTable();
    var allPages = table.rows().nodes();
    var fl = [];
    $.each($("input[name='fl']:checked", allPages), function(){
                fl.push($(this).val());
            });


	{
        $.ajax({
            url : "/allocate_req/",
            type : "POST",
            dataType: "json",
            async: false,
            data : {
                tag : tag,
                rid : rid,
                ta : ta,
                not_ta : not_ta,
                pc : pc,
                fl : fl,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(json)
            {
                $('#id_modal_ta_pc_fl').modal('hide');
            },
            error : function(xhr,errmsg,err)
            {
                alert(xhr.status + ": " + xhr.responseText);
            }
        });
    }
    <!--location.reload(true);-->
}

function pc_req_status(rid, user_id, tag)
{

	$.ajax({
            url : "/pc_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();
                	<!--alert("Requirement Accepted");-->
                }
                else
                {
                	$('#id_alloc_req_'+rid).hide();
                	<!--alert("Requirement Rejected");-->
                }

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

</script>

<script src="/static/js/natural.js"></script>
{% endblock midpart %}