@extends('layouts.site')

@section('js')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
	<script>
	$(document).ready(function () {
		$('#calendar').fullCalendar({
			defaultView: 'month',
			 header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay'
                    },
			events: [
				@foreach($events as $event)
				{
					title: "{{ $event->name }}",
					start: "{{ $event->starts_at->toDateTimeString() }}",
					end: "{{ $event->ends_at->toDateTimeString() }}",
					textColor: '#fff',
					color: '{{ $event->color }}',
					description: '{{ $event->description }}'
				},
				@endforeach
			],
			eventClick: function (calEvent, jsEvent, view) {
				$('#eventModal #eventTitle').text(calEvent.title);
				var $description = $('<div/>');
				$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
				if (calEvent.end != null) {
					$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
				}
				$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
				$description.append($('<p/>').html('<b>Time Zone</b>: UTC/GMT +1'));
				$('#eventModal #pDetails').empty().html($description);

				$('#eventModal').modal();
            }
		});
	});
	</script>
@endsection

@section('css')
	<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
@endsection

@section('content')
	<h1>Calendar</h1>
	
	<div id="eventModal" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title"><span id="eventTitle"></span></h4>
				</div>
				<div class="modal-body">
					<p id="pDetails"></p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

	
	<div id="calendar"></div>
	
@endsection