{% extends 'base.html' %}

{% load rolemgmt_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>
    .btn-adjustment {width: 13%;float: right;margin: -30px 11px 0px 0px;padding-left:15px;}
    .add-client {margin-top: -30px; }
	.circle-text {
				display: table-cell;
				height: 30px; /*change this and the width
				for the size of your initial circle*/
				width: 30px;
				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*/
				}
	.circle-text1 {
				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: 10px "josefin sans", arial; /*change this
				for font-size and font-family*/
				}
				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>
  
  <!-- 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>
            <!-- /.box-header -->
            <div class="box-body">
			
              <table id="example1" class="table table-bordered table-striped" style="width:50%;">
                <thead>
				<tr class="hide_class">
					<th colspan=5></th>
					<th colspan=1></th>
					<th colspan=7><div style="margin-left:50%;">Stages</div></th>
                <tr>
				  <th></th>
                  <th>Requirement</th>
                  <th>Client Name</th>
                  <th>Manager</th>
                  <th>Closure Ratio</th>
				  <th><font size="2">In Progress/ Rejected /No Show / Total </font></th>
				  <th class="hide_class"><label class="circle-text">S1</label></div>Sourcing</th>
				  <th class="hide_class"><label class="circle-text">S2</label>COL</th>
				  <th class="hide_class"><label class="circle-text">S3</label>Internal SL</th>
				  <th class="hide_class"><label class="circle-text">S4</label>Sent to Client</th>
				  <th class="hide_class"><label class="circle-text">S5</label>Client Interview</th>
				  <th class="hide_class"><label class="circle-text">S6</label>Offer</th>
				  <th class="hide_class"><label class="circle-text">S7</label>Joining</th>
				  <th class="hide_class">All</th>
				  <th id="show_stages" valign="middle">Show Stages</th>
				  
                </tr>
                </thead>
                <tbody>
                {% for r in requirement %}
				
				
                <tr>
				  <td>
					<label class="circle-text">{{ r.id|req_age }}d</label>
					{% if r.id|req_style_check == 1 %}
						<meter value="{{ r.id|req_age }}" min="0" max="{{ r.id|req_age }}" class="meter1"></meter>
					{% elif r.id|req_style_check == 2 %}
						<meter value="{{ r.id|req_age }}" min="0" max="{{ r.id|req_age }}" class="meter2"></meter>
					{% else %}
						<meter value="{{ r.id|req_age }}" min="0" max="{{ r.id|req_age }}" class="meter3"></meter>
					{% endif %}
				  </td>
                  <td>{{ r.position_name }}</td>
                  <td>{{ r.client.name }}</td>
                  <td>{{ r.manager }}</td>
                  <td>{{r.open_position }}/{{r.no_of_position}}</td>
				  <td>{{ r.id|get_inprogress }}</td>
				  {% if r.id|get_stage_count:1 %}
				  <td class="hide_class class_link" link="/resume_pop/{{r.id}}/1/" bgcolor="#FFBF00"><a>{{r.id|get_stage_count:1 }}</a></td>
				  {% else %}
				  <td class="hide_class">0</td>
				  {% endif %}
				  {% if r.id|get_stage_count:2 %}
				  <td class="hide_class class_link" link="/resume_pop/{{r.id}}/2/" bgcolor="#FFBF00"><a>{{r.id|get_stage_count:2 }}</a></td>
				  {% else %}
				  <td class="hide_class">0</td>
				  {% endif %}
				  {% if r.id|get_stage_count:3 %}
				  <td class="hide_class class_link" link="/resume_pop/{{r.id}}/3/" bgcolor="#FFBF00"><a>{{r.id|get_stage_count:3 }}</a></td>
				  {% else %}
				  <td class="hide_class">0</td>
				  {% endif %}
				  {% if r.id|get_stage_count:4 %}
				  <td class="hide_class class_link" link="/resume_pop/{{r.id}}/4/" bgcolor="#FFBF00"><a>{{r.id|get_stage_count:4 }}</a></td>
				  {% else %}
				  <td class="hide_class">0</td>
				  {% endif %}
				  {% if r.id|get_stage_count:5 %}
				  <td class="hide_class class_link" link="/resume_pop/{{r.id}}/5/" bgcolor="#FFBF00"><a>{{r.id|get_stage_count:5 }}</a></td>
				  {% else %}
				  <td class="hide_class">0</td>
				  {% endif %}
				  {% if r.id|get_stage_count:6 %}
				  <td class="hide_class class_link" link="/resume_pop/{{r.id}}/6/" bgcolor="#FFBF00"><a>{{r.id|get_stage_count:6 }}</a></td>
				  {% else %}
				  <td class="hide_class">0</td>
				  {% endif %}
				  {% if r.id|get_stage_count:7 %}
				  <td class="hide_class class_link" link="/resume_pop/{{r.id}}/7/" bgcolor="#FFBF00"><a>{{r.id|get_stage_count:7 }}</a></td>
				  {% else %}
				  <td class="hide_class">0</td>
				  {% endif %}
				  {% if r.id|get_stage_count:0 %}
				    <td class="hide_class class_link" link="/resume_pop/{{r.id}}/0/"><a>All</a></td>
				  {% else %}
				    <td class="hide_class">All</td>
				  {% endif %}
                </tr>
                {% endfor %}
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>

<div class="modal fade" id="commentModal" role="dialog">
					<div class="modal-dialog" style="width:80%;">
					<!-- 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>Resume Management</b></h4>
							</div>
							<div class="modal-body">
								<div class="box-body">
									<table id="example1" class="table table-bordered table-striped">
										<thead>
											<tr>
												<th>Name</th>
												<th>Mobile</th>
												<th>Email</th>
												<th>Requirement</th>
												<th>Exp / CTC / ECTC / NP</th>
												<th style="width:170px;">Stage</th>
												<th style="width:120px;">State</th>
												<th>Date</th>
												<th>TA</th>
												<th>Action</th>
											</tr>
										</thead>
										
										<tbody id="popup_modal_data">
										</tbody>
									</table>
								</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							</div>
							</form>
						</div>
					</div>
				</div>

				<div class="modal fade" id="resume_popup_modal" role="dialog">
					<div class="modal-dialog" style="width:50%;">
					<!-- Modal content-->
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close resume_popup_modal_close">&times;</button>
								<h4 class="modal-title"><b>Resume Details</b></h4>
							</div>
							<div class="modal-body" id="resume_popup_modalbody">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default resume_popup_modal_close">Close</button>
							</div>
							</form>
						</div>
					</div>
				</div>
				
				
				<div class="modal fade" id="history_popup_modal" role="dialog">
					<div class="modal-dialog" style="width:50%;">
					<!-- 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" 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="example1" class="table table-bordered table-striped">
								<thead>
									<tr>
										<th>Stage</th>
										<th>State</th>
										<th>Date</th>
										<th>Remarks</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>
							</form>
						</div>
					</div>
				</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();
  })
