@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"/>
@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">
					<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">
											<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/>
											<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>
											<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="modal-body form">
					<!-- BEGIN FORM-->
						<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>
				<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>
			</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 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>
@endsection

@section('js_page_level')
<script>
$(document).ready(function(){
	//驗證事件更新
	$('#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')' 
			},
		},

        invalidHandler: function (event, validator) { //display error alert on form submit   
            toastr['warning']('@lang('messages.col_invalid')')
        },

        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 : '{{ route("manage::calendar::update_event_content") }}',
				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();
					$('#calendar').fullCalendar('removeEventSource','{{ route("manage::calendar::get_demo") }}?cid='+cal_id);
            		$('#calendar').fullCalendar('addEventSource',{
			            url: '{{ route("manage::calendar::get_demo") }}?cid='+cal_id,
			            color: cal_color
					});
				},
				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) {
        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;
        var html = $('<div class="external-event label label-default" data-info="'+info+'" data-author="'+author+'" data-location="'+location+'" cid="'+calendar+'">' + title + '</div>');
        jQuery('#event_box').append(html);
        initDrag(html);
    };

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

    $('#event_add').unbind('click').click(function() {
        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();
        addEvent(title,author,location,calendar,info);
    });

    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');
            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  : '{{ route("manage::calendar::add_event") }}',
            	dataType: 'json',
            	data : {
            		_token:$('#_token').val(),
            		title : copiedEventObject.title,
            		start : copiedEventObject.start.format(),
            		info  : info,
            		author: author,
            		location:location,
            		cal_id: cal_id
            	},
            	success : function(sendback){
            		var color = sendback.cal_color;
            		$('#calendar').fullCalendar('removeEventSource','{{ route("manage::calendar::get_demo") }}?cid='+cal_id);
            		$('#calendar').fullCalendar('addEventSource',{
			            url: '{{ route("manage::calendar::get_demo") }}?cid='+cal_id,
			            color: color
					});
            		toastr["success"]("@lang('messages.event')「"+copiedEventObject.title+"」@lang('messages.add_success')");
            		$('#event_info').html('');
            		$('#event_author').val('');
            		$('#event_location').val('');
            		$('#event_title').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: '{{ route("manage::calendar::update_event") }}',
				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 allDay = event.allDay;
			var end = (event.end == null) ? start : event.end.format();
			$.ajax({
				url: '{{ route("manage::calendar::update_event") }}',
				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 textarea[name="info"]').html(calEvent.info);
			$('#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: '{{ route("manage::calendar::get_demo") }}?cid='+cid,
            color: color,
            textColor: textcolor
		});
		//移除舊的原本行事曆
		$('#calendar').fullCalendar('removeEventSource','{{ route("manage::calendar::get_demo") }}?cid='+cid);
		
	});

	$('input').on('ifUnchecked', function(event){
		var cid = $(this).attr('cid');
		
		$('#calendar').fullCalendar('removeEventSource',{
            url: '{{ route("manage::calendar::get_demo") }}?cid='+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 : '{{ route("manage::calendar::delete_event") }}',
			dataType : 'json',
			data : {
				id : id,
				_token:$("#_token").val()
			},
			success : function(sendback){
				toastr["success"]("@lang('messages.del_success')");
				var color = sendback.cal_color;
        		$('#calendar').fullCalendar('removeEventSource','{{ route("manage::calendar::get_demo") }}?cid='+sendback.cal_id);
        		$('#calendar').fullCalendar('addEventSource',{
		            url: '{{ route("manage::calendar::get_demo") }}?cid='+sendback.cal_id,
		            color: sendback.cal_color
				});
				$('#modal_cal_event').modal('hide');
			},
			error : function(sendback){
				toastr["error"]("@lang('messages.operating_error_later_f5')");
			}
		})

	});
	
});

</script>
@endsection