@extends('layout.manage')

@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') }}"/>
@endsection

@section('page-content-wrapper')
	<div class="page-content-wrapper" id="main">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			@inject('setting','anlutro\LaravelSettings\Facade')
			{{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="index.html">@lang('messages.homepage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.community_manage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.neighberhood_calendar')</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN DASHBOARD STATS -->
			<!-- BEGIN PAGE CONTENT-->
			<div class="row">
				<div class="col-md-12">
					<!-- BEGIN PORTLET-->
					@if (count($errors) > 0)
						<div id="form_error_alert" class="alert alert-danger">
						<button class="close" data-close="alert"></button>
							<ul>
					            @foreach ($errors->all() as $error)
					                <li>{{ $error }}</li>
					            @endforeach
					        </ul>
						</div>
					@endif
					<div id="form_error_alert" class="alert alert-danger display-hide">
						<button class="close" data-close="alert"></button>
						@lang('messages.col_invalid')
					</div>

					<div class="portlet box green-meadow calendar">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-gift"></i>@lang('messages.calendar')
							</div>
						</div>
						<div class="portlet-body">
							<div class="row">
								<div class="col-md-3 col-sm-12">
									<!-- BEGIN DRAGGABLE EVENTS PORTLET-->
									<h3 class="event-form-title">@lang('messages.add_event')</h3>
									<div id="external-events">
										<form class="inline-form" enctype="multipart/form-data" id="add_form">
											<input type="text" value="" class="form-control" placeholder="@lang('messages.event_title')" id="event_title"/><br/>
											<input type="text" value="" class="form-control" placeholder="@lang('messages.publish_dept')" id="event_author"/><br/>
											<input type="text" value="" class="form-control" placeholder="@lang('messages.location')" id="event_location"/><br/>
											<div class="form-group">
											<label class="label label-danger">✔請務必填寫時間</label><br>
											<br>
										<div class="form-group">
											<label class="control-label">開始時間<span class="required" aria-required="true"> * </span></label>
											<div class="input-group date form_datetime">
												<input id="start" type="text" size="16" class="form-control" >
												<span class="input-group-btn">
												<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
												</span>
											</div>
										</div>
										
									</div>
									<div class="form-group">
										<label class="control-label">結束時間<span class="required" aria-required="true"> * </span></label>
											<div class="input-group date form_datetime">
												<input id="end" type="text" size="16"  class="form-control" >
												<span class="input-group-btn">
												<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
												</span>
											</div>
									</div>

											<select id="select_calendar" name="select_calendar" class="bs-select form-control">
												@foreach ($calendars as $calendar)
												<option value="{{ $calendar->id }}">{{ $calendar->name }}</option>
												@endforeach
											</select><br/>
											<textarea class="form-control" rows="3" id="event_info"></textarea><br>
											<label class="control-label">圖片上傳</label>
											<div class="form-group cover">
													<div class="fileinput fileinput-new cover_img" data-provides="fileinput">
														<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
														<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt=""/>
														</div>
													<div>
													<span class="btn default btn-file">
														<span class="fileinput-new">選擇圖片 </span>
														<span class="fileinput-exists">更換 </span>
														<input type="file" name="cover_img" id="cover_img">
														<input type="hidden" name="compressed_cover" id="compressed_cover" value="">
													</span>
												<a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput" id="cover_reset">移除 </a>
											</div></div><br>
										</div>
										<div class="form-group file">
									
										<div class="fileinput fileinput-new cover" data-provides="fileinput">
											<div class="input-group input-xlarge file">
												<div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
													<i class="fa fa-file fileinput-exists"></i> &nbsp;<span class="fileinput-filename">
													</span>
												</div>
												<span class="btn default btn-file">
												<span class="fileinput-new">
												選擇檔案</span>
												<span class="fileinput-exists">
												更換 </span>
												<input type="file" name="file" id="file" onchange="convertToBase64();">
												<input type="hidden" name="base64_pdf" id="base64_pdf" value="">
												<input type="hidden" name="pdf_name" id="pdf_name" value="">
												</span>
												<a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput" id="file_reset">移除 </a>
											</div>
										</div>
									<label class="control-label"><span class="required" aria-required="true"> * </span> 上傳小提醒：檔案大小不可超過10MB</label>
								</div>
											<a href="javascript:;" id="event_add" class="btn default"> @lang('messages.add') </a>
											{{-- <a href="javascript:;" id="event_add_adv" class="btn default"> @lang('messages.advanced_add') </a> --}}
										</form>
										<hr/>
											<div id="event_box">
											</div>
										<hr/>
									</div>
									<!-- END DRAGGABLE EVENTS PORTLET-->
									<div>
										<div class="icheck-list">
											@foreach ($calendars as $calendar)
											<label>
												<input type="checkbox" class="icheck" data-checkbox="icheckbox_flat-grey" cid="{{ $calendar->id }}" data-color="{{ $calendar->color }}" data-textcolor="{{ $calendar->textColor }}"> {{ $calendar->name }}
											</label>
											@endforeach
										</div>
										<br/>
										{{-- <div class="note note-danger" id="trash">
											<h4 class="block">@lang('messages.drag_event2del')</h4>
										</div> --}}
									</div>
								</div>
								<div class="col-md-9 col-sm-12">
									<div id="calendar" class="has-toolbar">
									</div>
								</div>
							</div>
							<!-- END CALENDAR PORTLET-->
						</div>
					</div>
				</div>
			</div>
			<!-- END PAGE CONTENT-->

		</div>
	<!--MODAL-->

	<div class="modal" id="modal_add_event" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<form id="form_add_event" class="form-horizontal">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">@lang('messages.add_advanced_event')</h4>
				</div>
				<div class="form-body">
							<div id="form_error_alert" class="alert alert-danger display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.col_invalid')
							</div>
							<div id="form_success_alert" class="alert alert-success display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.update_success')
							</div>
							<input name="id" type="hidden"/>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.event_title')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<input name="title" type="text" class="form-control" placeholder="@lang('messages.enter_event_title')">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.select_calendar')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<select name="calendar" class="bs-select form-control">
										@foreach ($calendars as $calendar)
										<option value="{{ $calendar->id }}">{{ $calendar->name }}</option>
										@endforeach
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.event_explanation')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<input name="info" type="text" class="form-control" placeholder="@lang('messages.enter_event_explanation')">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.event_explanation')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<input name="info" type="text" class="form-control" placeholder="@lang('messages.enter_event_explanation')">
								</div>
							</div>
							<hr/>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.display_frequency')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<select name="frequency" class="bs-select form-control">
										<option value="days">@lang('messages.everyday')</option>
										<option value="weeks">@lang('messages.everyweek')</option>
										<option value="months">@lang('messages.everymonth')</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.length_times')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<select name="frequency" class="bs-select form-control">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
										<option value="8">8</option>
										<option value="9">9</option>
										<option value="10">10</option>
										<option value="11">11</option>
										<option value="12">12</option>
										<option value="13">13</option>
										<option value="14">14</option>
										<option value="15">15</option>
										<option value="16">16</option>
										<option value="17">17</option>
										<option value="18">18</option>
										<option value="19">19</option>
										<option value="20">20</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.start_time')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<input name="info" type="text" class="form-control" placeholder="@lang('messages.enter_event_explanation')">
								</div>
							</div>
						</div>
					<!-- END FORM-->
				</div>
				<div class="modal-footer">
					<button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
					<button type="submit" class="btn blue" id="btn_form_edit">@lang('messages.update')</button>
				</div>
			</div>
			</form>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!--END MODAL-->
	<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">

