{% 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;}
	
	.circle-text {
				display: table-cell;
				height: 15px; /*change this and the width
				for the size of your initial circle*/
				width: 15px;
				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>
            <a href="/view-requirement/" class="btn btn-social btn-dropbox btn-adjustment add-client">
              View Requirement
            </a>                        
            <a href="/resume-management/add/" class="btn btn-block btn-social btn-dropbox btn-adjustment" style="width:13%;">
              Add Resume
            </a>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Requirement</th>
                  <th>Name</th>
                  <th>Mobile</th>
                  <th>Email</th>
                  <th>Exp / CTC / ECTC / NP</th>
                  <th style="width:140px;">Stage</th>
                  <th>Interview Status</th>
                  <th>TA</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% for r in resume %}
				<div class="modal fade" id="scheduleModal{{r.id}}" 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>Schedule Time</b></h4>
							</div>
							<div class="modal-body">
								<form method="POST" action="/add_client_interview/">
								<input type="hidden" name="rid" value="{{r.id}}"><br>
								Schedule Date & Time : <input type="datetime-local" name="date_time" id="sch_date_time">
							</div>
							<div class="modal-footer">
								<button type="submit" class="btn btn-default pull-left" id="update_schedule">Create Schedule</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							</div>
							</form>
						</div>
					</div>
				</div>
				
				<!-- joining modal -->
				<div class="modal fade" id="joiningModal{{r.id}}" 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>Joining Schedule</b></h4>
							</div>
							<div class="modal-body">
								<form method="POST" action="/add_joining_date/">
								<input type="hidden" name="rid" value="{{r.id}}"><br>
								Joining Date : <input type="date" name="join_date" id="joining_date">
							</div>
							<div class="modal-footer">
								<button type="submit" class="btn btn-default pull-left" id="update_joining">Update Joining Date</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							</div>
							</form>
						</div>
					</div>
				</div>
				
				<div class="modal fade" id="commentModal{{r.id}}" 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>
							<div class="modal-body">
								<form method="POST" action="/add_comments/">
								<input type="hidden" name="rid" value="{{r.id}}"><br>
								<textarea rows="4" cols="50" name="comments">Add comments</textarea>
							</div>
							<div class="modal-footer">
								<button type="submit" class="btn btn-default pull-left" id="add_comment_button">Add comments</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							</div>
							</form>
						</div>
					</div>
				</div>
				
                <tr>
                  <td>{{ r.requirement }}</td>
                  <td>{{ r.first_name }} {{ r.last_name }}</td>
                  <td>{{ r.mobile }}</td>
                  <td>{{ r.email }}</td>
                  <td>{{ r.experience }} / {{ r.ctc }} / {{ r.ectc }} / {{ r.notice_period }}</td>
                  <td>
					<table>
						<tr>
							<td>
								<label class="circle-text">{{r.get_stage.0.0}}</label>
							</td>
							<td width="100px;">
								<select class="popupclass form-control input-sm" name="resume_stage" id="resume_stage{{r.id}}" 
										onchange="updatestatus({{r.id}});">
									{% for stage in r.get_stage %}
										<option value="{{stage.0}}">{{stage.1}}</option>
									{% endfor %}
								</select>
							</td>
						</tr>
					</table>
				  </td>
                  <td>
					<select class="form-control input-sm" name="interview_status" id="interview_status{{r.id}}" onchange="updateinterviewstatus({{r.id}});">
					{% 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' %}
						<div id="sch_date_time_show">{{ r.id|join_date_time }}</div>
					{% else %}
					<div id="sch_date_time_show">{{ r.id|sch_date_time }}</div>
					{% endif %}
                  </td>
                  <td>{{ r.created_by.get_full_name }}</td>
                  <td>
                    
                    <a href="/{{ r.resume }}"><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 href="/interview-history/{{ r.id }}/{{ r.requirement.id }}/"><i class="fa fa-fw fa-history" style="color: blue;"></i>History</a>
                    {% endif %}
                    | <a href="/resume-management/view/{{ r.id }}/"><i class="fa fa-fw fa-eye" style="color: darkred;"></i>View</a>
                  </td>
                </tr>
                {% endfor %}
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>


        <!-- <div class="modal fade" id="modal-default"> -->
        <!--   <div class="modal-dialog"> -->
        <!--     {#% include "is_status.html" %#} -->
        <!--   </div> -->
        <!--   <\!-- /.modal-dialog -\-> -->
        <!-- </div> -->
        <!-- <\!-- /.modal -\-> -->



<!-- 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({

  "order": [[0, "asc"]]
  
  });
  })
</script>

<script>

function updatestatus(rid) 
{
   var input_string = $("#resume_stage"+rid).val();
   $.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 == 5 ){
									$('#scheduleModal'+rid).modal('show');
								}
								else if ( input_string == 7 ){
									$('#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>

{% endblock midpart %}