{% extends 'base.html' %}

{% load rmtmgmt_tags %}

{% block midpart %}

  <!-- Font Awesome -->
  <!-- fullCalendar -->
  <link rel="stylesheet" href="/static/bower_components/fullcalendar/dist/fullcalendar.min.css">
  <link rel="stylesheet" href="/static/bower_components/fullcalendar/dist/fullcalendar.print.min.css" media="print">

    <!-- Main content -->
    <section class="content">
		<div class="row">
				<table>
					<tr>
						<td style="padding-right:10px;">Search :</td>
						<td>
							<select name="account" onchange="get_client_schedules();" id="id_client" class="form form-control" style="width:160%;">
								<option value=0>All</option>
								{% for client in request.clients %}
								<option value="{{ client.id }}">{{ client.name }}</option>
								{% endfor %}
							</select>
						</td>
					</tr>
				</table>
			<button type="submit" style="height:30px; width:15%;" name="schedule_summary" class="pull-right"
					data-toggle="modal" data-target="#schedule_summary">
					Summary
			</button>
			<div class="modal fade" id="schedule_summary" role="dialog">
			 <div class="modal-dialog" style="width:35%;">
			  <div class="modal-content">
			   <div class="modal-header">
				   <button type="button" class="close" data-dismiss="modal">&times;</button>
				   <h4 class="modal-title" style="text-align:center"><b>Summary</b></h4>
			   </div>
			   <div id="details_view">
				<table border="1" align="center" width="400" style="text-align:center;">
				{% if sch_tag %}
					<thead style="color:#9C640C;">
						<tr>
							<th style="width:60%;text-align:center;">Total Interview Scheduled</th>
							<th style="width:30%;text-align:center;">{{ total_schedules }}</th>
						</tr>
					</thead>
					{% for client in client_interviews %}
					<tbody>
						<tr>
							<td>{{ client.0 }}</td>
							<td>{{ client.1 }}</td>
						</tr>
					</tbody>
					{% endfor %}
				{% else %}
					<thead style="color:#186A3B;width:50%;">
						<tr>
							<th style="width:60%;text-align:center;">Total Joined</th>
							<th style="width:30%;text-align:center;">{{ total_joined }}</th>
						</tr>
					</thead>
					{% for joined in joined %}
					<tbody>
						<tr>
							<td>{{ joined.0 }}</td>
							<td>{{ joined.1 }}</td>
						</tr>
					</tbody>
					{% endfor %}
					<thead style="color:#C0392B;">
						<tr>
							<th style="text-align:center;">Total Future Joinees</th>
							<th style="text-align:center;">{{ total_joinees }}</th>
						</tr>
					</thead>
					{% for joinee in joinees %}
					<tbody>
						<tr>
							<td>{{ joinee.0 }}</td>
							<td>{{ joinee.1 }}</td>
						</tr>
					</tbody>
					{% endfor %}
			       {% endif %}
				</table>
				   <br>
			   </div>
			  </div>
			 </div>
			</div>


      <div class="row">
        <!-- /.col -->
        <div class="col-md-12">
			{% if sch_tag %}
			<div>
				<span><a href="/interview-schedule/schedule/external/">External Schedules</a></span>
				<span style="margin-left:5%;"><a href="/interview-schedule/schedule/internal/">internal Schedules</a></span>
			</div>
			{% endif %}
          <div class="box box-primary">
		  
            <div class="box-body no-padding">
              <!-- THE CALENDAR -->
              <div id="calendar" style="padding:10px 24px 10px 24px; "></div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /. box -->
        </div>
        <!-- /.col -->
        
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->

<div id="calendarModal" class="modal fade" style="width:80%; margin-left:10%;">
<div class="modal-dialog"  style="width:100%;">
    <div class="modal-content" style="width:100%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" id="close_modal_button"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
            <h4 class="modal-title" id="modalTitle"><b>Resume Management</b></h4>
        </div>
        <div id="modalBody" class="modal-body">
			<div class="box-body table-responsive">
				<table id="example1" class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>Name</th>
							<th>Contact Details</th>
							<th>Requirement</th>
							<th width="50%">Exp / CTC / ECTC / NP</th>
							<th class="bdd0">Stage</th>
							<th class="bdd0">State</th>
							<th>Date</th>
							<th>TA</th>
							<th>Action</th>
							<th style="display:none;">hide</th>
							<th style="display:none;">hide</th>
						</tr>
					</thead>
					<tbody id="popup_modal_resume_data">
					</tbody>
				</table>
			</div>
		</div>
        <div class="modal-footer" id="modal_footer">
			<!--<button type="button" class="btn btn-default pull-left" id="reschedule_button">Reschedule</button>
				data-toggle="modal" data-target="#reschedule_modal">Reschedule</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
        </div>
    </div>