<!--Modal Function -News start -->
<div id="modal_cal_event" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-sm" id="modal_cal_event_content">
		<div class="modal-content" >
			<form id="form_edit_event" action="#" method="POST">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">@lang('messages.calendar_event')</h4>
				</div>
				<div class="modal-body">
					<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
					<input type="hidden" name="cal_id">
					<input type="hidden" name="cal_color">
					<input type="hidden" name="id">
					<div class="form-group">
						<label class="control-label">@lang('messages.event_title')</label>
						<input type="text" name="title" class="form-control" placeholder="@lang('messages.enter_event_title')">
					</div>
					<div class="form-group">
						<label class="control-label">@lang('messages.publish_dept')</label>
						<input type="text" name="author" class="form-control" placeholder="@lang('messages.enter_publish_dept')">
					</div>
					<div class="form-group">
						<label class="control-label">@lang('messages.location')</label>
						<input type="text" name="location" class="form-control" placeholder="@lang('messages.enter_event_location')">
					</div>
					<div class="form-group">
						<label class="control-label">@lang('messages.event_explanation')</label>
						<textarea name="info" class="form-control" rows="3"></textarea>
					</div>
					<div class="form-group"><br>
						<div class="form-group">
							<label class="control-label">開始時間</label>
								<div class="input-group date form_datetime">
									<input name="start" type="text"  class="form-control" readonly>
										<span class="input-group-btn">
											<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
										</span>
								</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label">結束時間</label>
							<div class="input-group date form_datetime">
								<input  type="text" name="end"  class="form-control" readonly>
									<span class="input-group-btn">
										<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
									</span>
							</div>
					</div>
					
					<div class="form-group">
						<label class="control-label">檔案上傳</label>
						
						<img id="edit_display" name="edit_display" style="width: 270px; height: 250px;"/>
						
						<input type="file" name="edit_cover_img" id="edit_cover_img" style="margin-top:10px;">
						<input type="hidden" name="edit_compressed_cover" id="edit_compressed_cover" value="">
					</div>
					<div class="form-group">
						<label class="control-label">附件上傳</label>
						
						<a type="button" class="btn green btn-xs" name="file" id="file_edit" href=""></a>

						<input type="file" name="edit_file" id="edit_file" onchange="edit_convertToBase64();">
						<input type="hidden" name="edit_base64" id="edit_base64" value="">
					</div>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
					<button type="submit" class="btn green btn_event_update">@lang('messages.update')</button>
					<button type="button" class="btn red btn_event_delete">@lang('messages.del')</button>
				</div>
				</div>

			</form>
		</div>
	</div>
