@extends('base.layout')

@section('content')
<div class="wrapper">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="card-box ribbon-box">
					<div class="ribbon ribbon-primary">{{ config('global.namaapps') }} Calendar</div>
					<p class="m-b-0"></p>
					<div id='calendar'></div>
				</div>
			</div>
		</div>
		<!-- end row -->
	</div> <!-- end container -->
</div>
<!-- TOKEN -->
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
@endsection

@push('script')
<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function() {
		var calendarEl 	= document.getElementById('calendar');
		var calendar 	= new FullCalendar.Calendar(calendarEl, {
							plugins		: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
							header		: {
								left	: 'prev,next today',
								center	: 'title',
								right	: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
							},
							defaultDate	: "{{date('Y-m-d')}}",
							navLinks	: true, 
							eventLimit	: true,
							events		: [
								@foreach($kalender as $task)
								{

									title 	: '{{ $task['reques'] }}',
									start 	: '{{ $task['mulai'] }}',
									end 	: '{{ $task['akhir'] }}'
								},
								@endforeach
							],
							eventClick: function(info) {
								swal({
									title	: 'Event Info',
									text	: info.event.title,
									type	: 'info',
								});
							}
						});
			calendar.render();
	});
</script>
@endpush