 <style>
        .calendar {
            float: left;
            margin-bottom: 0px;
        }
        .fc-view {
            margin-top: 30px;
        }
        .none-border .modal-footer {
            border-top: none;
        }
        .fc-toolbar {
            margin-bottom: 5px;
            margin-top: 15px;
            color:#fff !important;
        }
        .fc-toolbar h2 {
            font-size: 14px;
            font-weight: 400;
            line-height: 30px;
            text-transform: uppercase;
            color:#fff !important;
        }
        .fc-day {
            background: #ffffff;
        }
        .fc-today{
            background: #a5a5a5;
        }
        .fc-toolbar .fc-state-active,
        .fc-toolbar .ui-state-active,
        .fc-toolbar button:focus,
        .fc-toolbar button:hover,
        .fc-toolbar .ui-state-hover {
            z-index: 0;
        }
        .fc-widget-header {
            border: 1px solid #fff;
        }
        .fc-widget-content {
            border: 1px solid #fff;
        }
        .fc th.fc-widget-header {
            background: transparent;   
            color:#fff;
            font-size: 12px;
            line-height: 20px;
            padding: 10px 0px;
            text-transform: uppercase;
        }
        .fc-button {
            background: #59a9f8;
            border: 1px solid #ebeff2;
            color: #fff;
            text-transform: capitalize;
        }
        .fc-text-arrow {
            font-family: inherit;
            font-size: 16px;
        }
        .fc-state-hover {
            background: #f3f3f3;
        }
        .fc-state-highlight {
            background: #f0f0f0;
        }
        .fc-resource-cell{
            color: #fff;
        }
        .fc-time {
            color: #fff;
        }
        .fc-cell-overlay {
            background: #f0f0f0;
        }
        .fc-unthemed .fc-today {
            background: #ffffff;
        }
        .fc-event {
            border-radius: 2px;
            border: none;
            cursor: move;
            font-size: 10px;
            margin: 5px 7px;
            padding: 5px 5px;
            text-align: center;
            word-wrap: break-word;
            color:#000;
        }
        .external-event {
            color: #ffffff;
            cursor: move;
            margin: 10px 0;
            padding: 6px 10px;
        }
        .fc-basic-view td.fc-week-number span {
            padding-right: 5px;
        }
        .fc-basic-view td.fc-day-number {
            padding-right: 5px;
        }

    </style>
<div class="wrapper">
    <div class="container-full">
        <div class="card-box bg-custom">
            <div class="row">
                <div class="col-md-12">
                    <input type="hidden" id="staffid" class="form-control" value="<?php  if(isset($staff)){echo $staff->id_staff;}?>">
                    <input type="hidden" id="day" class="form-control" value="<?php echo $day;?>">
                    <span id="staff_name_span" style="font-size: 23px; font-weight: bold; color:#fff" ><?php if(isset($staff)){echo $staff->staff_fullname;}?></span>
                    
                    <div id="staffcalendar"  style="color:#fff !important;"></div>
                </div>
            </div>
        </div>
        
    </div>