</div>
<!--Modal Function -News end -->
@endsection

@section('plugins_page_level')
<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>
@endsection

@section('js_page_level')
<script type="text/javascript">
    function convertToBase64() {
        //Read File
        var selectedFile = document.getElementById("file").files;
        //Check File is not Empty
        if (selectedFile.length > 0) {
            // Select the very first file from list
            var fileToLoad = selectedFile[0];
            // FileReader function for read the file.
            var fileReader = new FileReader();
            var base64;
            // Onload of file read the file content
            fileReader.onload = function(fileLoadedEvent) {
                base64 = fileLoadedEvent.target.result;
                // Print data in console
                //console.log(base64);
                $("#base64_pdf").attr('value',base64);
            };
            // Convert data to base64
            fileReader.readAsDataURL(fileToLoad);
        }
    }

    function edit_convertToBase64() {
        //Read File
        var selectedFile = document.getElementById("edit_file").files;
        //Check File is not Empty
        if (selectedFile.length > 0) {
            // Select the very first file from list
            var fileToLoad = selectedFile[0];
            // FileReader function for read the file.
            var fileReader = new FileReader();
            var base64;
            // Onload of file read the file content
            fileReader.onload = function(fileLoadedEvent) {
                base64 = fileLoadedEvent.target.result;
                // Print data in console
                //console.log(base64);
                $("#edit_base64").attr('value',base64);
            };
            // Convert data to base64
            fileReader.readAsDataURL(fileToLoad);
        }
    }
</script>
<script>
$(document).ready(function(){

//客戶選擇完日期會自動關閉工具
$(".form_datetime").datetimepicker({
	defaultDate: new Date(date),
	autoclose: true,
});

//edit 'cover_img' compress
document.querySelector('#edit_cover_img').addEventListener('change', function () {
    lrz(this.files[0], {
        width: 680
    })
        .then(function (rst) {
            // 处理成功会执行
            //console.log(rst);
            var data = "";
            data = rst.origin.name + ',' + rst.base64 ;
            $('#edit_compressed_cover').val(data);

        })
        .catch(function (err) {
            $('#edit_compressed_cover').val('');
        })
	});

//edit event cover_img to display
function read_edit_URL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#edit_display').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#edit_cover_img").change(function(){
    read_edit_URL(this);
});

$.validator.addMethod('filesize', function(value, element, param) {
    return this.optional(element) || (element.files[0].size <= param) 
});

