{% extends 'base.html' %}

{% block midpart %}

  <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- 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">
  <!-- 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">
  <!-- 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]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">



    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- /.col -->
        <div class="col-md-12">
          <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 class="modal fade" id="modal-default"> -->
        <!--   <div class="modal-dialog"> -->
        <!--     {#% include "update_scheduled.html" %#} -->
        <!--   </div> -->
        <!--   <\!-- /.modal-dialog -\-> -->
        <!-- </div> -->
        <!-- <\!-- /.modal -\-> -->

        
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->

    

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

  $(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 %}
        {
          title          : "{{ i.candidate.first_name }}-{{ i.status }}",
		  description    : '<table class="table table-bordered table-striped"><tr><td><b>Candidate Name</b></td><td><b>{{ i.candidate.first_name }}</b></td></tr><tr><td>Position</td><td>{{i.requirement.position_name}}</td></tr><tr><td>Client Name</td><td>{{i.requirement.client.name}}</td></tr><tr><td>Manager Name</td><td>{{i.requirement.manager}}</td></tr><tr><td>Requirement Description &nbsp;&nbsp;</td><td>{{i.requirement.desc}}</td></tr><tr><td><b>Schedule</b></td><td><b>{{i.scheduled_date}}</b></td></tr></table>',
          start          : new Date("{{ i.scheduled_date|safe }}"),
          allDay         : false,
          backgroundColor: '#0073b7', //Blue
          borderColor    : '#0073b7', //Blue
		  rid			 : "{{i.id}}"
       },
  {% endfor %}
      ],
	  {% for i in schedule %}
	  eventClick:  function(event, jsEvent, view) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href',event.url);
            $('#calendarModal').modal();
			$('#rid').val(event.rid);
        },
		{% endfor %}
      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>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
            <h4 id="modalTitle" class="modal-title"></h4>
        </div>
        <div id="modalBody" class="modal-body"></div>
		<form action="/reschedule_interview/" method="POST">
			<div id="hidden_form" style="display: none;">
				<input type="hidden" name="rid" id="rid"><br>
				{% if status == "joining" %}
				<input type="date" name="date_time" id="sch_date_time"><br>
				{% else %}
				<input type="datetime-local" name="date_time" id="sch_date_time"><br>
				{% endif %}
			</div><br><br>
			<div class="modal-footer" id="schedule_footer" style="display: none;">
			<button type="submit" class="btn btn-default pull-left" id="update_schedule">Update Schedule</button>
				<!--data-toggle="modal" data-target="#reschedule_modal">Reschedule</button>-->
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</form>
		
        <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>

<script>
$(document).ready(function(){
    $("#reschedule_button").click(function(){
        $("#modalBody").hide();
		$("#modal_footer").hide();
        $("#hidden_form").show();
		$("#schedule_footer").show();
    });
});
</script>

<div class="modal fade" id="reschedule_modal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
</div>
<!-- <script> -->
<!--   $(function () { -->
<!--     $("a.fc-day-grid-event").attr("data-toggle", "modal"); -->
<!--     $("a.fc-day-grid-event").attr("data-target", "#modal-default"); -->
<!--   }); -->
<!-- </script> -->

{% endblock midpart %}