</script>

<script>
$(document).ready(function(){
		$(".hide_class").hide();
		$("#show_stages").click(function(){
		var show_stage_html = $('#show_stages').html()
		if (show_stage_html == 'Hide Stages')
		{
			$('#show_stages').html("Show Stages");
		}
		else if (show_stage_html == 'Show Stages')
		{
			$('#show_stages').html("Hide Stages");
		}
		
        $(".hide_class").toggle();
    });
	$(".resume_popup_modal_close").click(function(){
        $("#resume_popup_modal").modal('hide');
    });
	
	$(".history_popup_modal_close").click(function(){
        $("#history_popup_modal").modal('hide');
    });
	
	$(".class_link").click(function(){
		var link = $(this).attr('link');
        //$("#commentModal").modal('show');
		
		$.ajax({
                        url : link,
                        type : "POST",
                        dataType: "json",
						async: false,
                        data : {
                            client_request : "Hi",
							rid : "Hi",

                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) 
							{										
								var obj_array =  json.response;
								var final_data = " ";
								var final_com_modal = '';
								var final_joi_modal = '';
								var final_sch_modal = '';
								var div_html = '';
								$.each(obj_array, function (index, value)
								{
									var stage_html = '<table><tr>\
															<td align="center"><label class="circle-text">'+value[15]+'</label></td>\
															<td><select class="popupclass form-control input-sm" name="resume_stage" \
																id="resume_stage'+value[10]+'"\
																onchange="updatestatus('+value[10]+',\''+value[5]+'\',\''+value[13]+'\');">\
																	<option value="'+value[5]+'">'+value[5]+'</option>\
																	<option value="'+value[13]+'">'+value[13]+'</option>\
															</select></td>\
													</tr></table>';
									var status = value[14];
									var options = " ";
									
									$.each(status, function (index, status_value)
										{
											options = options + '<option value="'+status_value+'">'+status_value+'</option>';
										});
									var status_html = '<select class="form-control input-sm" name="interview_status" \
															id="interview_status'+value[10]+'" \
															onchange="updateinterviewstatus('+value[10]+');">'+options+'\
													 </select>';
									
									var data = "<tr><td>"+value[1]+"</td><td>"+value[2]+"</td>";
									data = data +"<td>"+value[3]+"</td><td>"+value[0]+"</td>";
									data = data +"<td>"+value[4]+"</td><td>"+stage_html+"</td>";
									data = data +"<td>"+status_html+"</td>"+"<td>"+value[12]+"</td>";
									data = data +"<td>"+value[7]+"</td>";
									data = data +"<td><a href='/"+value[8]+"'>Download</a>";
									data = data + "| <a href='javascript:;' onclick='history_popup("+value[10]+","+value[11]+");'>History</a>";
									data = data + "| <a href='javascript:;' onclick='resume_view_popup("+value[10]+");'>View</a></td></tr>";
									
									final_data = final_data + data;
									
									com_modal = '<div class="modal fade" id="commentModal'+value[10]+'" 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>Comments</b></h4>\
							</div>\
							<div class="modal-body">\
								<form method="POST" action="/add_comments/">\
								<input type="hidden" name="rid" value="'+value[10]+'">\
								<input type="hidden" name="bd_check" value="1">\
								<textarea rows="4" cols="50" name="comments" maxlength="2000" minlength="100">Add comments</textarea>\
								<button type="submit" class="btn btn-default pull-left" id="add_comment_button">Add comments</button><br><br><br>\
							</div>\
							</form>\
						</div>\
					</div>\
				</div>';
								final_com_modal = final_com_modal + com_modal;
								
								joi_modal = '<div class="modal fade" id="joiningModal'+value[10]+'" 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>Joining Schedule</b></h4>\
							</div>\
							<div class="modal-body">\
								<form method="POST" action="/add_joining_date/">\
								<input type="hidden" name="rid" value="'+value[10]+'"><br>\
								<input type="hidden" name="bd_check" value="1">\
								Joining Date : <input type="date" name="join_date" id="joining_date"><br><br>\
								Comments : <textarea rows="4" cols="42" name="comments" maxlength="2000" minlength="100">Add comments</textarea>\
								<button type="submit" class="btn btn-default pull-left" id="update_joining">Update Joining Date</button><br><br>\
							</div>\
							</form>\
						</div>\
					</div>\
				</div>';
								final_joi_modal = final_joi_modal + joi_modal;
								
								sch_modal = '<div class="modal fade" id="scheduleModal'+value[10]+'" 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>Schedule Time</b></h4>\
							</div>\
							<div class="modal-body">\
								<form method="POST" action="/add_client_interview/">\
								<input type="hidden" name="rid" value="'+value[10]+'"><br>\
								<input type="hidden" name="bd_check" value="1">\
								Schedule Date & Time : <input type="datetime-local" name="date_time" id="sch_date_time"><br><br>\
								Comments : <textarea rows="4" cols="42" name="comments" maxlength="2000" minlength="100">Add comments</textarea><br>\
								<button type="submit" class="btn btn-default pull-left" id="update_schedule">Create Schedule</button><br>\
							</div>\
							</form>\
						</div>\
					</div>\
				</div>';
								final_sch_modal = final_sch_modal + sch_modal;
								});
								$('#popup_modal_data').html(final_data);
								$("#commentModal").modal('show');
								div_html = final_com_modal + final_joi_modal + final_sch_modal
								$("#com_modal_div").html(div_html);
								//$("#com_modal_div").html(final_joi_modal);
								//$("#com_modal_div").html(final_sch_modal);
                            },
                              error : function(xhr,errmsg,err) {
                                alert(xhr.status + ": " + xhr.responseText);
                            }
                    });
    });
});
function resume_view_popup(rid)
{
$.ajax({
            url : "/view_resume_popup/",
            type : "POST",
            dataType: "json",
			async: false,
            data : {
					rid : rid,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                   },
                   success : function(json) 
				   {					
						var obj_array =  json.response;
						var top_html = '<div class="table-responsive"><table class="table table-bordered table-striped"><tbody>';
						var lower_html = '</tbody></table></div>';
						data_html ='<tr><th style="width:60%">Client Name</th><td>'+obj_array[0]+'</td>\
							<th style="width:60%">Client Location</th><td>'+obj_array[1]+'</td></tr>\
							<tr><th style="width:60%">Client Description</th><td>'+obj_array[2]+'</td>\
							<th style="width:60%">Position Name</th><td>'+obj_array[3]+'</td></tr>\
							<tr><th style="width:60%">First Name</th><td>'+obj_array[4]+'</td>\
							<th style="width:60%">Last Name</th><td>'+obj_array[5]+'</td></tr>\
							<tr><th style="width:60%">Email</th><td>'+obj_array[6]+'</td>\
							<th style="width:60%">Mobile Number</th><td>'+obj_array[7]+'</td></tr>\
							<tr><th style="width:60%">Primary Skills</th><td>'+obj_array[8]+'</td>\
							<th style="width:60%">Experience</th><td>'+obj_array[9]+'</td></tr>\
							<tr><th style="width:60%">Date of Birth</th><td>'+obj_array[10]+'</td>\
							<th style="width:60%">CTC</th><td>'+obj_array[11]+'</td></tr>\
							<tr><th style="width:60%">ECTC</th><td>'+obj_array[12]+'</td>\
							<th style="width:60%">Notice Period</th><td>'+obj_array[13]+'</td></tr>\
							<tr><th style="width:60%">Current Location</th><td>'+obj_array[14]+'</td>\
							<th style="width:60%">Remarks</th><td>'+obj_array[15]+'</td></tr>';
						var html_code = top_html + data_html + lower_html
						$('#resume_popup_modalbody').html(html_code);
						$("#resume_popup_modal").modal('show');
                    },
                    error : function(xhr,errmsg,err) {
							alert(xhr.status + ": " + xhr.responseText);
                    }
       });
}