</div>
</div>
<div class="modal fade" id="resume_popup_modal" role="dialog">
	<div class="modal-dialog bdd001">
	<!-- 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>
		</div>
	</div>
</div>

<div class="modal fade" id="history_popup_modal" role="dialog" style="width:auto;">
	<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="example1" 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" %}

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

<!-- 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>
<!-- jQuery UI 1.11.4 -->
<script src="/static/bower_components/jquery-ui/jquery-ui.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>
<!-- fullCalendar -->
<script src="/static/bower_components/moment/moment.js"></script>
<script src="/static/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<!-- Page specific script -->

<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>

<script>

$(".resume_popup_modal_close").click(function(){
        $("#resume_popup_modal").modal('hide');
    });

	$(".history_popup_modal_close").click(function(){
        $("#history_popup_modal").modal('hide');
    });

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

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

  $(function () {


    /* initialize the calendar
     -----------------------------------------------------------------*/
    //Date for the calendar events (dummy data)
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()
    $('#calendar').fullCalendar({
      header    : {
        left  : 'prev,next today',
        center: 'title',
        right : 'month,agendaWeek,agendaDay'
      },
      buttonText: {
        today: 'today',
        month: 'month',
        week : 'week',
        day  : 'day'
      },
      //Random default events
     events    : [
     {% for i in schedule %}
        {
			{%if i.candidate.status == 'Completed'%}
			  title          : "👍{{ i.candidate.requirement.client.name }}-{{ i.candidate.first_name }}\xa0{{ i.candidate.last_name }}",
			{%else%}
			  title          : "{{ i.candidate.requirement.client.name }}-{{ i.candidate.first_name }}\xa0{{ i.candidate.last_name }}",
			{%endif%}
			{% if i.candidate.stage.stage == "Joining" %}
			  start          : new Date("{{ i.scheduled_date|add_joining_time|safe }}"),
			{% else %}
				start          : new Date("{{ i.scheduled_date|safe }}"),
			{% endif %}
			  allDay         : false,
			  backgroundColor: '{{ i.candidate.requirement.client.calendar_colour }}', //Blue
			  borderColor    : '{{ i.candidate.requirement.client.calendar_colour }}', //Blue
			  rid : {{ i.candidate.id }}
       },
  {% endfor %}
      ],
      /* eventRender: function (event, element) {
    		element.find('.fc-title').append("&#x1f44d;");
	  }, */
	   eventClick:  function(event, jsEvent, view) {
			$.ajax({
				url : "/get_schedule_details/",
				type : "POST",
				dataType: "json",
				data : {
					rid : event.rid,
					csrfmiddlewaretoken: '{{ csrf_token }}'
				},
				success : function(json)
				{
					$('#modalTitle').html(json.title);
					$('#popup_modal_resume_data').html(json.description);
					// $('#eventUrl').attr('href',event.url);
					$('#calendarModal').modal();
					$('#rid').val(event.rid);
					$('#example1').DataTable();
					 $('.dataTables_filter').parent().addClass('pull-left');
					 $('.dataTables_length').parent().addClass('pull-right');
					 $('.dataTables_length').addClass('pull-right');
					 $('.dataTables_filter').addClass('pull-left');
					 if ( $(window).width() > 739) {
					 $('[type=search]').attr('size','60%');
					 }
					 else {
					 $('[type=search]').attr('size','25%');
					 }
				},
				error : function(xhr,errmsg,err)
				{
					alert(xhr.status + ": " + xhr.responseText);
				}
			});
       },
      editable  : true,
      drop      : function (date, allDay) { // this function is called when something is dropped

        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject')

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject)

        // assign it the date that was reported
        copiedEventObject.start           = date
        copiedEventObject.allDay          = allDay
        copiedEventObject.backgroundColor = $(this).css('background-color')
        copiedEventObject.borderColor     = $(this).css('border-color')

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true)

        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
          // if so, remove the element from the "Draggable Events" list
          $(this).remove()
        }

      }
    })

    /* ADDING EVENTS */
    var currColor = '#3c8dbc' //Red by default
    //Color chooser button
    var colorChooser = $('#color-chooser-btn')
    $('#color-chooser > li > a').click(function (e) {
      e.preventDefault()
      //Save color
      currColor = $(this).css('color')
      //Add color effect to button
      $('#add-new-event').css({ 'background-color': currColor, 'border-color': currColor })
    })
    $('#add-new-event').click(function (e) {
      e.preventDefault()
      //Get value and make sure it is not null
      var val = $('#new-event').val()
      if (val.length == 0) {
        return
      }

      //Create events
      var event = $('<div />')
      event.css({
        'background-color': currColor,
        'border-color'    : currColor,
        'color'           : '#fff'
      }).addClass('external-event')
      event.html(val)
      $('#external-events').prepend(event)

      //Remove event from text input
      $('#new-event').val('')
    })
  })
