@extends('layouts.app')

@section('breadcrumb')
  <ul class="breadcrumb">
    <li><a href="/home">{!! trans('messages.home') !!}</a></li>
    <li><a href="/officer-deployment?mode=admin#">{!! trans('messages.officer_deployment') !!}</a></li>
    <li class="active">{!! trans('messages.roster').' '.trans('messages.planner') !!}</li>
  </ul>
@stop

@section('content')
	<div class="row">
		<div class="col-md-12">
      <div class="box-info">
        <h2><b>{!! trans('messages.roster').' '.trans('messages.planner') !!}</b>
          <div class="pull-right">
            Legend:
            <div class="label" style="background-color:#4169E1;">Day Shift</div>
            <div class="label" style="background-color:#053752;">Night Shift</div>
            <div class="label" style="background-color:#e54a7d;">Leave</div>
          </div>
        </h2>
				<div id="container">
					<div id='calendar'></div>
				</div>
			</div>
		</div>
	</div>

  {{-- Assign Relief Modal --}}
  <div class="modal fade" id="fullCalModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span></button>
          <h4 class="modal-title" id="modalTitle"></h4>
        </div>

        <hr style="margin:0;">

        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                {!! Form::label('type',trans('messages.calendar').' '.trans('messages.event').' '.trans('messages.type'),[]) !!}
              </div>
            </div>
            <div class="col-md-8">
              <div class="form-group">
                {!! Form::select('type',$event_type,'OFF',['class'=>'form-control show-tick','title'=>trans('messages.select_one'),'id'=>'type']) !!}
              </div>
            </div>
            <div class="col-md-4">
              {!! Form::button('<i class="fa fa-sliders"></i> '.trans('messages.change').' '.trans('messages.type'),['class'=>'btn btn-primary','type'=>'submit','data-dismiss'=>'modal','onclick'=>"changeEventType()"]) !!}
            </div>
          </div>
          <hr style="margin-top: 0px; margin-bottom: 10px;">
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                {!! Form::label('relief_type',trans('messages.user').' '.trans('messages.type'),[]) !!}
              </div>
            </div>
            <div class="col-md-8">
              <div class="form-group">
                {!! Form::label('user',trans('messages.user'),[]) !!}
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                {!! Form::select('relief_type',$relief_type,'',['class'=>'form-control show-tick','title'=>trans('messages.select_one'),'id'=>'relief_type','onchange'=>'fetchUsers(this)']) !!}
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                {!! Form::select('user',[],'',['class'=>'form-control show-tick','title'=>trans('messages.select_one'),'id'=>'list_relief']) !!}
              </div>
            </div>
            <div class="col-md-2">
              {!! Form::button('<i class="fa fa-calendar-plus-o"></i> '.trans('messages.assign'),['class'=>'btn btn-primary pull-right','type'=>'submit','data-dismiss'=>'modal','onclick'=>"allocateRelief()"]) !!}
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
@stop