function history_popup(rid, req_id)
{
$.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></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');
                    },
                    error : function(xhr,errmsg,err) {
							alert(xhr.status + ": " + xhr.responseText);
                    }
       });
}
</script>


<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

<script>
 $("#history_popup_modal").draggable({
      handle: ".modal-header"
  });

$("#resume_popup_modal").draggable({
      handle: ".modal-header"
  });
</script>

<script>

function updatestatus(rid, stage, next_stage) 
{
   var input_string = $("#resume_stage"+rid).val();
   var r = confirm("Changing the resume stage from "+ stage + " to " + next_stage);
   if (r == true ){
   $.ajax({
                        url : "/updatestatus/",
                        type : "POST",
                        dataType: "json",
						async: false,
                        data : {
                            client_request : input_string,
							rid : rid,

                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) 
							{					
								$('#interview_status'+rid).html('');
								$('#resume_stage'+rid).html('');
								var obj_array =  json.response;
								var stage = json.stage;
								$.each(obj_array, function (index, value)
								{
									 $('#interview_status'+rid).append('<option value = "'+value[0]+'">'+value[1]+'</option>'); // Your id logic goes here
									 console.log(value);
								});
								$.each(stage, function (index, value)
								{
									 $('#resume_stage'+rid).append('<option value = "'+value[0]+'">'+value[1]+'</option>'); // Your id logic goes here
									 console.log(value);
								});
								if ( input_string == "Client Interview" ){
									$('#scheduleModal'+rid).modal('show');
								}
								else if ( input_string == "Joining" ){
									$('#joiningModal'+rid).modal('show');
								}
								else {
									$('#commentModal'+rid).modal('show');
								}
                            },
                              error : function(xhr,errmsg,err) {
                                alert(xhr.status + ": " + xhr.responseText);
                            }
                    });
	}
}

function updateinterviewstatus(rid) 
{
   var input_string = $("#interview_status"+rid).val();
   $.ajax({
                        url : "/updateinterviewstatus/",
                        type : "POST",
                        dataType: "json",
						async: false,
                        data : {
                            client_request : input_string,
							rid : rid,

                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) 
							{										
								var obj_array =  json.response;	
								$('#commentModal'+rid).modal('show');
                            },
                              error : function(xhr,errmsg,err) {
                                alert(xhr.status + ": " + xhr.responseText);
                            }
                    });
}

</script>

<script>
$(document).ready(function(){	
	var now = new Date();
	var month = (now.getMonth() +1);
	var hours = now.getHours();
	var minutes = now.getMinutes();
	if (month.toString.length == 1){
		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>

<div id="com_modal_div"></div>
{% endblock midpart %}