</script>


<script>
$(document).ready(function(){

    $("#close_modal_button").click(function(){
		$("#modal_footer").show();
		$("#modalBody").show();
		$("#hidden_form").hide();
		$("#schedule_footer").hide();
	});
	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#joi_date_time").attr("min",date); 
	 $("input#sch_date_time").attr("min",date+"T" +hours + ":" + minutes +":" + "00");
});


$('body').on('click', 'button.fc-prev-button', function() {
	var client_id = $("#id_client").val();
	$.ajax({
        url : "/get_monthly_schedules_count/",
        type : "POST",
        dataType: "json",
        data : {
            tag : 1,
            client_id : client_id,
            url : window.location.href,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success : function(json)
		{
			<!--var obj_array = json.response;-->
			<!--$("#details_view").html(obj_array);-->

			var events = json.events;
			$('#calendar').fullCalendar('removeEvents');
			$('#calendar').fullCalendar('addEventSource', events);
			$('#calendar').fullCalendar('rerenderEvents' );
			$("#details_view").html(json.response);

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

$('body').on('click', 'button.fc-next-button', function() {
	var client_id = $("#id_client").val();
	$.ajax({
        url : "/get_monthly_schedules_count/",
        type : "POST",
        dataType: "json",
        data : {
            tag : 2,
            client_id : client_id,
            url : window.location.href,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success : function(json)
		{
			<!--var obj_array = json.response;-->
			<!--$("#details_view").html(obj_array);-->

			var events = json.events;
			$('#calendar').fullCalendar('removeEvents');
			$('#calendar').fullCalendar('addEventSource', events);
			$('#calendar').fullCalendar('rerenderEvents' );
			$("#details_view").html(json.response);

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

$('body').on('click', '.fc-title', function() {
	var title = self.getAttribute('title');
	alert("hi");
	alert("title");
});


function history_popup(rid, req_id)
{
var dt = $("#example1").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');
						$('#example1').DataTable({"order": []});
						$('.dataTables_filter').parent().addClass('pull-left');
						$('.dataTables_length').parent().addClass('pull-right');
						$('.dataTables_length').addClass('pull-right');
						$('.dataTables_filter').addClass('pull-left');
						if ( $(window).width() > 739) {
						$('[type=search]').attr('size','60%');
						}
						else {
						$('[type=search]').attr('size','25%');
						}
                    },
                    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 updatestatus(rid, stage, next_stage, next_stage_id)
{
   var stage_id = $("#resume_stage"+rid).val();
   $("#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(next_stage_id);
						$('#commentModal').modal('show');
	}
}

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 get_client_schedules()
{
	var client_id = $("#id_client").val();
	$.ajax({
        url : "/get_client_schedules/",
        type : "POST",
        dataType: "json",
        data : {
            tag : 1,
            client_id : client_id,
            loc : window.location.href,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success : function(json)
		{
			var events = json.events;
			<!--var obj_array = json.events;-->
			<!--$("#details_view").html(obj_array);-->
			$('#calendar').fullCalendar('removeEvents');
			$('#calendar').fullCalendar('addEventSource', events);
			$('#calendar').fullCalendar('rerenderEvents' );
			$("#details_view").html(json.response);
        },
        error : function(xhr,errmsg,err)
		{
            alert(xhr.status + ": " + xhr.responseText);
        }
    });
}

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);
        }
    });
}

</script>

<!--<div id="details_view">-->
<!--{% if sch_tag %}-->
	<!--<span style="color:#9C640C;">-->
		<!--Total Interview Scheduled: {{ total_schedules }}<br>-->
		<!--{% for client in client_interviews %}-->
			<!--{{ client.0 }}: {{ client.1 }}<br>-->
		<!--{% endfor %}-->
	<!--</span>-->
<!--{% else %}-->
	<!--<span style="color:#186A3B">-->
		<!--Total Joined: {{ total_joined }}<br>-->
		<!--{% for joined in joined %}-->
			<!--{{ joined.0 }}: {{ joined.1 }}<br>-->
		<!--{% endfor %}-->
	<!--</span>-->
	<!--<span style="color:#C0392B;">-->
		<!--Total Future Joinees: {{ total_joinees }}<br>-->
		<!--{% for joinee in joinees %}-->
			<!--{{ joinee.0 }}: {{joinee.1 }}<br>-->
		<!--{% endfor %}-->
	<!--</span>-->
<!--{% endif %}-->

<!--</div>-->
{% endblock midpart %}