//cover_img extension
$("#add_form").validate({
	errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
		rules:{
			cover_img:{
				extension:"jpg|gif"
			},
			file:{
            accept: "pdf",
            filesize: 10485760
         },
			start:{
				required: true
			},
			end:{
				required: true
			}
		},
		messages:{
			cover_img:{
				extension: '@lang('messages.correct_style') jpg / gif @lang('messages.upload')',
			},
			file:{
            accept: '@lang('messages.correct_style') pdf @lang('messages.upload')',
            filesize: '檔案大小不可超過10MB'

         },
			start:{
				required: '請務必填寫行程開始時間！'
			},
			end:{
				required: '請務必填寫行程結束時間！'
			}
		},

		  invalidHandler: function (event, validator) { //display error alert on form submit   
            $('#form_error_alert').show();
            $('body').scrollTop($('#form_error_alert'));
        },

        highlight: function (element) { // hightlight error inputs
           $(element).closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (error,element) { // revert the change done by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label.closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        errorPlacement: function(error, element) {
        	if (element.attr("name") === "cover_img" || element.attr("name") === "file") {
    			error.appendTo( element.parent().parent() );
 
    		} else {
    			error.insertAfter( element );
       	}
		}
});

$('.fileinput').on('change.bs.fileinput', function() {
			$("#add_form").validate().element('input[name=cover_img]');
			$("#add_form").validate().element('input[name=file]');	
});

	//驗證事件更新
	$('#form_edit_event').validate({
		errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        //focusInvalid: false, // do not focus the last invalid input
        //ignore: "",  // validate all fields including form hidden input
		rules:{
			title:{
				required:true 
			},
			
		},
		messages:{
			title:{
				required:'@lang('messages.mustb_enter_event_name')' 
			},
		},

        highlight: function (element) { // hightlight error inputs
           $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
			$.ajax({
				type: 'POST',
				url : '{{ action('Manage\Platform\CalendarController@updateEventContent') }}',
				dataType: 'json',
				data : $('#form_edit_event').serialize(),
				success : function(sendback){
					toastr['success']('@lang('messages.success_updata_cal_event')');
					var cal_id = $('#form_edit_event input[name="cal_id"]').val();
					var cal_color = $('#form_edit_event input[name="cal_color"]').val();
					getEvent(cal_id,cal_color);
					$('#modal_cal_event').modal('hide');
				},
				error : function(sendback){
					toastr['error']('@lang('messages.operating_error_later_f5')');
				}
			})
        }
	});

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

    if (App.isRTL()) {
        if ($('#calendar').parents(".portlet").width() <= 720) {
            $('#calendar').addClass("mobile");
            h = {
                right: 'title, prev, next',
                center: '',
                left: 'agendaDay, agendaWeek, month, today'
            };
        } else {
            $('#calendar').removeClass("mobile");
            h = {
                right: 'title',
                center: '',
                left: 'agendaDay, agendaWeek, month, today, prev,next'
            };
        }
    } else {
        if ($('#calendar').parents(".portlet").width() <= 720) {
            $('#calendar').addClass("mobile");
            h = {
                left: 'title, prev, next',
                center: '',
                right: 'today,month,agendaWeek,agendaDay'
            };
        } else {
            $('#calendar').removeClass("mobile");
            h = {
                left: 'title',
                center: '',
                right: 'prev,next,today,month,agendaWeek,agendaDay'
            };
        }
    }

    var initDrag = function(el) {
        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim(el.text()) // use the element's text as the event title
        };
        // store the Event Object in the DOM element so we can get to it later
        el.data('eventObject', eventObject);
        // make the event draggable using jQuery UI
        el.draggable({
            zIndex: 999,
            revert: true, // will cause the event to go back to its
            revertDuration: 0 //  original position after the drag
        });
    };

    var addEvent = function(title,author,location,calendar,info,cover_img,compressed_cover,start,end) {
        title = title.length === 0 ? "@lang('messages.noname_event')" : title;
        author = author.length === 0 ? "@lang('messages.noneee')" : author;
        location = location.length === 0 ? "@lang('messages.noneee')" : location;
        info = info === '0' ? "@lang('messages.noname_event_explanation')" : info;
        //file = file.length === '' ? '' : document.getElementById("file").files[0];
        var html = $('<div class="external-event label label-default" data-info="'+info+'" data-author="'+author+'" data-location="'+location+'" cid="'+calendar+'" data-cover_img="'+cover_img+'" data-compressed_cover="'+compressed_cover+'" data-start="'+start+'" data-end="'+end+'">' + title + '</div>');
        jQuery('#event_box').append(html);
        initDrag(html);
    };

    $('#external-events div.external-event').each(function() {
        initDrag($(this));
    });

    $('#event_add').unbind('click').click(function() {
    	if($('#compressed_cover').val() != ''){
			$("cover_img").prop('disabled', true);
		}
		if($('#base64_pdf').val() != ''){
			$("file").prop('disabled', true);
		}
        var title = $('#event_title').val();
        var author = $('#event_author').val();
        var location = $('#event_location').val();
        var info = $('#event_info').val();
        var calendar = $('#select_calendar').val();
        var cover_img = $('#cover_img').val();
        var compressed_cover = $('#compressed_cover').val();
        var start = $('#start').val();
        var end = $('#end').val();
        $('#cover_reset').click();
        var file = $('#base64_pdf').val();
        addEvent(title,author,location,calendar,info,cover_img,compressed_cover,start,end,file);
    });

    var currentMousePos = {
	   x: -1,
	   y: -1
	};

	$(document).on("mousemove", function (event) {
	   currentMousePos.x = event.pageX;
	   currentMousePos.y = event.pageY;
	});

    //predefined events
    $('#event_box').html("");

    $('#calendar').fullCalendar('destroy'); // destroy the calendar
    $('#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(sendback.cal_id,sendback.cal_color);
            		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(calEvent.start.format('YYYY-MM-DD HH:mm'));
			if(calEvent.end !== null){
				$('#form_edit_event input[name="end"]').val(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_event').modal('show');
	    }
    });

	$('input').on('ifChecked', function(event){
		var cid = $(this).attr('cid');
		if($(this).data('color') != ''){
			var color = $(this).data('color');
		}
		else{
			var color = 'green';
		}

		if($(this).data('textcolor') != ''){
			var textcolor = $(this).data('textcolor');
		}
		else{
			var textcolor = 'white';
		}
		//將新的行事曆載入
		$('#calendar').fullCalendar('addEventSource',{
            url: '{{action('Manage\Platform\CalendarController@listEvent',['cal_id'=>''])}}/'+cid,
            color: color,
            textColor: textcolor
		});
		//移除舊的原本行事曆
		$('#calendar').fullCalendar('removeEventSource','{{action('Manage\Platform\CalendarController@listEvent',['cal_id'=>''])}}/'+cid);
		
	});

	$('input').on('ifUnchecked', function(event){
		var cid = $(this).attr('cid');
		$('#calendar').fullCalendar('removeEventSource',{
            url: '{{action('Manage\Platform\CalendarController@listEvent',['cal_id'=>''])}}/'+cid
		});
	});

	//尚未開發完成的進階版事件新增視窗
	$('#event_add_adv').on('click',function(){
		$("#modal_add_event").modal('show');
	});

	$(document).on('click','.btn_event_delete',function(){
		var id = $('#form_edit_event input[name="id"]').val();
		$.ajax({
			type : 'POST',
			url : '{{ action('Manage\Platform\CalendarController@deleteEvent') }}',
			dataType : 'json',
			data : {
				id : id,
				_token:$("#_token").val()
			},
			success : function(sendback){
				toastr["success"]("@lang('messages.del_success')");
				getEvent(sendback.cal_id,sendback.cal_color);
				$('#modal_cal_event').modal('hide');
			},
			error : function(sendback){
				toastr["error"]("@lang('messages.operating_error_later_f5')");
			}
		})

	});

	var getEvent = function(cal_id,color){
		$('#calendar').fullCalendar('removeEventSource','{{action('Manage\Platform\CalendarController@listEvent',['cal_id'=>''])}}/'+cal_id);
		$('#calendar').fullCalendar('addEventSource',{
            url: '{{action('Manage\Platform\CalendarController@listEvent',['cal_id'=>''])}}/'+cal_id,
            color: color
		});
	}
	
});

</script>
@endsection