<script>
    $(document).ready(function () {
        refresh_schedule();
    });
    
    
        function refresh_schedule() {
            var staffid = $('#staffid').val();
            var day = $('#day').val();
            

            $.ajax({
                url: '<?php echo base_url() . 'coaching_controller/get_staff_schedule_ajax'; ?>',
                type: 'POST',
                data: {staff_id: staffid, day: day},
                success: function (data) {
                    console.log(data);
                    var data = $.parseJSON(data);
                    var events = new Array();

                    if (data['visit_events'].length > 0) {
                        for (var k = 0; data['visit_events'].length > k; k++) {
                            events.push({
                                id: data['visit_events'][k].id,
                                resourceId: data['visit_events'][k].resourceId,
                                start: data['visit_events'][k].start,
                                end: data['visit_events'][k].end,
                                title: data['visit_events'][k].title,
                                editable: true,
                                borderColor: data['visit_events'][k].borderColor,
                                backgroundColor: data['visit_events'][k].backgroundColor,
                                textColor: data['visit_events'][k].textColor,
                                id_visit_services: data['visit_events'][k].id_visit_services,
                                id_visit_service_staffs: data['visit_events'][k].id_visit_service_staffs
                            });
                        }
                    }
                    $('#staffcalendar').fullCalendar('destroy');
                    staffcalendar(events);
                }
            });
        }


        function staffcalendar(e) {
            var staffid = $('#staffid').val();
            var day = $('#day').val();            
            //$("#staff_name_span").html($("#staffid option:selected").text());
            
            var staffcalendar = $('#staffcalendar').fullCalendar({
                schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                defaultView: 'agendaWeek',
                initialView: 'agendaWeek',    
                defaultDate: moment(day),
                bootstrapFontAwesome: !1,
                timeFormat: 'h:mm',
                slotLabelFormat: "hh:mm",
                displayEventTime : true,
                minTime: '08:00',
                maxTime: '23:55',
                button: {
                    today: "Today",
                    day: "Day",
                    prev: "Prev",
                    next: "Next"
                },

                handleWindowResize: !0,
                header: {
                    left: 'prev, next',
                    center: 'title',
                    
                    right: 'agendaDay, agendaWeek, month'
                },

                editable: 0,
                droppable: 0,
                selectable: 0,
                allDaySlot: false,
                height: 740,
                resourceLabelText: 'Staff List',
                resources: [{'id': $("#staffid").val(), 'title': $("#staff_name_span").html()}],
                events: e,
                eventClick: function (calEvent, jsEvent, view) {
                    
                    //console.log(calEvent);
                },
                select: function(start, end, jsEvent, view, resource) {
                   // console.log(jsEvent);
                    var temp=jsEvent.target['className'];
                                
                    //console.log(temp);
                    //console.log(temp.indexOf("fc-scroller"));
                    if(temp.indexOf("fc-scroller")<0){
                        //console.log(temp);
                        //console.log(start.format('HH:mm'));
                        $('#starttime').val(start.format('HH:mm'));
                        var starthour=start.format('HH');
                        var endhour=parseInt(starthour)+1;
                        $('#endtime').val(endhour + start.format(':mm'));
                    }
                },
                dayClick: function(date, jsEvent, view, resource) {
                  $('#day').val(date.format('YYYY-MM-DD'));
                    refresh_schedule();
                },
                eventMouseover: function(calEvent, jsEvent) {
                    var mTitle=calEvent.title.split('-');
                    var tooltip = '<div class="tooltipevent" style="width:220px;height:105px;background:'+calEvent.backgroundColor+';color:#fff; padding:10px; position:absolute;z-index:10090; border-radius:4px;">' + mTitle[0]+' <br> '+ mTitle[1]+' <br> '+mTitle[2] + ' <br> '+mTitle[3] +  '</div>';
                    var $tooltip = $(tooltip).appendTo('body');

                    $(this).mouseover(function(e) {
                        $(this).css('z-index', 10000);
                        $tooltip.fadeIn('500');
                        $tooltip.fadeTo('10', 1.9);
                    }).mousemove(function(e) {
                        $tooltip.css('top', e.pageY + 30);
                        $tooltip.css('left', e.pageX - 100);
                    });
                },
                eventMouseout: function(calEvent, jsEvent) {
                    $(this).css('z-index', 8);
                    $('.tooltipevent').remove();
                },                     
                eventDragStart: function(event) {
                    oldResourceId = event.resourceId;
                    oldStart = event.start.format();
                },
                eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
                    
                    var ee=event;
                    //console.log(ee); return false;
                    $.ajax({
                        url: '<?php echo base_url().'coaching_controller/updatevisit'; ?>',
                        //data: 'id_visit_services=' +event.id+ '&staff_id=' +event.resourceId+ '&start=' +event.start.format()+ '&end=' +event.end.format(),
                        data: {
                            id_visit_services:event.id_visit_services,
                            id_visit_service_staffs:event.id_visit_service_staffs,
                            start:event.start.format(),
                            end:event.end.format(),
                            staff_id:event.resourceId,
                            oldStaffId: oldResourceId,
                            oldStart: oldStart,
                            visit_status: event.visit_status
                        },
                        type: 'POST',
                        success: function(response){
                            if(response==='sessionexpired'){
                                window.location.assign('<?php echo base_url();?>');
                                return false;
                            }
                            
                            var result = response.split('|');

                            if(result[0] === 'success'){
                                //$('#calendar').fullCalendar('refetchEvents');
                                toastr.success('Visit has been updated!', 'Done!');

                            } else {
                                swal({
                                    title: "eventDrop Error",
                                    text: result[0],
                                    type: "error",
                                    confirmButtonText: 'OK!'
                                });
                            }
                                
                        }
                    
                    });
                }
            });
            
            // $("#staffcalendar").fullCalendar('rerenderEvents');
        }



</script>