@inject('sentinel', 'Cartalyst\Sentinel\Native\Facades\Sentinel')
@extends('layout.front')
@section('css_page_level')
<link href="{{ asset('assets/global/plugins/fullcalendar/fullcalendar.min.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/global/plugins/icheck/skins/all.css') }}" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}"/>
<style type="text/css">
	.fc-day:hover{
		box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
	}
    #radioBtn_frequency .notActive{
        color: #3276b1;
        background-color: #fff;
    }
    #checkBtn_checkDay .notActive{
        color: #3276b1;
        background-color: #fff;
    }
    #radioBtn_cycleWay .notActive{
        color: #3276b1;
        background-color: #fff;
    }
    #radioBtn_enddate .notActive{
        color: #3276b1;
        background-color: #fff;
    }
</style>
@endsection
@section('page-content')
    <div class="wrap-fluid" id="paper-bg">
        <div class="row">
            <div class="col-lg-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title"><i class="fontello-doc"></i>
                            <span style="font-size:200%;">用藥提醒</span>
                        </h3>
                    </div>
                    <div class="box-body">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/additional-methods.js') }}"></script>
<script src="{{ asset('assets/global/plugins/moment.min.js') }}"></script>
<script src="{{ asset('assets/global/plugins/fullcalendar/fullcalendar.min.js') }}"></script>
<script src="{{ asset('assets/global/plugins/fullcalendar/lang-all.js') }}"></script>
<script src="{{ asset('assets/global/plugins/icheck/icheck.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-TW.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}"></script>
<script type="text/javascript">
	$(document).ready(function(){

		var date = new Date();
	    var d = date.getDate();
	    var m = date.getMonth();
	    var y = date.getFullYear();
	    var h = {};

    
		$('#calendar').fullCalendar({ //re-initialize the calendar
    	lang: 'zh-tw',
        header: h,
        timeFormat: 'H:mm ',
        defaultView: 'month', // change default view with available options from http://arshaw.com/fullcalendar/docs/views/Available_Views/ 
        slotMinutes: 15,
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        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);
            var info = $(this).data('info');
            var cal_id = $(this).attr('cid');
            var author = $(this).data('author');
            var location = $(this).data('location');
            var cover_img = $(this).data('cover_img');
            var compressed_cover = $(this).data('compressed_cover');
            var start = $(this).data('start');
            var end = $(this).data('end');
            var file = $('#base64_pdf').val();
            var edit_file = $('#edit_base64').val();
            //var file = document.getElementById("file").files[0];
            //copiedEventObject.start = date;
            //copiedEventObject.allDay = allDay;
            copiedEventObject.className = $(this).attr("data-class");
            copiedEventObject.title = $(this).html();

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            
            $(this).remove();
            // is the "remove after drop" checkbox checked?
            $.ajax({
            	type : 'POST',
            	url  : '{{ action('Manage\Platform\CalendarController@createEvent') }}',
            	dataType: 'json',
            	data : {
            		_token:$('#_token').val(),
            		title : copiedEventObject.title,
            		//start : copiedEventObject.start.format(),
            		info  : info,
            		author: author,
            		location:location,
            		cover_img:cover_img,
            		compressed_cover:compressed_cover,
            		start : start,
            		end : end,
            		file: file,
            		cal_id: cal_id
            	},
            	success : function(sendback){
            		getEvent();
            		toastr["success"]("@lang('messages.event')「"+copiedEventObject.title+"」@lang('messages.add_success')");
            		$('#event_info').html('');
            		$('#event_author').val('');
            		$('#event_location').val('');
            		$('#event_title').val('');
            		$('#info').val('');
            		$('#cover_img').val('');
            		$('#compressed_cover').val('');
            		$('#start').val('');
            		$('#end').val('');
            	},
            	error   : function(){
            		toastr["error"]("@lang('messages.add_fail')");
            	}
            });
        },
        //拖動效果
        eventDrop: function(event, delta, revertFunc) {
        	var id = event.id;
			var title = event.title;
			var start = event.start.format();
			var allDay = event.allDay;
			var end = (event.end == null) ? start : event.end.format();
			$.ajax({
				url: '{{ action('Manage\Platform\CalendarController@updateEvent') }}',
				data:{
					title : title,
					start : start,
					end   : end,
					id    : id,
					_token: $("#_token").val(),
					allDay: allDay
				},
				type: 'POST',
				dataType: 'json',
				success: function(response){
					toastr["success"]("@lang('messages.success_edit')");
				},
				error: function(e){
					revertFunc();
					toastr["error"]("@lang('messages.fail_edit')");
				}
			});
		},
		eventResize: function(event, delta, revertFunc) {
        	var id = event.id;
			var title = event.title;
			var start = event.start.format();
			var end = event.end.format();
			var allDay = event.allDay;
			//var end = (event.end == null) ? start : event.end.format();
			$.ajax({
				url: '{{ action('Manage\Platform\CalendarController@updateEvent') }}',
				data:{
					title : title,
					start : start,
					end   : end,
					id    : id,
					_token: $("#_token").val(),
					allDay: allDay
				},
				type: 'POST',
				dataType: 'json',
				success: function(response){
					toastr["success"]("@lang('messages.success_edit')");
				},
				error: function(e){
					revertFunc();
					toastr["error"]("@lang('messages.fail_edit')");
				}
			});
		},
		eventDragStop: function (event, jsEvent, ui, view) {
			
		},
		eventClick: function(calEvent, jsEvent, view) {
			$('#form_edit_event input[name="id"]').val(calEvent.id);
			$('#form_edit_event input[name="cal_id"]').val(calEvent.cal_id);
			$('#form_edit_event input[name="cal_color"]').val(calEvent.cal_color);
			$('#form_edit_event input[name="title"]').val(calEvent.title);
			$('#form_edit_event input[name="author"]').val(calEvent.author);
			$('#form_edit_event input[name="location"]').val(calEvent.location);
			$('#form_edit_event input[name="start"]').val(moment(calEvent.start).format("YYYY-MM-DD HH:mm"));
			if(calEvent.end == null){
				$('#form_edit_event input[name="end"]').val(moment(calEvent.start).format("YYYY-MM-DD HH:mm"));
			}else{
				$('#form_edit_event input[name="end"]').val(moment(calEvent.end).format("YYYY-MM-DD HH:mm"));
			}
			$('#form_edit_event textarea[name="info"]').html(calEvent.info);
			document.getElementById('edit_display').src=calEvent.cover_img;
			$('#file_edit').attr('href',calEvent.file);
			$('#file_edit').html('附件下載');
			$('#modal_cal_edit_event').modal('show');
	    }
    });
	});
	
</script>
@endsection