@section('js')
	<script src="https://momentjs.com/downloads/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

	<script>
    // console.log = function() {};  // NOTE: comment out this to see debugging console log

    const day_color = "#4169E1";
    const night_color = "#053752";
    const leave_color = "#e54a7d";

		var doubleClick = false;
		var eventDoubleClick = false;

    var selected_event = {  // NOTE: Temp global obj use to hold values of right-clicked calendar event
      event_id: null,
      event_type: null,
      shift_id: null,
      location_id: null,
      relief_id: null,
      relief_type: null,
      start: null,
      end: null
    };

    toastr.options.positionClass = 'toast-bottom-right';  // Set toastr messagebox default position

    document.oncontextmenu = function() { return false; };  // Prevent mouse right-click context menu

    function fetchUsers(relief_type){   // NOTE: Get list of eligible officers for replacement
      var type = relief_type.value;
      var url = "{{url('/scheduler/fetch-reliefs')}}" + "?location_id=" + selected_event.location_id + "&relief_id=" + selected_event.relief_id + "&relief_type=" + type;

      $.get(url, function(response){
        $("#list_relief")
        .html(response)
        .selectpicker('refresh');
      });
    };

    function allocateRelief(){  // NOTE: Append relief_id to the calendar event
      var cal_event = $('#calendar').fullCalendar('clientEvents',selected_event.event_id)[0];
      var relief_type = $('#relief_type').val();
      var relief = $('#list_relief').val();

      if (!relief){
        toastr.error("No employee has been selected");
        return;
      }

      if (relief == cal_event.relief_id) {
        toastr.error("User already assigned for the period");
        return;
      }

      $.ajax({
        type:"POST",
        url:"{{route('validateRelief')}}",
        data:{
          shift_id: selected_event.shift_id,
          relief_id: relief,
          relief_type: relief_type,
          from_date: selected_event.start,
          to_date: selected_event.end
        },
        headers:{'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},
        success:function(data){
          if (relief && cal_event) {
            if (cal_event.type == 'LEAVE')
              cal_event.editable = false;

            cal_event.relief_id = relief;
            cal_event.relief_type = relief_type;

            console.log("Allocate Relief: ", cal_event);

            saveEvent(cal_event);
          }
          toastr.success(data.message);
        },
        error:function(data){
          toastr.error(data.responseJSON.message);
        }
      });
    };

    function saveEvent(cal_event){  // NOTE: Saving calendar event to rostering table
      var cal_event_obj = {
        id: (cal_event.id) ? cal_event.id : null,
        user_id: cal_event.user_id,
        shift_id: cal_event.shift_id,
        location_id: cal_event.location_id,
        relief_id: (cal_event.relief_id) ? cal_event.relief_id : null,
        relief_type: (cal_event.relief_type) ? cal_event.relief_type : null,
        from_date: cal_event.start.format('YYYY-MM-DD'),
        to_date: (cal_event.end) ? cal_event.end.format('YYYY-MM-DD') : cal_event.start.add(1, 'days').format('YYYY-MM-DD'),
        type: cal_event.type
      }

      console.log("Before Save: ", cal_event_obj);

      $.ajax({
        type:"POST",
        url:"{{route('saveCalEvent')}}",
        data:{
          cal_event: cal_event_obj
        },
        headers:{'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},
        success:function(data){
          $('#calendar').fullCalendar('refetchEvents');   // Re-render all calendar events
        },
        error:function(data){
          toastr.error(data.responseJSON.message);
        }
      });
    };

    function changeEventType(){
      var cal_event = $('#calendar').fullCalendar('clientEvents',selected_event.event_id)[0];
      var eventType = $('#type').val();

      var cal_event_obj = {
        id: cal_event.id,
        relief_id: (cal_event.relief_id) ? cal_event.relief_id : null,
        relief_type: (cal_event.relief_type) ? cal_event.relief_type : null,
        type: eventType
      }

      console.log("Update Calendar Type: ", cal_event_obj);

      $.ajax({
        type:"POST",
        url:"{{route('saveCalEvent')}}",
        data:{
          cal_event: cal_event_obj
        },
        headers:{'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},
        success:function(data){
          $('#calendar').fullCalendar('refetchEvents');   // Re-render all calendar events

          toastr.success(data.message);
        },
        error:function(data){
          toastr.error(data.responseJSON.message);
        }
      });
    };

    function deleteEvent(event_id){
      $.ajax({
        type:"POST",
        url:"{{route('delCalEvent')}}",
        data:{
          event_id: event_id
        },
        headers:{'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},
        success:function(data){
          $('#calendar').fullCalendar('refetchEvents');   // Re-render all calendar events
        },
        error:function(data){
          toastr.error(data.responseJSON.message);
        }
      });
    };

		$(function(){ // Full Calendar
			$('#calendar').fullCalendar({
				schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
				defaultView: 'timelineMonth',
        height: 'auto',
				customButtons:{
					shift:{
						text:'Day Shift',
						click:function(){ // Change day or night toggle
							if($(this).text() == "Day Shift"){
								$('meta[name=shift]').attr("content","Night");
								$(this).css('background-color',night_color);
								$(this).css('background-image',"none");
								$(this).css('color',"white");
								$(this).text("Night Shift");
							}
							else{
								$('meta[name=shift]').attr("content","Day");
								$(this).css('background-color','');
								$(this).css('background-image','none');
								$(this).css('color','');
								$(this).text("Day Shift");
							}
						}
					},
					save:{   // NOTE: Note In-use
						text:'Save Roster',
						click:function(){ // Save events
							$.ajax({
								type:"POST",
								url:"{{route('schedulerSaveResults')}}",
								data:{
                  events:createJson($('#calendar').fullCalendar('clientEvents')),
                  start:$('#calendar').fullCalendar('getView').start.valueOf(),
                  end:$('#calendar').fullCalendar('getView').end.valueOf()
                },
								headers:{'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},
								success:function(data){
                  toastr.success(data.message);
                  $('#calendar').fullCalendar('refetchEvents');   // Re-render all calendar events
                },
								error:function(data){
                  toastr.error(data.responseJSON.message);
                }
							});
						}
					},
					clone:{
						text:'Clone',
						click:function(){
							$('#calendar').fullCalendar('clientEvents',function(e){
								if(!e.description){
									var clone = {
										title:e.title,
										start:moment(e.start).add(1,'M'),
										end:moment(e.end).add(1,'M'),
										resourceId:e.resourceId,
										location_id:e.location_id,
										user_id:e.user_id,
                    shift_id:e.shift_id,
										backgroundColor:e.backgroundColor
									};
                  saveEvent(clone);
								}
							});
							$('#calendar').fullCalendar('next');
						}
					},
          print:{
            text:'Print',
            click:function(){
              window.print();
            }
          }
				},
        header:{
          left:'prev,next',
          center:'title',
          right:'shift'
				},
				footer:{
          left:'prev,next',
					right:'print clone'
				},
        resourceOrder:'location,-type,shift_id,title',  // NOTE: Determines the ordering of the resource list
				resourceAreaWidth:"35%",               // NOTE: Determines the width of the area that contains the list of resources
				resourceColumns:[
					{
						labelText:'{{trans('messages.location')}}',
						field:'location', // The property of the Resource Object where the data will come from
            width:'30%',
            group:true,       // Resources will be grouped by this column
            render:function(resource){
              resource[0].classList.add("next-line");
            }
					},
					{
						labelText:'{{trans('messages.officer').' '.trans('messages.name').' | '.trans('messages.designation')}}',
            field:'title',
            width:'65%',
            render:function(resource, element){
              if (resource.shift_id == 1) {
                element[0].classList.add('shift-day');
              }
              else if (resource.shift_id == 2) {
                element[0].classList.add('shift-night');
              }
              else {  // Contracted strength cell
                element.css('font-weight','bold');
                element.css('text-align','center');
              }
            }
					}
				],
        resources:{
					url:'/schedulerFeed?location_id={{$locations}}',
          width:'60%',
					type:'GET'
				},
        refetchResourcesOnNavigate: true,  // NOTE: If True, the network request will be made with additional parameters: the start/end date of the newly visible window
				events:{
          url:'/schedulerEventFeed?location_id={{$locations}}',
					type:'GET',
					success:function(e){
						for(var i = e.length-1; i >= 0; i--){
							var element = e[i];

							// Sets the contracted stregnth event color
              element.className = element.description;

              // Sets other calendar event color
							if(!element.description){
                if (element.type == "LEAVE") {
                  element.backgroundColor = leave_color;
                }
                else {
                  // Set color for Day/Nght shift
                  if(element.shift_id == 1)
                    element.backgroundColor = day_color;
                  else if(element.shift_id == 2)
                    element.backgroundColor = night_color;
                }

								// If cloned items overlap remove it
								$('#calendar').fullCalendar('clientEvents',function(f){
									if(f.resourceId == element.resourceId && f.start.format("YYYY-MM-DD") == element.start) // Check for 1 day event if they are the same remove it
										e.splice(i,1);
									else if(f.end && moment(element.start).isBetween(f.start,f.end)) // Event is more than one day
										e.splice(i,1);
								});
							}

						};
					}
				},
        editable: true,  // NOTE: Determines if the events can be dragged and resized.
        eventOverlap: false,
        eventRender: function (event, element) {           // NOTE: Triggered while an event is being rendered. A hook for modifying its DOM.
          if (event.description)  // NOTE: Prevent removing of the contracted strength event
            return;

          $(element).tooltip({ title: event.title });  // NOTE: Tooltip for events

          element.bind('mouseup', function (e) {  // NOTE: Populate data and modal for assigning relief officer
            if (e.which == 3) {   // Right-click
              console.log("eventRender: ", event);

              if (event.relief_id && event.relief_type) { // If event has user assigned
                $("#relief_type").val(event.relief_type);
                $("#relief_type").selectpicker("refresh");
                $("#type").val(event.type);
                $("#type").selectpicker("refresh");

                // Refetch list of users
                var url = "{{url('/scheduler/fetch-reliefs')}}" + "?location_id=" + event.location_id + "&relief_id=" + event.relief_id + "&relief_type=" + event.relief_type;
                $.get(url, function(response){
                  $("#list_relief")
                  .html(response)
                  .selectpicker('refresh');
                });
              }
              else {
                $("#relief_type").val("");
                $("#relief_type").selectpicker("refresh");
                $("#type").val(event.type);
                $("#type").selectpicker("refresh");

                // Refetch list of users
                var url = "{{url('/scheduler/fetch-reliefs')}}" + "?location_id=" + event.location_id + "&relief_id=" + event.relief_id + "&relief_type=" + event.relief_type;
                $.get(url, function(response){
                  $("#list_relief")
                  .html(response)
                  .selectpicker('refresh');
                });
              }

              selected_event.event_id = event._id;
              selected_event.shift_id = event.shift_id;
              selected_event.location_id = event.location_id;
              selected_event.relief_id = event.relief_id;
              selected_event.relief_type = event.relief_type;
              selected_event.start = event.start.format('YYYY-MM-DD');
              selected_event.end = event.end.format('YYYY-MM-DD');

              var c_start = event.start.clone().format('DD-MMM-YYYY');
              var c_end = event.end.clone();

              if (event.start.isSame(c_end.add(-1, 'days'), 'days'))
                $('#modalTitle').html('Assign Relief | ' + c_start);
              else
                $('#modalTitle').html('Assign Relief | ' + c_start + ' to ' + c_end.format('DD-MMM-YYYY'));

              $('#fullCalModal').modal();
            }
          });
        },
        dayClick:function(date, jsEvent, view, resource){  // NOTE: Triggered when the user clicks on a date or a time on the calendar.
          if(!doubleClick){  // NOTE: Double click checking
            doubleClick = true;
            setTimeout(function(){ doubleClick = false; }, 500);
          }
          else{
            var cal_obj = {
              title: "OFF",
              type: "OFF",
              start: date,
              resourceId: resource.id,
              user_id: resource.user_id,
              location_id: resource.location_id
            }

            if($('meta[name=shift]').attr('content') == "Day"){
              cal_obj.backgroundColor = day_color;
              cal_obj.shift_id = 1;
            }
            else{
              cal_obj.backgroundColor = night_color;
              cal_obj.shift_id = 2;
            }

            console.log("dayClick: ", cal_obj);

            // $('#calendar').fullCalendar('renderEvent',cal_obj);
            saveEvent(cal_obj);
          }
        },
				eventDrop:function(event, delta, revertFunc){      // NOTE: Triggered when the event has moved to a different day/time.
					var resource = $('#calendar').fullCalendar('getResourceById',event.resourceId);
					event.location_id = resource.location_id;
					event.shift_id = resource.shift_id;
					event.user_id = resource.user_id;
          event.relief_id = null;

          console.log("eventDrop: ", event);
					// $('#calendar').fullCalendar('updateEvent',event);
          saveEvent(event);
				},
        eventResize:function(event, delta, revertFunc){    // NOTE: Triggered when resizing stops and the event has changed in duration.
          console.log("evenResize: ", event);
          saveEvent(event);
        },
        eventClick:function(event, jsEvent, view){         // NOTE: Triggered when the user clicks an event.
          if (event.description == "normal")      // NOTE: Prevent removing of the contracted strength event
            return;

          // Matches event to title and disables the event click function
          if(event.type != "leave" && !event.description){
            if(!eventDoubleClick){
              eventDoubleClick = true;
              setTimeout(function(){ eventDoubleClick = false; }, 500);
            }
            else{
              console.log("eventClick: ", event);
              // $('#calendar').fullCalendar('removeEvents',event._id);
              deleteEvent(event.id);
            }
          }
        }
			});
		});
	</script>
@stop

@section('css')
  {{-- Using FullCalendar v3 --}}
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.min.css" media='print'/>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>
  <meta name="shift" content="Day">

  <style>
    {{-- CSS to overwrite the original box-info styles for this calendar --}}
    #calendar table tr th, #calendar table tr td { padding: 0; }
    #calendar .fc-shift-button, #calendar .fc-Save-button { width: 150px; }
    #calendar .fc-event { border:2px outset #C0C0C0; text-align: center; }
    #calendar .fc-widget-header .fc-cell-content { text-align: center; }
    #calendar .fc-header-toolbar h2 { font-size: 21px; }

    #calendar .next-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    #calendar .all-good { background-color: #2E8B57; }
    #calendar .both-under { background-color: #B22222; }
    #calendar .day-under { background: linear-gradient(to right, #B22222 0%, #B22222 50%, #2E8B57 51%, #2E8B57 100%); }
    #calendar .night-under { background: linear-gradient(to right, #2E8B57 0%, #2E8B57 50%, #B22222 51%, #B22222 100%); }

    .fc-no-overlap .fc-body .fc-resource-area .fc-cell-content.shift-day,
    .fc-no-overlap .fc-body .fc-resource-area .fc-cell-content.shift-night { position: relative; padding-left: 10px; }

    .fc-no-overlap .fc-body .fc-resource-area .fc-cell-content.shift-day:before,
    .fc-no-overlap .fc-body .fc-resource-area .fc-cell-content.shift-night:before { position: absolute; top: 0; left: 0; width: 10px; height: 100%; content : ""; }

    .fc-no-overlap .fc-body .fc-resource-area .fc-cell-content.shift-day:before { background: #4169E1; }
    .fc-no-overlap .fc-body .fc-resource-area .fc-cell-content.shift-night:before { background: #053752; }

    .fc-sat { color: #BA4A00; background-color: #FBEEE6; }
    .fc-sun { color: #BA4A00; background-color: #FBEEE6; }
  </style>
@stop